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

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

組件化和模塊化

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

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

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

模塊化

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

es6中出現(xiàn)了module的說法，即模塊。通過將我們的js代碼封裝成一個個module，然后使用export和import命令，我們就可以更好地去管理我們的功能代碼，將通用的代碼統(tǒng)一封裝成一個個小模塊，將大型的功能代碼劃分成簡單易懂的函數(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òu)取值
import?{a,dogSay,catSay}?from?'url'

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

組件化

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

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

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

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

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

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

Vue中的組件化

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

props

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

emit

為什么會有emit？因為我們封裝一個輸入框母版之后，當(dāng)我們在某一個頁面使用這個母版生成的子組件并且想要添加一個@input的方法，如果直接@input=“function”，會發(fā)現(xiàn)是沒效果的。

我們需要的應(yīng)該是它的母版，在母版上的input事件綁定一個function，然后當(dāng)輸入觸發(fā)了這個function后通過emit（聲明一個函數(shù)如inputFun）發(fā)送出去，然后我們在子組件上可以接收到這個信號@inputFun=“getFun”，只要我們監(jiān)聽了inputFun，它就會將有輸入這個信號傳給我們在子組件定義的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時，其實就綁定的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>

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

<template>
??<!--?
??輸入框需要綁定v-model，實際上是一個語法糖，等價于：
??:value="uname"
??@input="uname=$event.target.value"
?-->
??<div>
????<Cat-input
??????placeholder="請輸入用戶名"
??????type="text"
??????v-model="uname"
??????clearable
????></Cat-input>
????<br?/>
????<Cat-input?placeholder="禁用的輸入框"?disabled></Cat-input>
????<br?/>
????<Cat-input
??????placeholder="請輸入密碼"
??????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實現(xiàn)組件化和模塊化" 就介紹到此。希望多多支持碩編程。