Home > Developer > Web Develop
In our daily development process, there may be repeated loading of the same resource for example: 1.js, in order to improve performance and user experience here we use native JS to implement the same resource only once.
Here's the JS code in Common.js.
//use sandbox mode to prevent contamination of variables outside; (function () { //let the outside can only access to the Require variableWindow.require =require; //define a method for loading modules functionrequire (ModuleName, callback) {//to create a concrete implementation class that loads a module varRequirehelper =NewRequirehelper (ModuleName, callback); //Call Load Module class Load method loading modulerequirehelper.load (); } //storing information for loaded modules varModulelist = []; //Create an entity class that assigns values to the passed in property functionRequirehelper (ModuleName, callback) { This. ModuleName =ModuleName; This. Callback =callback; } //How to add a prototype to a module-loaded implementation classRequirehelper.prototype = { //Loading ModulesLoadfunction () { varthat = This; varModuleName =That.modulename; if(That.isload ()) {//module has been loaded (resource optimized: The requested module does not load again) varModuleinfo = That.getmoduleinfo ();//get the description of the module if(modulelist.isload) {//if the module resource is loaded completeThat.callback ();//you can safely call the corresponding callback function of the module}Else{//module resource not finished loading varOldcallback = Moduleinfo.callback;//Remove the previous callback functionModuleinfo.callback =function() {//Append callback functionOldcallback (); That.callback (); }; } } Else{//Module not loaded varScript = document.createelement ("Script"); SCRIPT.SRC=That.modulename; document.getElementsByTagName ("Head") [0].appendchild (script);//Loading Modules varModuleinfo ={moduleName:that.moduleName, isload:false, Callback:function() {that.callback (); } };//Adding description information for a moduleScript.onload =function() {moduleinfo.callback ();//the callback function corresponding to the execution moduleModuleinfo.isload =true;//Identity Module resource is loaded complete } } }, //determines whether the specified module is loadedIsload:function () { return This. GetModuleInfo () = =NULL?false:true; }, //Get module information based on module nameGetModuleInfo:function () { for(vari = 0; i < modulelist.length; i++) { if(That.modulename = =modulelist[i].name) { returnmodulelist; } } return NULL; } };}) (window)
Here's xd1.js.
function say () { alert ("111111");}Here is the HTML code
<!DOCTYPE HTML><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"/> <title></title></Head><Body> <Scriptsrc= "Common.js"></Script> <Scripttype= "Text/javascript">require ("Xd1.js", function() {say (); }); Require ("Xd1.js", function() {alert (222); }); </Script></Body></HTML>In this way, we can avoid the repeated loading of JS resources
With JS implementation to avoid repeatedly loading the same JS file
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
