javascript基礎修煉(4)——UMD規(guī)范的代碼推演

1. UMD規(guī)范

地址：https://github.com/umdjs/umd

UMD規(guī)范，就是所有規(guī)范里長得最丑的那個，沒有之一！！！它是為了讓模塊同時兼容AMD和CommonJs規(guī)范而出現(xiàn)的，多被一些需要同時支持瀏覽器端和服務端引用的第三方庫所使用。UMD是一個時代的產(chǎn)物，當各種環(huán)境最終實現(xiàn)ES harmony的統(tǒng)一的規(guī)范后，它也將退出歷史舞臺。

UMD規(guī)范的結構乍一看非常復雜，主要是因為想要看懂這段范式需要一些javascript基礎知識，它的基本結構是這樣的：

(function (root, factory) {if (typeof define === 'function' && define.amd) {// AMDdefine(['jquery', 'underscore'], factory);} else if (typeof exports === 'object') {// Node, CommonJS之類的module.exports = factory(require('jquery'), require('underscore'));} else {// 瀏覽器全局變量(root 即 window)root.returnExports = factory(root.jQuery, root._);} }(this, function ($, _) {// 方法function a(){}; // 私有方法，因為它沒被返回 (見下面)function b(){}; // 公共方法，因為被返回了function c(){}; // 公共方法，因為被返回了// 暴露公共方法return {b: b,c: c} }));

2. 源碼范式推演

2.1 基本結構

先來看最外層的結構：

(function (){}());

非常簡單，就是一個自執(zhí)行函數(shù)。既然它是一個模塊化的標準，也就意味著這個自執(zhí)行函數(shù)最終可以導出一個模塊，那么從代碼的角度來講實際上有兩種常見的實現(xiàn)方式：

return返回一個模塊；

實參傳入一個對象，把函數(shù)內(nèi)部生成好的需要導出的東西掛在這個對象的屬性上；

可以看到上面的函數(shù)體內(nèi)部是沒有return語句的，那么可以猜測UMD在實現(xiàn)時是采用了第二種方式。既然UMD是一種模塊化的規(guī)范，那么它的功能就是根據(jù)使用要求生產(chǎn)模塊，也就是說它的職責定位叫做模塊工廠，我們可以定義一個factory方法，每當執(zhí)行該方法時，就回返回一個模塊，所以它的基本結構就變成了如下的樣子：

(function (factory){//假設沒有使用任何模塊化方案，那么將工廠函數(shù)執(zhí)行后返回的內(nèi)容直接掛載到全局window.Some_Attr = factory（）; }(function(){//自定義模塊主體的內(nèi)容/*var a,b,cfunction a1(){}function b1(){}function c1(){}return {a:a1,b:b1}*/ }))

也就是說我們自定義一個匿名函數(shù)，然后把它當做實參傳給了自執(zhí)行函數(shù)，然后在自執(zhí)行函數(shù)內(nèi)部通過形參來訪問這個工廠方法（或者你會更熟悉回調(diào)函數(shù)或callback這樣的叫法），把它簡單地掛在到全局對象上，這樣就完成了基本的模塊導出。

有的時候我們也希望可以將模塊掛載到非全局的環(huán)境，將掛載對象動態(tài)傳入可以讓代碼變得更靈活，此處涉及到一個基礎知識，就是瀏覽器環(huán)境中的全局對象擁有parent,top,self三個屬性來追蹤頁面中嵌入<iframe>后引入的新的Window對象的，單頁面Window.self是指向自己的，代碼中常通過是否包含self屬性來鑒別全局對象，所以此處的寫法可以改進為兼容：

(function(root,factory){root.Some_Attr = factory(); }(self !== undefined ? self : this, function(){}));

2.2 適配AMD

接著我們先來加入AMD的規(guī)范的適配，規(guī)范地址：AMD規(guī)范github地址：

/* * AMD規(guī)范的模塊定義格式是define(id?, dependencies?, factory),factory就是實際的模塊內(nèi)容 */ (function (factory){//判斷全局環(huán)境是否支持AMD標準if(typeof define === 'function' && define.amd){//定義一個AMD模塊define([/*denpendencies*/],factory);} }(function(/*formal parameters*/){//自定義模塊主體的內(nèi)容/*var a,b,cfunction a1(){}function b1(){}function c1(){}return {a:a1,b:b1}*/ }))

2.3 適配CommonJs

接著我們先來加入CommonJs的規(guī)范的適配：

/* * CommonJs規(guī)范使用require('moduleName')的格式來引用模塊，使用module.exports對象輸出模塊，所以只要把模塊的輸出內(nèi)容掛載到module.exports上就完成了模塊定義。 */ (function (factory){//判斷全局環(huán)境是否支持CommonJs標準if(typeof exports === 'object' && typeof define !== 'function'){module.exports = factory(/*require(moduleA), require(moduleB)*/);} }(function(/*formal parameters*/){//自定義模塊主體的內(nèi)容/*var a,b,cfunction a1(){}function b1(){}function c1(){}return {a:a1,b:b1}*/ }))

加入對CommonJs的適配后，函數(shù)主體中return的內(nèi)容(一般是一個對象)就被掛載到了module.exports上,如果你編寫過node.js代碼，對此一定不會陌生。

把上面的片段揉到一塊，你也就看懂UMD的樣子了。

3. 更具針對性的UMD范式

UMD在其github主頁上提供了更具針對性的范式，適用于不同的場景，感興趣的讀者可以自行查看（地址在第一節(jié)已經(jīng)給出）。

在此貼一個可能對大多數(shù)開發(fā)者比較有用的jqueryPlugin的開發(fā)范式，如果看懂了上面的分析，那么下面的代碼應該不難看懂：

// Uses CommonJS, AMD or browser globals to create a jQuery plugin. (function (factory) {if (typeof define === 'function' && define.amd) {// AMD. Register as an anonymous module.define(['jquery'], factory);} else if (typeof module === 'object' && module.exports) {// Node/CommonJSmodule.exports = function( root, jQuery ) {if ( jQuery === undefined ) {// require('jQuery') returns a factory that requires window to// build a jQuery instance, we normalize how we use modules// that require this pattern but the window provided is a noop// if it's defined (how jquery works)if ( typeof window !== 'undefined' ) {jQuery = require('jquery');}else {jQuery = require('jquery')(root);}}factory(jQuery);return jQuery;};} else {// Browser globalsfactory(jQuery);} }(function ($) {$.fn.jqueryPlugin = function () { return true; }; }));

4. 模塊化開發(fā)

前端模塊化本身是一個稍顯混亂的話題，筆者自己最初也是require( )和require.js傻傻分不清楚，但模塊化是前端開發(fā)中非常重要的課題，如果你不想一輩子只是在一個頁面內(nèi)寫代碼，這一關是一定要過的，感興趣的讀者可以按照下面的基本類別劃分分塊進行學習。

轉載于:https://blog.51cto.com/13869008/2163409

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結

以上是生活随笔為你收集整理的javascript基础修炼(4)——UMD规范的代码推演的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。