The difference between CSS components, JS plugins, and Web Components in the Amazeui (sister UI)

Amazeui (sister UI) is a very good domestic front-end UI, now to introduce the Amazeui CSS components, JS plug-ins and Web components of the difference.
CSS components, as the name implies, only use CSS rendering of components, and JS plug-in is also easy to understand, is the CSS rendering and JS to control the behavior of the component.
More difficult to understand is the Web components, as if the meaning of the JS plugin is similar, are CSS and JS composition. What difference do they have? Let's focus on this.
We learn how to invoke the Web Component (which is the accordion component) to understand the difference between it and the JS plugin. Example 01. Web Components-Direct use (please download the attachment to see examples)The key code in the example:

1 <  data-am-widget= "Accordion"  class= "Am-accordion Am-accordion-default"  >2     <!---3</  Section >

Example 02. Web Component-Invoking from a template-Example 1 (download an attachment to see an example)

Example of key code 1 (referenceHandlebars.jsAndSister UI calls Handlebars.js's auxiliary JS）：

1 <!--Handlebars.js is an open-source JS library for implementing semantic templates on Web pages.  -2 <Scriptsrc= "Assets/js/handlebars.min.js"></Script>3 <!--sister UI calls Handlebars's helper class -4 <Scriptsrc= "Assets/js/amazeui.widgets.helper.js"></Script>

Example of key code 2 (define a template) (said the template is not really meaningful, but the official demo is this, I just transplanted):

1 <  type= "Text/x-handlebars-template"  ID= "My-tpl">2      {{>accordion Accordiondata}}3</  Script>

Example of key code 3 (invoking the JS code to make it work):

1 var // get the original template 2 var template = Handlebars.compile ($tpl. Text ()),  // get compiled templates 3// ... The data is defined here ... More code ... A little ... 4 var // incoming data, run templates, get results 5 var // Show Results

Example 03. Web Component-Invoking from a template-Example 2 (download an attachment to see an example)Example of key code 1 (referenceHandlebars.jsAndSister UI calls Handlebars.js's auxiliary JS): Ibid., so omit ... Example of key code 2 (invoking the JS code to make it work):

1 var // get the compiled template (the string is even the original template) 2 var // incoming data, run templates, get results 3 // Show Results

Example 04. Web Component-called by a custom template (please download an attachment to view the sample)Example of key code 1 (referenceHandlebars.js）　　The difference is that this time only refers to the handlebars.js , and does not reference the sister UI call Handlebars.js Auxiliary JS , because no need. Example of key code 2 (custom original template):

1 <!--customizing the original template -2 <Scripttype= "Text/x-handlebars-template"ID= "Demo-template">3 //There is a lot of code here, because the key is omitted ...4 <!--Key Code: Add Icons Icon Property -5 {{#ificon}}<img SRC="{{icon}}"style="width:20px;" />{{/if}} 6 //There is a lot of code here, because the key is omitted ...7 </Script>

Example of key code 3 (invoking JS to make it work):

1 varDemodata = {//Defining Data2"Content": [.. Omit:, {3"title": "Heading Two",4"Content": "Contents II",5"Icon": "Assets/i/favicon.png"//key: One more Icon property6     }, .. Omitted:]7 };8 varDemotemplate = Handlebars.compile ($ ("#demo-template"). html ());//get the compiled template9 vardemohtml = Demotemplate (Demodata);//incoming data, run templates, get resultsTen$ ("#div1"). HTML (demohtml);//Show Results

Example 05. Web Components-Huarui accordion components (please download the accessories to view examples)Example of key code 1 (Huarui.accordion.helper.js): This is a custom Web component of the JS support file, this file is very simple to write, copyAmazeui.widgets.helper.jsIt would be nice to change it.

1 //register a new component named: Hr-accordion2Hbs.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}} ' 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" style= "color: #0094ff;" >8 <!--key codes for adding icons--9 {{#if icon}}{{/if}}Ten {{{title} }} One </dt> A <dd class= "am-accordion-bd am-collapse {{#if active}}am-in{{/if}}" > - <div class= "Am-accordion-content" > - {{{content}}} the </div> - </dd> - </dl> - {{/each}} + </section> -{{/this}} ');

Example key code 2 (referencing the relevant JS file):

1 <!--Handlebars.js is an open-source JS library for implementing semantic templates on Web pages.  -2 <Scriptsrc= "Assets/js/handlebars.min.js"></Script>3 <!--Huarui accordion components, calling Handlebars.js's auxiliary class -4 <Scriptsrc= "Assets/js/huarui.accordion.helper.js"></Script>

Example of key code 3 (invoking JS to make it work):

1 varDemodata = {//Defining Data2"Content": [.. Slightly ..., {3"title": "Heading Two",4"Content": "Contents II",5"Icon": "Assets/i/favicon.png"//key: One more Icon property6     }, .. Slightly ...]7 };8 //get the compiled template, pass in the data, run the template, get the result9 vardemohtml = Handlebars.compile (' {{>hr-accordion}} ') (Demodata); Ten$ ("#div1"). HTML (demohtml);//Show Results

After reading the above example, we conclude that:In the Amazeui (sister UI), the Web component can be used without writing a template, if so, and JS plug-in is not much different, the official said it can be called. the difference between Web Components and JS plugins is that Web Components enable powerful template functionality with Handlebars.js, and we can write custom templates to make Web components more personal and even to write new Web Components.

Download the attachment: Amazeui Web Component. zip

The difference between CSS components, JS plugins, and Web Components in the Amazeui (sister UI)