如何通過JavaScript實現組件化和模塊化

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

組件化和模塊化

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

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

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

模塊化

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

es6中出現了module的說法，即模塊。通過將我們的js代碼封裝成一個個module，然后使用export和import命令，我們就可以更好地去管理我們的功能代碼，將通用的代碼統一封裝成一個個小模塊，將大型的功能代碼劃分成簡單易懂的函數方法。

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

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

組件化

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

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

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

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

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

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

Vue中的組件化

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

props

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

emit

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

我們需要的應該是它的母版，在母版上的input事件綁定一個function，然后當輸入觸發了這個function后通過emit（聲明一個函數如inputFun）發送出去，然后我們在子組件上可以接收到這個信號@inputFun=“getFun”，只要我們監聽了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>

關于 "怎么通過JavaScript實現組件化和模塊化" 就介紹到此。希望多多支持碩編程。