Appearance

调用脚本

页面脚本统一使用了requirejs来引入,外调js通过页面body data-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(){

  //页面执行方法

});