amazeui中css元件、js元件、web元件的差別

amazeui中css元件、js元件、web元件的差別

一、總結

一句話總結：

1、可直接像調用js插件那樣調用：在AmazeUI（妹子UI）中，Web元件可以不編寫模闆而直接使用，若如此，則與JS插件沒什麼太大差別，官方原話也說可以這麼調用的。

2、能編寫自定義模闆通過js代碼調用：Web元件與JS插件的不同之處在于，Web元件借助 handlebars.js 實作了強大的模闆功能，我們能編寫自定義模闆進而使Web元件更具個性，甚至是編寫出新的Web元件。

二、amazeui中css元件、js元件、web元件的差別

AmazeUI(妹子UI)是非常優秀的國産前端UI，現在來介紹一下AmazeUI中CSS元件、JS插件與Web元件的差別。 

CSS元件顧名思義就是僅使用CSS渲染而成的元件，而JS插件也很容易了解，就是由CSS渲染和JS來控制行為的元件。

比較不好了解就是Web元件，好像跟JS插件意思差不多，都是CSS和JS組成的。它們到底差別在哪？我們重點來講這個。

我們通過學習如何調用Web元件（其中的手風琴元件）來一步一步了解其與JS插件的差別。

示例01.Web元件-直接使用 (請下載下傳附件檢視示例)

示例中關鍵代碼：

1 <section data-am-widget="accordion" class="am-accordion am-accordion-default">
2     <!-- 這裡面還有代碼，本例的大概意思就是不寫JS代碼，直接調用Web元件。 -->
3 </section>      

示例02.Web元件-通過模闆來調用-示例1 (請下載下傳附件檢視示例)

示例中關鍵代碼1（引用 handlebars.js 和 妹子ui調用handlebars.js的輔助js）：

1 <!-- handlebars.js 是一個開源的js庫，用于在網頁上實作語義模闆。 -->
2 <script src="assets/js/handlebars.min.js"></script>
3 <!-- 妹子UI調用 handlebars 的輔助類 -->
4 <script src="assets/js/amazeui.widgets.helper.js"></script>      

示例中關鍵代碼2（定義一個模闆）（話說這個模闆也沒啥實際意義，但官方的demo就是這麼寫的，我隻是移植了一下）：

1 <script type="text/x-handlebars-template" id="my-tpl">
2     {{>accordion accordionData}}
3 </script>      

示例中關鍵代碼3（調用JS代碼使其工作）：

1 var $tpl = $('#my-tpl'); //得到原始模闆
2 var template = Handlebars.compile($tpl.text()),  //得到編譯後的模闆
3 //...這裡定義了資料...代碼較多...略...
4 var html = template(data); //傳入資料，運作模闆，得到結果
5 var $tpl.before(html); //顯示結果      

示例03.Web元件-通過模闆來調用-示例2 (請下載下傳附件檢視示例)

示例中關鍵代碼1（引用 handlebars.js 和 妹子ui調用handlebars.js的輔助js）： 同上，是以省略...

示例中關鍵代碼2（調用JS代碼使其工作）：

1 var template = Handlebars.compile('{{>accordion}}'), //得到編譯後的模闆 (字元串就算是原始模闆了)
2 var html = template(data.accordionData); //傳入資料，運作模闆，得到結果
3 $("#div1").before(html); //顯示結果      

示例04.Web元件-通過自定義模闆來調用 (請下載下傳附件檢視示例)

示例中關鍵代碼1（引用 handlebars.js ）

　　

　　不一樣的地方在于，這次隻引用了 handlebars.js ，而沒有引用 妹子ui調用handlebars.js的輔助js ，因為不需要了。

示例中關鍵代碼2（自定義原始模闆）：

