自定义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 相关文章推荐
怎么判断js脚本加载完成
Feb 28 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
May 28 Javascript
Javascript writable特性介绍
Feb 27 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
Nov 02 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
AngularJS获取json数据的方法详解
May 27 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
基于Node.js模板引擎教程-jade速学与实战1
Sep 17 Javascript
Vue中android4.4不兼容问题的解决方法
Sep 04 Javascript
微信小程序实现留言功能
Oct 31 Javascript
vue项目中使用vue-i18n报错的解决方法
Jan 13 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
Apache服务器无法使用的解决方法
2013/05/08 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
详解PHP swoole process的使用方法
2017/08/26 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
浅谈javascript的数据类型检测
2010/07/10 Javascript
常见JS效果之图片减速度滚动实现代码
2011/12/08 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
DOM基础教程之事件对象
2015/01/20 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
js实现图片点击左右轮播
2015/07/08 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
2017/12/31 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
详解redux异步操作实践
2018/08/15 Javascript
详解 微信小程序开发框架(MINA)
2019/05/17 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
2019/10/26 Javascript
简单了解python模块概念
2018/01/11 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
python版大富翁源代码分享
2018/11/19 Python
Python中三元表达式的几种写法介绍
2019/03/04 Python
Python字符串对象实现原理详解
2019/07/01 Python
python实现邮件发送功能
2019/08/10 Python
python中lower函数实现方法及用法讲解
2020/12/23 Python
使paramiko库执行命令时在给定的时间强制退出功能的实现
2021/03/03 Python
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
市场营销专业毕业生自荐信
2013/11/02 职场文书
旅游管理毕业生自荐信范文
2014/03/19 职场文书
教师考核评语
2014/04/28 职场文书
赔偿协议书范本
2014/09/12 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python