AmazeUI(妹子UI)中CSS組件、JS外掛程式、Web組件的區別

標籤：js庫   theme   前端   字元   r.js   var   顯示   size   ons   

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

 

AmazeUI(妹子UI)中CSS組件、JS外掛程式、Web組件的區別