Lab.js初次使用笔记


Posted in Javascript onFebruary 28, 2015

动态加载JS函数

一般性的,当我们需要加载js文件的时候都会使用script标签来实现,类似于如下代码:

<script type="text/javascript" src="example.js"></script>

但是直接使用script标签来加载js文件会有如下一些缺点:

1.严格的读取顺序。由于浏览器按照<script>在网页中出现的顺序,读取Javascript文件,然后立即运行,导致在多个文件互相依赖的情况下,依赖性最小的文件必须放在最前面,依赖性最大的文件必须放在最后面,否则代码会报错。

2.性能问题。浏览器采用"同步模式"加载<script>标签,也就是说,页面会"堵塞"(blocking),等待javascript文件加载完成,然后再运行后面的HTML代码。当存在多个<script>标签时,浏览器无法同时读取,必须读取完一个再去读取另一个,造成读取时间大大延长,页面响应缓慢。

这个时候我们就会想到去动态加载JS,动态加载js的实现方法类似于如下代码

/*

*@desc:动态添加script

*@param src:加载的js文件的地址

*@param callback:js文件加载完成之后需要调用的回调函数

*@demo:

addDynamicStyle('http://webresource.c-ctrip.com/code/cquery/LABjs/LAB.js', function () {

    alert('携程服务器上的lab.js加载完成')

});

*/

function addDynamicJS(src, callback) {

    var script = document.createElement("script");

    script.setAttribute("type", "text/javascript");

    script.src = src[i];

    script.charset = 'gb2312';

    document.body.appendChild(script);

    if (callback != undefined) {

        script.onload = function () {

            callback();

        }

    }

}

这样不会造成页面堵塞,但会造成另外一个问题:这样加载的Javascript文件,不在原始的DOM结构之中,因此在DOM-ready(DOMContentLoaded)事件和window.onload事件中指定的回调函数对它无效。

这个时候我们就会想到用一些外部函数库来有效的管理JS加载问题。

下面进入正题说说LAB.js

LAB.js

如果我们使用传统的方法来加载js的话,写的代码一般会如下方代码所示风格。

<script src="aaa.js"></script>

    <script src="bbb-a.js"></script>

    <script src="bbb-b.js"></script>

    <script type="text/javascript">

        initAaa();

        initBbb();

    </script>

    <script src="ccc.js"></script>

    <script type="text/javascript">

        initCcc();

    </script>

如果我们使用LAB.js的话,要实现上述代码功能,则使用如下方式

<!--先加载lab.js库-->

    <script src="http://webresource.c-ctrip.com/code/cquery/LABjs/LAB.js"></script>

    <script type="text/javascript">

        $LAB

        .script("aaa.js").wait()//不带参数的.wait()方法表示立即运行刚才加载的Javascript文件

        .script("bbb-a.js")

        .script("bbb-b.js")//依次加载aaa.js bbb-a.js bbb-b.js  然后执行initAaa initBbb

        .wait(function () {//带参数的.wait()方法也是立即运行刚才加载的Javascript文件,但是还运行参数中指定的函数。

            initAaa();

            initBbb();

        })

        .script("ccc.js")//再加载ccc.js 加载完成ccc.js之后执行initCcc方法

        .wait(function () {

            initCcc();

        });

    </script>

可以同时运行多条$LAB链,但是它们之间是完全独立的,不存在次序关系。如果你要确保一个Javascript文件在另一个文件之后运行,你只能把它们写在同一个链操作之中。只有当某些脚本是完全无关的时候,你才应该考虑把它们分成不同的$LAB链,表示它们之间不存在相关关系。

一般性的使用示例

$LAB

.script("script1.js") // script1, script2, and script3 相互不依赖, 可以按照任意的顺序执行

.script("script2.js")

.script("script3.js")

.wait(function(){

    alert("Scripts 1-3 are loaded!");

})

.script("script4.js") //必须等待script1.js,script2.js,script3.js执行完毕之后才能执行

.wait(function(){script4Func();});
$LAB

.script("script.js")    

