当前位置：首页 > 资讯 > 技术文档

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

时间：2021-05-13 01:54 编辑：来源：阅读：
扫一扫，手机访问

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

[b]前言[/b] 本文介绍的是自定义require函数让浏览器实现按需加载Js文件，那到底要怎么自己写一个按需加载的库呢 [b]为了实现按需加载：[/b] //这是我们要实现的功能，[code]require('str.js')[/code]时加载str.js文件，并创建一个叫str对象，等加载完毕之后执行str对象的ready方法里的函数。

var str = require('str.js');

str.ready(show);

//要执行的函数

function show(res){

 console.log(res);

}

//str.js 文件，提供"我是str"字符串

//require.js 这个是我们要写的库

实现思路 1、如何加载str.js文件呢？ A：我们可以插入一个<[code]script src="str.js"></script>[/code] ，这样不仅加载了str.js，里面的代码还可以被浏览器自动运行呢。 2、如何判断str.js文件已经加载完毕？ A：可以在str.js文件里执行一个函数，通知大家，我已经加载完了。 3、[code]require('str.js')[/code]返回一个对象，这个对象要怎么和str.js相关联呢？ A：我们可以创建一个叫[code]JS['str.js'][/code]的对象，使str指向这个对象就行了。 4、我不想把代码都写进一个ready里面，我要写在很多个ready里面，加载完之后它们都能执行吗？ A：不管多少个ready，没加载完的时候，都会丢进一个队列里面先保存着，所以我们需要一个队列。 5、加载完的那个时刻触发ready，那加载完之后我再写的ready函数，就不执行吗？ A：也会执行，所以，在加载完的那个时刻，我们将重写ready函数。 6、这么多东西20行代码能完成吗？ A：.... [b]执行方案[/b] 根据上诉思路，写了一个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>

ok，一切正常。 [b]总结[/b] 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

全部评论(0)

上一篇：详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
下一篇：js+css实现有立体感的按钮式文字竖排菜单效果

资讯排行榜
更多>>