理解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里使用Dom操作Xml
Jan 22 Javascript
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
Dec 18 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
May 13 Javascript
js实现的星星评分功能函数
Dec 09 Javascript
AngularJS入门教程之REST和定制服务详解
Aug 19 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 Javascript
从源码看angular/material2 中 dialog模块的实现方法
Oct 18 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 Javascript
Vue封装的可编辑表格插件方法
Aug 28 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 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
输出控制类
2006/10/09 PHP
php获取文件名后缀常用方法小结
2015/02/24 PHP
Smarty环境配置与使用入门教程
2016/05/11 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
js prototype截取字符串函数
2010/04/01 Javascript
jQuery 快速结束当前正在执行的动画
2013/11/20 Javascript
JS实现文字放大效果的方法
2015/03/03 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
一道关于JavaScript变量作用域的面试题
2016/03/08 Javascript
AngularJS入门教程之MVC架构实例分析
2016/11/01 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
vue中使用props传值的方法
2019/05/08 Javascript
layui实现多图片上传并限制上传的图片数量
2019/09/26 Javascript
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
Python对文件和目录进行操作的方法(file对象/os/os.path/shutil 模块)
2017/05/08 Python
更新pip3与pyttsx3文字语音转换的实现方法
2019/08/08 Python
python脚本后台执行方式
2019/12/21 Python
关于Keras Dense层整理
2020/05/21 Python
PyTorch-GPU加速实例
2020/06/23 Python
LTD Commodities:礼品,独特发现,家居装饰,家用器皿
2017/08/11 全球购物
请解释virtual关键字的含义
2015/06/17 面试题
我的教育故事演讲稿
2014/05/04 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
致我们终将逝去的青春观后感
2015/06/10 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript