JavaScript-Javascript如何实现按需加载？
项目大了一下子把js文件加载尽量也很费力，有没有完善的框架支持javascript按需加载？
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
项目大了一下子把js文件加载尽量也很费力，有没有完善的框架支持javascript按需加载？
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
发布评论
评论（5）
其实按需加载并不像想象中那么复杂，只是通过某些方式控制js加载的时机罢了。
这里分享一个文章，可以看看按需加载的简单实现。
http://hi.baidu.com/zhouwanquan/item/575d40c60f1ac453ac00eff3
代码如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>按需载入JavaScript代码的例子</title>
<script type="text/javascript">
function JsLoader(){
this.load=function(url){
//获取所有的<script>标记
var ss=document.getElementsByTagName("script");
//判断指定的文件是否已经包含，如果已包含则触发onsuccess事件并返回
for (i=0;i<ss.length;i++){
if (ss[i].src && ss[i].src.indexOf(url)!=-1){
this.onsuccess();
return;
}
}
//创建script结点,并将其属性设为外联JavaScript文件
s=document.createElement("script");
s.type="text/javascript";
s.src=url;
//获取head结点，并将<script>插入到其中
var head=document.getElementsByTagName("head")[0];
head.appendChild(s);
//获取自身的引用
var self=this;
//对于IE浏览器，使用readystatechange事件判断是否载入成功
//对于其他浏览器，使用onload事件判断载入是否成功
//s.onload=s.onreadystatechange=function(){
s.onload=s.onreadystatechange=function(){
//在此函数中this指针指的是s结点对象，而不是JsLoader实例,
//所以必须用self来调用onsuccess事件，下同。
if (this.readyState && this.readyState=="loading") return;
self.onsuccess();
}
s.onerror=function(){
head.removeChild(s);
self.onfailure();
}
};
//定义载入成功事件
this.onsuccess=function(){};
//定义失败事件
this.onfailure=function(){};
}
function btnClick(){
//创建对象
var jsLoader=new JsLoader();
//定义载入成功处理程序
jsLoader.onsuccess=function(){
sayHello();
}
//定义载入失败处理程序
jsLoader.onfailure=function(){
alert("文件载入失败！");
}
//开始载入
jsLoader.load("hello.js");
}
</script>
</head>
<body>
<label>
<input type="submit" name="Submit" onClick="javascript:btnClick()" value="载入JavaScript文件">
</label>
</body>
</html>
hello.js文件
// JavaScript Document
function sayHello(){
alert("Hello World!成功载入JavaScript文件");
}
Seajs是个不错的选择
可以使用jQuery.getScript()来进行按需加载。
建议看一些框架的实现，
比如：
http://dustindiaz.com/scriptjs
http://yepnopejs.com/（推荐）
http://www.andresvidal.com/jsl
在 SeaJS 的世界里，一个文件就是一个模块。所有模块都遵循 CMD 规范，我们可以像在 Node 环境中一样来书写模块代码。
还有RequireJS，它遵循的是Modules/AMD 规范；还有LABjs。
我在项目中是使用seajs的，模块化的开发很舒服。