本文转自张洋，因为SeaJS更新版本很快，所以原文中很多地方不太适用，在这里发布一个更新版。

前言

  SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制。使用SeaJS可以提高JavaScript代码的可读性和清晰度，解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题，方便代码的编写和维护。

SeaJS本身遵循KISS（Keep it Simple,Stupid）理念进行开发，后续的几个版本更新也都是吵着这个方向迈进。

如何使用SeaJS

下载及安装在这里不赘述了，不了解的请查询官网。

基本开发原则

  • 一切皆为模块：SeaJS中的模块概念有点类似于面向对象中的类--模块可以拥有数据和方法，数据和方法可以定义为公共或私有，公共数据和方法可以供别的模块调用。
  • 每个模块应该都定义在一个单独的js文件中，即一个对应一个模块。

模块的定义和编写

模块定义函数define

SeaJS中使用define函数定义一个模块。define可以接收三个参数：

/**

* Defines a module.

* @param {string=} id The module id.

* @param {Array.|string=} deps The module dependencies.

* @param {function()|Object} factory The module factory function.

*/

fn.define = function(id, deps, factory) {

    //code of function…

}

define可以接收的参数分别是模块ID，依赖模块数组及工厂函数。

  • 如果只有一个参数，则赋值给factory
  • 如果有两个参数，第二个赋值给factory，第一个如果是数组则赋值给deps，否则赋值给id
  • 如果有三个参数，则分别赋值

但是，包括SeaJS官网示例在内几乎所有用到define的地方都只传递一个工厂函数进去，类似于如下代码：

define(function(require,exports,module){

    //code of the module

})

个人建议遵循SeaJS官方示例的标准，用一个参数的define定义模块。那么id和deps会怎么处理呢？

  id是一个模块的标识字符串，define只有一个参数时，id会被默认赋值为此js文件的绝对路径。如example.com下的a.js文件中使用define定义模块，则这个模块的ID会赋值为 http://example.com/a.js ，没有特别的必要建议不要传入id。deps一般也不需要传入，需要用到的模块用require加载即可。

工厂函数factory解析

  工厂函数是模块的主体和重点。它的三个参数分别是：

  • require：模块加载函数，用于记载依赖模块
  • exports：接口点，将数据或方法定义在其上则将其暴露给外部调用
  • module：模块的元数据

    这三个参数可以根据需要选择是否需要显示指定。

module是一个对象，存储了模块的元信息，具体如下：

  • module.id：模块的ID
  • module.dependencies：一个数组，存储了此模块依赖的所有模块的ID列表。
  • module.exports：与exports指向同一个对象

三种编写模块的模式

第一种是基于exports的模式：

define(function(require,exports,module){

    var a=require('a');

    var b=require('b'); //引入模块

    var data1=1; //私有数据

    var fun1=function(){//私有方法

        return a.run(data1);

    }

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

    exports.fun2=function(){

        return 'hello';

    }

})

上面是一种比较“正宗”的模块定义模式。除了讲公共数据和方法附加在exports上，也可以直接返回一个对象表示模块，如下面的代码与上面的代码功能相同：

define(function(require){

    var a=require('a');

    var b=require('b'); //引入模块

    var data1=1;

    var fun1=function(){

        return a.run(data1);

    }

    return{

        data2:2,

        fun2:function(){

            return 'hello';

        }

    }

})

如果模块定义没有其他代码，只返回一个对象，还可以有如下简化写法：

define({

    data2:2,

        fun2:function(){

            return 'hello';

        }

    })

第三种写法对于定义纯JSON数据的模块非常合适。

根据应用场景的不同，SeaJS提供了三个载入模块的API，分别是：seajs.use,require和require.async。

seajs.use

seajs.use主要用于载入入口模块。入口模块相当于C语言的main函数，同时也是整个模块依赖树的根。seajs.use

的用法如下：

//第一模式

seajs.use('./a');

//回调模式

