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 相关文章推荐
学习jquery必备 api中英文对照的chm手册 下载
May 03 Javascript
js中hash和ico的关联分析
Feb 05 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 Javascript
网页挂马方式整理及详细介绍
Nov 03 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
Mar 08 Javascript
Jquery中attr与prop的区别详解
May 27 jQuery
javascript中的数据类型检测方法详解
Aug 07 Javascript
js实现点击图片在屏幕中间弹出放大效果
Sep 11 Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 Javascript
react合成事件与原生事件的相关理解
May 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
Zend的Registry机制的使用说明
2013/05/02 PHP
php中关于长度计算容易混淆的问题分析
2016/05/27 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
laravel 查询数据库获取结果实现判断是否为空
2019/10/24 PHP
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
Angular.js如何从PHP读取后台数据
2016/03/24 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
详解小程序如何避免多次点击,重复触发事件
2019/04/08 Javascript
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
Python的面向对象思想分析
2015/01/14 Python
以一段代码为实例快速入门Python2.7
2015/03/31 Python
对python数据切割归并算法的实例讲解
2018/12/12 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
django创建超级用户过程解析
2019/09/18 Python
Python虚拟环境的创建和包下载过程分析
2020/06/19 Python
python线程里哪种模块比较适合
2020/08/02 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
五一家具促销方案
2014/01/10 职场文书
八一建军节部队活动方案
2014/02/04 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
消防宣传语大全
2015/07/13 职场文书
儿童诗两首教学反思
2016/02/23 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang
css3中transform属性实现的4种功能
2021/08/07 HTML / CSS