describe
Anyone who knows requirejs knows that every page needs to be developed in a modular manner, it must have an entry js file for module configuration. But now there is a very embarrassing problem. If there are many pages, then there will be many entry files corresponding to this data-main. Theory is actually nothing, but later it will be merging and compressed with grunt, and there will be many entry js. Although this entry js compresses the configured module content into it, there are actually a lot of overlapping codes in the files after the merge and compressed by each entry. Therefore, considering this, I thought of unifying the entry files and using one. At that time, there will be only one entry file with grunt, which is also very convenient.
Implementation principle
1. The page introduces requirejs and sets the properties of id and current page information.
<script src="/res/js/" data-main="/res/js/" current-page ="news" target-module="/res/js/module/newsCtrl" defer async="true" ></script>
2. Write different page information according to different pages
/** * 1. All pages use public require configuration
* 2. Load the corresponding module according to the current-page. Do not load unwanted modules.
* 3. Each module must expose an init initialization method according to the agreement, which is used to monitor the page information loading time.
*
*/
({
urlArgs: "ver=1.0_" + (new Date).getTime(),
paths: {
"jquery": "/res/js/base/jquery-1.11.",
"vue":'/res/js/base/',
"common": "/res/js/widgets/common"
},
shim: {
'scroll': {
deps: ['jquery'],
exports: ''
},
'vue':{
exports:'vue'
},
'common':['jquery']
}
});
require(["jquery"], function ($) {
require(["common"], function (common) {
var currentPage = $("#current-page").attr("current-page");
var targetModule = $("#current-page").attr("target-module");
if (targetModule) {
// It is safer to execute the relevant business code after the page is loaded $(function () {
require([targetModule], function (targetModule) {
// Don't write business code here //All calls init methods // That is, each module exposes an init method for event monitoring, page content loading, etc. (currentPage);
});
});
return;
}
});
});
3. Define the module to implement the initialization of the init method for event monitoring and page information initialization
define(['jquery', "common"], function ($, common) {
var newCtrl = {};
= function (page) {
("Start initialization page information");
};
= function () {};
return newCtrl;
});
The above is the way to use requirejs modular development of multiple pages and one entrance js that the editor introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!