AmazeUI(妹子UI)中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>

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

 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組件。

下載附件：AmazeUI的Web組件.zip