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 相关文章推荐
javascript之卸载鼠标事件的代码
May 14 Javascript
javascript 显示当前系统时间代码
Dec 28 Javascript
基于JQuery的asp.net树实现代码
Nov 30 Javascript
JS 自定义带默认值的函数
Jul 21 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
Jun 24 Javascript
举例详解JavaScript中Promise的使用
Jun 24 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
Angular.js如何从PHP读取后台数据
Mar 24 Javascript
jQuery Dialog对话框事件用法实例分析
May 10 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
Oct 26 Javascript
vue相同路由跳转强制刷新该路由组件操作
Aug 05 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中的reflection反射机制测试例子
2014/08/05 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
JavaScript delete操作符应用实例
2009/01/13 Javascript
js event事件的传递与冒泡处理
2009/12/06 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
javascript下string.format函数补充
2010/08/24 Javascript
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
js获得参数的getParameter使用示例
2014/02/26 Javascript
详谈JavaScript内存泄漏
2014/11/14 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
2016/08/01 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
详解微信小程序开发用户授权登陆
2019/04/24 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
JavaScript数值类型知识汇总
2019/11/17 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
[50:27]OG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/30 DOTA
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
巴西独家产品和现场演示购物网站:Shoptime
2019/07/11 全球购物
年度考核自我鉴定
2013/11/09 职场文书
大学生收银员求职信分享
2014/01/02 职场文书
2014教师年度工作总结
2014/11/10 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
师范生小学见习总结
2015/06/23 职场文书
2016年秋季新学期致辞
2015/07/30 职场文书
党性修养心得体会2016
2016/01/21 职场文书
python中的mysql数据库LIKE操作符详解
2021/07/01 MySQL