时间:2021-05-18
前言
本文介绍的是自定义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:[], //这是(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加载完毕了确认一下执行结果
ok,一切正常。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
使用antd按需加载使用react-app-rewired对create-react-app的默认配置进行自定义1、yarnaddreact-app-rewir
一、为什么要使用require.js首先一个页面如果在加载多个js文件的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长;其次,由于js文件
本文实例讲述了js自定义trim函数实现删除两端空格功能。分享给大家供大家参考,具体如下:兼容IE低版本浏览器,以及其他一些低版本脚本的浏览器js中本身是没有t
最近因为项目的比较大,需要加载的js文件较多,为了提高首屏页面的加载速度,需要对js文件进行按需加载,然后网上参考了一些资料,自己也深入研究一番之后,实现了按需
微信公众平台日前对外发布消息称,小程序升级实时音视频录制及播放能力,并开放Wi-Fi、NFC(HCE)等硬件连接功能。同时,小程序将提供按需加载、自定义组件和更