資訊專(zhuān)欄INFORMATION COLUMN
摘要：?jiǎn)栴}就出在這個(gè)方法上，它將整個(gè)回調(diào)函數(shù)轉(zhuǎn)成了，然后在中通過(guò)字符串來(lái)尋找依賴(lài)。其實(shí)，在執(zhí)行前會(huì)執(zhí)行另一個(gè)方法，參考文章得知，首先會(huì)執(zhí)行來(lái)判斷回調(diào)函數(shù)中有幾個(gè)參數(shù)，個(gè)參數(shù)時(shí)就認(rèn)為傳入了，個(gè)參數(shù)時(shí)就認(rèn)為傳入了和，個(gè)參數(shù)時(shí)認(rèn)為傳入了，和。
最近用gulp壓縮了一下requirejs項(xiàng)目中的文件，出現(xiàn)了讓人很糾結(jié)的錯(cuò)誤，原代碼
define(funciton(require){
var $ require = $("jquery");
});
壓縮后：
define(function(n){var $ = n("jquery")});
報(bào)錯(cuò)：Uncaught Error: Module name "jquery" has not been loaded yet for context
可以看到壓縮前后唯一的區(qū)別就是，函數(shù)名require被替換了更精簡(jiǎn)的n。講道理require作為一個(gè)形參，叫啥名字應(yīng)該都沒(méi)關(guān)系的，可偏偏就出了錯(cuò)。
更神奇的是只要將函數(shù)內(nèi)部的n改成require就不報(bào)錯(cuò)了：
define(function(n){var $ = require("jquery")});
蛋疼，明明傳進(jìn)來(lái)的是n，哪來(lái)的require啊。
雖然局部require只是requirejs的一個(gè)語(yǔ)法糖，但沒(méi)道理壓縮后就會(huì)報(bào)錯(cuò)啊。一番搜索后終于找到原因。
根據(jù)官網(wǎng)文檔局部require最終會(huì)被轉(zhuǎn)化為define([])形式，但是轉(zhuǎn)化的方法比較特殊，是通過(guò)Function.prototype.toString()來(lái)獲取依賴(lài)值的。問(wèn)題就出在這個(gè)Function.prototype.toString()方法上，它將整個(gè)回調(diào)函數(shù)轉(zhuǎn)成了string，然后在string中通過(guò)"require"字符串來(lái)尋找依賴(lài)。所以，局部require不能被替換成其它名字，而且require()中不能放變量或者path，因?yàn)檗D(zhuǎn)成字符串后可識(shí)別不出這些。
其實(shí)，在執(zhí)行Function.prototype.toString()前會(huì)執(zhí)行另一個(gè)方法，參考文章得知，首先會(huì)執(zhí)行unction.prototype.length來(lái)判斷回調(diào)函數(shù)中有幾個(gè)參數(shù)，1個(gè)參數(shù)時(shí)就認(rèn)為傳入了require，2個(gè)參數(shù)時(shí)就認(rèn)為傳入了require和exports，3個(gè)參數(shù)時(shí)認(rèn)為傳入了require，exports和module。這也是為什么
define(function(n){var $ = require("jquery")});
能夠正常運(yùn)行的原因。
官網(wǎng)推薦的解決辦法是全改成常規(guī)的define([])來(lái)定義依賴(lài)。
我目前的做法是配置gulp不壓縮name:
var uglify = require("gulp-uglify");
gulp.task("default",function(){
gulp.src(path).pipe(uglify({mangle:false}));
});
希望此文章對(duì)大家有所幫助。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/86875.html
摘要：來(lái)源于阿賢博客模塊化今天給大家寫(xiě)一篇關(guān)于前端模塊化開(kāi)發(fā)知識(shí)點(diǎn)。前端模塊化開(kāi)發(fā)那點(diǎn)歷史模塊化是指在解決某個(gè)復(fù)雜混雜問(wèn)題時(shí)，依照一種分類(lèi)的思維把問(wèn)題進(jìn)行系統(tǒng)性的分解以之處理。 來(lái)源于：阿賢博客 javascript模塊化 今天給大家寫(xiě)一篇關(guān)于前端模塊化開(kāi)發(fā)知識(shí)點(diǎn)。 前端模塊化開(kāi)發(fā)那點(diǎn)歷史 模塊化： 是指在解決某個(gè)復(fù)雜、混雜問(wèn)題時(shí)，依照一種分類(lèi)的思維把問(wèn)題進(jìn)行系統(tǒng)性的分解以之處理。模塊...
摘要：若不存在則模塊標(biāo)識(shí)應(yīng)該默認(rèn)定義為在加載器中被請(qǐng)求腳本的標(biāo)識(shí)。其中是一個(gè)數(shù)組，里面的成員就是要加載的模塊是模塊加載完成之后的回調(diào)函數(shù)。在加載與兩個(gè)模塊之后執(zhí)行回調(diào)函數(shù)實(shí)現(xiàn)具體過(guò)程。在判斷是否支持是否存在，存在則使用方式加載模塊。 我的github(PS:希望star): https://github.com/tonyzheng1... 今天由于項(xiàng)目中引入的echarts的文件太大，req...
摘要：要求模塊編寫(xiě)必須在真正的代碼之外套上一層規(guī)定的代碼包裝，樣子看起來(lái)是這樣的模塊代碼通過(guò)傳遞一個(gè)簽名為的回調(diào)函數(shù)給函數(shù)，就可以把需要注入的變量和函數(shù)注入到模塊代碼內(nèi)。 之前寫(xiě)的文章急速Js全棧教程得到了不錯(cuò)的閱讀量，霸屏掘金頭條3天，點(diǎn)贊過(guò)千，閱讀近萬(wàn)，甚至還有人在評(píng)論區(qū)打廣告，可見(jiàn)也是一個(gè)小小的生態(tài)了；）?？磥?lái)和JS全棧有關(guān)的內(nèi)容，還是有人頗有興趣的。 showImg(https://...
摘要：它就是一套兼容方案，目前兼容的有以及原生支持。返回值問(wèn)題在第一次使用時(shí)，。具體是什么意義呢的返回值，其實(shí)就是插件提供的對(duì)外接口，而實(shí)際上，就是一個(gè)對(duì)象。而在環(huán)境下，只需要將這個(gè)返回值賦予即可完成該模塊的接口。 有更新，請(qǐng)到github上看源碼 什么是OMD 在node.js流行起來(lái)之前，javascript的開(kāi)發(fā)方式都是函數(shù)式的順序依賴(lài)關(guān)系，直到node火起來(lái)。CommonJS其實(shí)首先...
摘要：本文以初學(xué)身份對(duì)比和來(lái)說(shuō)明前者的優(yōu)點(diǎn)，若使用其它庫(kù)，可以眼動(dòng)將替換為你所用的庫(kù)模塊化，實(shí)現(xiàn)某一功能的方法獨(dú)立化，使其可以復(fù)用這一高大上的名詞，按我的理解，和插件的功能一樣那為什么需要學(xué)習(xí)呢，是將定義為全局變量，在腳本的任何地方都能調(diào)用中的方 本文以初學(xué)身份對(duì)比RequireJS和jQuery來(lái)說(shuō)明前者的優(yōu)點(diǎn)，若使用其它庫(kù)，可以眼動(dòng)將jQuery替換為你所用的js庫(kù)； 模塊化，實(shí)現(xiàn)某一功...
閱讀 3525·2023-04-25 23:25
閱讀 2194·2021-11-12 10:36
閱讀 2872·2019-08-30 12:47
閱讀 2130·2019-08-29 18:45
閱讀 520·2019-08-29 17:28
閱讀 1861·2019-08-29 17:15
閱讀 1782·2019-08-29 16:05
閱讀 1505·2019-08-29 14:17
