作者：Jasin Yip
鏈接：http://www.zhihu.com/question...
來源：知乎

模塊化中的模塊一般指的是 Javascript 模塊，比如一個用來格式化時間的模塊。

組件則包含了 template、style 和 script，而它的 Script 可以由各種模塊組成。比如一個顯示時間的組件會調用上面的那個格式化時間的模塊。

畫的一張圖完美地解釋了它們之間的關系：

組件化就是做一個知乎，把導航欄拆成一個組件，一個一個回答區域拆成一個組件，編輯區是一個組件，頁腳是一個組件，等等。。你可以盡情拆分。一個組件包含了html、css、js代碼，可以簡單理解為頁面的一塊。

模塊化就是做一個知乎的編輯區組件，假設要有時間格式化、圖片格式處理、視頻格式處理、代碼格式處理，這樣很多個js功能。那么你當然可以在HTML里面引入多個JS script，現在更流行更好的方式，是采用引入的方式。

比如在一個編輯區組件里面，引入別人寫好的時間格式化和圖片格式處理的js代碼：
<style>
...
</style>

<template>
...
</template>

<script>

var format = require('../lib/format') // local import
var img = require('lib-img') // npm import

/**

• es6

• import format from '../lib/format'

• import img from 'lib-img'
  */

/**

• your code here
  */

format(new Date())
img.getnewurl('http://xxxx.jpg')
</script>

總結

以上是生活随笔為你收集整理的前端开发的模块化和组件化的定义，以及两者的关系的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。