如何通過JavaScript實(shí)現(xiàn)組件化和模塊化

本文講解"怎么通過JavaScript實(shí)現(xiàn)組件化和模塊化"，希望能夠解決相關(guān)問題。

組件化和模塊化

為什么會(huì)有組件化和模塊化？當(dāng)我們的項(xiàng)目復(fù)雜度不斷上升，項(xiàng)目維護(hù)成本逐漸提高之后，對(duì)于舊項(xiàng)目的維護(hù)就變得格外困難。前端如果按照以前的編程方式，將許多html和js代碼都封裝在同一個(gè)頁(yè)面，甚至于我們大多數(shù)時(shí)候在編寫html頁(yè)面的時(shí)候會(huì)將同一段代碼復(fù)制黏貼到不同的頁(yè)面上，那么無(wú)疑對(duì)于維護(hù)者來(lái)說(shuō)是一場(chǎng)巨大的災(zāi)難，所以組件化和模塊化的出現(xiàn)便成為了一種必然。

組件化和模塊化其實(shí)思想內(nèi)核時(shí)一致的，甚至于我認(rèn)為組件化是脫胎于模塊化。它們二者的目的都是為了減少我們維護(hù)項(xiàng)目的成本，減少代碼的冗余，提高代碼的閱讀性。

這兩者讓我們可以將頻繁使用到的代碼，復(fù)雜的頁(yè)面，劃分成一個(gè)個(gè)獨(dú)立而又互相聯(lián)系的小方塊，就像積木一樣，最終可以拼湊出一座更好的代碼大樓。

模塊化

提起前端的模塊化，就離不開ES6。隨著ES6的出現(xiàn)，更多的指令，命令和功能也隨之出現(xiàn)，我們可以編程出更友好的代碼。

es6中出現(xiàn)了module的說(shuō)法，即模塊。通過將我們的js代碼封裝成一個(gè)個(gè)module，然后使用export和import命令，我們就可以更好地去管理我們的功能代碼，將通用的代碼統(tǒng)一封裝成一個(gè)個(gè)小模塊，將大型的功能代碼劃分成簡(jiǎn)單易懂的函數(shù)方法。

'use?strict'
//導(dǎo)出變量
export?const?a?=?'100';??
?//導(dǎo)出方法
export?const?dogSay?=?function(){?
????console.log('wang?wang');
}
//導(dǎo)出函數(shù)
export?function?catSay(){
???console.log('miao?miao');?
}
//?export?catSay?這樣也行
//?使用的地方導(dǎo)入
//?export導(dǎo)出的是多個(gè)，需要解構(gòu)取值
import?{a,dogSay,catSay}?from?'url'

正是因?yàn)镋S6這一更新，便有了我們將模塊一個(gè)個(gè)劃分，也有了我們更好地去使用插件，封裝插件的途徑，當(dāng)我們正確使用模塊化，就可以減少代碼的冗余，減少頁(yè)面結(jié)構(gòu)的臃腫，也更好地可以去將各種功能插件封裝到項(xiàng)目中。

組件化

組件化的中心思想其實(shí)跟模塊化是大同小異的，可以簡(jiǎn)單地認(rèn)為模塊化是對(duì)于我們的JS功能代碼的一個(gè)說(shuō)法，而組件化是對(duì)于我們html，css代碼的一個(gè)說(shuō)法，當(dāng)我們的JS功能代碼可以被封裝成一個(gè)個(gè)小的模塊后，經(jīng)過不斷地思考演化，就引出了組件化這一說(shuō)法。

組件化對(duì)應(yīng)前端三劍客中的html和css，作為一個(gè)前端開發(fā)者，如果沒有組件化之前，經(jīng)常能碰到的一個(gè)場(chǎng)景就是復(fù)制同樣的html代碼和js代碼到不同頁(yè)面上，去做這種重復(fù)而無(wú)聊的工作。

或者其實(shí)我們可以用后端提供的組件化，比如php，jsp中，它們可以提供一個(gè)組件化的解決方案，就是通過封裝同一文件，然后php，jsp去識(shí)別讀取我們頁(yè)面上對(duì)應(yīng)的標(biāo)簽。

但是這樣的方案在前端后端分離開發(fā)中顯得是相對(duì)麻煩而且依賴性太強(qiáng)了，并不能算是前端真正的組件化解決方案。

所以前端的各種框架橫空出世，當(dāng)然它們也是通過node等類型的一個(gè)服務(wù)端語(yǔ)言來(lái)實(shí)現(xiàn)我們的前端組件化，但是相對(duì)于php和jsp，它們顯然更適合我們的前后端分離開發(fā)。

這里以Vue封裝組件作為例子，通過一個(gè)簡(jiǎn)單的封裝組件，我們可以清晰地看到組件是如何被封裝，以及如何應(yīng)用。

Vue中的組件化

Vue中我們使用emit和props完成組件的通訊。通訊也就是說(shuō)我們可以傳遞一些參數(shù)給這個(gè)組件母版，獲得一個(gè)按照我們需要生成的組件。類似于我們定義一個(gè)類，可以傳遞一些參數(shù)，來(lái)實(shí)例化一個(gè)獨(dú)特的對(duì)象。

