今天在项目中运用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
}
});
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。