詳談js模塊化規(guī)范
1. CommonJS
用于服務端模塊化編程,比如nodejs就采用此規(guī)范;
一個文件就是一個模塊,require方法用來加載模塊,該方法讀取一個文件并執(zhí)行,最后返回文件內(nèi)部的module.exports對象;
require是默認讀取.js文件的,所以require(模塊名)可以不寫后綴;
同步加載,由于服務端加載的模塊一般在本地,所以可以這樣;但是在客戶器端如果一個模塊過大就會導致頁面“假死”;
module.exports屬性表示當前模塊對外輸出的接口,其他文件加載該模塊,實際上就是讀取module.exports變量;為了方便也可以用exports,exports指向module.exports;即exports = module.exports = {}
exports.xxx相當于在導出的對象上添加屬性,該屬性對調(diào)用模塊可見;
exports = 相當于給exports重新賦值,這樣就切斷了和module.exports的關聯(lián),調(diào)用模塊就不能訪問exports的對象及其屬性;
2. AMD
加載模塊:require([module], function(module){});
定義模塊:define([module], function(module){});module為依賴模塊;
require.js(前端模塊化管理的工具庫)實現(xiàn)js文件的異步加載,避免網(wǎng)頁失去響應;管理模塊之間的依賴性,便于代碼的編寫和維護。
依賴前置,盡早的執(zhí)行模依賴塊,執(zhí)行順序不一定是先1后2;
加載非規(guī)范的模塊
require.config({ baseUrl: "js/lib", paths: { "jquery": "jquery.min", "underscore": "underscore.min", "backbone": "backbone.min" }, shim: { 'underscore':{ exports: '_' }, 'backbone': { deps: ['underscore', 'jquery'], exports: 'Backbone' } } }); // exports值(輸出的變量名),表明這個模塊外部調(diào)用時的名稱;deps數(shù)組,表明該模塊的依賴性
3. CMD
define(function(require, exports, module){ var a = require('a'); a.foo(); };
Sea.js
依賴就近,且在真正需要使用依賴模塊時才執(zhí)行該模塊,順序固定;
AMD和CMD最大的區(qū)別是對依賴模塊的執(zhí)行時機處理不同,而不是加載的時機或者方式不同,二者皆為異步加載模塊;
AMD依賴前置,js可以方便知道依賴模塊是誰,立即加載;而CMD就近依賴,需要使用把模塊變?yōu)樽址馕鲆槐椴胖酪蕾嚵四切┠K
以上這篇詳談js模塊化規(guī)范就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
解決在layer.open中使用時間控件laydate失敗的問題
今天小編就為大家分享一篇解決在layer.open中使用時間控件laydate失敗的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09Javascript將字符串日期格式化為yyyy-mm-dd的方法
日期格式化相信對于大家來說再熟悉不過,最近工作中自己利用Javascript就寫了一個,現(xiàn)在將實現(xiàn)的代碼分享給大家,希望對有需要的朋友們能有所幫助,感興趣的朋友們下面來一起看看吧。2016-10-10使用JavaScript實現(xiàn)獲取頁面上所有的img并保存本地
這篇文章主要為大家詳細介紹了如何使用JavaScript實現(xiàn)獲取頁面上所有的img并保存到本地,文中的示例代碼講解詳細,有需要的小伙伴可以了解下2024-12-12TypeScript?使用?Tuple?Union?聲明函數(shù)重載
這篇文章主要介紹了TypeScript?使用?Tuple?Union?聲明函數(shù)重載,TypeScript 中為函數(shù)添加多個簽名后,依然需要添加相應的代碼來判斷并從不同的簽名參數(shù)列表中獲取對應的參數(shù),下文就來探索方法和技巧吧2022-04-04