javascript模块化开发

一.什么是模块化开发

将软件产品看作为一系列功能模块的组合
通过特定的方式实现软件所需模块的划分、管理、加载

二.模块化开发好处

解决命名冲突问题
添加命名空间YUI 、EXTJS—可以从一定程度上解决命名冲突，但是增加了开发人员记忆冗长api的难度。
解决文件依赖问题
团队变大后，维护大量的文件依赖关系非常困难，公共模块的维护、升级很不方便。

三.实现规范

服务器端规范
CommonJS—nodejs
浏览器端规范
AMD—RequireJS 国外相对流行
CMD—SeaJS 国内相对流行

四.具体实现(SeaJs为例)

RequireJS 与SeaJs实现方式大同小异,这里就以SeaJs为例介绍了

1. 在页面中引入sea.js文件

<script src="node_modules/seajs/dist/sea.js"></script>

2.定义一个主模块如calculator.js, 在主模块文件中通过define的方式定义一个模块，并导出公共成员

// 定义一个模块，遵循Seajs的写法
define(function(require, exports, module) {// 此处是模块的私有空间// 定义模块的私有成员// 载入01-convertor模块var convertor = require('./01-convertor.js');function add(a, b) {return convertor.convertToNumber(a) + convertor.convertToNumber(b);}function subtract(a, b) {return convertor.convertToNumber(a) - convertor.convertToNumber(b);}function multiply(a, b) {return convertor.convertToNumber(a) * convertor.convertToNumber(b);}function divide(a, b) {return convertor.convertToNumber(a) / convertor.convertToNumber(b);}// 暴露模块的公共成员exports.add = add;exports.subtract = subtract;exports.multiply = multiply;exports.divide = divide;
});

3. 在页面的行内脚本中通过seajs.use(‘path’,fn)的方式使用模块

  seajs.use('./01-calculator.js', function(calculator) {});

五.其他介绍

require

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

define(function(require, exports, module) {var convertor = require('./01-convertor.js');}

require.async

用来在模块内部异步加载一个或多个模块。

导出成员的方式

module.exports
exports.xxx
return

配置

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'
});

这里举一个别名的例子

    seajs.config({alias: {// 变化点封装calc: './modules/calc.js',}});seajs.use('calc');

SeaJS和RequireJS对比

对于依赖的模块，AMD是提前执行，CMD是延后执行
CMD推崇依赖就近，AMD推崇依赖前置
AMD的API默认是一个当多个用，CMD的API严格区分，推崇职责单一

javascript模块化开发相关推荐

JavaScript模块化开发整理
在网上已经有很多关于模块化开发的文章了,这里还是按照自己的理解来整理一下. 随着项目文件的越来越大和需求的越来越贴近现实(我发现现在客户不如:一个领导说我要审批你们报上来的资料,系统发布以后用的还不错 ...
JavaScript模块化开发（一）基础知识
2019独角兽企业重金招聘Python工程师标准>>> 随着前段JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理 ...
JavaScript模块化开发的演进历程
写在前面的话 js模块化历程记录了js模块化思想的诞生与变迁历史不是过去,历史正在上演,一切终究都会成为历史拥抱变化,面向未来延伸阅读 - JavaScript诞生(这也解释了JS为何一开始没有 ...
JavaScript模块化开发技术概述
2019独角兽企业重金招聘Python工程师标准>>> 什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应 ...
前端JAVASCRIPT模块化开发
什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等 ...
JavaScript 模块化开发入门
JS 为什么要模块化 JavaScript 语言最初设计的主要作用仅仅是用来验证表单输入的有效性,为Web页面添加一些动画效果等,并不包含太多的高级语言的特性,此时通常直接在HTML页面中编写简单的 ...
初探Javascript模块化开发
随着简单网页逐渐变成交互复杂的网站应用,网页上的Javascript代码也变得越来越庞大,越来越复杂.加之随即而来的多人协作分工的开发方式,每个人只负责其中一个或者几个很小的功能模块,最终必须通过把各 ...
Node 之 JavaScript 模块化开发
目录一.模块化 1. 概念 2. 历史 01 - 早期 02 - 现在 3. 问题问题一 01 - 定义 foo.js 02 - 定义 bar.js 03 - 定义 html 页面问题二二.C ...
JavaScript 模块化简述
JavaScript 模块化简述前言关于模块化,最直接的表现就是我们写的 require 和 import 关键字,如果查阅相关资料,就一定会遇到 CommonJS .CMD AMD 这些名词,以 ...

javascript模块化开发

一.什么是模块化开发

二.模块化开发好处

三.实现规范

四.具体实现(SeaJs为例)

1. 在页面中引入sea.js文件

2.定义一个主模块如calculator.js, 在主模块文件中通过define的方式定义一个模块，并导出公共成员

3. 在页面的行内脚本中通过seajs.use(‘path’,fn)的方式使用模块

五.其他介绍

require

require.async

导出成员的方式

配置

SeaJS和RequireJS对比

javascript模块化开发相关推荐

最新文章

热门文章