成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

【推薦】jquery開發(fā)的大型web應(yīng)用—H5編輯器工具

Gu_Yan / 1768人閱讀

H5編輯器介紹

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

制作流程 
注冊(cè) -> 登錄 -> 新建H5 -> 編輯H5 （添加頁面，添加圖層，拖動(dòng)設(shè)置參數(shù)） -> 預(yù)覽/保存/發(fā)布 -> end
開源地址

https://gitee.com/676015863/H5DS

官方網(wǎng)址

http://www.h5ds.com

功能模塊：

1、首頁，登錄，注冊(cè)

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

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

4、 基本參數(shù)（主圖，名字，描述，背景，翻頁動(dòng)畫，背景音樂，加載動(dòng)畫）

5、 上傳圖片，刪除圖片

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

7、 設(shè)置頁面參數(shù) （背景，鎖定翻頁，自動(dòng)翻頁，修改名稱，復(fù)制，刪除）

8、 添加圖片圖層（選擇圖片，裁剪圖片，設(shè)置坐標(biāo)，拖動(dòng)，旋轉(zhuǎn)，縮放，透明度，圓角，陰影，邊框）

9、 給圖層添加動(dòng)畫效果，動(dòng)畫列隊(duì)，排序，刪除，設(shè)置參數(shù)

10、 添加觸發(fā)交互效果

11、 添加文本圖層，設(shè)置文本

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

13、 快捷菜單

14、 保存，發(fā)布，手機(jī)預(yù)覽

技術(shù)選型

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

ES6：這個(gè)不多說，很強(qiáng)大，自帶模板引擎，語法簡(jiǎn)潔，支持類，繼承，各種新的api，構(gòu)建前端大型web應(yīng)用的語言不是typescript 就選 ES6了

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

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

Eslint：前端代碼校驗(yàn)，結(jié)合vscode真的好用，不黑不吹~

Node + express: 因?yàn)閷?duì)其他技術(shù)不熟，我只是個(gè)前端~

Mysql: 關(guān)系型數(shù)據(jù)庫比較適合當(dāng)前的業(yè)務(wù)邏輯，也利于后期的多語言開發(fā)

代碼規(guī)范
JS規(guī)范：

1、命名規(guī)范：變量名均以駝峰命名

2、this 做為變量的時(shí)候，統(tǒng)一采用 self（優(yōu)先），that

3、jquery對(duì)象命名統(tǒng)一采用 $** 命名 （eg: $box）

4、其他遵循Eslint 規(guī)范

5、有詳細(xì)的注釋規(guī)范

CSS規(guī)范：

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

2、id統(tǒng)一使用駝峰命名

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

文件夾命名規(guī)范：

1、文件夾統(tǒng)一采用駝峰命名

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

作者say: 
該編輯器擁有強(qiáng)大的拓展性，CSS3動(dòng)畫，canvas特效，頁面種類，圖層類型，交互事件等均可以后期進(jìn)行拓展，可以應(yīng)付各種復(fù)雜的需求，所有交互數(shù)據(jù)均在本地做了緩存，保存操作對(duì)用戶來說是無感知的，圖片也做了本地緩存，大大節(jié)約了性能開銷！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112576.html

相關(guān)文章

  • 【推薦】jquery開發(fā)的大型web應(yīng)用—H5編輯器工具

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

    keithyau 評(píng)論0 收藏0

  • react+mobx 構(gòu)建H5制作工具項(xiàng)目經(jīng)驗(yàn)總結(jié)

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

    用戶84 評(píng)論0 收藏0

  • react+mobx 構(gòu)建H5制作工具項(xiàng)目經(jīng)驗(yàn)總結(jié)

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

    Aceyclee 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<