寫在前面

　　大雪至，風(fēng)紛飛，夜里嗚聲伴秋葉，轉(zhuǎn)眼2017也快要過去了，時(shí)間在不停的走，事情在不停的做，今年的秋葉落盡了，明年的春芽也就不遠(yuǎn)了吧。

?

　　縱觀程序千萬，ui、功能、語法、運(yùn)算、框架，都可以用數(shù)據(jù)兩個(gè)字來囊括，二進(jìn)制數(shù)據(jù)、xml數(shù)據(jù)、數(shù)據(jù)庫(kù)數(shù)據(jù)。 數(shù)據(jù)的基本定義是：

數(shù)據(jù)(data)是事實(shí)或觀察的結(jié)果，是對(duì)客觀事物的邏輯歸納，是用于表示客觀事物的未經(jīng)加工的的原始素材。

數(shù)據(jù)可以是連續(xù)的值，比如聲音、圖像，稱為模擬數(shù)據(jù)。也可以是離散的，如符號(hào)、文字，稱為數(shù)字?jǐn)?shù)據(jù)。 在計(jì)算機(jī)系統(tǒng)中，數(shù)據(jù)以二進(jìn)制信息單元0,1的形式表示。 在我們的開發(fā)中，你很可能使用的是xml，json，有時(shí)候要使用到base64,，對(duì)象，數(shù)組，它們都是數(shù)據(jù)的展現(xiàn)，在開發(fā)中大部分人可能忽略了一個(gè)出發(fā)點(diǎn)，那就是數(shù)據(jù)驅(qū)動(dòng)開發(fā)，在數(shù)據(jù)驅(qū)動(dòng)下的開發(fā)事半功倍。

?數(shù)據(jù)驅(qū)動(dòng)開發(fā)

　　那么什么是數(shù)據(jù)驅(qū)動(dòng)開發(fā)？ ?我的理解是，它是一種順序思維，我們?cè)陂_發(fā)時(shí)，往往關(guān)注于功能點(diǎn)、一個(gè)代碼單元、單個(gè)系統(tǒng)，這里我以一個(gè)web界面解釋（博主擅長(zhǎng)web），

日常，我們界面開發(fā)流程可能是這樣的：

　　1.需求A，一個(gè)web界面，如下圖

　　

　2. ok 一張個(gè)人中心界面，這里面有什么呢，

　　　①.一個(gè)用戶，包含頭像,姓名等信息

? ? ? ? ? ②.兩個(gè)記錄表

　3.然后就開始開發(fā)了，

　　

?

一般的思維，首先布局，頭部》中間》底部》動(dòng)畫 ，然后請(qǐng)求服務(wù)器數(shù)據(jù)，最后把數(shù)據(jù)渲染到頁面中。這符合我們一貫的思路，不論用什么框架，什么技術(shù)，流程大多如此，但是作為對(duì)比，我們來看看數(shù)據(jù)驅(qū)動(dòng)下的界面開發(fā)

　　　?

?界面制作動(dòng)手之前，我們需要設(shè)計(jì)一個(gè)數(shù)據(jù)模型，例如個(gè)人中心界面，這個(gè)簡(jiǎn)單的界面可以分為兩塊。

　　1、用戶信息

　　2、相關(guān)信息

現(xiàn)在我使用json表示這個(gè)界面

{"user":{},"about_msg":{} }

?在用戶信息里有用戶名，頭像，在相關(guān)信息里，有用戶詳細(xì)信息，報(bào)修記錄，寬帶記錄，其中報(bào)修記錄，寬帶記錄是有圖標(biāo)，有鏈接的，那么最后的數(shù)據(jù)模型應(yīng)該是這樣的

{"user":{"name":"zhangtaifeng","img":"..."},"about_msg":{"user_detail":[{"title":"姓名","value":"zhangtaifeng"},{"title":"學(xué)號(hào)","value":"123456"},{"title":"郵箱","value":"..."}],"maintenance":{"icon":"../images/...","href":"",title:"保修"},"buy":{"icon":"../images/...","href":"","title":"購(gòu)買"}} }

當(dāng)數(shù)據(jù)模型準(zhǔn)備完畢，界面的開發(fā)就變得簡(jiǎn)單起來，無論你是用什么樣的框架都可以在這樣的數(shù)據(jù)基礎(chǔ)上，或循環(huán)、或模板引擎、或后臺(tái)渲染，核心要求是，

數(shù)據(jù)必須在前面，數(shù)據(jù)改變，界面改變，如果界面更改了，數(shù)據(jù)沒有同步，那么這些設(shè)計(jì)就變得毫無意義。

可以預(yù)見的是，一旦使用了數(shù)據(jù)模型驅(qū)動(dòng)界面開發(fā)，那么這塊工作是由難到易的，后期維護(hù)簡(jiǎn)單。

這還只是一個(gè)簡(jiǎn)單的個(gè)人中心界面。開發(fā)復(fù)雜的、大型的圖形界面，數(shù)據(jù)驅(qū)動(dòng)無疑是最好的開發(fā)方式。

要點(diǎn)

　　1、數(shù)據(jù)模型需要在用戶界面的前面，也就是說，數(shù)據(jù)更改，界面更改。不可以直接更改界面，就算重新設(shè)計(jì)，也需要首先從數(shù)據(jù)修改入手。

　　2、你可以設(shè)置數(shù)據(jù)監(jiān)聽，改變時(shí)重新渲染界面。也可以做一個(gè)驅(qū)動(dòng)函數(shù)，專門負(fù)責(zé)界面渲染，每次更改數(shù)據(jù)調(diào)用，例如：

var data = {name:"zhangtaifeng"}; //渲染函數(shù) var changeView = function(data){document.body.innerHTML='<h1>'+data.name+'</h1>';return data };changeView(data); //zhangtaifeng setTimeout(function(){data.name="aaa";changeView(data); //aaa },3000);

　　前端，像vue angular react都提供了簡(jiǎn)便的watch方法。

? ? ? 3、盡量使頁面數(shù)據(jù)化，如果你的項(xiàng)目不是依賴seo的話。

優(yōu)勢(shì)

　　假如A和B開發(fā)了一個(gè)一樣的界面，A和平時(shí)一樣，寫html...寫js....請(qǐng)求數(shù)據(jù)。 B首先設(shè)計(jì)數(shù)據(jù)模型，然后設(shè)計(jì)驅(qū)動(dòng)函數(shù)，然后寫html，寫js，請(qǐng)求數(shù)據(jù)。?

　　一開始看，A大多數(shù)情況下會(huì)比B快很多的，按通常流程走，符合邏輯。?

? ? ? ?現(xiàn)在老板需要增加一行元素，比如”我的訂單“。

? ? ? ?A需要修改html、增加js

　　B只需要在數(shù)據(jù)模型上加一行”我的訂單“就行了。

　　類似的，如果要你保存頁面狀態(tài)，怎么辦？ ? 保存數(shù)據(jù)就行了。

　　跳轉(zhuǎn)登錄，返回回填表單，保存數(shù)據(jù)就行了。

? ? ? ?還有更多的好處。。。

結(jié)束

　　傳達(dá)一些想法，表示一些邏輯，實(shí)屬不易，若筆頭略有頓挫，諸君見諒，若觀點(diǎn)也有偏差，望各位海涵，然君指出后，言出必思，思之必改，謝謝大家。

======================================================== 轉(zhuǎn)載請(qǐng)注明出處。

總結(jié)

以上是生活随笔為你收集整理的【开发者的精进】 数据驱动下的程序设计的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。