As a front-end development engineer, you must master the Web Template engine: Handlebars
I. Why do I need to use the template engine? As for why to use the template engine, according to the words I often say to students: do not have to reinvent the wheel. Simply put, the most essential role of the template is "change static to move", all conducive to this aspect are the advantages, unfavorable is the disadvantage. To achieve the goal of "static and dynamic", there are several points: 1. Maintainability (easy to change later); 2. Scalability (want to add functionality, increase the need for convenience); 3. Development Efficiency (better program logic, easy to debug); 4. Look comfortable (not easy to write wrong); From the above four point of view, the front-end template engine embodies the advantages are not a bit two points. The most important point is that the separation of the view (including the presentation rendering logic) from the program logic is too much of a benefit, such as later maintenance changes, code additions, code debugging, and application development patterns (MVC, MVVM). Two. Select the reason for handlebars 1. The world's most popular template engine, handlebars, is the most popular template engine in the world, so it is well-deserved to be the world's most sought-after template engine. Handlebars are introduced in many front-end frameworks, such as the MUI and Amazeui frameworks, which are recommended for use with handlebars. Take Amazeui as an example, Amazeui's documentation specifically provides the Web Component with its handlebars compilation template 2. The basic syntax of simple handlebars syntax is extremely simple, using {{value}} to wrap the data, handlebars automatically matches the values and objects of the response. The following is one of the simplest templates: three. Use the handlebars introduction 1. Download handlebars via handlebars website: http://handlebarsjs.com./installation.html via NPM download: npm Install--save Handlebars via bower Download: bower install--save handlebars via github download: https://github.com/daaain/ Handlebars.git introduced via CDN: Https://cdnjs.com/libraries/handlebars.js2. Introducing handlebars via <script> tags, similar to the introduction of the jquery Library: 3. Create a template
- Step one: Wrap up the required templates with a <script>
- Step two: Fill in the Type and ID in the <script> tab
- Type types can be any MIME type except Text/javascript, but it is recommended to use type= "text/template" for more semantic
- The ID is used at the time of subsequent compilation, so that the template is found by the code it compiles.
- Step three: Insert the HTML code we need in the <script> tag, according to the interface document that the background gives to us, modify the internal
4. In the JS code, the compiled template is interpreted as an example of the above code:
- Step one: Get the contents of the template into the TPL, where $ ("#myTemplate") is filled in with the ID that you used in the previous step to create the template.
- Reminder: Here I use the jquery selector to get, of course, you can get using native JavaScript dom selectors, for example: Docuemnt.getelementbyid (' myTemplate ') and Document.queryselector (' #myTemplate ')
- Step two: Use the Handlebars.compile () method to Precompile, the method passed in the parameter is the obtained template
- Step three: Compile with the template () method to get a stitched string, the method passed in the parameter is the pre-compiled templates
- Step four: Insert the compiled string into the HTML document you want to insert into, using the HTML () method provided by jquery. Also, you can use native innerHTML
Four. 5 common functions in practical use 1.Templates when you introduce a library, we can happily write the template, the recommended way is to add a template with a special type of script tag, the type attribute is very important, otherwise the browser will consider them as Javascrip parsing. Templates have an easy-to-understand syntax that allows you to use HTML, plain text, and expressions, which are usually contained in two pairs or three pairs of curly braces, and can contain variables or function functions. The template needs to be compiled before it can be used, as shown in the following code, note that we use jquery just for the convenience of DOM operations, handlebars can work out of jquery well. 2. Expressions The example shown above, any HTML code in the expression will be automatically ignored, which is a very useful performance, but sometimes we need to parse the HTML, then use three curly braces {{{}}}, as shown in the following code. In addition, the handlebars expression allows nested values that allow us to access any value of the JavaScript object. 3. Contexthandlebars takes advantage of mustache's powerful features, and context is one of them. We can put the data we need to pass in this JavaScript object, using #each, #with等方法可以方便的使用该对象的数据. Read the following case, then understand the 4. Helpershandlebars does not allow JavaScript in the template, but rather provides a number of columns of functional functions (helpers) that can be called in the template, facilitating code reuse and creating complex templates. The format of calling helpers with an expression is similar, {{helpername}}, and parameters can also be passed, {{Helpname 12345}}. To develop a new helper, using the Registerhelper function, the following code demonstrates how to create a new function function, using the built-in function 5. Block Helpersblock helpers, like normal function functions, but with a start and end tag (similar to the built-in # if, #each等), you can modify the contents of the contained HTML. The creation was more complex, and the functionality was more powerful at the time. Use them frequently to reuse features, create a large section of reusable HTML, and more. also use Handlebars.registerhelper () to create block helper, the difference is we need to use the second parameter, callback function. Take a look at the following code now you basically understand the common functions of handlebars, also through the handlebars.js-official website, you can get more cases, official documentsAddress: http://handlebarsjs.com/Last
The template engine is a prerequisite for our front-end development, which is helpful for us to quickly develop and make more robust and good code.
I've taught you how to write good JavaScript code in 8 Essentials, and I've talked about how to put together our JavaScript code, so you can take a look.
As a front-end development engineer, you must master the Web Template engine: Handlebars
