`

LABJS使用实例

阅读更多

知道LABJS这个概念其实早于sea.js,但因为sea.js是中文,并且第一眼就喜欢上sea.js的CommonJS所以并没有深入了解过LABJS。

在 使用sea.js的时候不可避免的碰到js文件依赖问题,这时候才想起不到5k的LABJS来,看过手册之后俺不禁怀疑“有必要sea.js和labjs 一起使用么”,或许俺等到sea.js可以支持文件加载顺序之后再回到sea.js的怀抱?除了看起来美观和支持css外,没看到sea.js有什么更大 的优势,原有项目迁移到labjs上比迁移到sea.js上成本要小很多,而且labjs比sea.js小了近一半…

介绍下LABJS的几个实例:


实例1:

 
 
 
 
$LAB
    .script("script1.js")
    .script("script2.js")
    .script("script3.js")
    .wait(function(){ // 等待所有script加载完再执行这个代码块
        script1Func();
        script2Func();
        script3Func();
    });

实例2:

1
2
3
4
5
6
7
8
9
$LAB
    .script({ src: "script1.js", type: "text/javascript" })
    .script("script2.js")
    .script("script3.js")
    .wait(function(){ // 等待所有script加载完再执行这个代码块
        script1Func();
        script2Func();
        script3Func();
    });

实例3:

1
2
3
4
5
6
7
$LAB
    .script("script1.js", "script2.js", "script3.js")
    .wait(function(){ // 等待所有script加载完再执行这个代码块
        script1Func();
        script2Func();
        script3Func();
    });

实例4:

1
2
3
4
5
6
7
$LAB
    .script( [ "script1.js", "script2.js" ], "script3.js")
    .wait(function(){ // 等待所有script加载完再执行这个代码块
        script1Func();
        script2Func();
        script3Func();
    });

实例5:

1
2
3
4
5
6
$LAB
    .script("script1.js").wait() // 空的wait()只是确保script1在其他代码之前被执行
    .script("script2.js") // script2 和 script3 依赖于 script1
    .script("script3.js").wait() // 但是script2 和 script3 并不互相依赖,可以并行下载
    .script("script4.js") //  script4 依赖于 script1, script2 及 script3
    .wait(function(){script4Func();});

实例6:

1
2
3
4
5
6
7
8
9
$LAB
    .script("script1.js") // script1, script2, and script3 之间没有依赖关系,
    .script("script2.js") // 所以可以任意顺序执行
    .script("script3.js")
    .wait(function(){  // 如果需要,这里当然可以执行javascript函数
        alert("Scripts 1-3 are loaded!");
    })
    .script("script4.js") // 依赖于 script1, script2 及 script3
    .wait(function(){script4Func();});

实例7:

1
2
3
4
5
6
7
$LAB
    .setOptions({AlwaysPreserveOrder:true}) // 设置每个脚本之间等待
    .script("script1.js") // script1, script2, script3, script4 互相依赖
    .script("script2.js") // 并且并行下载后循序执行
    .script("script3.js")
    .script("script4.js")
    .wait(function(){script4Func();});

实例8:

1
2
3
4
5
6
7
8
9
10
11
12
$LAB
    .script(function(){
        // `_is_IE`的值ie为true ,非ie为false
        if (_is_IE) {
            return "ie.js"; // 如果是ie则这个js会被加载
        }
        else {
            return null; //如果不是ie这个代码就会被略过
        }
    })
    .script("script1.js")
    .wait();
分享到:
评论

相关推荐

    LABjs无阻塞脚本加载工具

    // 使用LABjs加载外部脚本 $LAB .script("path/to/script1.js") .wait(function() { // 脚本1加载完成后执行的回调函数 }) .script("path/to/script2.js") .wait(function() { // 脚本2加载完成后执行的回...

    LABjs-2.0.3

    使用LABjs可以显著改善网页性能,减少用户等待时间,提高网站的整体用户体验。它尤其适用于那些需要加载大量外部资源,且对性能有较高要求的网页。通过灵活的配置和强大的功能,LABjs成为前端开发者的强大工具之一。

    LABjs-master--js有序加载.rar

    在提供的"LABjs-master--js有序加载.rar"压缩包中,可能包含以下内容: 1. LAB.js的核心库文件(如`lab.min.js`或`lab.js`):这是实现脚本有序加载的关键文件,包含了LAB.js的全部功能。 2. 示例代码或HTML文件:...

    前端项目-labjs.zip

    前端项目-labjs,labjs(加载和阻塞javascript)是一个由getify解决方案支持的开源(mit许可证)项目。...使用labjs加载脚本可以减少页面加载过程中的资源阻塞,这是优化站点性能的一种简单有效的方法。

    详谈LABJS按需动态加载js文件

    LABjs 是一个很小的 JavaScript 工具,用来根据需要加载 JavaScript 文件,通过使用该工具可以提升页面的性能,避免加载不需用到的 JavaScript 文件,可以实现动态并行加载脚本文件,以及管理加载脚本文件的执行顺序...

    LABjs、RequireJS、SeaJS的区别

    一、LABjs 的核心是 LAB(Loading and Blocking):Loading 指异步...模块加载器也可降级为文件加载器用,因此使用 RequireJS 和 SeaJS,也可以达成 LABjs 的性能优化目的。 三、RequireJS 和 SeaJS 都是很不错的模块加

    labjs-downloader:一个在Rs VM中打包Ring VM的存储库,用于运行愚蠢的小Labjs脚本来解压缩SQLite实验数据

    见run_script.sh对于如何启动一个实例RScript过程,在这种情况下, sqlite_to_csv.R从labjs分布。 建立 您可以构建一个名为r.sif的本地奇点图像,但这需要root: sudo singularity build r.sif r.def 或者,在...

    使用jQuery异步加载 JavaScript脚本解决方案

    目前流行的几个加载器,像 curljs、LABjs 和 RequireJS 使用都很广泛。他们功能强大的,但有些情况下可以有更简单的方案。 如果你正在使用 jQuery,有一个内置的方法可以用来加载脚本。如果你想延迟加载插件或任何...

    移动延迟加载框架的比较测试

    本文将对几款常用的JavaScript(JS)延迟加载框架进行对比测试,包括Controljs、LABjs、Sea.js、In.js以及Do.js。 #### Controljs Controljs是一种模块化脚本加载器,允许开发者以声明的方式加载依赖项。通过`...

    Web前端模块化框架BrowserRequire.zip

    BrowserRequire 是给浏览器使用的模块化框架,并且提供灵活加载js文件(非模块化文件)的功能。 中文使用指南:点击进入! 目录介绍 dist————BrowserRequire框架压缩文件 example————示范案例 ...

    yepnope.js使用详解及示例分享

    yepnope.js的使用实例演示了如何通过传入不同的参数进行资源加载。比如,可以仅传入一个资源的URL字符串,或传入一个对象来指定不同的加载参数。开发者还可以通过传入一个对象,并在其中定义测试条件、加载资源以及...

    前端编码规范.docx

    - 对于需要兼容老旧浏览器的情况,可以使用脚本加载器如yepnope或labjs等来实现异步加载。 #### 八、总结 前端编码规范的制定和实施对于保证项目的长期成功至关重要。通过遵循这些规范,不仅可以提高代码质量,还...

    kissy模块化实践

    - **现代**:动态并行加载、模块依赖管理、自动化压缩打包技术成熟,如LabJS、YUI3/Kissy和Closure Library等工具应运而生。 其中,**Kissy框架**的模块化实践尤为突出。Kissy借鉴了YUI3的模块化设计理念,采用`S....

    in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案

    国外的像基于jQuery的RequireJs,YUI Loader,LabJs,RunJs,国内也有淘宝的SeaJs,豆瓣的DoJs等,这些都是一些十分优秀的模块加载器。但是本文将会向大家介绍一个新的开源的轻量级“多线程”异步模块加载器In.js,...

    高性能的javascript之加载顺序与执行原理篇

    最后,推荐使用LABjs等库来动态延迟加载JavaScript文件。这些库能够更方便地管理脚本加载的依赖关系,并且可以提供更为复杂和高级的加载策略。比如,LABjs库被推荐用于解决JavaScript文件的加载顺序和执行的问题,...

    如何在Yslow中获得A并调整您的网站

    9. **异步加载**:利用`async`或`defer`属性,或第三方库如 LABjs 来异步加载JavaScript。 10. **检查和升级**:定期检查新出现的性能优化技术,如HTTP/2,适时进行升级。 通过这些步骤,你的网站将在Yslow评分中...

    动态加载jquery库的方法

    有一些第三方JavaScript库可以帮助管理页面上的脚本加载,如RequireJS或LABjs等。这些库支持按需加载和依赖管理,它们可以简化动态加载资源的过程。 例如,RequireJS通过定义模块之间的依赖关系来按需加载脚本,...

Global site tag (gtag.js) - Google Analytics