欢迎您使用headLoader
插件简介
headLoader的主要功能有:资源加载、预加载、热加载、多页面缓存共享、代码隐藏等。
主要作用是使网站快速响应及反编译。
由于使用纯前端技术,基本上用"0成本"就能使普通的网站得到明显的加速及优化。
当前版本为v2.0.7,他有如下特点:
1.可实现一个script标签加载页面所需的全部css及js文档;
2.可实现资源预加载功能;
3.资源热加载,即随需随加载,而不需要刷新页面;
4.当页面刷新或者重新载入时,会从缓存中优先读取,缩短响应时间,减少页面载入时的闪烁;
5.缓存生命周期可自定义,默认每两个小时更新一次,即能复用本地缓存又能保证代码的时效性;
6.缓存生命周期结束后,如果服务器文件未修改,继续使用本地缓存,进一步减少网络流量提高效率;
7.生产环境自动加载文档的.min版本,开发环境加载正常版本,开发及上线一气呵成,减少维护成本;
8.生产环境并行加载文档加快速度,开发环境串行加载利于观察程序运行;
9.生产环境程序在内存中运行便于保护及隐藏代码,开发环境正常在页面中运行方便调试与定位;
10.从v2.0.0版本后使用`indexedDB`数据库,容量不再受限制,尽可用它构建更大规模的项目。
快速上手
普通页面加载资源方法
现在,可以使用headLoader实现上述功能 *注意!headerLoader.js不仅能实现上述功能,还会自动将资源缓存到indexedDB,当刷新页面或者其它页面再次请求相同资源时,直接从缓存读取,不会重复请求服务器
使用方法(任选其一)
1.标签属性定义法(推荐)
2.命令行语句法
let loader=new headLoader();
loader.dataDir="/media/user/";
loader.dataCss=['public/global','public/color','other','_css'];
loader.dataJs=['libs/jquery-1.8.0','libs/jquery.elfAlert','_js'];
loader.dataLifeCycle=2;
loader.dataActive=false;
loader.preload=0;
loader.callback=function(){console.log("headLoader is done!")}; //外部命令法可以定义回调函数
loader.run();
当然,您也可以写成这样
let loader=new headLoader({
dataDir:"/media/users/",
dataCss:['public/global','public/color','other','_css'],
dataJs:['libs/jquery-1.8.0','libs/jquery.elfAlert','_js'],
dataLifeCycle:2,
dataActive:false,
preload:0,
callback:function(){console.log("headLoader is done!")} //外部命令法可以定义回调函数
});
loader.run();
使用说明
1.在页面的合适位置插入javascript标签
2.javascript标签的"data-dir"属性定义模块的基础路径(*可选)[默认值:'./'];
3.javascript标签的"data-css"属性定义css模块,多个css以逗号分割,headLoader会依次加载,不需要指定文件的扩展名称(*可选)[默认值:'']
4.javascript标签的"data-js"属性定义js模块,多个js以逗号分割,headLoader会依次加载,不需要指定文件的扩展名称(*可选)[默认值:''];
5.data-lifecycle为Number类型,代表缓存生成周期,单位小时,默认2 | 可选项
6.data-active为Boolean类型,代表是否自动切换线上线下路径,默认flase | 可选项 [*请参考具体说明13]
5.标签属性定义法与命令行语句法中的属性名称分别如下一一对应:
data-dir 相当于 dataDir
data-css 相当于 dataCss
data-js 相当于 dataJs
data-lifecycle 相当于 dataLifecycle
data-active 相当于 dataActive
6.如果想预加载资源以备后面的页面使用时,可以设置preload参数为1,1为预加载功能开启,0为加载后立即应用于当前页面,默认为0
8.命令行语句法可以定义回调函数callback,标签属性定义法不支持定义回调函数
具体说明
1.由于本插件需要使用indexedDB功能,所以必须使用现代浏览器,例如:Chrome、Firefox等;
2.javascript标签的"data-css"属性定义css模块,多个css以逗号分割,headLoader会依次加载,不需要指定文件的扩展名称,"data-js"同理
3.标签属性定义法与命令行语句法中的属性名称分别如下一一对应: data-dir 相当于 dataDir data-css 相当于 dataCss data-js 相当于 dataJs;
4.css模块在"dataDir"路径下的"css"目录中,js模块在"dataDir"路径下的"js"目录中;
5.命令行语句法可以定义回调函数,标签属性定义法不支持定义回调函数.
6.当data-css包含"_css"模块时,代表headLoader自动加载页面css,例如当页面为127.0.0.1/index/index.html,则对应的css为127.0.0.1/css/index/index.css;
7.当data-js包含"_js"模块时,代表headLoader自动加载页面js,例如当页面为127.0.0.1/index/index.html,则对应的js为127.0.0.1/js/index/index.js;
8.当需要给加载的css或js标签添加属性时,直接在模块地址后追加"_js|属性名=属性值|属性名=属性值|...",例如loader.dataJs=['_js|id=abc'];
9.如果是公有IP或者非localhost,所加载的文档会直接从localStorage中读取,版本每两个小时更新一次;
10.如果是私有IP或者localhost开发环境,每次刷新页面都会重新加载资源,这样做是为了方便开发调试,由此加载速度较慢,请知晓;
11.当使用headLoader.js时,在本地开发环境下会以console.log()命令友情提示,如果不希望出现提示请使用压缩文件headLoader.min.js.
12.当模块为完整的http地址时,例如loader.dataJs=['http://dwz.cn/headLoader'],将直接创建标签并加载,不进行任何处理.
13.在引入headLoader.js时如果添加“data-active=true”属性参数时,或者命令行语法在给实例添加dataActive并置为true,此时开发环境正常加载,但是线上环境会将“/js/”目录切换为"/js.min/"目录,并将文件扩展名".js"改为".min.js"(CSS同理)。例如“/media/js/a.js”在线上环境会自动切换为“/media/js.min/a.min.js”
更多...
欢迎访问我的个人网站查看更多 UI精灵
作者:宇哥
联系方式:baiyukey@qq.com