本文只是seajs的入门贴。要详细了解，请看GitHub主页上的相关链接，精彩不断，精选几篇：

前端模块化开发的价值

前端模块化开发的历史

ID和路径匹配原则

与RequireJS的异同

模块的加载启动

下面本文开始：

seajs的价值

原生javascript的一个弱项，就是不支持模块化，说白了就是没有其他语言的import，include等语句。所以开发者就只有2个选择：把所有的东西写到一起，或者通过全局变量来交互

这至少造成以下几个问题：

1、污染全局变量，容易发生命名空间冲突，难以维护

2、无法按需加载

由于javascript官方迟迟未能解决这些问题，所以就有民间的社区提出标准，希望能自行解决，弥补语言的不足。主要有2种规范，一种是 CommonJS提出的CMD规范，另一种是AMD规范，server端的node就是CMD的一种实现，seajs实现的也是CMD规范。所以熟悉 node的用户会发现，seajs的API和node的API非常类似，这就是因为它们是同一种规范的不同实现

关于seajs的价值，这篇帖子说得更加详细：why seajs

seajs的例子

官网上的5分钟入门例子也很简单，不过本文再简化一点，用一个更简单的例子进行说明：

目录结构简化后是这样的：

helloworld.html：

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Hello Sea.js</title>
  6. </head>
  7. <body>
  8. <div id="thediv">
  9.     <p>hello world</p>
  10. </div>
  11. <script src="../javascript/sea.js"></script>
  12. <script>
  13.     seajs.config({
  14.         alias: {
  15.             "jquery": "jquery-debug.js"
  16.         }
  17.     });
  18.     seajs.use("../javascript/main");
  19. </script>
  20. </body>
  21. </html>

首先用<script>标签引入了seajs，并且要放在第一行。然后这行代码是入口：

  1. seajs.use("../javascript/main");

加载seajs以后，会引进一个唯一的全局变量seajs，这是无法避免的，除非是一次性执行的匿名函数，否则单全局变量模式已经是最好的结果。然后seajs上有一个use方法，是启动其他模块的入口方法，这里就是启动了main.jsmain.js

  1. define(function (require, exports, module) {
  2.     var module1 = require("./module1");
  3.     alert(module1.add(1, 2));
  4. })

实际上use()和require()方法非常类似，不过官方推荐的最佳实践是，只把use()作为启动的入口方法，后续的模块导入都用require()来完成熟悉node的用户会觉得非常眼熟，define方法是seajs自己的实现方式，require，exports，module都是CMD规范的 设计，所以跟在node里是一样的。所有的seajs module，都应该写在define方法的factory function里

上面这段代码就引入了另一个模块module1，然后调用了其上的一个方法

module1.js

  1. define(function (require, exports, module) {
  2.     exports.add = function (a, b) {
  3.         return a + b;
  4.     }
  5.     var $ = require("jquery");
  6.     $("#thediv").click(function () {
  7.         alert("on click");
  8.     });
  9. })

这里又看到了熟悉的exports，导出了add()函数，并引用了jQuery框架，给DOM元素绑定了一个事件这里有一点要注意，就是对jQuery进行了CMD改造（也就是导出了变量$），这里有个小坑，后面会说

factory function有3个参数，分别是require，exports，module，作用跟node里是完全一样的。但是还有另外一种写法：

  1. define(function () {
  2.     return {sayHello: function () {
  3.         alert("hi there");
  4.     }};
  5. });

这个factory function没有任何参数，直接返回了导出的对象。这个叫做return语法，不过我用得比较少seajs的例子就到此为止了，确实非常易用

与node module的比较

基本上是一致的，包括exports和module.exports的表现，还有require后立刻执行的行为，还有require的结果也同样会被cache起来

集成jQuery的一个坑

我下载了官网的例子，然后只是稍微移动了文件的路径，结果发现这行代码：
  1. var $ = require("jquery");

$的值一直是null，百思不得其解。在官方的GitHub issue上，这个问题也有广泛的讨论。本质的原因在于seajs有一个路径和ID匹配的原则：著名的#930

seajs的设计思想是，路径即ID。一般在调用define()方法时，如果只传递一个factory function，那么这个模块就是个匿名模块；或者传递define(module_id, dependency, factory)，这个模块就是个具名模块
如果一个文件就是一个模块，那么匿名模块就可以了。但是在生产环境中，往往会把多个模块放到一个文件里，但是路径只有一个，如何知道要加载哪个 模块呢？这时候就需要给其中一个模块赋予module_id，和path保持一致，seajs就知道应该加载这个ID和path匹配的模块了
如果具名模块的id和require的path参数不匹配，就会返回null，这就是我出现这个错误的原因：
  1. var $ = require("jquery-debug");// path是"jquery-debug"

