动态加载JS和CSS文件(4)
loadScript(options.scripts, null, "body");
});
});
}
return { include: includeFile };
})()
};
/*
* 供外部调用接口
* include({cssFiles:[], scripts:[]})
*/
var include = function (options) {
JSLoader.call.include(options);
}
当引入这个文件后，我们页面所有剩下要做的事情就是引入它和其他页面需要的文件列表(注意：我们可以预先引入很多公共js)，大致的文件结构如下：
<head id="" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--主加载文件-->
<script src="Scripts/JSLoader.js" type="text/javascript"></script>
<!--加载文件列表-->
<script type="text/javascript">
//建议先加载css文件以便页面渲染，后加载页面所要的js文件
//注意: 这里jQuery已经自动引入，我们放心使用便是
include({
cssFiles:["styles/tree.css", "styles/main.css", "styles/login.css",...],
scripts:["scripts/jquery.extends.js", "scripts/array.extends.js",...]
});
</script>
</head>
对了，顺便说一句，我们是可以通过配置去修改这个文件结构的，我们可以将那些需要的页面文件写到配置文件，然后单独建一个JS文件去调用，然后再将这个JS嵌入页面，尽最大程度与页面代码发生分离。还要记住一个普适原则，css文件一般放在head中，script文件分两种: 页面渲染和预备文件一般放在head中，而页面事件文件一般放在body中(仅是原则供参考)。
作者 hmiinyu
相关新闻>>
- 发表评论
-
- 最新评论 更多>>
