AmazeUI(妹子UI)中CSS组件、JS插件、Web组件的区别 - 长沙游哥_H5之家

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

示例01.Web组件-直接使用 (请下载附件查看示例)

示例中关键代码：

示例02.Web组件-通过模板来调用-示例1 (请下载附件查看示例)

示例中关键代码1（引用 handlebars.js 和妹子ui调用handlebars.js的辅助js）：

示例中关键代码2（定义一个模板）（话说这个模板也没啥实际意义，但官方的demo就是这么写的，我只是移植了一下）：

accordion accordionData}}

示例中关键代码3（调用JS代码使其工作）：

template = Handlebars.compile($tpl.text()), html = template(data); $tpl.before(html); //显示结果

示例03.Web组件-通过模板来调用-示例2 (请下载附件查看示例)

示例中关键代码1（引用 handlebars.js 和妹子ui调用handlebars.js的辅助js）：同上，所以省略...

示例中关键代码2（调用JS代码使其工作）：

html = template(data.accordionData); $("#div1").before(html); //显示结果

示例04.Web组件-通过自定义模板来调用 (请下载附件查看示例)

示例中关键代码1（引用 handlebars.js ）

　　不一样的地方在于，这次只引用了 handlebars.js ，而没有引用妹子ui调用handlebars.js的辅助js ，因为不需要了。

示例中关键代码2（自定义原始模板）：

}}

示例中关键代码3（调用JS使其工作）：

"content": [..省略.., { 3 "title": "标题二", 4 "content": "内容二", }, ..省略..] 7 }; demoHtml = demoTemplate(demoData); $("#div1").html(demoHtml); //显示结果

示例05.Web组件-华瑞手风琴组件 (请下载附件查看示例)

示例中关键代码1（huarui.accordion.helper.js）：

这是一个自定义Web组件的js支持文件，这个文件的编写很简单，复制 amazeui.widgets.helper.js 改一改就好了。

hbs.registerPartial('hr-accordion', '\ 3 {{#this}}\ 4 <section data-am-widget="accordion" {{#if id}} {{/if}} data-am-accordion=\'{ {{#if options.multiple}}"multiple": true{{/if}} }\'>\ 5 {{#each content}}\ 6 <dl>\ 7 <dt>\ 8 \ 9 {{#if icon}}<img src="{{icon}}" />{{/if}}\ 10 {{{title}}}\ 11 </dt>\ 12 <dd>\ 13 <div>\ 14 {{{content}}}\ 15 </div>\ 16 </dd>\ 17 </dl>\ 18 {{/each}}\ 19 </section>\ 20 {{/this}}');

示例中关键代码2（引用相关js文件）：

示例中关键代码3（调用JS使其工作）：

"content": [..略.., { 3 "title": "标题二", 4 "content": "内容二", }, ..略..] 7 }; demoHtml = Handlebars.compile('{{>hr-accordion}}')(demoData); 10 $("#div1").html(demoHtml); //显示结果

看完以上的示例，得出结论：

在AmazeUI（妹子UI）中，Web组件可以不编写模板而直接使用，若如此，则与JS插件没什么太大区别，官方原话也说可以这么调用的。

Web组件与JS插件的不同之处在于，Web组件借助 handlebars.js 实现了强大的模板功能，我们能编写自定义模板从而使Web组件更具个性，甚至是编写出新的Web组件。

下载附件：AmazeUI的Web组件.zip