一.业务页面

业务页面即入口页面有两种模式，一种为自动模式，该模式根据钩子调用init.js脚本，实现异步串行加载业务页面所需的所有脚本文件；一种为手动模式，手动模式即手动引入页面所需的所有脚本文件，业务脚本代码可放在页面中。

自动模式：

<script type="text/javascript">
      /*var static_url = 'http://localhost:8862';*/
    </script>
    <script id="ENTRY" data-type="amd" data-app="amd-requireJs-demo" data-module="" data-page="login" src="http://localhost:8861/static/init.js"></script>

static_url变量为静态资源域，如不设置和设置为空，则自动为当前业务页面使用的域；
引入init.js文件的代码中设置了一个id和4个data标签，分别作用为：

- id="ENTRY" 入口脚本的标识，不可变，用于识别当前页面是否使用自动模式；
- data-type="amd" 加载器模式，可选amd或者cmd，分别代码了requireJs和seaJs；
- data-app="amd-requireJs-demo" 当前页面所属的app名，或者app下的某个系统单元（当把方案作为某一个app时）；
- data-module="" 当前页面所属app的系统单元，设置为空时代表没有细分系统单元；
- data-page="login" 当前面的业务脚本名，省略".js"后缀；
调试查看的效果为：

支持seaJs和requireJs的前端模块开发方案（二）：业务页面和入口脚本init.js一.业务页面二.入口脚本init.js

手动模式：

<script src="http://localhost:8861/static/libs/amd/require/2.2.0/require.min.js"></script>
<script src="http://localhost:8861/static/alias.js"></script>
<script src="http://localhost:8861/static/apps/amd-requireJs-demo/js/config.js"></script>
<script type="text/javascript">
require(['jquery','global'], function ($,gloabl) {
    console.log('非自动');
    var val = $('input[name="seller_name"]').val();
    $('input[name="seller_name"]').val(val+'--');
    console.log("login.js--->我是入口脚本,成功获取到了本页的标题："+document.title);
});
</script>

手动模式就不过多讲解，和常规写法一致。

二.入口脚本init.js

脚本主要对实现2个功能：抛出自动模式下的全局变量、实现异步串行加载所需JS文件。

window.ENTRY_CONF = window.ENTRY_CONF || {
    // web域，自动获取当前域
    SITE_URL: document.location.protocol + "//" + location.hostname + (location.port ? ":" + location.port : "") + "/",
    // 页面运行开始时间
    STIME: new Date().getTime(),
    //识别节点
    NODE: document.getElementById("ENTRY"),
    // 是否自动加载JS
    AUTO_LOAD_SCRIPTS: function() {
        return this.NODE !== null ? true : false; 
    },
    // 提取架构方式
    TYPE: function() {
        var tp = this.NODE.getAttribute("data-type");
        if (tp === 'cmd' || tp === 'CMD') return 'cmd';
        else if (tp === 'amd' || tp === 'AMD') return 'amd';
    },
    // 当前所属应用标识
    APP: function() {
        var app = this.NODE.getAttribute("data-app")
        return app === '' || app === null ? '' : "apps/" + app + '/';
    },
    // 当前所属应用下的系统模块
    MODULE: function() {
        var mod = this.NODE.getAttribute("data-module")
        return mod === '' || mod === null ? 'js/' : mod + '/js/';
    },
    // 当前所属应用下的系统模块
    PAGE: function() {
        var page = this.NODE.getAttribute("data-page")
        return page === '' || page === null ? '' : '/' + page;
    },
    // static资源域，优先获取页面定义的static_url
    SITE_STATIC_URL: function() {
        return 'undefined' === typeof static_url || '' === static_url ? this.SITE_URL : static_url + "/"; 
    },
    // 静态资源目录，当SITE_STATIC_URL为web域时使用
    STATIC_FOLDER: function() {
        return this.SITE_STATIC_URL() === this.SITE_URL ? this.SITE_STATIC_URL() + 'static/' : this.SITE_STATIC_URL(); 
    },
    // 第三方资源目录细化路径  LIBS_FOLDER
    LIBS_FOLDER: function() {
        if (this.TYPE() === 'cmd') return this.STATIC_FOLDER() + 'libs/';
        else if (this.TYPE() === 'amd') return this.STATIC_FOLDER() + 'libs/';
    },
    // 自有资产目录细化路径
    ASSETS_FOLDER: function() {
        return this.STATIC_FOLDER() + 'assets/js/'; 
    },
    // 是否合并资源
    COMBO: false
};
//资源路径（全局）
var _LIBSURL = ENTRY_CONF.LIBS_FOLDER()+ENTRY_CONF.TYPE()+'/';
var _ASSETSURL = ENTRY_CONF.ASSETS_FOLDER()+ENTRY_CONF.TYPE()+'/';
var _SYSTEMURL = ENTRY_CONF.STATIC_FOLDER() + ENTRY_CONF.APP() + ENTRY_CONF.MODULE();

上面代码中定义了一些全局变量，并且抛出了3个资源路径变量分别为：_LIBSURL、_ASSETSURL、_SYSTEMURL，这3个变量代表了第三方公共资源目录、私有公共资源目录、app系统或系统下模块的资源目录。

