사용자 정의 요구 기능을 통해 브라우저는 요청 시 JS 파일을 로드할 수 있습니다.
- 高洛峰원래의
- 2016-12-05 14:21:331616검색
머리말
이 기사에서는 브라우저가 요청 시 Js 파일을 로드할 수 있도록 하는 사용자 정의 require 기능을 소개합니다. 그러면 요청 시 로드되는 라이브러리를 어떻게 작성합니까? on-demand loading 로드해야 할 사항:
//구현하려는 함수입니다. require('str.js') 시 str.js 파일을 로드하고 str이라는 객체를 생성합니다. 로딩이 완료되면 메소드에서 str 객체의 준비를 실행합니다.
var str = require('str.js');
str.ready(show);
//要执行的函数
function show(res){
console.log(res);
}
//str.js 文件，提供"我是str"字符串
//require.js 这个是我们要写的库
구현 아이디어
1. str.js 파일을 어떻게 로드하나요?
A: c77b663b380843fff43fcd64be3fb50b2cacc6d41bbb37262a98f745aa00fbf0를 삽입하면 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('js/str.js') , 我们需要获取'str.js'这个文件名
var filename = path.split('/');
filename = filename[filename.length-1];
JS[filename]={
fn:[/*这个就是(4)中提到的那个队列*/],
//这是(2)中提到的方法，str.js文件里面执行这个方法就代表它加载完了
ready:function(){
JS[filename].fn.forEach(function(fn){
//JS['str.js'].export就是str.js要提供的东西：'我是str'
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('script');
script.src = path;
document.head.appendChild(script);
//这是(3)中要返回的对象
return JS[filename].rt;
}
다음 단계는 str.js를 작성하는 것입니다.
/* 这里你想写什么代码都行，推荐写在闭包里，以免污染全局变量 */ JS['str.js'].export = '我是str';//这个是供大家使用的参数 JS['str.js'].ready();//执行这个函数，通知大家，str.js加载完毕了
실행 확인 결과
<!DOCTYPE html>
<script src="require.js"></script>
<script>
var str = require('str/str.js');
str.ready(show);
setTimeout(function(){
str.ready(show);
},3000);
//要执行的函数
function show(res){
console.log(res);
}
</script>
괜찮습니다.