seajs.use('./a',function(a){

    a.run();

})

//多模块模式

seajs.use(['./a','./b'],function(a,b){

    a.run();

    b.run();

})

其中多模块的用法和KISSY中的模块加载方法类似，不亏是一个人写的啊！

一般seajs.use只用在页面载入入口模块，SeaJS会顺着入口模块解析所有依赖模块并将它们加载。如果入口模块只有一个，也可以通过给引入seajs的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

require是seajs主要的模块加载方法，当在一个模块中需要用到其他模块时一般用require加载：

var m=require('./a');

require.async

上文说过seajs会在html页面打开时通过静态分析一次性记载所有需要的js文件，如果想要某个js文件在用时才加载，可以使用require.async。

这样只有在用到这个模块时，对应的js文件才会被下载，也就实现了JavaScript代码的按需加载。

SeaJS的全局配置

seajs提供了一个seaj.configd的方法可以设置全局配置，接收一个表示全局配置的配置对象，具体方法如下：

seajs.config({

base:'path',

alias:{

    'app':'path/app/'

},

charset:'utf-8',

timeout:20000,

debug:false

})

其中，

  • base表示基址路径
  • alias可以对较长的常用路径设置缩写
  • charset表示下载js时script标签的charset属性。
  • timeout表示下载文件的最大时长，以毫秒为单位。

Seajs如何与现有的JS库配合使用

要将现有的JS库与seajs一起使用，只需根据seajs的模块定义规则对现有库进行一个封装。例如，下面是对jQuery的封装方法：

    define(function(){

    /*

    此处为jquery源码

    */

    })

一个完整的例子：

上文说了那么多，知识点比较分散，所以最后我打算用一个完整的SeaJS例子把这些知识点串起来，方便朋友们归纳回顾。这个例子包含如下文件：

  • index.html 主页面
  • sea.js
  • jquery.js
  • init.js init模块，入口模块，依赖data、jquery、style三个模块，又主页面载入
  • data.js data模块，纯json数据模块
  • style.css css样式表

html：

<!DOCTYPE HTML>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="content">

    <p class="author"></p>

    <p class="blog"><a href="#">Blog</a></p>

</div>

<script src="sea.js"></script>

<script>

        seajs.use('init');

</script>

</body>

</html>

javascript:

//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;}

请注意：

1.请讲jquery.js源码文件包含在seajs模块加载代码中；

2.在Sea.js < 2.3.0版本之前是可以加载css文件的，新版本中此功能移除，为了兼容考虑，加载css功能将作为一个插件存在。

使用方法

  • 可以在sea.js标签后引入这个插件使用
  • 也可以将插件代码混入sea.js当中
  • 和seajs-style的区别
    • seajs-css是使 Sea.js 能够加载一个css文件，和link标签一样
    • seajs-style是指提供一个seajs.importStyle方法用于加载一段 css 字符串

