应用程序入口

前端界面 使用 RequireJS 管理所有前端的 JavaScript 脚本,因此在起始页面中需要引入 RequireJS 并通过 data-main 属性,指定其加载的应用程序入口文件(也就是上面代码中的 scripts/main.js 文件),RequireJS 会自动执行该文件。其大致内容如下:

// main.js
define([
        'jquery',
        'cdeio/cdeio',
        'application',
    ], function($, cdeio) {

        $(function() {
            var app = window.app = cdeio.startApplication('application');
        });
    });

通过 define 方法引入了三个脚本,并于回调方法中,在 DomReady 事件里启动应用程序, cdeio.startApplication('application') 调用的是application.js文件,具体如下:

// application.js
define([
    'jquery',
    'underscore',
    'cdeio/cdeio',
    'cdeio/applications/default',
    'cdeio/core/config',
    'cdeio/vendors/ace-elements',
    'cdeio/vendors/ace'
], function($, _, cdeio, createDefault, config) {

    return function(options) {
        $.ajaxSetup({
            cache: false
        });

        var app, deferred = $.Deferred();

        options = _.extend(options, { useDefaultHome: false });
        app = createDefault(options);
        app.config = config;

        app.done(function() {
            if (location.hash) {
                app.startFeature('main/viewport', { container: $(document.body), ignoreExists: true }).done(function() {
                    deferred.resolve();
                });
            } else {
                deferred.resolve();
            }
        });

        app.addPromise(deferred.promise());
        return app;
    };

});

app.startFeature 是用来开始一个功能,此文件逻辑根据实际项目需求自由发挥。 application.js 一般是项目首次进入的呈现功能,也可以当作是项目布局(常用的是有上面logo,左边菜单,右边功能这种上),而进入之后的项目其它功能,通常借助 前端路由器 来开启。