目錄

• 組件化和模塊化
• 模塊化
• 組件化
• Vue中的組件化

組件化和模塊化

為什么會(huì)有組件化和模塊化？當(dāng)我們的項(xiàng)目復(fù)雜度不斷上升，項(xiàng)目維護(hù)成本逐漸提高之后，對(duì)于舊項(xiàng)目的維護(hù)就變得格外困難。前端如果按照以前的編程方式，將許多html和js代碼都封裝在同一個(gè)頁(yè)面，甚至于我們大多數(shù)時(shí)候在編寫(xiě)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)系的小方塊，就像積木一樣，最終可以拼湊出一座更好的代碼大樓。

模塊化

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

es6中出現(xiàn)了module的說(shuō)法，即模塊。通過(guò)將我們的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)過(guò)不斷地思考演化，就引出了組件化這一說(shuō)法。

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

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

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

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

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

Vue中的組件化

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

props

props就是當(dāng)我們使用組件時(shí)，就要傳遞一些參數(shù)給到我們的母版，這樣才能得到我們想要的組件的樣式或者對(duì)應(yīng)的一些功能。比如一個(gè)input，如果我們希望它是不可被輸入的，那我們就可通過(guò)傳遞一個(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)是沒(méi)效果的。

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

<template>
  <div :class="{ "cat-input--suffix": showSuffix }">
    <!-- type：先判斷是否有傳入顯示密碼，控制輸入框類(lèi)型是文本/密碼，然后是type傳入的值 -->
    <input
      :type="showPassword ? (passwordVisiable ? "text" : "password") : type"
     
      :placeholder="placeholder"
      :name="name"
      :disabled="disabled"
      :class="{ "is-disabled": disabled }"
      :value="value"
      @input="handleinput"
    />
    <span v-if="showSuffix">
      <i
       
v-if="clearable && value"
@click="clear"
      ></i>
      <i
       
: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時(shí)，其實(shí)就綁定的input事件，因此父組件不需要再聲明事件了
      this.$emit("input", event.target.value);
    },
    clear() {
      this.$emit("input", "");
    },
    handlepwd() {
      this.passwordVisiable = !this.passwordVisiable;
    },
  },
  computed: {
    //有清空/顯示密碼，添加類(lèi)名、顯示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)輸入用戶(hù)名"
      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)組件化和模塊化方法詳解的文章就介紹到這了,更多相關(guān)JS組件化和模塊化內(nèi)容請(qǐng)搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！