Custom require function allows the browser to load Js files on demand-JS Tutorial-php.cn

Custom require function allows the browser to load Js files on demand

高洛峰

Release： 2016-12-05 14:21:33

Original

1553 people have browsed it

Foreword

This article introduces the custom require function to allow the browser to load Js files on demand. So how do you write a library for on-demand loading? In order to achieve on-demand loading:

//This is us To implement the function, load the str.js file when require('str.js'), and create an object called str. After the loading is completed, execute the function in the ready method of the str object.

var str = require(&#39;str.js&#39;);
 
str.ready(show);
 
//要执行的函数
 
function show(res){
 
 console.log(res);
 
}
 
//str.js 文件，提供"我是str"字符串
 
//require.js 这个是我们要写的库

Copy after login

Implementation ideas

1. How to load the str.js file?

A: We can insert a , so that not only str.js is loaded, but the code inside can also be automatically run by the browser.

2. How to judge that the str.js file has been loaded?

A: You can execute a function in the str.js file to notify everyone that I have finished loading.

3. require('str.js') returns an object. How can this object be associated with str.js?

A: We can create an object called JS['str.js'] and make str point to this object.

4. I don’t want to write all the code into one ready. I want to write it into many readys. Can they all be executed after loading?

A: No matter how many ready items are loaded, they will be thrown into a queue and saved first, so we need a queue.

5. Ready is triggered at the moment when loading is completed. Then the ready function I write after loading is not executed?

A: It will also be executed, so at the moment when loading is completed, we will rewrite the ready function.

6. Can so many things be completed in 20 lines of code?

A: ....

Execution plan

Based on the appeal idea, I wrote a require.js file:

function require(path){
 
 //比如我们require(&#39;js/str.js&#39;) , 我们需要获取&#39;str.js&#39;这个文件名
 var filename = path.split(&#39;/&#39;);
 filename = filename[filename.length-1];
 
 JS[filename]={
  fn:[/*这个就是(4)中提到的那个队列*/],
 
  //这是(2)中提到的方法，str.js文件里面执行这个方法就代表它加载完了
  ready:function(){
   
   JS[filename].fn.forEach(function(fn){
    //JS[&#39;str.js&#39;].export就是str.js要提供的东西：&#39;我是str&#39;
    fn(JS[filename].export);
   });
 
   //这是(5)中提到的，ready函数的重写
   JS[filename].rt.ready = function(fn){
    fn(JS[filename].export);
   };
  },
  rt:{
   ready:function(fn){JS[filename].fn.push(fn)}//这个就是str对象的ready函数
  }
 };
 
 //这是(1)中提到的插入script标签
 var script = document.createElement(&#39;script&#39;);
 script.src = path;
 document.head.appendChild(script);
 
 //这是(3)中要返回的对象
 return JS[filename].rt;
}

Copy after login

The next step is to write str.js:

/*
 
 这里你想写什么代码都行，推荐写在闭包里，以免污染全局变量
 
*/
JS[&#39;str.js&#39;].export = &#39;我是str&#39;;//这个是供大家使用的参数
JS[&#39;str.js&#39;].ready();//执行这个函数，通知大家，str.js加载完毕了

Copy after login

Confirm the execution result

<!DOCTYPE html>
<script src="require.js"></script>
<script>
 var str = require(&#39;str/str.js&#39;);
 str.ready(show);
 
 setTimeout(function(){
  str.ready(show);
 },3000);
 
 //要执行的函数
 function show(res){
  console.log(res);
 }
</script>

Copy after login

ok, everything is normal.