接下来就是实现异步串行加载所需JS文件，代码如下：

// 入口
var entry = function() {
    if (!ENTRY_CONF.AUTO_LOAD_SCRIPTS()) {
        return false;
    }
    this.stime = ENTRY_CONF.STIME;
    this.staticFolder = ENTRY_CONF.STATIC_FOLDER();
    this.labsFolder = ENTRY_CONF.LIBS_FOLDER();
    this.combo = ENTRY_CONF.COMBO;
    this.type = ENTRY_CONF.TYPE();
    this.app = ENTRY_CONF.APP();
    this.module = ENTRY_CONF.MODULE();
    this.page = ENTRY_CONF.PAGE();
    this.init();
};
entry.prototype.init = function() {
    var self = this;
    var scripts = self.getScripts();
    self.seriesLoadScripts(scripts, function() {
        return self.callback();
    });
};
entry.prototype.getScripts = function() {
    var self = this,
        loaderJs,
        comboJs,
        loaderAliasJs,
        loaderConfigJs,
        pageJs;
    //加载器脚本 及 合并辅件
    if (self.combo) {
        if (self.type === 'cmd' || self.type === 'CMD') {
            publicUrl = self.staticFolder + "/??",
            loaderJs = publicUrl + "libs/cmd/seajs/seajs/2.1.1/sea.js"; //加载器脚本
            comboJs = ",libs/cmd/seajs/seajs-combo/1.0.1/seajs-combo.js"; //加载器脚本
            loaderAliasJs = ",alias.js"; //总配置脚本
            loaderConfigJs = "," + self.app + self.module + 'config.js'; //模块配置脚本
            pageJs = "," + self.app + self.module + self.page + '.js'; //业务脚本
            return [loaderJs + comboJs + loaderAliasJs + loaderConfigJs + pageJs]; //返回arr
            //demo->http://localhost:8861/static//??libs/cmd/seajs/seajs/2.1.1/sea.js,alias.js,apps/app2/js/config.js,apps/app2/js/login.js
        } else {
            console.log("requireJs无法自动合并模块路径，请关闭combo或改用cmd模式")
            return false;
        }
    } else {
        //加载器脚本
        if (self.type === 'cmd' || self.type === 'CMD') loaderJs = self.labsFolder + "cmd/seajs/seajs/2.1.1/sea.js";
        else if (self.type === 'amd' || self.type === 'AMD') loaderJs =  self.labsFolder + "amd/require/2.2.0/require.min.js";
        loaderAliasJs = self.staticFolder + "alias.js"; //总配置脚本
        loaderConfigJs = self.staticFolder + self.app + self.module + 'config.js'; //模块配置脚本
        pageJs = self.staticFolder + self.app + self.module + self.page + '.js'; //业务脚本
        return [loaderJs, loaderAliasJs, loaderConfigJs, pageJs]; //返回arr
    }
};
entry.prototype.seriesLoadScripts = function(scripts, callback) {
    if (typeof(scripts) != "object") var scripts = [scripts];
    var s = new Array(),
        last = scripts.length - 1,
        recursiveLoad = function(i) {
            s[i] = document.createElement("script");
            s[i].setAttribute("src", scripts[i]);
            s[i].onload = s[i].onreadystatechange = function() {
                if (! /* @[email protected] */ 0 || this.readyState == "loaded" || this.readyState == "complete") {
                    this.onload = this.onreadystatechange = null;
                    if (i !== last) recursiveLoad(i + 1);
                    else if (typeof(callback) === "function") callback();
                }
            }
            document.body.appendChild(s[i]);
        };
    recursiveLoad(0);
};
entry.prototype.callback = function() {};
//启用
new entry();

以上代码根据页面设置的钩子信息和window.ENTRY_CONF配置，异步串行加载了页面所需的脚本。在使用seaJs作为加载器时，有一个combo配置，开通的话会自动书写合并形式如“http://localhost:8861/static//??libs/cmd/seajs/seajs/2.1.1/sea.js,alias.js,apps/app2/js/config.js,apps/app2/js/login.js”；但是用requireJs作为加载器时无法自动进行合并，因为require.js配套的r.js辅件需要node环境，但是seaJs配套的combo.js则为自动将模块间的引用进行合并。

支持seaJs和requireJs的前端模块开发方案（二）：业务页面和入口脚本init.js一.业务页面二.入口脚本init.js

一.业务页面

自动模式：

手动模式：

二.入口脚本init.js

继续阅读

requireJS的使用

requireJs 模块化编程立即执行函数写法

AMD规范、CMD规范、CommonJS

JS模块化:CommonJS，AMD与CMD# 兼容

使用requirejs编程实现模块化

requireJs | 在html中使用AMD规范

requireJs学习01作用域回顾

Seajs源码解析系列(一)

requirejs和seajs那些蛋疼事儿

Handlebars+requireJS学习

requireJS官网学习（2）

require.js入门简介——和派孔明

关于requireJS的适用场合以及与seaJS的比较

spm使用之五修改spm自带文档主题模板

牛人整理的前端知识体系大全与前端思维导图

Seajs源码解析系列（四）