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

来源：互联网发布：社交软件英文翻译编辑：程序博客网时间：2024/06/01 08:39

之前有一篇文章介绍了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();});

一般用于页面中载入入口文件。

也可以使用<script>标签中加入data-main属性来代替seajs.use如下：

<!DOCTYPE HTML><html lang="zh-CN"><head>    <meta charset="UTF-8">    <title>TinyApp</title></head><body>    <p class="content"></p>    <script src="./sea.js" data-main="./init"></script></body></html>

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：

<!DOCTYPE HTML><html lang="zh-CN"><head>    <meta charset="UTF-8">    <title></title></head><body><div id="content">    <p class="author"></p>    <p class="blog"><a href="#">Blog</a></p></div> <script src="./sea.js" data-main="./init"></script></body></html>

js;

//init.jsdefine(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.jsdefine({    author: 'ZhangYang',    blog: 'http://blog.codinglabs.org'});

css:

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

好的，今天就到这吧！

0 0

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

前端技术交流群：139761568