热门关键字:

SeaJS

1676
作者:管理员
发布时间:2015/6/3 22:48:03
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=619

SeaJS

1、什么是SeaJS
SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。
与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScript的模块化及按模块加载。
SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载,将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来,可以专注于代码本身的逻辑。
SeaJS可以与jQuery这类框架完美集成。
使用SeaJS可以提高JavaScript代码的可读性和清晰度,解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题,方便代码的编写和维护。


2、为什么使用SeaJS
Sea.js 追求简单、自然的代码书写和组织方式,具有以下核心特性:
(简单友好的模块定义规范:Sea.js 遵循 CMD 规范,可以像 Node.js 一般书写模块代码。
(自然直观的代码组织方式:依赖的自动加载、配置的简洁清晰,可以让我们更多地享受编码的乐趣。
Sea.js 还提供常用插件,非常有助于开发调试和性能优化,并具有丰富的可扩展接口。
使用SeaJS实现模块化JavaScript开发。

兼容性
Sea.js 具备完善的测试用例,兼容所有主流浏览器:
Chrome 3+
Firefox 2+
Safari 3.2+
Opera 10+
IE 5.5+
Sea.js 可运行在 Mobile 端,包括 Hybrid 模式的 App 上。理论上,Sea.js 可以运行在任何浏览器引擎上。


3、SeaJS目录结构
所有源码都存放在 GitHub 上:seajs/examples,目录结构为:
examples/
  |-- sea-modules      存放 seajs、jquery 等文件,这也是模块的部署目录
  |-- static           存放各个项目的 js、css 文件
  |     |-- hello
  |     |-- lucky
  |     `-- todo
  `-- app              存放 html 等文件
        |-- hello.html
        |-- lucky.html
        `-- todo.html
我们从 hello.html 入手,来瞧瞧使用 Sea.js 如何组织代码。


在页面中加载模块


在 hello.html 页尾,通过 script 引入 sea.js 后,有一段配置代码:


// seajs 的简单配置
seajs.config({
  base: "../sea-modules/",
  alias: {
    "jquery": "jquery/jquery/1.10.1/jquery.js"
  }
})

// 加载入口模块
seajs.use("../static/hello/src/main")
sea.js 在下载完成后,会自动加载入口模块。页面中的代码就这么简单。

模块代码

这个小游戏有两个模块 spinning.js 和 main.js,遵循统一的写法:

// 所有模块都通过 define 来定义
define(function(require, exports, module) {

  // 通过 require 引入依赖
  var $ = require('jquery');
  var Spinning = require('./spinning');

  // 通过 exports 对外提供接口
  exports.doSomething = ...

  // 或者通过 module.exports 提供整个接口
  module.exports = ...

});
上面就是 Sea.js 推荐的 CMD 模块书写格式。如果你有使用过 Node.js,一切都很自然。

4、SeaJS基本开发原则

在讨论SeaJS的具体使用前,先介绍一下SeaJS的模块化理念和开发原则。

使用SeaJS开发JavaScript的基本原则就是:一切皆为模块。引入SeaJS后,编写JavaScript代码就变成了编写一个又一个模块,SeaJS中模块的概念有点类似于面向对象中的类——模块可以拥有数据和方法,数据和方法可以定义为公共或私有,公共数据和方法可以供别的模块调用。

另外,每个模块应该都定义在一个单独js文件中,即一个对应一个模块。

5、SeaJS在线AIP
http://www.jq-school.com/api/seajs/default.html

6、SeaJS最新版本下载
http://www.jq-school.com/MD.aspx?id=1060





如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:SeaJS CommonJS JavaScript jQuery Sea.js Node.js
友荐云推荐