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}}" stylex="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" stylex="color:#0094ff;">
8 <!-- 添加圖標的關鍵代碼 -->
9 {{#if icon}}<img src="{{icon}}" stylex="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組件。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！