而jquery中的代码：

  1. define("jquery/jquery/1.10.1/jquery-debug", [], function () { return jQuery; } );// module_id是"jquery/jquery/1.10.1/jquery-debug"

我移动了文件路径以后，path和module_id匹配不上，所以就失败了

把jQuery中的代码改成：
  1. define("jquery-debug.js",[],function(){return jQuery});

或者

  1. define(function(){return jQuery});

就行了，但是对于不熟悉#930的用户来说，这确实是不大不小的一个坑

Sea.js入门的更多相关文章

  1. sea.js 入门

    上个月学了 require.js 现在顺便来学学 sea.js. 对比下这两种的区别,看自己喜欢哪个,就在接下来的项目中去使用它吧. seajs中的所有 JavaScript 模块都遵循 CMD 模块 ...

  2. Sea.Js使用入门

    1.Sea.Js是什么 seajs相对于RequireJs与LabJS就比较年轻,2010年玉伯发起了这个开源项目,SeaJS遵循CMD规范,与RequireJS类似,同样做为模块加载器.示例 // ...

  3. sea.js 个人入门

    玉伯 : http://seajs.org/docs/ 说这两个JS 必须提到AMD.commonjs两种不同的规范: 奇舞团:http://www.75team.com/archives/882 知 ...

  4. 深入学习sea.js

    入门学习了文档之后,在深入学习里面的一些有趣的知识点 =================================== 一.配置 seajs.config({ alias:( a3:'./js/ ...

  5. sea.js模块化编程

    * 为什么要模块化? 解决文件依赖 解决命名冲突 ; var var2 = 2; function fn1(){ } function fn2(){ } return { fn1: fn1, fn2: ...

  6. 1. web前端开发分享-css,js入门篇

    关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...

  7. 解决sea.js引用jQuery提示$ is not a function的问题

    在使用sea.js的如下写法引用jQuery文件时, //main.jsdefine(function(require,exports,module){ var $ = require('jquery ...

  8. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  9. Ember.js入门教程、博文汇总

    第一章 对象模型 Ember.js 入门指南——类的定义.初始化.继承 Ember.js 入门指南——类的扩展(reopen) Ember.js 入门指南——计算属性(compute properti ...

随机推荐

  1. Mysql查询(笔记二)

    1.两结构相同的表数据间移植 Inset into 表一 Select 字段1,字段2,....字段n from表二 建立数据库时设置数据库编码 create database 数据库名 charse ...

  2. 二，CentOS minimal 网络配置及用yum安装所需软件

    CentOS minimal在刚安装完成后,ifconfig一下没发现网卡,是因为使用最小安装的网卡默认没启动,设置配置文件很简单,如下: 1.打开配置文件 vi /etc/sysconfig/net ...

  3. mysql 修改字段长度

    mysql 修改字段长度 alter table news  modify column title varchar(130); alter table 表名 modify column 字段名 类型 ...

  4. C# 笛卡尔积

    void Main() { string[] str1 = { "a", "b" }; " }; string[] str3 = { "一& ...

  5. Dapper多表查询（列名重复，类字段重复）映射方案

    1. 一个主名,一个别名,设计时候属性和字段命名不同. 这样主名和别名都可以用的,在主名与别人重复时候用别名(别名可以设计的明确一点长一点,比如类名和字段结合) 2. 或者找一个字段多的直接继承出一个 ...

  6. Requests:Python HTTP Module学习笔记（一）（转）

    Requests:Python HTTP Module学习笔记(一) 在学习用python写爬虫的时候用到了Requests这个Http网络库,这个库简单好用并且功能强大,完全可以代替python的标 ...

  7. LINUX开启允许对外访问的网络端口

    LINUX开启允许对外访问的网络端口  LINUX通过下面的命令可以开启允许对外访问的网络端口: /sbin/iptables -I INPUT -p tcp --dport 8000 -j ACCE ...

  8. Win8.1想要卸载openSUSE出现问题（2014.8.15已解决）

    用DiskGenius激活C盘后果然好用了!随便用EasyBCD恢复一下就好了 下面再说说安装openSUSE这半周多的问题: 1.如果是NVIDIA和Intel双显卡就不要安装NVIDIA的显卡驱动 ...

  9. Node.js学习笔记 02 Implementing flow control

    What is flow control? 和其它语言一样,Node.js 在代码编写时,如何组织代码,如何写出clean code都是不可避免的难点. 同时,由于Node.js的天然特性(异步,事件 ...

  10. 重命名Oracle数据库的表空间（Renaming a Tablespace)

    重命名一个表空间时,Oracle会在数据字典.控制文件和数据文件的头部更新这个表空间名. 注意,重命名一个表空间不会重命名相关联的数据文件. 重命名代码示例如下: SQL> alter tabl ...