ECMAScript“requireJs前传”之为何要用前端模块化?

有意评释:转发文章,不喜勿喷。和谐前端,世界和平!0.0

AMD规范

柒 、模块的规范
先想一想,为何模块很要紧?
因为有了模块,我们就足以更便宜地选拔旁人的代码,想要什么功用,就加载什么模块。
而是,那样做有一个前提,那就是豪门必须以同样的章程编写模块,不然你有你的写法,小编有自家的写法,岂不是乱了套!考虑到Javascript模块以后还没有官方正式,那一点就更主要了。
当下,通行的Javascript模块规范共有三种:CommonJS和英特尔。小编重要介绍AMD,然而要先从CommonJS讲起。

八、CommonJS
二零一零年,美利哥程序员RyanDahl成立了node.js项目,将javascript语言用于服务器端编制程序。

这评释”Javascript模块化编制程序”正式诞生。因为老实说,在浏览器环境下,没有模块也不是特地质大学的题目,终归网页程序的纷纭有限;可是在劳动器端,一定要有模块,与操作系统和其它应用程序互动,不然根本没办法编程。
node.js的模块系统,正是参考CommonJS规范落到实处的。在CommonJS中,有多个全局性方法require(),用于加载模块。假定有贰个数学模块math.js,就能够像上边那样加载。

  var math = require('math');

 

下一场,就足以调用模块提供的措施:

  var math = require('math');
  math.add(2,3); // 5

 

因为那些体系重庆大学针对浏览器编制程序,不涉及node.js,所以对CommonJS就不多做牵线了。大家在此地只要知道,require()用于加载模块就行了。

九 、浏览器环境
有了服务器端模块然后,很自然地,大家就想要客户端模块。而且最好双方能够合营,1个模块不用修改,在服务器和浏览器都得以运维。
不过,由于贰个要害的受制,使得CommonJS规范不适用于浏览器环境。依然上一节的代码,假若在浏览器中运营,会有一个不小的难点,你能看出来呢?

  var math = require('math');
  math.add(2, 3);

 

第叁行math.add(2,
3),在首先行require(‘math’)之后运营,因而必须等math.js加载完毕。约等于说,尽管加载时间十分短,整个应用就会停在那里等。
这对劳务器端不是二个题材,因为拥有的模块都存放在本地硬盘,能够一起加载成功,等待时间正是硬盘的读取时间。不过,对于浏览器,那却是三个大难题,因为模块都置身服务器端,等待时间取决于网速的进程,或者要等十分长日子,浏览器处于”假死”状态。
故此,浏览器端的模块,无法接纳”同步加载”(synchronous),只好使用”异步加载”(asynchronous)。那正是速龙规范诞生的背景。

十、AMD
AMD是”Asynchronous Module
Definition”的缩写,意思就是”异步模块定义”。它利用异步格局加载模块,模块的加载不影响它背后语句的运维。全体信赖这么些模块的语句,都定义在二个回调函数中,等到加载成功以往,那一个回调函数才会运作。
英特尔也应用require()语句加载模块,不过分歧于CommonJS,它须要四个参数:
  

   require([module], callback);

 

率先个参数[module],是二个数组,里面包车型大巴成员正是要加载的模块;第一个参数callback,则是加载成功之后的回调函数。若是将前方的代码改写成AMD情势,正是底下那样:

  require(['math'], function (math) {
    math.add(2, 3);
  });

 

math.add()与math模块加载不是一路的,浏览器不会爆发假死。所以很扎眼,英特尔比较吻合浏览器环境。
时下,主要有八个Javascript库完结了英特尔规范:require.js和curl.js。本类别的第3有的,将因而介绍require.js,进一步讲解AMD的用法,以及如何将模块化编制程序投入实战。

点击学习requireJS

 

转自:http://www.xidayun.com/index.php/2016/06/28/amdjs/

对此尚未接触过后台的前端同学想要领悟模块化是很劳累的,鉴于以后的主旋律,以下是自身转载的一篇作品,希望对大家有用!

 

模块的写法

趁着网站渐渐变成”互连网应用程序”,嵌入网页的Javascript代码越来越庞大,越来越复杂。

网页越来越像桌面程序,须要三个集团分工合作、进程管理、单元测试等等……开发者不得不采用软件工程的法子,管理网页的工作逻辑。
Javascript模块化编制程序,已经成为四个归心似箭的需求。理想状态下,开发者只须求贯彻宗旨的事体逻辑,其他都足以加载外人已经写好的模块。
不过,Javascript不是一种模块化编制程序语言,它不扶助”类”(class),更遑论”模块”(module)了。(正在制订中的ECMAScript标准第⑤版,将标准支持”类”和”模块”,但还亟需不长日子才能投入实用。)
Javascript社区做了众多奋力,在现有的运作环境中,实现”模块”的功力。本文总计了近期"Javascript模块化编制程序"的特级实践,说明什么投入实用。尽管那不是初级教程,但是一旦稍稍通晓Javascript的主导语法,就能看懂。

一 、原始写法
模块就是促成特定功效的一组方法。
假使把分化的函数(以及记录状态的变量)简单地坐落一块儿,就到底2个模块。

  function m1(){
    //...
  }
  function m2(){
    //...
  }

 

上面包车型客车函数m1()和m2(),组成3个模块。使用的时候,直接调用就行了。
那种做法的缺点很显著:”污染”了全局变量,不能确认保证不与其他模块发生变量名冲突,而且模块成员之内看不出直接关联。

贰 、对象写法
为了化解地点的症结,可以把模块写成二个目的,全体的模块成员都放置这个指标里面。

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

 

地方的函数m1()和m2(),都封装在module1对象里。使用的时候,正是调用那些目的的性质。
 

 module1.m1();

 

但是,那样的写法会暴光全体模块成员,内部景象能够被外表改写。比如,外部代码能够一直改动内部计数器的值。
 

 module1._count = 5;

 

三 、立时施行函数写法
应用”立刻施行函数”(Immediately-Invoked Function
Expression,IIFE),能够达到不揭发个人成员的目标。

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

 

行使方面包车型客车写法,外部代码不能够读取内部的_count变量。
 

 console.info(module1._count); //undefined

 

module1就是Javascript模块的为主写法。下边,再对那种写法进行加工。

四 、放大格局
假如七个模块极大,必须分成多少个部分,大概3个模块须要继续另三个模块,那时就有供给接纳”放大情势”(augmentation)。

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

 

上边的代码为module1模块添加了3个新情势m3(),然后回来新的module1模块。

伍 、宽放大情势(Loose augmentation)
在浏览器环境中,模块的逐一部分常见都以从网上获取的,有时不恐怕领会哪个部分会先加载。倘诺使用上一节的写法,第贰个实施的一些有或许加载二个不存在空对象,这时就要动用”宽放大方式”。

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

 

与”放大形式”相比较,"宽放大格局"正是”马上实施函数”的参数能够是空对象。

⑥ 、输入全局变量
独立性是模块的严重性特点,模块内部最好不与程序的其他一些直接互动。
为了在模块内部调用全局变量,必须显式地将其它变量输入模块。

  var module1 = (function ($, YAHOO) {
    //...
  })(jQuery, YAHOO);

 

下边包车型大巴module1模块要求动用jQuery库和YUI库,就把那七个库(其实是几个模块)当作参数输入module1。那样做除了保障模块的独立性,还使得模块之间的重视性关系变得肯定。那上头越来越多的座谈,参见Ben
Cherry的有名小说《JavaScript Module Pattern: In-Depth》。
本条体系的第①某个,将探究怎么样在浏览器环境公司分化的模块、管理模块之间的依赖性。

其一类别的第1部分介绍了Javascript模块的基本写法,后天牵线怎样规范地使用模块。