Detailed explanation of modular development examples using Requirejs in Html

Detailed explanation of modular development examples using Requirejs in Html_javascript skills

WBOY

Release： 2016-05-16 15:05:16

Original

1476 people have browsed it

When the front-end is modularized, not only js needs modular management, but html sometimes also needs modular management. Here we will introduce how to implement modular development of HTML code through requirejs.

How to load html using requirejs

Reuqirejs has a text plug-in, which can read the content of the specified file, and the read content is the text.

How to download text plug-in

The first method can be downloaded through npm:

npm install requirejs/text

For the second method, you can also download it directly from the official github.

Just copy the content directly into text.js.

How to install text plug-in

Just configure the dependency of the text plug-in in the main.js of requirejs, which is similar to jquery. Just make sure it can be loaded through the normal loading method.

requirejs.config({
baseUrl: './',
paths: {
'text':path+'/require/text',
...
},
shim: {
...
}
});

Copy after login

can also be placed directly 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);
});

Copy after login

define(["text!html/test.html"],function(html){
console.log(html);
});

Copy after login

How to carry out modular development of html?

After reading the above, you already know how to use text, but you still don’t know how to organize the front-end code.

Give me an example:

The website page of Blog Park will jump to different pages according to the navigation above. If it is on a single page, it is easy to think that the original approach is that the navigation buttons correspond to different divs. Click that button to display the corresponding div; other divs are hidden.

Then, the front-end code may look like this:

<html>
<body>
<nav>
导航按钮1、导航按钮2、导航按钮3
</nav>
<div style="display:block">按钮1对应的页面</div>
<div style="display:none">按钮2对应的页面</div>
<div style="display:none">按钮3对应的页面</div>
</body>
</html>

Copy after login

Such code will be very messy... and the front-end Html will be very long... which is not conducive to maintenance.

Then with the text plug-in of reuqirejs, you can do this:

<html>
<body>
<nav>
导航按钮1、导航按钮2、导航按钮3
</nav>
<div id="target"></div>
</body>
</html>

Copy after login

Then in the corresponding module:

$('#target').html(require("text!目标按钮对应的页面.html"));

Copy after login

It will be more casual this way! Front-end code can also be effectively managed along with the module!

However, it should be noted that this method will cause the events bound by Jquery to become invalid - so be sure to rebind the event after the html() method.

That’s all the relevant knowledge about using Requirejs in Html for modular development. I hope it will be helpful to you!