理解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 相关文章推荐
解javascript 混淆加密收藏
Jan 16 Javascript
通过url查找a元素并点击
Apr 09 Javascript
jQuery插件jRumble实现网页元素抖动
Jun 05 Javascript
JavaScript类型系统之基本数据类型与包装类型
Jan 06 Javascript
JavaScript添加随滚动条滚动窗体的方法
Feb 23 Javascript
jQuery 表单序列化实例代码
Jun 11 jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
详解JavaScript添加给定的标签选项
Sep 17 Javascript
详解element-ui设置下拉选择切换必填和非必填
Jun 17 Javascript
鸿蒙系统中的 JS 开发框架
Sep 18 Javascript
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
谈一谈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检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
php防止sql注入简单分析
2015/03/18 PHP
php实现将wav文件转换成图像文件并在页面中显示的方法
2015/04/21 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
JS启动应用程序的一个简单例子
2008/05/11 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
js实现禁止中文输入的方法
2015/01/14 Javascript
简介JavaScript中substring()方法的使用
2015/06/06 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
2015/12/03 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
node.js事件轮询机制原理知识点
2019/12/22 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
python利用正则表达式提取字符串
2016/12/08 Python
Python学习笔记之解析json的方法分析
2017/04/21 Python
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
Python时间序列处理之ARIMA模型的使用讲解
2019/04/02 Python
PyCharm专业最新版2019.1安装步骤(含激活码)
2019/10/09 Python
Python基础之变量基本用法与进阶详解
2020/01/03 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
Python wordcloud库安装方法总结
2020/12/31 Python
英国哈罗德园艺:Harrod Horticultural
2020/03/31 全球购物
农救科工作职责
2013/11/27 职场文书
运动会稿件200字
2014/02/07 职场文书
2014年乡镇领导个人整改措施
2014/09/19 职场文书
北京离婚协议书范文2014
2014/09/29 职场文书
校长师德表现自我评价
2015/03/05 职场文书
初中重阳节活动总结
2015/05/05 职场文书
走近毛泽东观后感
2015/06/04 职场文书
收入证明范本
2015/06/12 职场文书
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android