【开发者的精进】 数据驱动下的程序设计
寫在前面
大雪至,風(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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Linux破解系统管理员密码
- 下一篇: Node.js~ioredis处理耗时请