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")
开始做,坚持做,重复做
相关文章
|
8月前
|
JavaScript 前端开发 测试技术
如何编写JavaScript模块化代码
如何编写JavaScript模块化代码
52 0
|
4月前
|
JavaScript UED
js之模块化(2)
js之模块化(2)
|
5月前
|
JavaScript 前端开发 编译器
解锁JavaScript模块化编程新纪元:从CommonJS的基石到ES Modules的飞跃,探索代码组织的艺术与科学
【8月更文挑战第27天】随着Web应用复杂度的提升,JavaScript模块化编程变得至关重要,它能有效降低代码耦合度并提高项目可维护性及扩展性。从CommonJS到ES Modules,模块化标准经历了显著的发展。CommonJS最初专为服务器端设计,通过`require()`同步加载模块。而ES Modules作为官方标准,支持异步加载,更适合浏览器环境,并且能够进行静态分析以优化性能。这两种标准各有特色,但ES Modules凭借其更广泛的跨平台兼容性和现代语法逐渐成为主流。这一演进不仅标志着JavaScript模块化的成熟,也反映了整个JavaScript生态系统的不断完善。
63 3
|
4月前
|
JavaScript 前端开发 开发者
js之模块化(1)
js之模块化(1)
|
3月前
|
缓存 JavaScript 前端开发
Node.js模块化的基本概念和分类及使用方法
Node.js模块化的基本概念和分类及使用方法
60 0
|
4月前
|
JavaScript
js之模块化(3)
js之模块化(3)
|
5月前
|
前端开发 JavaScript
前端必会的JavaScript模块化
【8月更文挑战第3天】JavaScript模块化
40 1
|
5月前
|
存储 缓存 JavaScript
JavaScript——请列出目前主流的 JavaScript 模块化实现的技术有哪些?说出它们的区别?
JavaScript——请列出目前主流的 JavaScript 模块化实现的技术有哪些?说出它们的区别?
39 0
|
6月前
|
JavaScript 前端开发
node.js 导入导出模块(CommonJS模块化规范,ES6模块化规范)
node.js 导入导出模块(CommonJS模块化规范,ES6模块化规范)
75 1
|
7月前
|
JavaScript 前端开发
JavaScript进阶-Class与模块化编程
【6月更文挑战第21天】**ES6引入Class和模块化,提升JavaScript的代码组织和复用。Class是原型机制的语法糖,简化面向对象编程。模块化通过`import/export`管理代码,支持默认和命名导出。常见问题包括`this`指向和循环依赖。理解这些问题及避免策略,能助你写出更高效、可维护的代码。**
71 5