사용자 정의 요구 기능을 통해 브라우저는 요청 시 JS 파일을 로드할 수 있습니다.-JS 튜토리얼-php.cn

사용자 정의 요구 기능을 통해 브라우저는 요청 시 JS 파일을 로드할 수 있습니다.

高洛峰

풀어 주다： 2016-12-05 14:21:33

원래의

1598명이 탐색했습니다.

머리말

이 기사에서는 브라우저가 요청 시 Js 파일을 로드할 수 있도록 하는 사용자 정의 require 기능을 소개합니다. 그러면 요청 시 로드되는 라이브러리를 어떻게 작성합니까? on-demand loading 로드해야 할 사항:

//구현하려는 함수입니다. require('str.js') 시 str.js 파일을 로드하고 str이라는 객체를 생성합니다. 로딩이 완료되면 메소드에서 str 객체의 준비를 실행합니다.

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

로그인 후 복사

구현 아이디어

1. str.js 파일을 어떻게 로드하나요?

A: 를 삽입하면 str.js가 로드될 뿐만 아니라 내부 코드도 자동으로 실행될 수 있습니다. 브라우저.

2. str.js 파일이 로드되었는지 어떻게 판단하나요?

A: str.js 파일에서 함수를 실행하여 로드가 완료되었음을 모든 사람에게 알릴 수 있습니다.

3. require('str.js')는 객체를 반환합니다. 이 객체를 str.js와 어떻게 연결할 수 있나요?

A: JS['str.js']라는 개체를 만들고 str이 이 개체를 가리키도록 만들 수 있습니다.

4. 모든 코드를 하나의 레디에 작성하고 싶지 않습니다. 로드한 후 모두 실행할 수 있나요?

A: 준비된 항목이 아무리 많아도 대기열에 던져지고 먼저 저장되므로 대기열이 필요합니다.

5. 로딩이 완료되는 순간 Ready가 실행됩니다. 로딩 후 작성한 Ready 함수가 실행되나요?

A: 이것도 실행이 되기 때문에 로딩이 완료되는 순간 Ready 함수를 다시 작성해보겠습니다.

6. 20줄의 코드로 이토록 많은 일을 끝낼 수 있을까?

A: ....

구현 계획

어필 아이디어를 바탕으로 require.js 파일을 작성했습니다.

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;
}

로그인 후 복사

다음 단계는 str.js를 작성하는 것입니다.

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

로그인 후 복사

실행 확인 결과

<!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>

로그인 후 복사

괜찮습니다.