建站
咨詢
售后
建站咨詢
新聞中心
我用JavaScript 編程很多年了，寫了大量的JavaScript代碼，即便是我這樣的經(jīng)歷，但我仍然還在努力地去寫出更優(yōu)美的JavaScript代碼，在這篇文章中，我將探索為什么寫出漂亮的JavaScript代碼是如此困難，如何使用CoffeScript（一種簡(jiǎn)約且能編譯成JavaScript的語(yǔ)言）改善它。
成都創(chuàng)新互聯(lián)公司長(zhǎng)期為超過(guò)千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為環(huán)江企業(yè)提供專業(yè)的網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)，環(huán)江網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。
什么是優(yōu)美的代碼？
我想從個(gè)人觀點(diǎn)來(lái)聲明如何定義優(yōu)美代碼
1、優(yōu)美的代碼是使用更少的代碼解決問(wèn)題；
2、優(yōu)美的代碼是可讀而且易理解的
3、優(yōu)美的代碼是一段既沒(méi)有什么可以需要添加也沒(méi)有什么多余的可以去掉代碼（就像偉大的的設(shè)計(jì)）
4、最短長(zhǎng)度是優(yōu)美代碼的另外一個(gè)方面，并不是以此為作為目標(biāo)或者權(quán)衡
所以對(duì)我來(lái)說(shuō)，優(yōu)美的代碼是最小代碼化、可使用、易讀的綜合效應(yīng)。
一段優(yōu)美JavaScript代碼的例子：
以斐波納契函數(shù)舉例來(lái)說(shuō)，這個(gè)函數(shù)對(duì)絕大多數(shù)程序員來(lái)是應(yīng)該知道的。這里有一個(gè)談不上漂亮的實(shí)現(xiàn)，因?yàn)榇a缺乏結(jié)構(gòu)化，而且使用了很多沒(méi)必要的冗長(zhǎng)代碼：
- function f(n) {
- var s= 0;
- if(n == 0) return(s);
- if(n == 1) {
- s += 1;
- return(s);
- }
- else {
- return(f(n - 1) + f(n - 2));
- }
- }
這里是另外一個(gè)版本的實(shí)現(xiàn)，我發(fā)現(xiàn)了更多優(yōu)雅和優(yōu)美之處，尤其是如果你熟悉單行的if else的話(三目條件運(yùn)算）:
- function fib(n) {
- return n<2 ? n : fib(n-1) + fib(n-2)}
同樣優(yōu)美的一段碼，代碼的行數(shù)并不見(jiàn)得那么重要
- function fib(n) {
- if (n < 2)
- return n
- return fib(n-2) + fib(n-1)}
JavaScript的毛?。?我認(rèn)為JavaScript的一個(gè)主要問(wèn)題就是它那令人困惑的混雜多種不同語(yǔ)言的模式： JavaScript是函數(shù)式語(yǔ)言 JavaScript是面向?qū)ο蟮恼Z(yǔ)言，但它是基于原型的 JavaScript是動(dòng)態(tài)的非常接近于Lisp而不是C/Java,但是有C/Java的語(yǔ)法 JavaScript的名字就很讓人疑惑，但是和Java沒(méi)有半點(diǎn)關(guān)系 這種語(yǔ)言有特性危機(jī)，程序員嘗試強(qiáng)加范式到JavaScript中，但這并不是什么好主意，因?yàn)镴avaScript不是Java，不是Sheme,也不是Python，就像其它語(yǔ)言一樣有自己的強(qiáng)項(xiàng)和弱項(xiàng)。 同時(shí)，JavaScript草率的設(shè)計(jì)和糟糕的決策表現(xiàn)在this，像this的動(dòng)態(tài)域、用于繼承的語(yǔ)法，由于考慮到向后兼容的原因修復(fù)這些問(wèn)題非常困難。這里是一個(gè)很好的引用來(lái)自于JavaScript的創(chuàng)造者，亮點(diǎn)在JavaScript誕生的所處的環(huán)境：“JavaScript聽(tīng)起來(lái)像Java，僅此而已，像是Java的啞巴小兄弟，但是我不得不在十天完成或者比JavaScript更糟糕的事情會(huì)發(fā)生”— Brendan Eich
CoffeeScript：全新的方式寫出更好的JavaScript CoffeeScript是一種精致的語(yǔ)言，能編譯成JavaScript。它的目的是用簡(jiǎn)單的方法揭示JavaScript優(yōu)秀的部分。
CoffeeScript不會(huì)終結(jié)你的JavaScript代碼
我喜歡CoffeeScript的原因之一是它能編譯成JavaScript，這就意味著我可以重用我當(dāng)前所有的JavaScript代碼，我不需要重寫任何代碼到CoffeeScript，這是一筆偉大的交易，尤其是因?yàn)槲覀兊腤edoist JavaScript代碼庫(kù)非常龐大，要是重寫成另一種語(yǔ)言夠你花上數(shù)月的時(shí)間。 CoffeeScript同樣是一種迷你型的JavaScript，就像是被改善JavaScript版本，糟糕的部分被替換掉了。同時(shí)它的語(yǔ)法從C/Java語(yǔ)言換成了Ruby或者是Python（棒極了，因?yàn)镴avaScript 更接近于Ruby、Python而不是C或者Java）。
CoffeeScript是怎么樣編譯成JavaScript 為了闡述編譯，我們舉一例子，看他是怎么工作的。 CoffeeScript代碼：
- square = (x) -> x * x
- cube = (x) -> square(x) * x
編譯成JavaScript代碼：
- var cube, square;
- square = function(x) {
- return x * x;
- };
- cube = function(x) {
- return square(x) * x;
- };
正如你從上例中看到的CoffeeScript和JavaScirpt的映射非常的直接。在另外一個(gè)網(wǎng)站你可以發(fā)現(xiàn)很多例子CoffeeScript如何編譯成JavaScript。
CoffeeScript：重寫示例
為了給你一種CoffeeScript的感覺(jué)，這里是個(gè)小JavaScript例子，我將重寫成CoffeeScript。
- get: function(offset, callback, limit) {
- var self = this;
- var data = {
- project_id: Projects.getCurrent().id,
- limit: limit || this.default_limit
- }
- if(offset)
- data.offset = Calendar.jsonFormat(offset, true);
- this.ajax.getArchived(data, function(data) {
- if(!offset)
- self.setCache(data);
- callback(data);
- });
- }
CoffeeScript看起來(lái)像這樣：
- get: (offset, callback, limit) =>
- data =
- project_id: Projects.getCurrent().id
- limit: limit or @default_limit
- if offset
- data.offset = Calendar.jsonFormat(offset, true)
- @ajax.getArchived(data, (data) =>
- if !offset
- @setCache(data)
- callback(data)
- )
如你所見(jiàn)，兩者看起來(lái)非常相似，但是我的觀點(diǎn)是CoffeeScript看起來(lái)更輕快，因?yàn)樗蟹潜仨毜恼Z(yǔ)法被移除僅保留了必須的元素。
現(xiàn)在讓我們來(lái)看看CoffeeScript的亮點(diǎn)：
亮點(diǎn)一：繼承更簡(jiǎn)單
JavaScript有很強(qiáng)的繼承系統(tǒng)，但是語(yǔ)法很恐怖，CoffeeScript修復(fù)了用一種很優(yōu)雅的繼承系統(tǒng)模擬其它很多語(yǔ)言中類和繼承機(jī)制：
- class Animal
- constructor: (@name) ->
- move: (meters) ->
- alert @name + " moved " + meters + "m."
- class Snake extends Animal
- move: ->
- alert "Slithering..."
- super 5
亮點(diǎn)二：數(shù)組的迭代
- list = [1, 2, 3, 4, 5]
- cubes = (math.cube num for num in list)
數(shù)組切片：
- copy = list[0...list.length]
數(shù)組迭送：
- countdown = (num for num in [10..1])
亮點(diǎn)三：字符串迭代
對(duì)于字符創(chuàng)的插入，CoffeeScript借用了Ruby的語(yǔ)法，它能簡(jiǎn)單的構(gòu)造字符串。
- author = "Wittgenstein"
- quote = "A picture is a fact. -- #{ author }"
允許多行的字符串：
- mobyDick = "Call me Ishmael. Some years ago -
- never mind how long precisely -- having little
- or no money in my purse, and nothing particular..."
亮點(diǎn)四：綁定this
this 關(guān)鍵字在JavaScript中部分的被破壞，因?yàn)樗膭?dòng)態(tài)域，CoffeeScript修復(fù)了這些，如果你使用=>關(guān)鍵字（它自動(dòng)為你綁定this或者@）
- Account = (customer, cart) ->
- @customer = customer
- @cart = cart
- $('.shopping_cart').bind('click', (event) =>
- @customer.purchase @cart
- )
探索CoffeeScript
我僅僅抓住CoffeeScript的表面所提供的一些東西，更多細(xì)節(jié)請(qǐng)從他們的站點(diǎn)提取以及帶有注釋的源代碼。
我仍然在探索CoffeeScript，目前為止這是我最喜歡的語(yǔ)言，榮譽(yù)屬于Jeremy Ashkenas?？鞓?lè)的編程，我也希望你可以試一把CoffeeScript。
原文鏈接：http://blog.jobbole.com/26554/#4_2,3_0_948d883a507938_298
責(zé)任編輯：張偉
來(lái)源： 伯樂(lè)在線 JavaScript JS 代碼
標(biāo)題名稱：以優(yōu)美方式編寫JavaScript代碼
文章分享：http://m.5511xx.com/article/coihgjd.html
