轻轻谈一下seaJs——模块化开发的利器

简介:

      “仅做一件事,做好一件事。

      这个应该就是seaJs的精髓了。

      我在自己的一些项目中使用过seaJs。对其算是了解一二。如今就班门弄斧。轻轻地谈一下。

      首先上一段度娘的话:

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

1.下载seaJs

下载url:https://github.com/seajs/seajs

      


       我们能清楚地看到,docs是文档。dist是压缩好的、用于浏览器端的SeaJS代码;src则是源码。

package.json + Gruntfile.js就是Grunt构建工具所须要的文件。用来合并压缩等等。


看完代码结构,如今就開始说一下里面的基本使用方法。

 2.seaJs的基本使用方法

2.1 用seajs.config来进行路径和文件依赖的配置。

譬如:

        

seajs.config({

  // 别名配置
  alias: {
    'es5-safe': 'gallery/es5-safe/0.9.3/es5-safe',
    'json': 'gallery/json/1.0.2/json',
    'jquery': 'jquery/jquery/1.10.1/jquery'
  },

  // 路径配置
  paths: {
    'gallery': 'https://a.alipayobjects.com/gallery'
  },

  // 变量配置
  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, // Sea.js 的基础路径 base: 'http://example.com/path/to/base/', // 文件编码 charset: 'utf-8' });

更加具体的配置 ,能够參考:https://github.com/seajs/seajs/issues/262


2.2 用seajs.use在页面中载入一个或多个模块,callback 參数可选。省略时,表示无需回调。

继续看代码:

// 载入模块 common,并在载入完毕时,运行指定回调
seajs.use('./common', function(main) {
  common.init();
});
// // 并发载入模块 x 和模块 y。并在都载入完毕时,运行指定回调
seajs.use(['./x', './y'], function(x, y) {
  x.init();
  y.init();
});

2.3 用define定义模块和获取模块。

详细调用例如以下:

define(function(require, exports, module) {

  // 你要写的模块代码

});

2.4用require 获取指定模块的接口。

define(function(require) {

  // 获取模块 x 的接口
  var x = require('./x');

  // 调用模块 x 的方法
  x.doSomething();
});

2.5 用require.async在模块内部异步载入一个或多个模块。

define(function(require) {

  // 异步载入一个模块,在载入完毕时。运行回调
  require.async('./b', function(b) {
    b.doSomething();
  });

  // 异步载入多个模块,在载入完毕时。运行回调
  require.async(['./c', './d'], function(c, d) {
    c.doSomething();
    d.doSomething();
  });

});
ps:此段代码copy自官网參考文档。


2.6用exports在模块内部对外提供接口。

define(function(require, exports) {

  //这一句对外提供了一个属性todo
  exports.todo = 'wt';


});


3.注意和规范

肤浅地过了一遍主要的使用方法之后,接下来就说一下要注意的东西了。

3.1模块工厂构造方法的第一个參数 必须 命名为 require 。

// 错误!
define(function(req) {
  // ...
});
// 错误!
define(function(r) {
  // ...
});

// 正确!
define(function(require) {
  // ...
});

3.2不要给 require 又一次赋值或者不能把这个函数重命名。

// 错误
var yilai = require, a= yilai ("./mod");

// 错误
require = function() {};

// 错误
function todo(require) {}

// 错误
function todo() {
  var require = function() {};
}

3.3require 的參数值不能是字符串直接量之外的其它变量。

// 错误!
require(todo);

// 错误!
require("to-" + "do");

// 错误!
require("todo".toLowerCase());

总结:使用 Sea.js。提高代码的可维护性。高效性。灵活性。粒子性和可移植性。总结得有点虚,可是seaJs确实给项目的开发带来了非常多的便利。

还不用seaJs。你就凹凸慢了。

注:此 文章參考了官网的非常多文章,编写而来。想知道得很多其它的童鞋。请点击这里:http://seajs.org/docs/#docs




Author: Alone
Antroduction: 高级前端开发project师
Sign: 人生没有失败。仅仅有没到的成功。


博主相关文章推荐:


有趣的前端题目。看了不懊悔

移动端前端开发概述

浅谈 标签的语义化

浅谈鼠标滚轮事件

不积跬步无以至千里----高度自适应的textarea

sass和less,优秀的前端样式预处理器

视差滚动的那些事儿









本文转自mfrbuaa博客园博客,原文链接:http://www.cnblogs.com/mfrbuaa/p/5204923.html,如需转载请自行联系原作者


相关文章
|
2月前
|
开发框架 JavaScript API
uniapp知识大杂烩?
uniapp知识大杂烩?
|
6月前
|
JavaScript 前端开发 开发工具
简简单单一个vite⚡⚡插件搞定用户的另类需求——自给自足的感觉真好
简简单单一个vite⚡⚡插件搞定用户的另类需求——自给自足的感觉真好
|
6月前
|
编解码 前端开发 小程序
知识大杂烩(uniapp)
知识大杂烩(uniapp)
39 0
|
9月前
|
JavaScript
WebGis——Pixi开发vue项目之实现闪烁点功能(二)
WebGis——Pixi开发vue项目之实现闪烁点功能(二)
|
9月前
|
JSON 缓存 Rust
前端工程化之最强转译器 聊聊Babel杀手:SWC的野心与未来
前端工程化之最强转译器 聊聊Babel杀手:SWC的野心与未来
1398 0
|
缓存 JavaScript 前端开发
【从零到一手撕脚手架 | 第三节】项目集成CommitLInt+ESLint+Prettier+StyleLint+LintStaged
前两节教大家如何初始化一个脚手架项目以及如何封装Vue技术栈常用的工具库。本小节教大家如何向我们的脚手架中配置ESLint、Prettier、StyleLint、LintStage。
450 0
【从零到一手撕脚手架 | 第三节】项目集成CommitLInt+ESLint+Prettier+StyleLint+LintStaged
|
前端开发
前端知识学习案例9-tailWind Css+vite2.0-项目优化
前端知识学习案例9-tailWind Css+vite2.0-项目优化
55 0
前端知识学习案例9-tailWind Css+vite2.0-项目优化
|
存储 缓存 监控
基于vue + electron创造一个随心开发组件的跨端桌面应用(持续更新~)(一)
下面我会从这个应用的一些功能的实现细节讲起,包括初始化,托盘菜单,开机自启,存储用户数据,GitHub信息健康,翻页时钟,打包配置除此之外还有还有项目的使用方式与功能介绍,希望可以给掘友带来帮助。
188 0
|
前端开发
前端工作总结171-vue里面wangEdit编辑器使用
前端工作总结171-vue里面wangEdit编辑器使用
173 0
|
前端开发 JavaScript API
挑战21天手写前端框架 day10 手撕 esbuild 插件开发完成对 style 的支撑
挑战21天手写前端框架 day10 手撕 esbuild 插件开发完成对 style 的支撑
189 0
挑战21天手写前端框架 day10 手撕 esbuild 插件开发完成对 style 的支撑