Lab.js初次使用笔记

动态加载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确实是挺强大的,我也只是了解它的一些浅显的功能。先记下来,拿来分享一下同时也为了以后方便自己。

(0)

相关推荐

  • Lab.js初次使用笔记

    动态加载JS函数 一般性的,当我们需要加载js文件的时候都会使用script标签来实现,类似于如下代码: 复制代码 代码如下: <script type="text/javascript" src="example.js"></script> 但是直接使用script标签来加载js文件会有如下一些缺点: 1.严格的读取顺序.由于浏览器按照<script>在网页中出现的顺序,读取Javascript文件,然后立即运行,导致在多个文件

  • js正则表达式学习笔记

    正则表达式:对字符串中的信息实现查找.替换和提取操作.(不支持注释和空白,必须写在一行内) 正则表达式的创建:包含在一对斜杠之间的字符(直接量语法) 例如: var pattern = /s$/; // 创建一个正则来匹配所有以字母s结尾的字符串,并赋值给pattern 一 .字符类 将直接量字符单独放进方括号内就组成了字符类. 一个字符类可以匹配它所包含的任意字符. 正则表达式的字符类: [...]      方括号内的任意字符 [^...]    不在方括号内的任意字符 .         

  • 超全的js正则表达式整理笔记

    var reCat = new RegExp("cat", "gi"); //RegExp构造函数可以带一个或两个参数,第一个参数描述需要进行匹配的模式字符串,第二个参数指定了额外的处理命令 var reCat = /cat/gi; //使用Perl风格的语法 i:执行对大小写不敏感的匹配 g:执行全局匹配(查找所有匹配而非在找到第一个匹配后停止) m:执行多行匹配 元字符  元字符是表达式语法的一部分,在正则表达式中用到的所有元字符有:{ [ ( \ ^ $ |

  • JavaScript的MVVM库Vue.js入门学习笔记

    一.v-bind 缩写 <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> <!-- 完整语法 --> <button v-bind:disabled="someDynamicCondition">Button</button> <!-- 缩写

  • JS性能优化笔记搜索整理

    通过网上查找资料了解关于性能优化方面的内容,现简单整理,仅供大家在优化的过程中参考使用,如有什么问题请及时提出,再做出相应的补充修改. 一. 让代码简洁:一些简略的表达方式也会产生很好的优化 eg:x=x+1;在不影响功能的情况下可以简写为x++; 二. 变量名方法名尽量在不影响语意的情况下简单.(可以选择首字母命名) eg:定义数组的长度可以取名为:ArrLen而不需要取为ArrayLength. 三. 关于JS的循环,循环是一种常用的流程控制. JS提供了三种循环:for(;;).while

  • js 正则表达式学习笔记之匹配字符串

    今天看了第5章几个例子,有点收获,记录下来当作回顾也当作分享. 关于匹配字符串问题,有很多种类型,今天讨论 js 代码里的字符串匹配.(因为我想学完之后写个语法高亮练手,所以用js代码当作例子) 复制代码 代码如下: var str1 = "我是字符串1哦,快把我取走", str2 = "我是字符串2哦,快把我取走"; 比如这样一个字符串,匹配起来很简单 /"[^"]*"/g 即可.   PS: 白色截图是 chrome 34 控制台中

  • CentOS上安装Node.js和mongodb笔记

    之前听说过Node.js,只是知道它可以应用于服务器端,但是对很多具体的东西并不了解.今天在QCon上听了袁锋的分享<Node.js脱离了浏览器的Javascript>之后,顿时有了想立刻试一下的冲动. Node.js的安装步骤算是比较简单,没有太多的弯路,主要参考文档: Building and Installing Node.js 1. 安装Python 根据参考文档说明,从源代码编译安装Node.js需要python2.6或者以上,而通过yum install python.x86_64

  • JS宝典学习笔记(下)

    56.JS中的焦点顺序:document.getElementByid("表单元素").tabIndex = 1 57.innerHTML的值是表单元素的值:如<p id="para">"how are <em>you</em>"</p>,则innerHTML的值就是:how are <em>you</em> 58.innerTEXT的值和上面的一样,只不过不会把<em

  • js宝典学习笔记(上)

    1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document) 5.得到表单中元素的名称和值:document.getElementById("表单中元素的ID号").name(或value) 6.一个小写转大

  • [转]JS宝典学习笔记

    1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document) 5.得到表单中元素的名称和值:document.getElementById("表单中元素的ID号").name(或value) 6.一个小写转大

随机推荐