我們可以像下面這樣定義它們之間的不同：
?命令式編程：命令“機(jī)器”如何去做事情(how)，這樣不管你想要的是什么(what)，它都會(huì)按照你的命令實(shí)現(xiàn)。
?聲明式編程：告訴“機(jī)器”你想要的是什么(what)，讓機(jī)器想出如何去做(how)。
聲明式編程和命令式編程的代碼例子
舉個(gè)簡(jiǎn)單的例子，假設(shè)我們想讓一個(gè)數(shù)組里的數(shù)值翻倍。
我們用命令式編程風(fēng)格實(shí)現(xiàn)，像下面這樣：
- var numbers = [1,2,3,4,5]
- var doubled = []
- for(var i = 0; i < numbers.length; i++) {
- var newNumber = numbers[i] * 2
- doubled.push (newNumber)
- }
- console.log (doubled) //=> [2,4,6,8,10]
我們直接遍歷整個(gè)數(shù)組，取出每個(gè)元素，乘以二，然后把翻倍后的值放入新數(shù)組，每次都要操作這個(gè)雙倍數(shù)組，直到計(jì)算完所有元素。
而使用聲明式編程方法，我們可以用 Array.map 函數(shù)，像下面這樣：
- var numbers = [1,2,3,4,5]
- var doubled = numbers.map (function (n) {
- return n * 2
- })
- console.log (doubled) //=> [2,4,6,8,10]
map利用當(dāng)前的數(shù)組創(chuàng)建了一個(gè)新數(shù)組，新數(shù)組里的每個(gè)元素都是經(jīng)過(guò)了傳入map的函數(shù)(這里是function (n) { return n*2 })的處理。
map函數(shù)所做的事情是將直接遍歷整個(gè)數(shù)組的過(guò)程歸納抽離出來(lái)，讓我們專注于描述我們想要的是什么(what)。注意，我們傳入map的是一個(gè)純函數(shù)；它不具有任何副作用(不會(huì)改變外部狀態(tài))，它只是接收一個(gè)數(shù)字，返回乘以二后的值。
在一些具有函數(shù)式編程特征的語(yǔ)言里，對(duì)于 list 數(shù)據(jù)類型的操作，還有一些其他常用的聲明式的函數(shù)方法。例如，求一個(gè)list里所有值的和，命令式編程會(huì)這樣做：
- var numbers = [1,2,3,4,5]
- var total = 0 for(var i = 0; i < numbers.length; i++) {
- total += numbers[i]
- }
- console.log (total) //=> 15
而在聲明式編程方式里，我們使用reduce函數(shù)：
- var numbers = [1,2,3,4,5]
- var total = numbers.reduce (function (sum, n) {
- return sum + n
- });
- console.log (total) //=> 15
reduce函數(shù)利用傳入的函數(shù)把一個(gè)list運(yùn)算成一個(gè)值。它以這個(gè)函數(shù)為參數(shù)，數(shù)組里的每個(gè)元素都要經(jīng)過(guò)它的處理。每一次調(diào)用，第一個(gè)參數(shù)(這里是sum)都是這個(gè)函數(shù)處理前一個(gè)值時(shí)返回的結(jié)果，而第二個(gè)參數(shù)(n)就是當(dāng)前元素。這樣下來(lái)，每此處理的新元素都會(huì)合計(jì)到sum中，最終我們得到的是整個(gè)數(shù)組的和。
同樣，reduce函數(shù)歸納抽離了我們?nèi)绾伪闅v數(shù)組和狀態(tài)管理部分的實(shí)現(xiàn)，提供給我們一個(gè)通用的方式來(lái)把一個(gè)list合并成一個(gè)值。我們需要做的只是指明我們想要的是什么？
聲明式編程很奇怪嗎？
如果你之前沒(méi)有聽說(shuō)過(guò)map和reduce函數(shù)，你的第一感覺(jué)，我相信，就會(huì)是這樣。作為程序員，我們非常習(xí)慣去指出事情應(yīng)該如何運(yùn)行。“去遍歷這個(gè)list”，“if 這種情況 then 那樣做”，“把這個(gè)新值賦給這個(gè)變量”。當(dāng)我們已經(jīng)知道了如何告訴機(jī)器該如何做事時(shí)，為什么我們需要去學(xué)習(xí)這種看起來(lái)有些怪異的歸納抽離出來(lái)的函數(shù)工具？
在很多情況中，命令式編程很好用。當(dāng)我們寫業(yè)務(wù)邏輯，我們通常必須要寫命令式代碼，沒(méi)有可能在我們的專項(xiàng)業(yè)務(wù)里也存在一個(gè)可以歸納抽離的實(shí)現(xiàn)。
但是，如果我們花時(shí)間去學(xué)習(xí)(或發(fā)現(xiàn))聲明式的可以歸納抽離的部分，它們能為我們的編程帶來(lái)巨大的便捷。首先，我可以少寫代碼，這就是通往成功的捷徑。而且它們能讓我們站在更高的層面是思考，站在云端思考我們想要的是什么，而不是站在泥里思考事情該如何去做。
聲明式編程語(yǔ)言：SQL
也許你還不能明白，但有一個(gè)地方，你也許已經(jīng)用到了聲明式編程，那就是SQL。
你可以把 SQL 當(dāng)做一個(gè)處理數(shù)據(jù)的聲明式查詢語(yǔ)言。完全用SQL寫一個(gè)應(yīng)用程序？這不可能。但如果是處理相互關(guān)聯(lián)的數(shù)據(jù)集，它就顯的無(wú)比強(qiáng)大了。
像下面這樣的查詢語(yǔ)句：
- SELECT * from dogs
- INNER JOIN owners
- WHERE dogs.owner_id = owners.id
如果我們用命令式編程方式實(shí)現(xiàn)這段邏輯：
- //dogs = [{name: 'Fido', owner_id: 1}, {...}, ... ]
- //owners = [{id: 1, name: 'Bob'}, {...}, ...] var dogsWithOwners = []
- var dog, owner
- for(var di=0; di < dogs.length; di++) {
- dog = dogs[di]
- for(var oi=0; oi < owners.length; oi++) {
- owner = owners[oi]
- if (owner && dog.owner_id == owner.id) {
- dogsWithOwners.push ({
- dog: dog,
- owner: owner
- })
- }
- }}
- }
SQL代碼不僅很短，不不僅容易讀懂，它還有更大的優(yōu)勢(shì)。因?yàn)槲覀儦w納抽離了how，我們就可以專注于what，讓數(shù)據(jù)庫(kù)來(lái)幫我們優(yōu)化how。
我們的命令式編程代碼會(huì)運(yùn)行的很慢，因?yàn)樾枰闅v所有l(wèi)ist里的每個(gè)狗的主人。
而SQL例子里我們可以讓數(shù)據(jù)庫(kù)來(lái)處理how，來(lái)替我們?nèi)フ椅覀兿胍臄?shù)據(jù)。如果需要用到索引(假設(shè)我們建了索引)，數(shù)據(jù)庫(kù)知道如何使用索引，這樣性能又有了大的提升。如果在此不久之前它執(zhí)行過(guò)相同的查詢，它也許會(huì)從緩存里立即找到。通過(guò)放手how，讓機(jī)器來(lái)做這些有難度的事，我們不需要掌握數(shù)據(jù)庫(kù)原理就能輕松的完成任務(wù)。
聲明式編程：d3.js
另外一個(gè)能體現(xiàn)出聲明式編程的真正強(qiáng)大之處地方是用戶界面、圖形、動(dòng)畫編程。
開發(fā)用戶界面是有難度的事。因?yàn)橛杏脩艚换ィ覀兿Ｍ軇?chuàng)建漂亮的動(dòng)態(tài)用戶交互方式，通常我們會(huì)用到大量的狀態(tài)聲明和很多相同作用的代碼，這些代碼實(shí)際上是可以歸納提煉出來(lái)的。
d3.js 里面一個(gè)非常好的聲明時(shí)歸納提煉的例子就是它的一個(gè)工具包，能夠幫助我們使用JavaScript和SVG來(lái)開發(fā)交互的和動(dòng)畫的數(shù)據(jù)可視化模型。
第一次(或第5次，甚至第10 ＝次)你開發(fā)d3程序時(shí)可能會(huì)頭大。跟SQL一樣，d3是一種可視化數(shù)據(jù)操作的強(qiáng)大通用工具，它能提供你所有how方法，讓你只需要說(shuō)出你想要什么。
下面是一個(gè)例子(我建議你看一下這個(gè)演示)。這是一個(gè)d3可視化實(shí)現(xiàn)，它為data數(shù)組里的每個(gè)對(duì)象畫一個(gè)圓。為了演示這個(gè)過(guò)程，我們每秒增加一個(gè)圓。
里面最有趣的一段代碼是：
- //var data = [{x: 5, y: 10}, {x: 20, y: 5}]
- var circles = svg.selectAll('circle')
- .data(data)
- circles.enter().append('circle')
- .attr('cx', function(d) { return d.x })
- .attr('cy', function(d) { return d.y })
- .attr('r', 0)
- .transition().duration(500)
- .attr('r', 5)
首先我們收集了svg里所有的圓，然后把data數(shù)組數(shù)據(jù)綁定到對(duì)象里。
D3對(duì)每個(gè)圓都綁定了那些點(diǎn)數(shù)據(jù)有一個(gè)關(guān)系表。最初我們只有兩個(gè)點(diǎn)，沒(méi)有圓，我們使用.enter()方法獲取數(shù)據(jù)點(diǎn)。這里，我們的意圖是畫一個(gè)圓，中心是x和y，初始值是0 ，半秒后變換成半徑為5。
為什么我說(shuō)這很有意思？
從頭再看一遍代碼，想一想，我們是在聲明我們想要的圖案是什么樣子，還是在說(shuō)如何作圖。你會(huì)發(fā)現(xiàn)這里根本沒(méi)有關(guān)于how的代碼。我們只是在一個(gè)相當(dāng)高的層面描述我們想要的是什么：
我要畫圓，圓心在 data 數(shù)據(jù)里，當(dāng)增加新圓時(shí)，用動(dòng)畫表示半徑的增加。
這太神奇了，我們沒(méi)有寫任何循環(huán)，這里沒(méi)有狀態(tài)管理。畫圖操作通常是很難寫，很麻煩，很讓人討厭，但這里，d3歸納提取了一些常用的操作，讓我們專注于描述我們想要的是什么。
現(xiàn)在再看，d3.js很容易理解嗎？不是，它絕對(duì)需要你花一段時(shí)間去學(xué)習(xí)。而學(xué)習(xí)的過(guò)程基本上需要你放棄去指明如何做事的習(xí)慣，而去學(xué)會(huì)如何描述我想要的是什么。
最初，這可能是很困難的事，但經(jīng)過(guò)一些時(shí)間的學(xué)習(xí)后，一些神奇的事情發(fā)生了——你變得非常非常有效率了。通過(guò)歸納提取how，d3.js能讓你真正的專注說(shuō)明你想要看到的是什么，讓你在一個(gè)個(gè)更高的層面解決問(wèn)題，解放你的創(chuàng)作力。
聲明式編程的總結(jié)
聲明式編程讓我們?nèi)ッ枋鑫覀兿胍氖鞘裁矗尩讓拥能浖?計(jì)算機(jī)/等去解決如何去實(shí)現(xiàn)它們。
在很多情況中，就像我們看到的一樣，聲明式編程能給我們的編程帶來(lái)真正的提升，通過(guò)站在更高層面寫代碼，我們可以更多的專注于what，而這正是我們開發(fā)軟件真正的目標(biāo)。
問(wèn)題是，程序員習(xí)慣了去描述how，這讓我們感覺(jué)很好很舒服——強(qiáng)力——能夠控制事情的發(fā)生發(fā)展，不放走任何我們不能看見不能理解的處理過(guò)程。
有時(shí)候這種緊盯著how不放的做法是沒(méi)問(wèn)題的。如果我需要對(duì)代碼進(jìn)行更高性能的優(yōu)化，我需要對(duì)what進(jìn)行更深一步的描述來(lái)指導(dǎo)how。有時(shí)候?qū)τ谀硞€(gè)業(yè)務(wù)邏輯沒(méi)有任何可以歸納提取的通用實(shí)現(xiàn)，我們只能寫命令式編程代碼。
但大多數(shù)時(shí)候，我們可以、而且應(yīng)該尋求聲明式的寫代碼方式，如果沒(méi)有發(fā)現(xiàn)現(xiàn)成的歸納提取好的實(shí)現(xiàn)，我們應(yīng)該自己去創(chuàng)建。起初這會(huì)很難，必定的，但就像我們使用SQL和D3.js， 我們會(huì)長(zhǎng)期從中獲得巨大的回報(bào)！
【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過(guò)測(cè)試外，其他素材未做測(cè)試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請(qǐng)勿用于商業(yè)用途。如損害你的權(quán)益請(qǐng)聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。