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 相关文章推荐
收集的10个免费的jQuery相册
Feb 26 Javascript
Javascript中Event属性搜集整理
Sep 17 Javascript
javascript实现网页端解压并查看zip文件
Dec 15 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
May 25 Javascript
jQuery通过ajax快速批量提交表单数据
Oct 25 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
Dec 23 Javascript
原生js实现可爱糖果数字时间特效
Dec 30 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 Javascript
用图片替换checkbox原始样式并实现同样的功能
Nov 15 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
Sep 19 Javascript
vue中使用v-for时为什么不能用index作为key
Apr 04 Javascript
javascript贪吃蛇游戏设计与实现
Sep 17 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 Framework页面缓存实例
2014/06/25 PHP
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
php格式化日期实例分析
2014/11/12 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
php调整服务器时间的方法
2015/04/03 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
增强的 JavaScript 的 trim 函数的代码
2007/08/13 Javascript
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
js操作ajax返回的json的注意问题!
2010/02/23 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
javascript的动态加载、缓存、更新以及复用(一)
2014/06/09 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
python删除列表中重复记录的方法
2015/04/28 Python
详解C++编程中一元运算符的重载
2016/01/19 Python
详解Python中的array数组模块相关使用
2016/07/05 Python
python实现杨辉三角思路
2017/07/14 Python
Python实现判断一个字符串是否包含子串的方法总结
2017/11/21 Python
python解决字符串倒序输出的问题
2018/06/25 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
pandas 层次化索引的实现方法
2019/07/06 Python
Python对象的属性访问过程详解
2020/03/05 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
python 实现aes256加密
2020/11/27 Python
英国领先的奢侈品零售商之一:CRUISE
2016/12/02 全球购物
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
试用期自我鉴定范文
2014/03/20 职场文书
自荐信怎么写
2015/03/04 职场文书
Python必备技巧之字符数据操作详解
2022/03/23 Python