props

props就是當(dāng)我們使用組件時(shí)，就要傳遞一些參數(shù)給到我們的母版，這樣才能得到我們想要的組件的樣式或者對(duì)應(yīng)的一些功能。比如一個(gè)input，如果我們希望它是不可被輸入的，那我們就可通過傳遞一個(gè)參數(shù)，值為false，然后props中的參數(shù)會(huì)接收到對(duì)應(yīng)的值，再將它傳給我們的組件中的html標(biāo)簽input。

emit

為什么會(huì)有emit？因?yàn)槲覀兎庋b一個(gè)輸入框母版之后，當(dāng)我們?cè)谀骋粋€(gè)頁(yè)面使用這個(gè)母版生成的子組件并且想要添加一個(gè)@input的方法，如果直接@input=“function”，會(huì)發(fā)現(xiàn)是沒效果的。

我們需要的應(yīng)該是它的母版，在母版上的input事件綁定一個(gè)function，然后當(dāng)輸入觸發(fā)了這個(gè)function后通過emit（聲明一個(gè)函數(shù)如inputFun）發(fā)送出去，然后我們?cè)谧咏M件上可以接收到這個(gè)信號(hào)@inputFun=“getFun”，只要我們監(jiān)聽了inputFun，它就會(huì)將有輸入這個(gè)信號(hào)傳給我們?cè)谧咏M件定義的getFun。

<template>
??<div?class="cat-input"?:class="{?'cat-input--suffix':?showSuffix?}">
????<!--?type：先判斷是否有傳入顯示密碼，控制輸入框類型是文本/密碼，然后是type傳入的值?-->
????<input
??????:type="showPassword???(passwordVisiable???'text'?:?'password')?:?type"
??????class="cat-input__inner"
??????:placeholder="placeholder"
??????:name="name"
??????:disabled="disabled"
??????:class="{?'is-disabled':?disabled?}"
??????:value="value"
??????@input="handleinput"
????/>
????<span?class="cat-input__suffix"?v-if="showSuffix">
??????<i
????????class="cat-input__icon?cat-icon-circle-close"
????????v-if="clearable?&&?value"
????????@click="clear"
??????></i>
??????<i
????????class="cat-input__icon?cat-icon-view"
????????:class="{?'cat-icon-view-active':?passwordVisiable?}"
????????v-if="showPassword"
????????@click="handlepwd"
??????></i>
????
??</div>
</template>
<script>
export?default?{
??name:?"CatInput",
??props:?{
????placeholder:?{
??????type:?String,
??????default:?"",
????},
????type:?{
??????type:?String,
??????default:?"text",
????},
????name:?{
??????type:?String,
??????default:?"",
????},
????disabled:?{
??????type:?Boolean,
??????default:?false,
????},
????value:?{
??????type:?String,
??????default:?"",
????},
????clearable:?{
??????type:?Boolean,
??????default:?false,
????},
????showPassword:?{
??????type:?Boolean,
??????default:?false,
????},
??},
??data()?{
????return?{
??????passwordVisiable:?false,?//控制是否顯示密碼
????};
??},
??methods:?{
????handleinput(event)?{
??????//父組件在綁定v-model時(shí)，其實(shí)就綁定的input事件，因此父組件不需要再聲明事件了
??????this.$emit("input",?event.target.value);
????},
????clear()?{
??????this.$emit("input",?"");
????},
????handlepwd()?{
??????this.passwordVisiable?=?!this.passwordVisiable;
????},
??},
??computed:?{
????//有清空/顯示密碼，添加類名、顯示span
????showSuffix()?{
??????return?this.clearable?||?this.showPassword;
????},
??},
};
</script>

//?組件需要注冊(cè)才能使用，要么全局，要么在頁(yè)面上局部注冊(cè)。
import?CatInput?from?"./components/input.vue";
Vue.component(CatInput.name,?CatInput);

<template>
??<!--?
??輸入框需要綁定v-model，實(shí)際上是一個(gè)語(yǔ)法糖，等價(jià)于：
??:value="uname"
??@input="uname=$event.target.value"
?-->
??<div>
????<Cat-input
??????placeholder="請(qǐng)輸入用戶名"
??????type="text"
??????v-model="uname"
??????clearable
????></Cat-input>
????<br?/>
????<Cat-input?placeholder="禁用的輸入框"?disabled></Cat-input>
????<br?/>
????<Cat-input
??????placeholder="請(qǐng)輸入密碼"
??????v-model="upwd"
??????show-password
????></Cat-input>
??</div>
</template>
<script>
export?default?{
??data()?{
????return?{
??????uname:?"",
??????upwd:?"",
????};
??},
};
</script>
<style?lang="scss"?scoped>
.cat-input?{
??margin-bottom:?10px;
}
</style>

關(guān)于 "怎么通過JavaScript實(shí)現(xiàn)組件化和模塊化" 就介紹到此。希望多多支持碩編程。