【推薦】jquery開發的大型web應用—H5編輯器工具

H5編輯器介紹

• H5DS (HTML5 Design software) 這是一款基於WEB的 H5製做工具。讓不會寫代碼的人也能輕鬆快速上手製做H5頁面，界面以下

製做流程

註冊 -> 登陸 -> 新建H5 -> 編輯H5 （添加頁面，添加圖層，拖動設置參數） -> 預覽/保存/發佈 -> end

開源地址

• https://gitee.com/676015863/H5DS

官方網址

• http://www.h5ds.com

功能模塊：

• 一、首頁，登陸，註冊
• 二、 新建H5，刪除H5，修改H5
• 三、 頁面佈局之四大模塊（頂部，頁面列表，圖層列表，操做區域，視圖區域，快捷菜單）
• 四、 基本參數（主圖，名字，描述，背景，翻頁動畫，背景音樂，加載動畫）
• 五、 上傳圖片，刪除圖片
• 六、 新建頁面（選擇模板，新建空白模板）
• 七、 設置頁面參數 （背景，鎖定翻頁，自動翻頁，修更名稱，複製，刪除）
• 八、 添加圖片圖層（選擇圖片，裁剪圖片，設置座標，拖動，旋轉，縮放，透明度，圓角，陰影，邊框）
• 九、 給圖層添加動畫效果，動畫列隊，排序，刪除，設置參數
• 十、 添加觸發交互效果
• 十一、 添加文本圖層，設置文本
• 十二、 圖層列表的操做，複製，刪除，排序
• 1三、 快捷菜單
• 1四、 保存，發佈，手機預覽

技術選型

• Jquery 2x：DOM和事件的操做，目前是無任何框架能及
• ES6：這個很少說，很強大，自帶模板引擎，語法簡潔，支持類，繼承，各類新的api，構建前端大型web應用的語言不是typescript 就選 ES6了
• Webpack：當前流行的不要不要的，執行效率高（最初是gulp，後來效率過低，換成webpack了）~
• git:代碼管理，你們都在用，都說好，很少說~
• Eslint：前端代碼校驗，結合vscode真的好用，不黑不吹~
• Node + express: 由於對其餘技術不熟，我只是個前端~
• Mysql: 關係型數據庫比較適合當前的業務邏輯，也利於後期的多語言開發

代碼規範

JS規範：

• 一、命名規範：變量名均以駝峯命名
• 二、this 作爲變量的時候，統一採用 self（優先），that
• 三、jquery對象命名統一採用 $** 命名 （eg: $box）
• 四、其餘遵循Eslint 規範
• 五、有詳細的註釋規範

CSS規範：

• 一、UI組件庫，CSS class 名字以 mt-** 定義，避免和其餘命名衝突
• 二、id統一使用駝峯命名
• 三、CSS歸屬命名規範： 「.模塊名-功能名「 子模塊繼承父模塊的CSS名字，再日後面加 「父模塊 – 子模塊名字「

文件夾命名規範：

• 一、文件夾統一採用駝峯命名
• 二、大模塊/子模塊/孫子模塊

做者say:

該編輯器擁有強大的拓展性，CSS3動畫，canvas特效，頁面種類，圖層類型，交互事件等都可之後期進行拓展，能夠應付各類複雜的需求，全部交互數據均在本地作了緩存，保存操做對用戶來講是無感知的，圖片也作了本地緩存，大大節約了性能開銷！