AmazeUI(妹子UI)是非常优秀的国产前端UI，现在来介绍一下AmazeUI中CSS组件、JS插件与Web组件的区别。
CSS组件顾名思义就是仅使用CSS渲染而成的组件，而JS插件也很容易理解，就是由CSS渲染和JS来控制行为的组件。
比较不好理解就是Web组件，好像跟JS插件意思差不多，都是CSS和JS组成的。它们到底区别在哪？我们重点来讲这个。
我们通过学习如何调用Web组件（其中的手风琴组件）来一步一步了解其与JS插件的区别。
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组件。