使用SeaJS实现模块化JavaScript开发（新）的更多相关文章

  1. 使用SeaJS实现模块化JavaScript开发

    前言 SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制.与jQuery等JavaScript框架不同,SeaJS不会扩展封 ...

  2. 使用SeaJS实现模块化JavaScript开发【转】

    前言 SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制.与jQuery等JavaScript框架不同,SeaJS不会扩展封 ...

  3. 模块化的JavaScript开发的优势在哪里

    如今模块化的 JavaScript 的开发越来越火热,无论是模块加载器还是优秀的 JavaScript 模块,都是层出不穷.既然这么火,肯定是有存在的理由,肯定是解决了某些实际问题.很多没接触过模块化 ...

  4. seajs进行模块化开发

    seajs进行模块化开发 模块化前端开发入门指南(二) 2015-08-26 15:23 by paseo, 370 阅读, 0 评论, 收藏, 编辑 概览 使用seajs模块化加载器进行模块化开发, ...

  5. Atitit.js模块化 atiImport 的新特性javascript import

    Atitit.js模块化 atiImport 的新特性javascript import 1. 常见的js import规范amd ,cmd ,umd1 1.1. Require更多流行3 2. at ...

  6. 汇总一些知名的 JavaScript 开发开源项目

    汇总一些知名的 JavaScript 开发开源项目   转自:CTOLib , www.ctolib.com/topics-107352.html ggraph - 图形可视化的凌乱数据 这是一个建立 ...

  7. JavaScript开发工具简明历史

    译者按: JavaScript开发要用到的工具越来越多,越来越复杂,为什么呢?你真的弄明白了吗? 原文: Modern JavaScript Explained For Dinosaurs 为了保证可 ...

  8. 精通模块化JavaScript

    近日读了一本名为<精通模块化JavaScript>的书,并记录了其中的精髓. 一.模块化思维 精通模块化开发并不是指要遵循一套定义明确的规则,而是指能够将自己置身于使用者的角度,为可能即将 ...

  9. 活字格发布新版本，插件公开，引领Web开发新潮流

    日前,活字格Web 应用生成平台发布V4.0版本,首次公开插件机制,强大的扩展性和系统集成能力,引起业内瞩目. 活字格是由西安葡萄城自主研发的 Web 应用生成平台,提供易用的类Excel可视化设计器 ...

随机推荐

  1. careercup-树与图 4.9

    4.9 给定一颗二叉树,其中每个结点都含有一个数值.设计一个算法,打印结点数值总和等于某个给定值的所有路径.注意,路径不一定非得从二叉树的根节点或叶子节点开始或结束. 类似于leetcode:Path ...

  2. Hadoop Oozie 学习笔记

    Oozie是一个工作流引擎服务器,用于运行Hadoop Map/Reduce和Pig 任务工作流.同时Oozie还是一个Java Web程序,运行在Java Servlet容器中,如Tomcat. O ...

  3. LaTeX 标题中使用 \bm 命令与 hyperref 的冲突

    问题 当使用 hyperref 宏包时,在标题中使用 \bm 为数学符号加粗会出现错误 \documentclass{article} \usepackage{bm} \usepackage{hype ...

  4. rndc: connect failed: 127.0.0.1#953: connection refused

    [root@localhost sbin]# ./named -v bind 9.5.1-p3-v3.0.9 问题现象: [root@localhost sbin]# ./rndc flush -p ...

  5. C# Mutex对象的使用

    C# Mutex对象的使用 C#语言有很多值得学习的地方,这里我们主要介绍C# Mutex对象,包括介绍控制好多个线程相互之间的联系等方面. 如何控制好多个线程相互之间的联系,不产生冲突和重复,这需要 ...

  6. 使用普通Windows服务创建Quartz.Net服务项目

    Quartz.NET 项目地址 http://quartznet.sourceforge.net/ 源码下载地址:Quartz.Net.2.0 首先创建Quartz.Net.2.0解决方案,添加 Wi ...

  7. Android中去掉标题栏的3种方法

    1.在java代码中 (SplashActivity继承AppCompatActivity时无效)

  8. 转载--SQL Server 2005的XQuery介绍

    原文地址: http://bbs.51cto.com/thread-458009-1-1.html   引用: 摘要 本文介绍了SQL Server 2005能够支持的XQuery的各方面特性如FLW ...

  9. MathType支持64位 WIN 7Office 2013（完美解决）（转载）

    经过几次尝试解决了,方法如下: 1. 安装MathType 6.8 (别的版本不知是否适用,本人安装的是该版本) 2. 将以下两个文件拷贝出来 C:\Program Files (x86)\MathT ...

  10. u盘的超级用法

    转自360         U盘是大家最常用的移动存储设备,不过它的即插即用特性在给我们带来方便同时,也带来了极大的安全隐患.一款没有加密功能的U盘,在借给他人使用或不慎丢失时,其中所保存的资料将很容 ...