前端為何要組件化——看山還是山
阿新 • • 發佈：2017-05-15
image javascrip java 編寫 元素 body element rom 設定 前端組件化，將頁面中的各個部分分割成單獨的一部分進行開發，在和別人協同工作的時候能夠有效、獨立的進行開發，比如你寫你的header，我寫我的footer，寫好了往index裏面加，我的模塊只影響我，包括css、js。
前端頁面中，能夠讓瀏覽器渲染出效果需要的其實說到底就3個東西：HTML（結構）、CSS（樣式）、JavaScript（行為）。不管是VUE、Angular還是jQuery等框架，之所以叫做框架就是因為他並沒有改變本質上的東西，比如jQuery中獲取元素 $("#container")就等於document.getElementByID("container")，只是在我們編寫代碼的過程中框架對其進行了轉換。所以面對前端中這麽多框架，還是要保持初心，前端三大件還是三大件。
以VUE組件化為例子說明
HTML （結構） 
圖1：VUE+webpack初始化APP.vue文件
這三個模塊也是VUE中一個組件的構成部分，接下來說一說我對它的理解。
結合上面所說的“前端三大件還是三大件”。首先<template>可以想成我們頁面中某個組件的容器，我們想在頁面中呈現某個內容，肯定要一個容器作為載體，不管是body還是div。在<template>中存放的就是組件的html結構。
接下來是樣式控制<style>，這點比較好理解，和之前我們沒有使用組件化開發比較
HTML文檔<template> 
我們需要在每個頁面中編寫上圖這段代碼，並且引入該導航欄的css樣式文件和js文件（一般這裏我們會將通用的樣式文件和js文件整合到一個css文件或者js文件中）。而現在，使用了組件化開發之後，我們僅僅需要在需要的頁面中引入import navi from ‘navi.vue’，從代碼數量來說大大減少工作量，雖然這部分是可以通過復制粘貼實現，但是這樣導入後 ，會讓代碼結構更清晰。
接下來談談樣式<style>
圖3：vue初始化中Hello.vue中的<style>
在談vue中的<style>的時候，我們必須先了解<style scoped>這個屬性，也就是圖3中20行的標簽，這個屬性的作用是將style樣式只在當前容器中生效。在以往設計頁面的時候，我們需要單獨對某個span進行樣式設定，需要我們從上往下一層一層確定該span的位置，現在我們可以使用<style scoped>限定css生效的位置，而不用擔心影響到頁面中的其它元素，在HTML中新增這個屬性也說明了前端組件化的一個趨勢。
JavaScript——<script>
圖1：VUE+webpack初始化APP.vue文件
這三個模塊也是VUE中一個組件的構成部分，接下來說一說我對它的理解。
結合上面所說的“前端三大件還是三大件”。首先<template>可以想成我們頁面中某個組件的容器，我們想在頁面中呈現某個內容，肯定要一個容器作為載體，不管是body還是div。在<template>中存放的就是組件的html結構。
接下來是樣式控制<style>，這點比較好理解，和之前我們沒有使用組件化開發比較
HTML文檔<template>
我們需要在每個頁面中編寫上圖這段代碼，並且引入該導航欄的css樣式文件和js文件（一般這裏我們會將通用的樣式文件和js文件整合到一個css文件或者js文件中）。而現在，使用了組件化開發之後，我們僅僅需要在需要的頁面中引入import navi from ‘navi.vue’，從代碼數量來說大大減少工作量，雖然這部分是可以通過復制粘貼實現，但是這樣導入後 ，會讓代碼結構更清晰。
接下來談談樣式<style>
圖3：vue初始化中Hello.vue中的<style>
在談vue中的<style>的時候，我們必須先了解<style scoped>這個屬性，也就是圖3中20行的標簽，這個屬性的作用是將style樣式只在當前容器中生效。在以往設計頁面的時候，我們需要單獨對某個span進行樣式設定，需要我們從上往下一層一層確定該span的位置，現在我們可以使用<style scoped>限定css生效的位置，而不用擔心影響到頁面中的其它元素，在HTML中新增這個屬性也說明了前端組件化的一個趨勢。
JavaScript——<script>前端為何要組件化——看山還是山