Analysis of modular development using Requirejs in Html-HTML Tutorial-php.cn

Analysis of modular development using Requirejs in Html

不言

Release： 2018-06-09 16:51:50

Original

2990 people have browsed it

This article mainly introduces the analysis of modular development using Requirejs in Html. It has certain reference value. Now I share it with you. Friends in need can refer to it.

Modularization in the front-end At that time, not only js needs modular management, but html sometimes also needs modular management. Here is an introduction to how to implement modular development of html code through requirejs

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 use requirejs to load html

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

How to download the text plug-in

The first method can be downloaded through npm:

npm install requirejs/text

The second method is to download it directly from the official github.

Copy the content directly to text.js.

How to install the text plug-in

Configure the dependencies of the text plug-in in the main.js of requirejs. It is similar to jquery, as long as it can be ensured Just load it via the normal loading method.

requirejs.config({
baseUrl: &#39;./&#39;,
paths: {
&#39;text&#39;:path+&#39;/require/text&#39;,
...
},
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.

For 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 ps. Clicking that button will display the corresponding p; other ps will be hidden.

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

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

Copy after login

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

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

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

Copy after login

Then in the corresponding module:

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

Copy after login

This will make it more casual! 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 you must rebind the event after the html() method.

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

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

HTML5 and jQuery realize search intelligent matching function

nginx configuration access image path and html static Page retrieval method

The above is the detailed content of Analysis of modular development using Requirejs in Html. For more information, please follow other related articles on the PHP Chinese website!