理解javascript模块化


Posted in Javascript onMarch 28, 2016

模块化是一个通用的编程最佳实践。程序的模块化使我们可以更方便地使用别人的代码,想要什么功能,就加载什么模块,从而提高代码的利用效率,增加开发速度。

模块就像积木,有了它,我们可以搭出各种各种功能样式的程序。积木有什么特点?小而简单。同样的,我们程序中的模块也要做到这一点,确保自己创建的函数一次只完成一个工作,这样其他开发者可以简单地调试与修改你的代码,而不需浏览所有代码才能弄清每一个代码块执行了什么功能。只有做到像这样地小而简单,才能实现其通用功能。

一、javascript模块化的方法
1、函数封装
JavaScript的作用域就是基于函数的,所以我们可以把函数作为模块。

function fn1(){
  //code
}

function fn2(){
  //code
}

缺点:"污染"了全局变量,无法保证不与其他模块发生变量名冲突

2、对象

var myModule1 = {
  fn1: function(){
    //code
  },
  fn2: function(){
    //code
  }
}

缺点:会暴露所有模块成员,内部状态可以被外部改写

立即自执行函数——推荐

var myModule = (function(){
  function fn1(){
    //code
  },
  function fn2(){
    //code
  },
  return {
    fn1: fn1,
    fn2: fn2
  };
})();

二、小而简单
关于小而简单,我们看一个例子,比如我们现在想编写一个创建新链接的函数,并且为类型是"mailto"超链接添加一个class。可以这样做:

function addLink(text, url, parentElement) {
  var newLink = document.createElement('a');//创建a标签
  newLink.setAttribute('href', url);//为a标签设置href属性
  newLink.appendChild(document.createTextNode(text));//为a标签添加文本
  if(url.indexOf("mailto:")==-1){
    newLink.className = 'mail';
  }
  parentElement.appendChild(newLink);//将a标签添加到页面
}

这样写能够工作,但你或许会发现自己又不得进行其他的功能添加,于是,这个函数又不适用了。所以,函数越特殊,越难以适用于不同情形。
这里的函数写法没有达到模块化的要求——一个函数只干一件事。我们将函数改编下:

function createLink(text,url) {
  var newLink = document.createElement('a');
  newLink.setAttribute('href', url);
  newLink.appendChild(document.createTextNode(text));
  return newLink;
}

这里createLink函数只做一件事——创建并返回要添加到页面中的a标签(小而简单),这样我们就可以在任何需要创建超链接的情况下调用这样函数。

三、CommonJS
在浏览器环境下,没有模块也不是特别大的问题,毕竟网页程序的复杂性有限;但是在服务器端,一定要有模块与操作系统和其他应用程序互动,否则根本没法编程。虽然JavaScript在web端发展这么多年,但是第一个流行的模块化规范却由服务器端的JavaScript应用带来,CommonJS规范是由NodeJS发扬光大,这标志着JavaScript模块化编程正式登上舞台。
node.js的模块系统,就是依据CommonJS规范实现的。在CommonJS中,有一个全局性方法require(),用于加载模块。
加载模块:

var math = require('math');
调用模块:

  math.add(2,3)
CommonJS规范不适用于浏览器环境,因为它存在一个重大的局限,上例中第二行math.add(2, 3)必须要在math.js加载完成后才能运行,而模块都放在服务器端,所以可能要等很长时间,等待时间取决于网速的快慢。

CommonJS规范适用于服务器端,因为对于服务端来说,所有的模块都存放在本地硬盘,可以同步加载完成,等待时间就是硬盘的读取时间

四、模块应该怎么定义和怎么加载?
AMD
Asynchronous Module Definition异步模块定义,主要代表:require.js
目的:
(1)实现js文件的异步加载,避免网页失去响应;
(2)管理模块之间的依赖性,便于代码的编写和维护。

1、定义模块

define(["./cart", "./inventory"], function(cart, inventory) {
  //通过[]引入依赖
  return {
    color: "blue",
    size: "large",
    addToCart: function() {
      inventory.decrement(this);
      cart.add(this);
    }
  }
}
);

2、加载模块

require( ["some/module", "my/module", "a.js", "b.js"],
function(someModule,  myModule) {
  //This function will be called when all the dependencies
  //listed above are loaded. Note that this function could
  //be called before the page is loaded.
  //This callback is optional.
}
 );

CMD
Common Module Definition通用模块定义,CMD规范是国内发展出来的。主要代表:sea.js

1、定义模块

define(function(require, exports, module) {
 // 通过 require 引入依赖
 var $ = require('jquery');
 var Spinning = require('./spinning');
 // 通过 exports 对外提供接口
 exports.doSomething = ...
 // 或者通过 module.exports 提供整个接口
 module.exports = ...
});

2、加载模块

seajs.use("../static/hello/src/main")
区别:

对于依赖的模块,AMD 是提前执行,CMD 是延迟执行。不过 RequireJS 从 2.0 开始,也改成可以延迟执行(根据写法不同,处理方式不同)。CMD 推崇 as lazy as possible.

CMD 推崇依赖就近,AMD 推崇依赖前置。

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
IE中createElement需要注意的一个问题
Jul 13 Javascript
javascript时间自动刷新实现原理与步骤
Jan 06 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 Javascript
Javascript无阻塞加载具体方式
Jun 28 Javascript
利用JS实现浏览器的title闪烁
Jul 08 Javascript
js判断上传文件的类型和大小示例代码
Oct 18 Javascript
jQuery基础知识小结
Dec 22 Javascript
详谈LABJS按需动态加载js文件
May 07 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
Jun 12 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
JavaScript实现封闭区域布尔运算的示例代码
Jun 25 Javascript
谈一谈jQuery核心架构设计
Mar 28 #Javascript
javascript函数自动执行常用方法汇总
Mar 28 #Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 #Javascript
JavaScript常用本地对象小结
Mar 28 #Javascript
Bootstrap 粘页脚效果
Mar 28 #Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 #Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 #Javascript
You might like
php 强制下载文件实现代码
2013/10/28 PHP
php中引用符号(&)的使用详解
2013/11/13 PHP
php返回相对时间(如:20分钟前,3天前)的方法
2015/04/14 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
php提取微信账单的有效信息
2018/10/01 PHP
JS中confirm,alert,prompt函数区别分析
2011/01/17 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
使用jQuery卸载全部事件的思路详解
2017/04/03 jQuery
微信小程序搜索组件wxSearch实例详解
2017/06/08 Javascript
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
vue.js使用v-if实现显示与隐藏功能示例
2018/07/06 Javascript
Vue组件实现触底判断
2019/06/26 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
vue给对象动态添加属性和值的实例
2019/09/09 Javascript
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
python 把列表转化为字符串的方法
2018/10/23 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
浅析Python面向对象编程
2020/07/10 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
JSP&Servlet技术面试题
2015/05/21 面试题
留学自荐信
2013/10/10 职场文书
打架检讨书50字
2014/01/11 职场文书
电子信息工程自荐信
2014/05/26 职场文书
实习护士自荐信
2014/06/21 职场文书
房屋租赁协议书(标准版)
2014/10/02 职场文书
债务追讨授权委托书范本
2014/10/16 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript
日元符号 ¥
2022/02/17 杂记
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript