使用seajs进行模块化前端开发

之前有一篇文章介绍了requireJS进行模块化开发,今天来说高大上的国产SeaJS的吧,是的SeaJS遵循的是CMD规范。作者是淘宝前端工程师,名字叫玉伯。此解决方案的宗旨是使前端工程师从繁重的js文件及对象依赖处理中解救出来,从而可以专注代码的逻辑本身。

要使用SeaJs,只要下载sea.js文件,然后直接包含在html文件中就可以了,那么如何定义能被seajs加载的模块呢?请看下面的这段源码:

fn.define = function(id, deps, factory) {
//code of function…
}
define函数可以接受三个参数,但是你也可以只传一个参数,即factory。这也是官方推荐的做法。各参数的解释如下:

id:即模块id,如http://example/a,代表一个模块的绝对路径,a就是此模块文件名如a.js。

deps:表示需要此模块要用到的其他模块。

factory:表示工厂函数,这是模块的主体,也是最重要的部分。

下面来详细解释一下工厂函数:

define(function(require, exports, module) {
//code of the module...
});
这里只传了factory一个参数,factory其实是一个匿名函数,里面的几个参数表示如下:

require:此模块需要依赖的其他模块。

exports:模块对外提供接口。

module:模块元数据。

下面来介绍一下定义模块的几种方式:

.基于exports的模式:

define(function(require, exports, module) {
var a = require('a'); //引入a模块
var b = require('b'); //引入b模块

var data1 = 1; //私有数据

var func1 = function() { //私有方法
    return a.run(data1);
}

exports.data2 = 2; //公共数据

exports.func2 = function() { //公共方法
    return 'hello';
}

});

这是比较常用的方式,还可以直接返回一个对象:如下:
define(function(require) {
var a = require('a'); //引入a模块
var b = require('b'); //引入b模块

var data1 = 1; //私有数据

var func1 = function() { //私有方法
    return a.run(data1);
}

return {
    data2: 2,
    func2: function() {
        return 'hello';
    }
};

});

如果模块中只有一个对象,可以简化这样:
define({
data: 1,
func: function() {
return 'hello';
}
});
最后一种方法适合纯json数据的模块开发。

写好了模块,那么怎么来使用它们呢?

模块的载入和引用:

require("http://example/js/a");

表示载入http://example/js/a.js这个文件。
也可以用相对地址:

require("./c");
表示载入http://example/js/c.js这个文件。

require("./module1-style.css");
表示载入css文件。

seajs.use主要用于载入入口模块,就像c里面的main函数一样样,如下:

//单一模式
seajs.use('./a');

//回调模式
seajs.use('./a', function(a) {
a.run();
});

//多模块模式
seajs.use(['./a', './b'], function(a, b) {
a.run();
b.run();
});

一般用于页面中载入入口文件。
也可以使用

require.async:
require.async('/path/to/module/file', function(m) {
//code of callback...
});

这种方法会异步加载模块,即需要使用摸个模块的时候再加载。

SeaJS的全局配置:

seajs.config({
base: 'path/to/jslib/',
alias: {
'app': 'path/to/app/'
},
charset: 'utf-8',
timeout: 20000,
debug: false
});

base:表示基址路径,设置了它可以简化require的加载路径。
alias:别名,可以对较长的路径进行缩写。

剩下的没那么重要了,略过。

那么SeaJs如何与其他js框架配合使用呢?这也是大家最关心的问题了吧。

就拿jquery来吧,我们需要对jquery的源码进行封装,你也可以直接用npm来直接下载已经封装好的jquery,但是我试了下,好像淘宝的服务器抽风了,下下来的是损坏的文件。自己动手.....

define(function() {

//{{{jQuery原有代码开始
/*!

  • jQuery JavaScript Library v1.6.1
  • http://jquery.com/
  • Copyright 2011, John Resig
  • Dual licensed under the MIT or GPL Version 2 licenses.
  • http://jquery.org/license
  • Includes Sizzle.js
  • http://sizzlejs.com/
  • Copyright 2011, The Dojo Foundation
  • Released under the MIT, BSD, and GPL Licenses.
  • Date: Thu May 12 15:04:36 2011 -0400
    */
    //...
    //}}}jQuery原有代码结束

return $.noConflict();
});

下面来介绍一个完整的例子吧:
index.html——主页面。
sea.js——SeaJS脚本。
init.js——init模块,入口模块,依赖data、jquery、style三个模块。由主页面载入。
data.js——data模块,纯json数据模块,由init载入。
jquery.js——jquery模块,对 jQuery库的模块化封装,由init载入。
style.css——CSS样式表,作为style模块由init载入。
sea.js和jquery.js的代码属于库代码,就不赘述,这里只给出自己编写的文件的代码。
html:









js;
//init.js
define(function(require, exports, module) {
var $ = require('./jquery');
var data = require('./data');
var css = require('./style.css');

$('.author').html(data.author);
$('.blog').attr('href', data.blog);

});

//data.js
define({
author: 'ZhangYang',
blog: 'http://blog.codinglabs.org'
});

css:
.author{color:red;font-size:10pt;}
.blog{font-size:10pt;}

好的,今天就到这吧!

作者:微个日光日
来源:CSDN
原文:https://blog.csdn.net/xiebaochun/article/details/41674901
版权声明:本文为博主原创文章,转载请附上博文链接!

你可能感兴趣的:(使用seajs进行模块化前端开发)