自定义require函数让浏览器按需加载Js文件
更新时间：2016年11月24日 10:19:44 投稿：daisy
可能很多人看到这个题目就会想到LABjs、RequireJS、SeaJS... 这些库，但无奈小编没用过这些库，什么 AMD 、CMD 哪来那么多术语... 前端的库太多了，要看各种乱七八糟的文档，好难啊，还不如自己写一个库呢。于是就有了这文章，有需要的朋友们下面来一起学习学习吧。
前言
本文介绍的是自定义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，一切正常。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
相关文章
这篇文章主要介绍了transport.js和jquery冲突问题的解决方法,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了基于el-slider实现一个能拖动的时间范围选择器,并通过实例代码介绍了基于element-ui el-slider实现滑动限位器的方法,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了JavaScript寄生组合式继承,结合实例形式分析了javascript寄生组合式继承的原理、定义与简单使用方法,需要的朋友可以参考下2019-01-01
本篇文章主要是对JS判断文本框内容改变事件的简单实例进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
这篇文章主要介绍了webpack 处理CSS资源的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
计算黄金分割的javascript代码...2007-07-07
这篇文章主要介绍了JS函数this的用法,实例分析了javascript中this的功能、定义及相关使用技巧,需要的朋友可以参考下2015-02-02
这篇文章主要为大家介绍了SVG快速构建马赛克效果示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要介绍了js自动查找select下拉的菜单并选择(示例代码)需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
这篇文章主要介绍了产制造追溯系统-通过微信小程序实现移动端报表平台 ,本文图文并茂给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-06-06
最新评论