頁面組件化

時間 2019-11-24

標籤頁面組件简体版

原文原文鏈接

前言php

　　如今隨着互聯網的高速發展，對於電子商務各個環節各個過程的效率也須要高速起來，固然也包括了做爲重要信息入口的網站頁面；逐步趨於個性化的頻道、層出不窮的促銷活動頁，對於這些頁面需求的快速響應與產出也成爲了一種必需；而對於這種高速的相應，帶來的是人力成本的提高，資源就成爲了主要瓶頸，如何讓少的資源來完成高效的相應呢？不論是頻道仍是活動，在必定場景下他們所用到的元素都是相對固定的，好比咱們的博客編輯頁面，它實際上是由頭部吊頂、頭部導航、左側功能菜單、主編輯功能區和底部連接塊組成。那麼咱們能夠根據不一樣的場景將這些能夠共用的東西沉澱出來，用於後續頁面的快速產出，因而就引出了頁面組件化的概念。css

組件化概念html

　　組件化：將一整塊業務或者系統，按照其功能的獨立性，而拆分紅各個獨立的功能模塊的過程；這些獨立的功能模塊就是組件。jquery

　　如今不少的系統都引入了組件化的概念，在進行系統功能設計的時候儘可能將功能模塊設計的足夠獨立，這樣對於系統功能的並行開發和功能的擴展性都會有良好的做用；好比不少的工做流系統、資質斷定系統，都是將流程上的一個一個模塊進行組件化的方式來開發，經過配置的方式將各個組件串聯起來，造成一個可插拔式的工做流程，能夠很好地響應需求的變動。框架

　　對於一個WEB頁面的組件化來講，也是能夠考慮從頁面的組成來引入組件化的概念；WEB頁面是由必定的佈局結構來組成的；而針對於不一樣的頁面，它所承載的頁面結構實際上是有規律可循的，好比咱們的博客編輯頁面，它實際上是由頭部吊頂、頭部導航、左側功能菜單、主編輯功能區和底部連接塊組成，那博客內容展現頁面，也是有頭部吊頂和導航、底部鏈接塊和功能菜單這幾個模塊的，那麼基於組件化的思想，咱們是否是能夠將頁面拆分紅一個一個小的獨立單元來進行開發，而後經過必定的方式來將這些組件按照需求組裝成一個編輯頁面或者展現頁面呢？jsp

頁面組件化模塊化

　　要想知道如何將頁面進行獨立的模塊劃分，首先要了解頁面是如何組成的；頁面是有固定的編碼結構的，如：<html><head></head><body></body></html>，html + css + js能夠實現一個頁面的製做，一些動態的頁面可能還包括一些動態的元素標籤，包括：php/asp/jsp等；那麼要將頁面進行模塊化，頁面必需遵循必定的結構，好比柵格化的佈局結構組件化

　　將頁面佈局固定以後，對於填充佈局坑位的組件單元，也有必定的約束，由於一個組件單元就包含了必定的代碼片斷，不僅僅只包括了html，也包括了這個模塊的樣式和腳本，對於搭建一個頁面所使用到的模塊，可能一個模塊會被屢次使用到一個頁面中，那麼如何保證每個模塊間的腳本只會影響本身模塊的操做呢？這就須要必定的腳本框架來進行腳本的初始化工做，保證每個模塊的腳本都能進行獨立的初始化，互不干擾；這就引來了另外一個問題，對於腳本框架，現在也是各式各樣，不一樣的業務會使用不一樣的腳本框架，如：jquery/kissy/sea-js等，如何來對此進行區分呢？咱們能夠對組成頁面的組件進行打標，根據不一樣的業務頁面，其所對應的可以使用組件只能應用到適合的頁面中，以保證一個頁面中不存在不一樣腳本框架的模塊。佈局

　　總結下來頁面組件化所須要作的事情：網站

　　1. 頁面佈局規範化；

　　2. 定義組件所包含的內容(html代碼片斷、樣式腳本)；

　　3. 組件腳本實例初始化；

　　4. 組件的多框架歸類處理；

　　這僅僅是作到了頁面的組件化，可是對於這些組件是否能夠用在不一樣的場景或者頁面，單單隻作這麼一點是不夠的，咱們能夠想象一個組件能夠被用到的某個地方時，哪些是須要修改的，哪些是能夠共用的；好比博客編輯頁面的左側功能菜單，他提供了一種菜單的形式和菜單的具體數據，這種菜單形式是不變的，到博客展現頁面，只是菜單的具體數據產生了變化，那麼，咱們能夠把這種菜單的形式作成是一個組件，而這個菜單的具體數據做爲這個組件的一種傳入參數，最終展示出來的頁面實際上是結構與數據結合產生的結果；那麼，在定義組件所包含的內容時，須要注意的就是，這個組件作包含的html只是組件的展示結構，具體的數據能夠在這個組件使用到某個頁面以後產出，而後經過必定的渲染機制來實現最終的代碼實現，這個過程須要注意的點包括：

　　1. 組件代碼定義模板；

　　2. 數據由應用時提供；

　　3. 模板與數據渲染引擎。

　　由上能夠看出，組件實際上是能夠分紅2個比較獨立的部分，模板和數據，其實這兩部分都是能夠進行組件化的，前面討論的是模板的組件化，數據的組件化須要基於數據的來源，若是數據已是沉澱在系統中，數據也是能夠進行組件化；而後將模板與數據進行必定規則的映射匹配來實現組裝；這種模板與數據組件化的思想其實能夠代替不少的純粹作數據加工與展示的應用。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。