2

今天在项目中运用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

<script type="text/javascript" src="static/lib/seajs/2.3.0/sea.js"  id="seajsnode"></script>
<script type="text/javascript">
    seajs.config({
        alias: {
            'jquery': 'lib/jquery/1.7.2/jquery-1.7.2.min-cmd.js',
            'underscore': 'lib/underscore/underscore-min-cmd.js',
            'highcharts':'lib/highcharts/highcharts-cmd.js',
            'highstock':'lib/highcharts/highstock-cmd.js',
            "more": 'lib/highcharts/highcharts-more-cmd.js',
            "knockout": 'lib/knockout/3.0.0/knockout-3.0.0-cmd.js',
            'validate': 'lib/validate/jquery.validate.min-cmd.js',
            'nuit':'lib/nuit/nuit.min-cmd.js'
        },
        base: '/AbnormalDetect/static/modules/', // 基础路径
        paths: {
            'modules': '/AbnormalDetect/static/modules/', // modules基础路径
            'lib': '/AbnormalDetect/static/lib' // lib 基础路径
        }
    });
    seajs.use("abnormal/main/main");
</script>

第三步: 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
    }
});

小渝人儿
1.1k 声望849 粉丝

前端工程师


引用和评论

0 条评论