SeaJS入门

SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。与jQuery等 JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScript的模块化及按模块加载。

SeaJS的主要目的是令 JavaScript开发模块化并可以轻松愉悦进行加载,将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来,可以专注于代码本身的 逻辑。SeaJS可以与jQuery这类框架完美集成。使用SeaJS可以提高JavaScript代码的可读性和清晰度,解决目前JavaScript 编程中普遍存在的依赖关系混乱和代码纠缠等问题,方便代码的编写和维护。

SeaJS的作者是前淘宝UED,现支付宝前端工程师玉伯。

SeaJS主要解决三个问题:命名冲突,依赖,性能。

我们在做项目的过程中,是不是有些项目迭代频繁,js之间的依赖性太强,而最终代码量复杂度搞得我们不想再维护下去了,太乱了维护起来太痛苦了,之前我也有这样经历。后来就用了SeaJS做代码管理,使用SeaJS非常适用于多人合作的,且需求一变再变反复修改迭代升级长期维护的项目,这样我们不用考虑别人怎么命名变量或者函数,我们可以挥洒自如,因为每个功能模块只有一个对外的接口,我们要使用模块内变量或者方法必有通过这个接口,不然是访问不到的,而且引用同一个模块js只会加载一次,不会损耗性能。

SeaJS的基本配置:

首先在页面中引入seajs,然后根据项目实际情况配置以下参数:

seajs.config({

 // Sea.js 的基础路径

  base: ‘./js/‘,

  // 别名配置

  alias: {

     ‘jquery‘‘static/jquery-1.9.1.min‘

  },

  // 路径配置

  paths: {

    ‘ddbing‘‘http://www.ddbing.com/‘

  },

  // 变量配置

  vars: {

    ‘locale‘‘zh-cn‘

  },

  // 映射配置

  map: [

    [‘http://example.com/js/app/‘‘http://localhost/js/app/‘]

  ],

  // 预加载项

  preload: [

    Function.prototype.bind ? ‘‘ ‘es5-safe‘,

    this.JSON ? ‘‘ ‘json‘

  ],

  // 调试模式

  debug: true,

  // 文件编码

  charset: ‘utf-8‘

});

模块的书写约定,此时用到define 是一个全局函数,用来定义模块:

define(function(require, exports, module) {  

     // 模块间的依赖,获取模块 a 的接口

      var a = require(‘./a‘);  // 调用模块 a 的方法

      a.doSomething();

});

默认会传入三个参数:requireexports 和 module

在页面中如何加载使用模块,此时用到use方法,例如:

// 加载模块 main,并在加载完成时,执行指定回调

seajs.use(‘./main‘function(ex) {

  ex.init();

});

use 方法还可以一次加载多个模块:

//并发加载模块 a 和模块 b,并在都加载完成时,执行指定回调

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

  a.init();

  b.init();

});

callback 参数可选,省略时,表示无需回调。

与 DOM ready 的关系:
注意:seajs.use 与 DOM ready 事件没有任何关系。如果某些操作要确保在 DOM ready 后执行,需要使用 jquery 等类库来保证,比如:

seajs.use([‘jquery‘‘./main‘], function($, main) {

  $(document).ready(function() {

    main.init();

  });

});

seajs.use 理论上只用于加载启动,不应该出现在 define 中的模块代码里。在模块代码里需要异步加载其他模块时,推荐使用 require.async 方法。

时间: 2024-10-23 06:23:54

SeaJS入门的相关文章

seajs入门使用

使用 Sea.js 进行模块化开发还可以带来很多好处: 模块的版本管理.通过别名等配置,配合构建工具,可以比较轻松地实现模块的版本管理. 提高可维护性.模块化可以让每个文件的职责单一,非常有利于代码的维护.Sea.js 还提供了 nocache.debug 等插件,拥有在线调试等功能,能比较明显地提升效率. 前端性能优化.Sea.js 通过异步加载模块,这对页面性能非常有益.Sea.js 还提供了 combo.flush 等插件,配合服务端,可以很好地对页面性能进行调优. 跨环境共享模块.CMD