.script({ src: "script1.js", type: "text/javascript" })

.script(["script1.js", "script2.js", "script3.js"])

.script(function(){

    // assuming `_is_IE` defined by host page as true in IE and false in other browsers 

    if (_is_IE) {

        return "ie.js"; // only if in IE, this script will be loaded

    }

    else {

        return null; // if not in IE, this script call will effectively be ignored

    }

})

在控制台看LAB.js的加载信息

如果你想调试或者说在控制台看各个js加载信息的话,可以使用$LAB.setGlobalDefaults 方法,具体使用请看代码示例。

<!--先加载携程的LAB库  lab.js在网上也可以下载-->

    <script type="text/javascript" src="http://webresource.c-ctrip.com/code/cquery/LABjs/LAB.js" charset="gb2312"></script>
    <script type="text/javascript">
        $LAB.setGlobalDefaults({ Debug: true }) //打开调试
        $LAB

            //第一个执行链

           .script('http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js')

           .script('http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js')
           //第二个执行链

           .wait(function () {

               //console.log(window.$)

               //console.log(window._)

           })
           //第三个执行链

           .script('http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js')

           .script('http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js')
           //第四个执行链

           .wait(function () {

               // console.log(plugin1Function)

               // console.log(plugin2Function)

           })
           //第五个执行链

           .script('js/aaa.js')

           .script('js/bbb.js')
           //第六个执行链

           .wait(function () {

               // console.log(module1Function)

               // console.log(module2Function)

           })

    </script>

这个时候打开控制台,看信息,如下图所示:

Lab.js初次使用笔记

我相信你看到这儿肯定会为Lab.js的调试功能惊叹不已。事实上Lab.js确实是挺强大的,我也只是了解它的一些浅显的功能。先记下来,拿来分享一下同时也为了以后方便自己。

Javascript 相关文章推荐
JS运行耗时操作的延时显示方法
Nov 19 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
原生javascript实现的分页插件pagenav
Aug 28 Javascript
Bootstrap基本样式学习笔记之表格(2)
Dec 07 Javascript
Js自定义多选框效果的实例代码
Jul 05 Javascript
angularjs数组判断是否含有某个元素的实例
Feb 27 Javascript
Node.js应用设置安全的沙箱环境
Apr 23 Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 Javascript
微信小程序实现音频文件播放进度的实例代码
Mar 02 Javascript
Vue项目打包编译优化方案
Sep 16 Javascript
使用Mock.js生成前端测试数据
Dec 13 Javascript
js实现鼠标感应图片展示的方法
Feb 27 #Javascript
JQuery基础语法小结
Feb 27 #Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
Feb 27 #Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 #Javascript
JS实现在页面随时自定义背景颜色的方法
Feb 27 #Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
Feb 27 #Javascript
Jquery中Event对象属性小结
Feb 27 #Javascript
You might like
PHP 常见郁闷问题答解
2006/11/25 PHP
通过具体程序来理解PHP里面的抽象类
2010/01/28 PHP
php对mongodb的扩展(初出茅庐)
2012/11/11 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
php集成动态口令认证
2016/07/21 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
js 字符串操作函数
2009/07/25 Javascript
nodejs实用示例 缩址还原
2010/12/28 NodeJs
JavaScript 一道字符串分解的题目
2011/08/03 Javascript
jquery乱码与contentType属性设置问题解决方案
2013/01/07 Javascript
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
javascript中BOM基础知识总结
2017/02/14 Javascript
js中作用域的实例解析
2017/03/16 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
2021/02/04 jQuery
跟老齐学Python之折腾一下目录
2014/10/24 Python
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
非洲NO.1网上商店:Jumia肯尼亚
2016/08/18 全球购物
Vrbo西班牙:预订您的度假公寓(公寓、乡村房屋…)
2020/04/27 全球购物
服务行业口号
2014/06/11 职场文书
2014年妇女工作总结
2014/12/06 职场文书
2015年度酒店客房部工作总结
2015/05/25 职场文书
八年级作文之一起的走过日子
2019/09/17 职场文书