LABJS的使用教程

dreamans 发布于2019-08-21 10:41 / 1988人阅读

摘要：我们先下载官网地址比较两者加载的区别传统的加载方式采用加载我们可以看到，使用的方式代码上显示比较简洁。几个简单的案例三个文件之间不存在依赖，异步加载为加载的文件指定类型它还有很多更好玩的用法，大家可以到官网上研究一番。

看到LABjs的时候是因为当初希望实现js的异步加载，因为项目的历史原因，在页面中需要引用大量的js文件，为了优化页面的加载速度，做了不少的处理，在使用LABjs的过程中发现这插件真的很棒，原本页面的初始加载时间需要4S左右的，在使用LABjs后，页面的加载速度只需要2S-2.3S之间就完成了，它编写简单明了，当然也有其他工具可以达到与它一样的效果，在此不作比较，希望大家能够喜欢这款插件（它仅仅只有6kb）。
我们先下载LABjs

官网地址"http://labjs.com/"

比较两者加载的区别

/**
*传统的JS加载方式
**/





/**
*采用LABjs加载
**/

我们可以看到，使用LABjs的方式代码上显示比较简洁。

几个简单的案例

Example 1:

/**
*三个js文件之间不存在依赖，异步加载
**/
$LAB
.script("script1.js")
.script("script2.js")
.script("script3.js")
.wait(function(){ // wait for all scripts to execute first
    script1Func();
    script2Func();
    script3Func();
});

Example 2:

/**
*为加载的js文件指定类型
**/
$LAB    
.script({ src: "script1.js", type: "text/javascript" })
.script("script2.js")
.script("script3.js")
.wait(function(){ // wait for all scripts to execute first
    script1Func();
    script2Func();
    script3Func();
});

Example 3:

$LAB
.script("script1.js", "script2.js", "script3.js")
.wait(function(){ // wait for all scripts to execute first
    script1Func();
    script2Func();
    script3Func();
});

Example 4:

$LAB
.script( [ "script1.js", "script2.js" ], "script3.js")
.wait(function(){ // wait for all scripts to execute first
    script1Func();
    script2Func();
    script3Func();
});

Example 5:

$LAB
.script("script1.js").wait() // empty wait() simply ensures execution order be preserved for this script
.script("script2.js") // both script2 and script3 depend on script1 being executed before
.script("script3.js").wait() // but are not dependent on each other and can execute in any order
.script("script4.js") // depends on script1, script2 and script3 being loaded before
.wait(function(){script4Func();});

Example 6:

$LAB
.script("script1.js") // script1, script2, and script3 do not depend on each other, 
.script("script2.js") // so execute in any order
.script("script3.js")
.wait(function(){  // can still have executable wait(...) functions if you need to
    alert("Scripts 1-3 are loaded!");
})
.script("script4.js") // depends on script1, script2 and script3 being executed before
.wait(function(){script4Func();});

它还有很多更好玩的用法，大家可以到官网上研究一番。赶紧试下它的效果，真的会给你带来惊喜的。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86010.html

《高性能JavaScript》（读书笔记）

摘要：加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。异步加载，和，浏览器不会失去响应它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。插件，可以让回调函数在页面结构加载完成后再运行。这次主要是对《高性能JavaScript》一书的读书笔记，记录下自己之前没有注意到或者需要引起重视的地方第一章加载和执行 js代码在执行过程中会阻塞浏览...

moven_j 2019-08-21 17:58 评论0 收藏0
JavaScript模块化开发的演进历程

摘要：参考精读模块化发展模块化七日谈前端模块化开发那点历史本文先发布于我的个人博客模块化开发的演进历程，后续如有更新，可以查看原文。 Brendan Eich用了10天就创造了JavaScript，因为当时的需求定位，导致了在设计之初，在语言层就不包含很多高级语言的特性，其中就包括模块这个特性，但是经过了这么多年的发展，如今对JavaScript的需求已经远远超出了Brendan Eich的...

anonymoussf 2019-08-21 16:22 评论0 收藏0
Javascript加载执行方法总结

摘要：区别在于执行时机，是加载完成后自动执行，，而需要等待页面完成后执行。一旦新的元素被添加到文档，代码将会被执行。这样的好处是，可以下载但不是立即执行代码，还有一个好处是兼容性好。最好无论文件是以什么样的方式加载的。 Javascript在浏览器性能中，这可能是所有开发者比较关注的问题，因为Javascript有阻塞的特征，也就是当Javascript运行的时候，浏览器不会处理其他的任务。...

Coding01 2019-08-20 11:21 评论0 收藏0
自制 require 函数：让浏览器轻松实现 js 文件按需加载

摘要：剧透一下，实现这个功能只需要行代码。如何判断文件已经加载完毕可以在文件里执行一个函数，通知大家，我已经加载完了。唉？这种文章你也点进来看，你不知道有 LABjs、RequireJS、SeaJS... 这些库吗？反正我是没用过这些库，什么 AMD 、CMD 哪来那么多术语... 前端的库太多了，要看各种乱七八糟的文档，看文档就想睡觉，就像学一门新语言一样，好烦啊，还不如自己写一个库呢...

qianfeng 2019-08-20 12:27 评论0 收藏0
HTML中的script标签研究

摘要：的堵塞特性上面引用两段话的意思大致是，当浏览器解析文档时，一旦遇到标签没有和属性就会立即下载并执行，与此同时浏览器对文档的解析将会停止，直到代码执行完成。实现代码执行代码缺点是不能跨域请求参考装载和执行元素所著的的第一章 Script 的堵塞(block)特性 Scripts without async or defer attributes, as well as inlin...

ernest.wang 2019-08-21 10:32 评论0 收藏0