Differences between CSS components, JS plug-ins, and Web Components in AmazeUI

Differences between CSS components, JS plug-ins, and Web Components in AmazeUI
AmazeUI (Sister UI) is an excellent front-end UI in China. Let's introduce the differences between CSS components, JS plug-ins and Web Components in AmazeUI.
CSS components, as the name suggests, are components rendered by CSS, and JS plug-ins are easy to understand. They are components controlled by CSS rendering and JS.
A poor understanding is Web components, which are similar to JS plug-ins. They are made up of CSS and JS. What are the differences between them? We will focus on this.
We learn how to call Web Components (the accordion component) to learn the differences between them and JS plug-ins step by step.Example 01. Web components-Use them directly (Please download the attachment to view the example)Key code in the example:

1 <section data-am-widget = "accordion" class = "am-accordion-default"> 2 <! -- There is code in this example. In this example, the Web component is directly called without writing JS Code. --> 3 </section>

 

Example 02. Web components-call by template-Example 1 (Please download the attachment to view the example)

Key code 1 in the example (reference handlebars. js and sister ui to call the auxiliary js of handlebars. js ):

1 <! -- Handlebars. js is an open-source js library used to implement semantic templates on webpages. --> 2 <script src = "assets/js/handlebars. min. js"> </script> 3 <! -- Sister UI calls the helper class of handlebars --> 4 <script src = "assets/js/amazeui. widgets. helper. js"> </script>

Key Code 2 in the example (define a template) (this template does not have any practical significance, but the official demo is written in this way. I just transplanted it ):

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

Key code 3 in the example (call JS Code to make it work ):

1 var $ tpl = $ ('# my-tpl'); // obtain the original template 2 var template = Handlebars. compile ($ tpl. text (), // get the compiled TEMPLATE 3 //... data is defined here... A lot of code...... 4 var html = template (data); // input data and run the template. Expected result 5 is var $ tpl. before (html); // display the result

 

Example 03. Web components-call by template-Example 2 (Please download the attachment to view the example)Key code 1 in the example (reference handlebars. js and sister ui call handlebars. js auxiliary js): Same as above, so omitted... key Code 2 in the example (call JS Code to make it work ):

1 var template = Handlebars. compile ('{{> accordion}'), // get the compiled template (the string is the original template) 2 var html = template (data. accordionData); // input data and run the template. Expected result 3 $ ("# div1") is displayed "). before (html); // display the result

 

Example 04. Web components-called using a custom template (Please download the attachment to view the example)Key code 1 in the example (reference handlebars. js) the difference is that this time only reference handlebars. js without referencing the sister ui to call handlebars. the auxiliary js of js is unnecessary. Key Code 2 in the example (custom original template ):

1 <! -- Customize the original template --> 2 <script type = "text/x-handlebars-template" id = "demo-template"> 3 // there is still a lot of code, because it is not critical, it will be omitted... 4 <! -- Key code: Add icon attributes --> 5 {{# if icon }}< img src = "{icon}" style = "width: 20px; "/> {/if} 6 // there is still a lot of code here, because it is omitted if it is not critical... 7 </script>

Key code 3 in the example (call JS to make it work ):

1 var demoData = {// define data 2 "content ":[.. omitted .., {3 "title": "title 2", 4 "content": "content 2", 5 "icon": "assets/I/favicon.png" // key: extra icon attribute 6 },.. omitted...] 7}; 8 var demoTemplate = Handlebars. compile ($ ("# demo-template" ).html (); // get the compiled template 9 var demoHtml = demoTemplate (demoData); // input data, run the template, expected result 10 $ ("# div1" ).html (demoHtml) is displayed. // The result is displayed.

 

Example 05. Web component-Huarui accordion component (Please download the attachment to view the example)Key code 1 (huarui. accordion. helper. js): This is a js support file for custom Web components. This file is easy to write and copied to amazeui. widgets. helper. just change js.

1 // register a new component named hr-accordion 2 Harvard. 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 }}{{/if }}{{ # if className }{{ className }}{{/if }}" {{# if id }}id = "{{ id }}" {{/if} data -am-accordion = \ '{{{# if options. multiple }}" multiple ": true {/if }}\'> \ 5 {# eac H content }}\ 6 <dl class = "am-accordion-item {{# if active }} am-active {{/ if }{{# if disabled} am -disabled {/if} ">\7 <dt class =" am-accordion-title "> 8 <! -- Key code for adding an icon --> \ 9 {{# if icon }}< img src = "{icon }}"> 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 }}');

Key Code 2 in the example (reference the relevant js file ):

1 <! -- Handlebars. js is an open-source js library used to implement semantic templates on webpages. --> 2 <script src = "assets/js/handlebars. min. js"> </script> 3 <! -- Huarui accordion component, which calls the helper class of handlebars. js --> 4 <script src = "assets/js/huarui. accordion. helper. js"> </script>

Key code 3 in the example (call JS to make it work ):

1 var demoData = {// define data 2 "content ":[.. .., {3 "title": "title 2", 4 "content": "content 2", 5 "icon": "assets/I/favicon.png" // key: extra icon attribute 6 },.. ...] 7}; 8 // obtain the compiled template, input data, and run the template. Expected result 9 is displayed. var demoHtml = Handlebars. compile ('{{> hr-accordion}') (demoData); 10 $ ("# div1" demo.html (demoHtml); // display the result

 

After reading the above examples, we can draw a conclusion:In AmazeUI (Sister UI), Web components can be directly used without writing templates. In this case, there is no big difference with JS plug-ins, and the official saying can also be called like this. The difference between Web Components and JS plug-ins is that Web Components use handlebars. js implements powerful template functions. We can write custom templates to make Web components more personalized, or even write new Web components.

Download Attachment: amazeui's WebKit. Zip