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

Gu_Yan 發布于2019-08-29 13:24 / 1731人閱讀

H5編輯器介紹

H5DS (HTML5 Design software) 這是一款基于WEB的 H5制作工具。讓不會寫代碼的人也能輕松快速上手制作H5頁面，界面如下

制作流程

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

開源地址

https://gitee.com/676015863/H5DS

官方網址

http://www.h5ds.com

功能模塊：

1、首頁，登錄，注冊

2、新建H5，刪除H5，修改H5

3、頁面布局之四大模塊（頂部，頁面列表，圖層列表，操作區域，視圖區域，快捷菜單）

4、基本參數（主圖，名字，描述，背景，翻頁動畫，背景音樂，加載動畫）

5、上傳圖片，刪除圖片

6、新建頁面（選擇模板，新建空白模板）

7、設置頁面參數（背景，鎖定翻頁，自動翻頁，修改名稱，復制，刪除）

8、添加圖片圖層（選擇圖片，裁剪圖片，設置坐標，拖動，旋轉，縮放，透明度，圓角，陰影，邊框）

9、給圖層添加動畫效果，動畫列隊，排序，刪除，設置參數

10、添加觸發交互效果

11、添加文本圖層，設置文本

12、圖層列表的操作，復制，刪除，排序

13、快捷菜單

14、保存，發布，手機預覽

技術選型

Jquery 2x：DOM和事件的操作，目前是無任何框架能及

ES6：這個不多說，很強大，自帶模板引擎，語法簡潔，支持類，繼承，各種新的api，構建前端大型web應用的語言不是typescript 就選 ES6了

Webpack：當前流行的不要不要的，執行效率高（最初是gulp，后來效率太低，換成webpack了）~

git:代碼管理，大家都在用，都說好，不多說~

Eslint：前端代碼校驗，結合vscode真的好用，不黑不吹~

Node + express: 因為對其他技術不熟，我只是個前端~

Mysql: 關系型數據庫比較適合當前的業務邏輯，也利于后期的多語言開發

代碼規范

JS規范：

1、命名規范：變量名均以駝峰命名

2、this 做為變量的時候，統一采用 self（優先），that

3、jquery對象命名統一采用 $** 命名（eg: $box）

4、其他遵循Eslint 規范

5、有詳細的注釋規范

CSS規范：

1、UI組件庫，CSS class 名字以 mt-** 定義，避免和其他命名沖突

2、id統一使用駝峰命名

3、CSS歸屬命名規范： “.模塊名-功能名“ 子模塊繼承父模塊的CSS名字，再往后面加 “父模塊 – 子模塊名字“

文件夾命名規范：

1、文件夾統一采用駝峰命名

2、大模塊/子模塊/孫子模塊

作者say:

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

云服務器 GPU云服務器開發工具瀏覽器web應用 h5應用制作工具 h5開發android應用 jquery 開發工具

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112576.html

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

H5編輯器介紹 H5DS (HTML5 Design software) 這是一款基于WEB的 H5制作工具。讓不會寫代碼的人也能輕松快速上手制作H5頁面，界面如下 showImg(https://segmentfault.com/img/bVUC2L?w=1147&h=643); 制作流程注冊 -> 登錄 -> 新建H5 -> 編輯H5 （添加頁面，添加圖層，拖動設置參數） -> 預覽/保存/...

keithyau 2019-08-21 16:21 評論0 收藏0
react+mobx 構建H5制作工具項目經驗總結

摘要：三性能優化處理做工具類的項目，性能是非常大的挑戰，我總結了以下幾個常見的性能優化點數據緩存。防抖，節流，事件委托內存釋放。內容大綱： 1、功能介紹 2、技術架構 3、性能優化 4、細節分享 5、開源說明一、項目功能介紹很久沒寫過技術類的文章了，這次給大家分享一個近期的項目，采用react+mobx+jquery構建的大型工具類項目。查看項目網址。如果用過易企秀，maka或者...

用戶84 2019-08-22 18:42 評論0 收藏0
react+mobx 構建H5制作工具項目經驗總結

摘要：三性能優化處理做工具類的項目，性能是非常大的挑戰，我總結了以下幾個常見的性能優化點數據緩存。防抖，節流，事件委托內存釋放。內容大綱： 1、功能介紹 2、技術架構 3、性能優化 4、細節分享 5、開源說明一、項目功能介紹很久沒寫過技術類的文章了，這次給大家分享一個近期的項目，采用react+mobx+jquery構建的大型工具類項目。查看項目網址。如果用過易企秀，maka或者...

Aceyclee 2019-08-30 15:54 評論0 收藏0