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組件-直接使用 (請下載附件查看示例)

示例中關鍵代碼：

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

 

示例02.Web組件-通過模板來調用-示例1 (請下載附件查看示例)

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

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

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

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

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

var $tpl = $('#my-tpl'); //得到原始模板
var template = Handlebars.compile($tpl.text()),  //得到編譯后的模板
//...這里定義了數據...代碼較多...略...
var html = template(data); //傳入數據，運行模板，得到結果
var $tpl.before(html); //顯示結果

 

示例03.Web組件-通過模板來調用-示例2 (請下載附件查看示例)

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

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

var template = Handlebars.compile('{{>accordion}}'), //得到編譯后的模板 (字符串就算是原始模板了)
var html = template(data.accordionData); //傳入數據，運行模板，得到結果
$("#div1").before(html); //顯示結果

 

示例04.Web組件-通過自定義模板來調用 (請下載附件查看示例)

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

　　

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

 

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

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

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

var demoData = { //定義數據
    "content": [..省略.., {
        "title": "標題二",
        "content": "內容二",
        "icon": "assets/i/favicon.png" //關鍵：多出一個icon屬性
    }, ..省略..]
};
var demoTemplate = Handlebars.compile($("#demo-template").html()); //得到編譯后的模板
var demoHtml = demoTemplate(demoData); //傳入數據，運行模板，得到結果
$("#div1").html(demoHtml); //顯示結果

 

示例05.Web組件-華瑞手風琴組件 (請下載附件查看示例)

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

這是一個自定義Web組件的js支持文件，這個文件的編寫很簡單，復制  amazeui.widgets.helper.js 改一改就好了。

//注冊一個新組件，名叫：hr-accordion
hbs.registerPartial('hr-accordion', '\
{{#this}}\
<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}} }\'>\
    {{#each content}}\
    <dl class="am-accordion-item{{#if active}} am-active{{/if}}{{#if disabled}} am-disabled{{/if}}">\
        <dt class="am-accordion-title" style="color:#0094ff;">\
            <!-- 添加圖標的關鍵代碼 -->\
            {{#if icon}}<img src="{{icon}}" style="width:20px;" />{{/if}}\
            {{{title}}}\
                </dt>\
                <dd class="am-accordion-bd am-collapse {{#if active}}am-in{{/if}}">\
                    <div class="am-accordion-content">\
                        {{{content}}}\
                    </div>\
                </dd>\
            </dl>\
    {{/each}}\
</section>\
{{/this}}');

示例中關鍵代碼2（引用相關js文件）：

<!-- handlebars.js 是一個開源的js庫，用於在網頁上實現語義模板。 -->
<script src="assets/js/handlebars.min.js"></script>
<!-- 華瑞手風琴組件，調用 handlebars.js 的輔助類 -->
<script src="assets/js/huarui.accordion.helper.js"></script>

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

var demoData = {  //定義數據
    "content": [..略.., {
        "title": "標題二",
        "content": "內容二",
        "icon": "assets/i/favicon.png" //關鍵：多出一個icon屬性
    }, ..略..]
};
//得到編譯后的模板，傳入數據，運行模板，得到結果
var demoHtml = Handlebars.compile('{{>hr-accordion}}')(demoData); 
$("#div1").html(demoHtml); //顯示結果

 

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

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

Web組件與JS插件的不同之處在於，Web組件借助 handlebars.js 實現了強大的模板功能，我們能編寫自定義模板從而使Web組件更具個性，甚至是編寫出新的Web組件。

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