LABJS使用教程

时间:2021-08-05 00:04:47

知道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:

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

实例3:

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

实例4:

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

实例5:

$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:

$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:

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

实例8:

$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使用教程的更多相关文章

  1. Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

  2. Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数

    上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

  3. Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数

    上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...

  4. Angular2入门系列教程4-服务

    上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...

  5. Angular2入门系列教程1-使用Angular-cli搭建Angular2开发环境

    一直在学Angular2,百忙之中抽点时间来写个简单的教程. 2016年是前端飞速发展的一年,前端越来越形成了(web component)组件化的编程模式:以前Jquery通吃一切的田园时代一去不复 ...

  6. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  7. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  8. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  9. Virtual Box配置CentOS7网络(图文教程)

    之前很多次安装CentOS7虚拟机,每次配置网络在网上找教程,今天总结一下,全图文配置,方便以后查看. Virtual Box可选的网络接入方式包括: NAT 网络地址转换模式(NAT,Network ...

随机推荐

  1. VC创建预编译文件

    Building a simple "hello world" Ogre application can take several seconds on a modern mach ...

  2. linux命令(13) 删除指定文件夹下后缀名相同的文件

    方法一: find 目录 -name "*.abc" | xargs rm命令有点危险,可以先执行前半段,看看是不是你要删除的文件, 然后再整条执行 方法二:find . -nam ...

  3. android SFC

    本系列适合0基础的人员,因为我就是从0开始的,此系列记录我步入Android开发的一些经验分享,望与君共勉!作为Android队伍中的一个新人的我,如果有什么不对的地方,还望不吝赐教. 在开始Andr ...

  4. cat监控平台环境搭建

    项目地址:https://github.com/dianping/cat 编译步骤: 这个项目比较另类,把编译需要的jar包,单独放在git分支mvn-repo里了,而且官方文档里给了一个错误的命令提 ...

  5. 百度站长平台MIP

    使用说明 MIP(Mobile Instant Pages - 移动网页加速器),是一套应用于移动网页的开放性技术标准.通过提供 MIP-HTML 规范.MIP-JS 运行环境以及 MIP-Cache ...

  6. JavaScript--浅谈!=、!==、==和===的区别

    == 和 != 比较若类型不同,先偿试转换类型,再作值比较,最后返回值比较结果 === 和 !== 只有在相同类型下,才会比较其值 <!DOCTYPE html> <html> ...

  7. nginx开启gzip压缩前端css&comma;js

    利用nginx实现前后端分离, nginx配置文件,nginx.conf配置采用gzip压缩: 在server中添加: gzip on; #开启gzip gzip_min_length 1k; #低于 ...

  8. java中多个数字运算后值不对(失真)处理方法

    最近遇到一个bug ,在java里面计算两个数字相减,633011.20-31296.30 得到的结果居然是601714.8999999999,丢失精度了,原来这是Java浮点运算的一个bug. 解决 ...

  9. Android 菜单之子菜单SubMenu

    子菜单就是在点击了菜单中的选项后弹出的要对菜单中选项操作的菜单           他的操作与之前的两种类型的菜单操作差不多 动态添加 @Override public boolean onCreat ...

  10. linux日常管理-系统服务

    开机不启动不必要系统服务,节省硬件资源,解决安全隐患 调整服务有两种办法 没有这个命令就安装一下.执行这个命令,出现下面界面 按空格键选择或取消,tab切换选择确定或取消 系统服务留下 crond i ...