Closure是一種在Web開發中常用的工具,用于幫助我們壓縮JavaScript代碼。在使用Closure之前,我們需要先確定好我們所要壓縮的代碼庫,這里以jQuery庫為例。
首先,我們可以在jquery.com中下載jQuery的壓縮版本,它已經被壓縮過,但可能仍有一些不必要的代碼。我們可以使用Closure進一步壓縮它并去除其中的一些不必要的代碼。
/** * jQuery JavaScript Library v3.5.1 * https://jquery.com/ * * Includes Sizzle.js * https://sizzlejs.com/ * * Copyright jQuery Foundation and other contributors * Released under the MIT license * https://jquery.org/license * * Date: 2020-05-04T22:49Z */ (function( global, factory ) { if ( typeof module === "object" && typeof module.exports === "object" ) { // For CommonJS and CommonJS-like environments where a proper window is present, // execute the factory and get jQuery. // For environments that do not have a `window` with a `document` object (such as Node.js), // expose a factory as module.exports. // This accentuates the need for the creation of a real `window`. // e.g. var jQuery = require("jquery")(window); // See ticket #14549 for more info. module.exports = global.document ? factory( global, true ) : function( w ) { if ( !w.document ) { throw new Error( "jQuery requires a window with a document" ); } return factory( w ); }; } else { factory( global ); } // Pass this if window is not defined yet }(typeof window !== "undefined" ? window : this, function( window, noGlobal ) { var arr = []; var document = window.document; var getProto = Object.getPrototypeOf; var slice = arr.slice; var concat = arr.concat; var push = arr.push; var indexOf = arr.indexOf; /*...*/
如上所示,在下載壓縮版本的jQuery后,我們可以進行更進一步的代碼壓縮。常用的是使用Closure Compiler的Online Compiler來壓縮代碼。
將上述代碼復制到Closure Compiler中,點擊Compile即可得到壓縮后的代碼,如下:
(function(a,b){function b_(a){var b=c[a]||[];return c[a]=b,b}function ca(){return b_("1")}function ea(){return b_(2)}function fa(){return b_(3)}function ga(){return b_("4")}function ha(){return b_(5)}function ja(a){var b=Ia(a,function(){return d});return a.unshift(g),b.apply(null,a)}function ka(a){var b=a[0],c=a[1],d=!1,ga=Ia(function(b){d?p():c(b)},p,"data-"+b+"-deferred",d),ha=ja(e.concat(ga));return ha.then(c,d),ha}function la(a){if(!p.done)if(p.done=!0,Nq(a)){var b=Na(a);O() 不要擔心代碼的可讀性,這是因為此處是壓縮后的代碼。
盡管Closure的功能給我們帶來了很多便利,但在實際使用中,也需要注意其潛在的風險。例如,在壓縮代碼時,我們需要特別注意代碼邏輯的正確性和穩定性。同時,需要避免將過于復雜的代碼進行壓縮,這可能會使其變得更難以理解和維護。