javascript的模块化解读

简介: AMD是RequireJS在推广过程中对模块定义的规范化产出。 异步加载模块,依赖前置,提前执行。 Define定义模块 define([‘require’,’foo’],function(){return}); Require加载模块(依赖前置) require([‘foo’,’bar’],function(foo,bar){}); CMD是SeaJS在推广过程中对模块定义的规范化产出。

AMD是RequireJS在推广过程中对模块定义的规范化产出。

  • 异步加载模块,依赖前置,提前执行。
  • Define定义模块 define([‘require’,’foo’],function(){return});
  • Require加载模块(依赖前置) require([‘foo’,’bar’],function(foo,bar){});

CMD是SeaJS在推广过程中对模块定义的规范化产出。

  • Define定义exports 导出define(function(require,exports,module){});  module上存储了当前模块上的一些对象。
  • require(./a)直接引入。Require.async异步引入。
  • 同步加载,依赖就近,延迟执行。

 

 

SeaJS 的应用

官方入门例子:http://seajs.org/docs/#quick-start

怎么写一个SeaJS模块?

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

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

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

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

});

在页面中加载模块

在 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")
开始做,坚持做,重复做
相关文章
|
1月前
|
JavaScript 前端开发 测试技术
如何编写JavaScript模块化代码
如何编写JavaScript模块化代码
12 0
|
2月前
|
JavaScript 前端开发 开发者
js模块化的好处
js模块化的好处
14 0
|
3月前
|
JavaScript 前端开发 程序员
程序员必备技能之JS模块化,改变你的JavaScript开发方式!(一)
程序员必备技能之JS模块化,改变你的JavaScript开发方式!
|
27天前
|
JavaScript 前端开发
js开发:请解释什么是模块化(modularization),并说明如何在JavaScript中实现模块化。
模块化将复杂系统拆分为松散耦合的模块,提高代码可读性、可维护性、可复用性和可扩展性。JavaScript模块化历经CommonJS(Node.js中常见,使用`require()`和`module.exports`)、AMD(RequireJS,异步加载,`define()`和`require()`)和ES6 Modules(官方标准,`import`和`export`)三个阶段。打包工具如Webpack、Rollup处理兼容性问题,使模块化代码能在各种环境中运行。
|
5月前
|
JavaScript 前端开发 UED
JavaScript模块化:提高代码可维护性和可重用性的利器
JavaScript模块化:提高代码可维护性和可重用性的利器
60 0
|
1月前
|
JavaScript 前端开发
JavaScript模块化的那些事最骚操作
JavaScript模块化的那些事最骚操作
|
3月前
|
存储 传感器 JavaScript
NUS CS1101S:SICP JavaScript 描述:三、模块化、对象和状态(4)
NUS CS1101S:SICP JavaScript 描述:三、模块化、对象和状态(4)
|
3月前
|
存储 JavaScript 前端开发
NUS CS1101S:SICP JavaScript 描述:三、模块化、对象和状态(3)
NUS CS1101S:SICP JavaScript 描述:三、模块化、对象和状态(3)
|
3月前
|
存储 前端开发 JavaScript
NUS CS1101S:SICP JavaScript 描述:三、模块化、对象和状态(2)
NUS CS1101S:SICP JavaScript 描述:三、模块化、对象和状态(2)
|
3月前
|
存储 JavaScript 前端开发
NUS CS1101S:SICP JavaScript 描述:三、模块化、对象和状态(1)
NUS CS1101S:SICP JavaScript 描述:三、模块化、对象和状态(1)