sea js 的应用(代码未构建)

今天在项目中运用seajs, 用得挺来劲,觉得太帅了。我一定会把它发扬光大,下面来看看这个应用。

第一步: 还是需要把所有的库用require 包装起来

jquery:

define(function(require, exports, modules) {
    // jquery 的代码
return jQuery;
});

jquery 插件:

define(function(require) {
    var $, jQuery;
    $ = jQuery = require('jquery');

   // 插件的代码

});

特别注意对于highcharts, highstock, 以及exports, more 等的require;

highcharts:

define(function(require){
   // 代码
    return Highcharts;
}); 

highstock:

define(function(require){
   // 代码
    return Highcharts;
}); 

highcharts-more:

define(function(require) {
    var Highcharts = require('highstock'); // 注意这里如果前面是require highcharts, 这里就有问题,所以要require highstock

    // 代码

});

.....

也可以在文件中require 你需要的文件进来,如:

require('/AbnormalDetect/static/lib/nuit/others/My97DatePicker/WdatePicker.js');

第二步: seajs config



第三步: main.js

define(function(require){
    var $ = require('jquery'),
        TN = require('nuit'),
        baidu = TN.baidu,
        nuit = TN.nuit,

    // global
    global = require('../global/global.js'),
    api = global.api,
    NAME = global.name,
    TIME = global.time,
    TYPE = global.type,
    MONITOR = global.MONITOR,
    viewModel = global.viewModel,

    //dialog
    dialogW = require('../dialog/dialog.js'),
    dialog = dialogW.dialog,

    // bar 
    bar = require('../bar/bar.js');



require('/AbnormalDetect/static/lib/nuit/others/My97DatePicker/WdatePicker.js');


$(function(){
    bar.renderSidebar(TYPE);  // 从bar 模块引进来的

    $("#start").click(function(){
        WdatePicker({dateFmt:'yyyy-MM-dd'});
    });

});

});

renderSidebar模块

define(function(require){
    var $ = require('jquery'),
        // map
        map = require('../map/map.js'),

        // global
        global = require('../global/global.js'),
        api = global.api,
        NAME = global.name;

        require('underscore');

    function renderSidebar(type){
    }

    return {
        "renderSidebar":renderSidebar
    }
});

你可能感兴趣的:(seajs)