• [Node.js] require背后的故事


    前言

    熟悉Node.js的肯定对下面的代码熟悉

    var http = require('http');

    这段代码很好理解,就是加载一个http模块。但是你有没有想过为什么要这么写?这其中的缘由是什么呢?下面将一一道来。

    JavaScript模块化

    起因

    开发中,一般把全局变量放到一个对象里,以防过多的全局变量。比如:

    var global={
    	$:function(id) { 
    		return document.getElementById(id); 
    	};
    

    但是有可能你会引用其他的js类库,他们也会占用这个全局变量,这样一来就会引起全局变量的冲突;

    我经常会用到一个js类库需要引用另一个js类库这种情况。最典型的是由jQuery衍生的一些插件。如果没有引用jQuery类库或者引用顺序错误都会导致应用出错。而且每个页面都需要添加引用项,当你有一天不需要这些引用项时,还得一个一个移除,而且非常容易出错,有可能有些页面还需要这些引用项,你忘记了就会导致这个页面出错,这就是类库依赖问题;

    上面的问题该怎么解决呢?这时模块化编程出现了。它很好的解决了上面所述的 问题。下面先说一说JavaScript怎么进行模块化编程。

    模块化

    JavaScript不是一种模块化编程语言,它不支持“类”(class)更别说模块(module)了(现在ECMAScript 6标准已经正式发布,支持“类”和“模块”。但我更想说的是ES6之前JavaScript是怎么做的,况且完全应用ES6还需要一段时间,现在业内做法是用ES6编写然后再转换成ES5)。JavaScript社区做了很多努力,在现有环境中,实现“模块”的效果。下面将一步步探究“模块化”怎么写。

    1. 原始写法
      模块就是实现特定功能的一组方法。只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块。
    function m1(){
    	//todo something
    }
    function m2(){
    	//todo something
    }
    

    上面的函数m1和m2组成一个模块。使用的时候,直接调用就行了。这种做法的缺点很明显:“污染”了全局变量,无法博癌症不与其他模块发生变量名冲突,而且模块成员之间看不出直接关系。

    1. 对象写法

    为了解决上面的缺点,可以吧模块写成一个对象,所有模块成员都放到这个对象里面。

    var odule=new Object({
    	_count:0,
    	m1:function(){ //…… },
    	m2:function(){ //…… },
    });
    

    上面的函数m1和m2,都封装在module对象里。使用的时候,就调用这个对象的属性就可以了

    module.m1();

    但是,这样的写法会暴露所有的模块成员,内部状态可以被外部改写。比如,外部代码可以直接改变内部的计数器的值

    module._count=10;
    1. 立即执行函数写法

    使用立即执行函数(Immediately-Invoked Function Expression, IIFE),可以达到不暴露私有成员的目的。

    var module=(function(){
    	var _count=0;
    	var m1=function(){ //…… };
    	var m2=function(){ //…… };
    	return {m1:m1, m2:m2};
    })();
    

    使用上面的写法,外部代码无法读取内部的_count变量。

     console.info(module._count) //undefined 

    IIFE就是JavaScript模块的基本写法。下面将再对这种写法进行加工。

    1. 放大模式

    如果一个模块很大,必须分成几个部分,或者模块需要继承另一个模块,这时就有必要采用“放大模式(augmentation)”。

    var module1=(function(mod){
    	mod.m3=function(){
    		//……
    	};
    	return mod;
    })(module);
    

    上面的代码为module模块添加了一个新方法m3,然后返回新的module模块

    1. 宽放大模式(Loose augmentation)

    在浏览器环境中,模块的各个部分通常是从网上获取的,有时无法知道哪个部分会先加载。如果采用上面4的写法,第一个执行的部分有可能加载一个不存在的空对象,这时就要采用“宽放大模式”。

    var module1=(function(mod){
    	//……
    	return mod;
    })(window.module||{});
    
    

    与“放大模式”相比,“宽放大模式”就是“立即执行函数”的参数可以是空对象。

    1. 输入全局变量

    独立性是模块的重要特点,模块内部最好不与程序的其他部分直接交互。为了在模块内部调用全局变量,必须显示地将其他变量输入模块。

    var module=(function($,YAHOO){
    	//……
    })(jQuery,YAHOO);
    

    上面的module模块需要使用jQuery和YUI库,就把这两个库(其实是两个模块)当做参数输入module。这样做除了保证模块的独立性,还使得模块之间的依赖关系变得明显。

    模块规范

    因为有了模块,我们就可以很方便的使用别人的代码,想要什么功能,就加在什么模块。

    但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写法,我有我的写法,岂不是乱套了,于是乎模块化规范就出现了。

    目前,同行的JavaScript模块化规范有CommonJS、AMD和CMD。下面先说一下CommonJS

    CommonJS

    CommonJS是服务器端模块化的规范,Node.js就是参照CommonJS规范来实现的。这也就是文章开头为什么要用require的原因

    在CommonJS中,有一个全局性方法require(),用于加在模块。比如: var url = require('url'); console.log(url);

    CommonJS加载模块是同步(synchronous)的,所以只有加载完成才能执行后面的操作。像Node.js主要用于服务器的变成,加载的模块文件一般都已经存在本地磁盘了,所以加载起来比较快,不用考虑异步加载的方式,所以CommonJS规范比较适用。但如果是浏览器环境,从服务器上加载模块,很可能由于网络原因导致加载时间很长,整个应用就会停在那里等待。这时就得采取异步(asynchronous)加载模式。于是乎就有了AMD和CMD的异步加载方案。

    AMD

    AMD是“Asynchronous Module Definition”的缩写,意思就是“异步模块定义”。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。

    AMD也采用require语句加载模块,但是不同于CommonJS,它要求两个参数:

     
    define(["module"],callback);
    

    第一个参数[module]是一个数组,里面的成员就是要加载的模块;第二个参数callback就是加载成功后的回调函数。如果把上面的代码改写成AMD形式,就是下面这样的:

    define(["url"], function(require) {
    	var url = require("url");
    	console.log(url);
    })
    

    实现AMD代表性的库有Require.js和curl.js

    CMD

    CMD是“Common Module Definition”的缩写,意思是“通用模块定义”。CMD和AMD一样,都是异步加载模块的方式。但是它们又有些区别:

    1. 对于依赖的模块,AMD是提前执行,CMD是延迟执行。不过Rquire.js从2.0开始也支持延迟执行。CMD推崇 as lazy as possible
    2. CMD推崇依赖就近,AMD推崇依赖前置
    //CMD
    define(function(require,exports,module){
    	var a=require('./a');
    	a.doSomething();
    	var b=require('./b');//依赖就近书写
    	b.doSomething();
    });
    //AMD
    define(['./a','./b'],function(a,b){ // 依赖必须一开始就写好
    	a.doSomething();
    	b.doSomething();
    });
    
    

    从上面代码可以看出,CMD更接近于CommonJS规范。

    参考:
    http://www.ruanyifeng.com/blog/2012/10/javascript_module.html
    ps:第一次用markdown写博客,感觉挺爽的,就是博客园显示效果不太好

  • 相关阅读:
    jQuery(jquery ui,jquery plugins)插件笔记1
    怎样批量删除.svn文件
    js中传递参数为0开头的数字时候,存在转码的问题
    struts文件上传,获取文件名和文件类型
    Log4j配置
    怎样通过CSS控制input输入框有readonly属性的背景色
    EXECUTE IMMEDIATE
    row_number() over(partition by column1 order by column2 desc) rn 用法
    React概述
    Web前端,高性能优化
  • 原文地址:https://www.cnblogs.com/Khadron/p/NodeJS_Story.html
Copyright © 2020-2023  润新知