自定义require函数让浏览器按需加载Js文件
2016-11-24 10:19
267 查看
前言
本文介绍的是自定义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,一切正常。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
您可能感兴趣的文章:
- node.js使用require()函数加载模块
- 探索angularjs+requirejs全面实现按需加载的套路
- 在JavaScript应用中使用RequireJS来实现延迟加载
- php命令行(cli)模式下报require 加载路径错误的解决方法
- 使用RequireJS库加载JavaScript模块的实例教程
- 简单模拟node.js中require的加载机制
- require.js 加载 vue组件 r.js 合并压缩的实例
- require(),include(),require_once()和include_once()区别
- 深入掌握include_once与require_once的区别
- nodejs的require模块(文件模块/核心模块)及路径介绍
相关文章推荐
- Js文件在不同浏览器中的加载解析问题
- JS获取浏览器语言动态加载JS文件示例代码
- ASP.NET MVC用Bundles压缩js文件,并让浏览器异步加载js
- 页面加入_JS,CSS使用,#include添加文件,缓存页面,页面间传递汉字,IsPostBack控制页面的加载,自定义错语页面
- 关于pjax 如何设置不缓存加载页面里面的js文件和不修改浏览器中的URL地址
- 浏览器加载js文件乱码问题
- vue加载自定义的js文件
- javaWeb项目修改css或者js文件后,浏览器却不能加载新版本
- nginx 配置后网站图片或js 加载出来一半或者不出来刷新才可以,chrome 浏览器访问项目时加载大文件失败 ERR_CONTENT_LENGTH_MISMATCH:
- vue加载自定义的js文件方法
- javascript之自定义js封装库兼容主流浏览器实现DOM加载之后,页面完全加载之前执行js
- 怎么让浏览器重新加载修改过的JS文件,而不是沿用缓存里的?
- IE及IE6浏览器中判断JS文件加载成功失败的方法
- 谷歌验证码非web.xml非servlet拦截 使用配置文件自定义加载,防止多次点击(防js攻击)
- 动态引入的外部 JS 文件在各浏览器中的加载顺序不一致问题解决
- JS获取浏览器语言 动态加载JS文件
- JavaScript 的性能优化:加载和执行(以及动态引入的外部 JS 文件在各浏览器中的加载顺序不一致)
- WebView使用(内存泄露+获取网页标题+js交互+调用浏览器下载文件+网页加载失败+清缓存)
- 使用Tomcat部署项目在浏览器中访问的时候JS和CSS等静态文件无法加载的问题
- 请求时才加载JS文件,从而不阻塞浏览器