SeaJS入门教程系列之使用SeaJS(二)

SeaJS入门教程系列之使用SeaJS(二) 作者: 字体:[增加 减小] 类型:转载 时间:2014-03-03我要评论 这篇文章主要介绍了SeaJS入门教程系列之使用SeaJS,着重介绍了SeaJS的使用方法.关键方法的使用等,需要的朋友可以参考下 下载及安装 要在项目中使用SeaJS,你所有需要做的准备工作就是下载sea.js然后放到你项目的某个位置.SeaJS项目目前托管在GitHub上,主页为 https://github.com/seajs/seajs/ .可以到其git库的buil

SeaJS入门教程系列之完整示例(三)

一个完整的例子上文说了那么多,知识点比较分散,所以最后我打算用一个完整的SeaJS例子把这些知识点串起来,方便朋友们归纳回顾.这个例子包含如下文件: 1.index.html——主页面.2.sea.js——SeaJS脚本.3.init.js——init模块,入口模块,依赖data.jquery.style三个模块.由主页面载入.4.data.js——data模块,纯json数据模块,由init载入.5.jquery.js——jquery模块,对 jQuery库的模块化封装,由init载入.6.s

SeaJS入门教程系列之SeaJS介绍(一)

前言SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制.与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScript的模块化及按模块加载.SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载,将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来,可以专注于代码本身的逻辑.SeaJS可以与jQuery这类框架完美集成.使用SeaJS可以

模块化开发(二)--- seaJs入门学习

SeaJS是一个基于CMD模块定义规范实现一个模块系统加载器 [CMD规范](https://github.com/cmdjs/specification/blob/master/draft/module.md)9.seaJs启动函数的回调函数 官网:http://seajs.org/docs/ github:https://github.com/seajs/seajs 如何选择一个技术产品栈: - 看作者是否是大牛 - 看社区是否活跃 - 看是否经常更新 SeaJS的作者已经不更新该项目了,但

SeaJS入门篇一 怎么使用query

研究了2个多小时,终于搞定引入jq 1.写个html页面 <h1>ddddddddd</h1> <script src='/Scripts/dist/sea.js'></script> 2.配置脚本路径 // seajs 的简单配置 seajs.config({ //base: "",//默认和sea.js同级,jquery.js和它同级,所以没有写:注意:如果为默认不要写,否则路径出错 alias: { "jquery&quo

seajs 2.3.0 傻瓜式入门

[seajs] 很久之前就想使用seajs,尝试了多次,可能是自己比较笨或者seaj的文档和例子太简单,总是无从下手, 这次自己搞了一个网站,引用多个js的时候需要减少http请求, 找了半天又找到seajs+spm,好吧,再来一次. [博文] 这个博文讲的很透彻,好像是seajs开发者写的,供参考,如果这个博文能看懂那就不必再往下看了, 地址:https://speakerdeck.com/lifesinger/seajs [傻瓜式入门] 如果还是看不懂,那就一步一步往下看吧. 说明: 我的例

seaJs模块化开发简单入门

随着前端技术的日益成熟,功能越来越丰富强大,规范也越来越健全,在这样的背景环境下很快便有了CommonJs.AMD.CMD等一系列规范,使前端发开趋向模块化.规范化.CMD模块化的代表之一就是国内开发的seaJs,它有很多优点: 遵从CMD规范,代码模块化 中文文档通俗易懂,入门上手简单 兼容性好.配置简洁明了.提供插件接口 seajs模块化基本流程: 引入sea.js库 define定义模块 exports暴露模块 require导入模块 安装 npm安装 npm i seajs bower安

Seajs使用实例入门介绍

seajs是啥,可以看看这篇前端模块化(CommonJs,AMD和CMD) 本文所用例子的代码目录结构: seajs example |--sea-module //存在依赖文件 |--jquery |--jqeury.js |--sea.js |--static //存放自定义模块js |--main.js |--index.html //调用页面 seajs页面引入 下面开始,首先看下index: <!DOCTYPE html> <html lang="en"&g