自定义require函数让浏览器按需加载Js文件

高洛峰
Lepaskan: 2016-12-05 14:21:33
asal
1594 orang telah melayarinya

前言

本文介绍的是自定义require函数让浏览器实现按需加载Js文件,那到底要怎么自己写一个按需加载的库呢

为了实现按需加载:

//这是我们要实现的功能,require('str.js')时加载str.js文件,并创建一个叫str对象,等加载完毕之后执行str对象的ready方法里的函数。

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

实现思路

1、如何加载str.js文件呢?

A:我们可以插入一个 ,这样不仅加载了str.js,里面的代码还可以被浏览器自动运行呢。

2、如何判断str.js文件已经加载完毕?

A:可以在str.js文件里执行一个函数,通知大家,我已经加载完了。

3、require('str.js')返回一个对象,这个对象要怎么和str.js相关联呢?

A:我们可以创建一个叫JS['str.js']的对象,使str指向这个对象就行了。

4、我不想把代码都写进一个ready里面,我要写在很多个ready里面,加载完之后它们都能执行吗?

A:不管多少个ready,没加载完的时候,都会丢进一个队列里面先保存着,所以我们需要一个队列。

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;
}
Salin selepas log masuk

接下来,就差str.js的写法了:

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

确认一下执行结果

<!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>
Salin selepas log masuk

   

ok,一切正常。


Label berkaitan:
js
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!