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


Posted in Javascript onNovember 24, 2016

前言

本文介绍的是自定义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 这个是我们要写的库

实现思路

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

     A:我们可以插入一个<script src="str.js"></script> ,这样不仅加载了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;
}

接下来,就差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,一切正常。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
判断脚本加载是否完成的方法
May 26 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
Apr 25 Javascript
JQuery动画animate的stop方法使用详解
May 09 Javascript
JavaScript操作Cookie详解
Feb 28 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
Jun 12 Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 Javascript
微信小程序 页面传参实例详解
Nov 16 Javascript
Node.js 使用流实现读写同步边读边写功能
Sep 11 Javascript
详细分析jsonp的原理和实现方式
Nov 20 Javascript
记录一次完整的react hooks实践
Mar 11 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
Jul 31 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
Nov 24 #Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 #Javascript
JS 终止执行的实现方法
Nov 24 #Javascript
JS/jQuery判断DOM节点是否存在的简单方法
Nov 24 #Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 #Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 #Javascript
原生js实现addclass,removeclass,toggleclasss实例
Nov 24 #Javascript
You might like
php生成WAP页面
2006/10/09 PHP
解析php常用image图像函数集
2013/06/24 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
jQuery+ajax实现顶一下,踩一下效果
2010/07/17 Javascript
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
python中正则表达式 re.findall 用法
2018/10/23 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
python异步存储数据详解
2019/03/19 Python
pandas 缺失值与空值处理的实现方法
2019/10/12 Python
python实现的汉诺塔算法示例
2019/10/23 Python
python3 pathlib库Path类方法总结
2019/12/26 Python
python scatter函数用法实例详解
2020/02/11 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
python-jwt用户认证食用教学的实现方法
2021/01/19 Python
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
Orvis官网:自1856年以来,优质服装、飞钓装备等
2018/12/17 全球购物
护士岗位职责
2014/02/16 职场文书
运动会闭幕式解说词
2014/02/21 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
社区文艺活动方案
2014/08/19 职场文书
乒乓球比赛通知
2015/04/27 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书