首页 > 代码库 > 使用seajs进行模块化前端开发

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

2024-08-05 15:18:03   220人阅读

之前有一篇文章介绍了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=http://www.mamicode.com/"./sea.js" data-main="./init"></script>>
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=http://www.mamicode.com/"./sea.js" data-main="./init"></script>>
js;
//init.js
define(function(require, exports, module) {
    var $ = require('./jquery');
    var data = http://www.mamicode.com/require('./data');>
css:
.author{color:red;font-size:10pt;}
.blog{font-size:10pt;}

好的，今天就到这吧！
前端技术交流群：139761568







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


    联系
    我们