调用脚本
页面脚本统一使用了
requirejs
来引入,外调js通过页面bodydata-js
属性来指定当前页应用脚本调用文件名(放置在js/app/
目录中)及函数,这样既方便模块化,又便于文件的组织。
js外调执行
html代码:
body的 data-js
属性
<body data-js="sys:users"><!-- 调用 js/app/sys.js,执行文件中的users方法 -->
<body data-js="project"><!-- 不书写方法名,默认调用init方法,这里执行了js/app/project.js文件中的init方法,省略 :init 的书写 -->
<body data-js="sys:reprot||chart:reprot"><!-- 多文件多方法调用:执行js/app/sys.js中的reprot方法和js/app/chart.js中的reprot方法 -->
页面底部的js代码调用,js/main
是require所有脚本的入口
<script src="js/require.js" data-main="js/main"></script>
js代码:
js/app/sys.js
中代码如:
define(function (template) {
var back ={
init : function(){
... //页面执行方法
},
users : function () {
... //页面执行方法
}
}
return back;
});
js全部在页面中执行
为了方便很多时候,我们也可以直接把js文件全部书写在页面底部
js文件引用:
<script type="text/javascript" src="js/require.js"></script>
<script type="text/javascript" src="js/config.require.js"></script>
js代码:
require(["pub"],function(){
//页面执行方法
});