1 <!-- 自定義原始模闆 -->
2 <script type="text/x-handlebars-template" id="demo-template">
3 //這裡還有很多代碼，因為不關鍵就省略了...
4 <!-- 關鍵代碼：添加圖示 icon 屬性 -->
5 {{#if icon}}<img src="{{icon}}" style="width:20px;" />{{/if}} 
6 //這裡還有很多代碼，因為不關鍵就省略了...
7 </script>      

示例中關鍵代碼3（調用JS使其工作）：

1 var demoData = { //定義資料
 2     "content": [..省略.., {
 3         "title": "标題二",
 4         "content": "内容二",
 5         "icon": "assets/i/favicon.png" //關鍵：多出一個icon屬性
 6     }, ..省略..]
 7 };
 8 var demoTemplate = Handlebars.compile($("#demo-template").html()); //得到編譯後的模闆
 9 var demoHtml = demoTemplate(demoData); //傳入資料，運作模闆，得到結果
10 $("#div1").html(demoHtml); //顯示結果      

示例05.Web元件-華瑞手風琴元件 (請下載下傳附件檢視示例)

示例中關鍵代碼1（huarui.accordion.helper.js）：

這是一個自定義Web元件的js支援檔案，這個檔案的編寫很簡單，複制 amazeui.widgets.helper.js 改一改就好了。

1 //注冊一個新元件，名叫：hr-accordion
 2 hbs.registerPartial('hr-accordion', '\
 3 {{#this}}\
 4 <section data-am-widget="accordion" class="am-accordion {{#if theme}}am-accordion-{{theme}}{{else}}am-accordion-default{{/if}}{{#if widgetId}} {{widgetId}}{{/if}}{{#if className}} {{className}}{{/if}}" {{#if id}} id="{{id}}" {{/if}} data-am-accordion=\'{ {{#if options.multiple}}"multiple": true{{/if}} }\'>\
 5     {{#each content}}\
 6     <dl class="am-accordion-item{{#if active}} am-active{{/if}}{{#if disabled}} am-disabled{{/if}}">\
 7         <dt class="am-accordion-title" style="color:#0094ff;">\
 8             <!-- 添加圖示的關鍵代碼 -->\
 9             {{#if icon}}<img src="{{icon}}" style="width:20px;" />{{/if}}\
10             {{{title}}}\
11                 </dt>\
12                 <dd class="am-accordion-bd am-collapse {{#if active}}am-in{{/if}}">\
13                     <div class="am-accordion-content">\
14                         {{{content}}}\
15                     </div>\
16                 </dd>\
17             </dl>\
18     {{/each}}\
19 </section>\
20 {{/this}}');      

示例中關鍵代碼2（引用相關js檔案）：

1 <!-- handlebars.js 是一個開源的js庫，用于在網頁上實作語義模闆。 -->
2 <script src="assets/js/handlebars.min.js"></script>
3 <!-- 華瑞手風琴元件，調用 handlebars.js 的輔助類 -->
4 <script src="assets/js/huarui.accordion.helper.js"></script>      

1 var demoData = {  //定義資料
 2     "content": [..略.., {
 3         "title": "标題二",
 4         "content": "内容二",
 5         "icon": "assets/i/favicon.png" //關鍵：多出一個icon屬性
 6     }, ..略..]
 7 };
 8 //得到編譯後的模闆，傳入資料，運作模闆，得到結果
 9 var demoHtml = Handlebars.compile('{{>hr-accordion}}')(demoData); 
10 $("#div1").html(demoHtml); //顯示結果      

看完以上的示例，得出結論：

在AmazeUI（妹子UI）中，Web元件可以不編寫模闆而直接使用，若如此，則與JS插件沒什麼太大差別，官方原話也說可以這麼調用的。

Web元件與JS插件的不同之處在于，Web元件借助 handlebars.js 實作了強大的模闆功能，我們能編寫自定義模闆進而使Web元件更具個性，甚至是編寫出新的Web元件。​

我的旨在學過的東西不再忘記（主要使用艾賓浩斯遺忘曲線算法及其它智能學習複習算法）的偏公益性質的完全免費的程式設計視訊學習網站：

​​fanrenyi.com​​；有各種前端、後端、算法、大資料、人工智能等課程。

​​版權申明：歡迎轉載，但請注明出處​​

一些博文中有一些參考内容因時間久遠找不到來源了沒有注明，如果侵權請聯系我删除。​