Home > Developer > JavaScript
Detailed description of modular development instances using Requirejs in Html, and requirejs instances
When the front-end is modularized, not only js needs to be modularized, but html also needs to be modularized. Here we will introduce how to implement modular development of html code through requirejs.
How to Use requirejs to load html
Reuqirejs has a text plug-in that can read the content of a specified file. The read content is text.
How to download the text plug-in
The first method can be downloaded through npm:
Npm install requirejs/text
The second method can also be directly downloaded from the official github.
Directly copy the content to text. js.
How to install the text plug-in
Configure the dependency of the text plug-in main. js of requirejs, similar to jquery, as long as it can be loaded to it through normal loading.
requirejs.config({baseUrl: './',paths: {'text':path+'/require/text',...},shim: {...}});
You can also directly put it in baseUrl.
How to Use text
In the target module, follow the following syntax:
define(function(require){var html = require("text!html/test.html");console.log(html);});
Or
define(["text!html/test.html"],function(html){console.log(html);});
How to Implement modular html development?
You can see that text is used, but you still don't know how to organize the front-end code.
Example:
The website page of the blog Park will jump to different pages based on the navigation above. If it is on a single page, it is easy to think of the original practice that the navigation button corresponds to a different div, click that button to display the corresponding div; other divs are hidden.
The front-end code may look like this:
<Html> <body> <nav> navigation button 1, navigation button 2, navigation button 3 </nav> <div style = "display: block "> page corresponding to button 1 </div> <div style =" display: none "> page corresponding to button 2 </div> <div style =" display: none "> page corresponding to button 3 </div> </body>Such code will be messy... and the front-end Html will be very long... it is not conducive to maintenance.
With the text plug-in of reuqirejs, you can do this:
<Html> <body> <nav> navigation button 1, navigation button 2, navigation button 3 </nav> <div id = "target"> </div> </body>In the corresponding module:
Certificate ('{target'{.html (require ("text! Target Response page. html "));This is more convenient! The front-end code can also be effectively managed along with the module!
However, it should be noted that this method will cause events bound to Jquery to become invalid-so you must re-bind the event after the html () method.
I would like to introduce so much about using Requirejs for modular development in Html. I hope it will help you!
Articles you may be interested in:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
