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

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

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

模塊化

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

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

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

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

組件化

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

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

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

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

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

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

Vue中的組件化

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

props

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

emit

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

我們需要的應該是它的母版，在母版上的input事件綁定一個function，然后當輸入觸發(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>
    </span>
  </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實現(xiàn)組件化和模塊化方法詳解的文章就介紹到這了,更多相關JS組件化和模塊化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: