理解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查看html源文件
Nov 08 Javascript
点击隐藏页面左栏或右栏实现js代码
Apr 01 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 Javascript
js判断页面中是否有指定控件的简单实例
Mar 04 Javascript
iframe跨域通信封装详解
Aug 11 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
Mar 06 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
Apr 09 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
原生js实现自定义滚动条组件
Jan 20 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
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
php 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
php中chdir()函数用法实例
2014/11/13 PHP
php 把数字转换成汉字的代码
2015/07/21 PHP
PHP+Ajax+JS实现多图上传
2016/05/07 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
JavaScript DOM 添加事件
2009/02/14 Javascript
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
客户端js判断文件类型和文件大小即限制上传大小
2013/11/20 Javascript
js简单设置与使用cookie的方法
2016/01/22 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
vue todo-list组件发布到npm上的方法
2018/04/04 Javascript
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
实例讲解React 组件生命周期
2020/07/08 Javascript
通过vue刷新左侧菜单栏操作
2020/08/06 Javascript
[02:37]TI8勇士令状不朽珍藏II视频展示
2018/06/23 DOTA
深入讲解Python编程中的字符串
2015/10/14 Python
python中requests小技巧
2017/05/10 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
Python2和3字符编码的区别知识点整理
2019/08/08 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
会计毕业生求职简历的自我评价
2013/10/20 职场文书
小学班长竞选演讲稿
2014/04/24 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
捐献物资倡议书范文
2014/05/19 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
工厂门卫岗位职责
2015/04/13 职场文书
义诊活动通知
2015/04/24 职场文书
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
python lambda 表达式形式分析
2022/04/03 Python