縮短網頁開發時間的十大方法

Web開發者發表於2012-06-23

  在當今的開發環境之下,快即是好。

  當今諸如“快速應用開發 ”,“敏捷軟體開發 ”以及“非同步JavaScript和XML”(如今我們甚至無法耐心地等待網頁的重新載入)等流行詞彙和術語讓你見識到究竟身處於怎樣一個快節奏的世界當中。

  但是做事趕時間並不意味著你工作要加班加點——你工作時需要動些腦筋。此文將為你提供縮短網頁應用開發的十大省時技巧

  一、使用框架

logo of frameworks.

  框架提取出了常規程式碼,給你編寫網頁應用提供了一個基本的構造和基礎。

  框架中一個非常典型的例子就是Rails,Rails 就是Ruby程式語言的一個網頁應用開發框架。通過為你提供預先編寫好的程式碼程式包(舉個例子,像使用者輸入驗證方式)——你不僅僅節省了用Ruby編寫你 自己程式碼的時間——你也很清楚這些程式包已經受住了其他開發人員的測試以及檢驗,這可以在廣度測試時為你減少不少麻煩,另外還可以避免一些因缺少測試而導 致潛在的漏洞。

  同樣的好處對於使用諸如MooTools的JavaScript框架也是適用的。這些框架提供給你的一些類方法都是由核心開發者和社群提供,並在諸 多瀏覽器下經受廣泛測試的考驗。客戶端指令碼語言框架還有jQuery,Prototype JS,以及YUI。如果你想用一些非主流的JS框架,你可以看看這個極具潛力的JavaScript框架 清單。

  對於伺服器端的框架,你可以考慮CakePHP ,CodeIgniter ,Zend ,或者symphony。如果你喜歡VB以及C#之類微軟支援的語言,你可以考慮.Net框架 。

  你甚至是可以使用像960Grid 或者BluePrint這樣的CSS框架來快速編寫和規範你自己風格的頁面結構。

  二、使用整合開發環境

IDE logos.

  當然,你可以只用一個Notepad這樣的文字編輯器和FTP就可建立網頁應用及其頁面。但是我想大多數人都認為,這並不是一個可用在開發複雜和健壯網站專案之上的明智方法。

  整合開發環境 (IDE),為你準備了建立和管理大型網站專案所需要的工具集合。整合開發環境的功能一直在變,但它們都有如下一些常見的功能

  1、專案管理以及團隊協作功能。

  2、除錯以及診斷功能。

  3、語法提示以及自動完成功能(IDE會猜測你想寫的語法)

  4、語法高亮

  5、內建FTP,能同步本地和遠端主機上的檔案

  “IDE”這個詞可能有些花哨,有些人還對此不太熟悉,但是大資料人應該聽說過Adobe的Dreamweaver。Dreameweaver就可 以看成是一個整合開發環境。因為它含有上面提到的一些功能,幫你更快的編寫程式碼。(他通常適用於前端的製作。但是它也支援伺服器端的語言,像PHP和 ASP.NET)

  如今網上有大量的IDE,你所要做的就是為你自己(或者你的團隊)挑選一個。像一些流行的,功能齊全的IDE,如Eclipse, Komodo IDE, NetBeans, Visual Studio, 以及Aptana Studio.

  三、適當的模組化

  模組化是建立易於維護和擴充套件複雜應用的關鍵之所在。本質上這意味著程式碼要以小的部件來編寫,而不是將所有程式碼寫成一個大檔案。

  模組化開頭有其自身的時間成本(因為你必須在設計檔案結構方面花費不少心思。)但是,當你需要變更某一部件或者想要擴充套件你的應用時,這會為你節省掉不少時間。

  模組化也使得bug限制在模組之內,如果有地方發生問題,你會很快的找到問題所在。

  但是模組化的濫用會導致程式碼的臃腫和太多不必要的include語句,這會極大的拖慢整個應用的執行速度。因此在模組化程度過高和過低之間,我們需要到一個好的平衡點。

  一些模組化設計模式就包含MVC 和PAC模式。

  四、使用瀏覽器工具高效排除前端疑難問題

Firebug screen shot.

  沒有處理比跨瀏覽器的相容和解析問題更糟糕的事情了。這杆子事會使你瘋掉,它給你帶來的挫敗感差不多讓你覺得不砸掉點東西難解心頭之恨。但是整合進瀏覽器的除錯工具會使得尋找和診斷前端問題變得分為迅速和高效。

  Firebug 和Web Developer 是絕對必要的省時利器,它們已經成了前端網頁開發者的必備工具。Firebug可以輕鬆的檢視DOM,以瞭解其原理,以及可以在執行中調整CSS/HTML /JS, 除此之外,也可以幫你除錯和註釋(profile)你的JavaScrpt程式碼,幫你弄起初究竟是什麼狀況導致了你的指令碼執行中斷。Web Developer給你提供了一系列有用的工具,像有的工具可以讓你點選一個頁面元素就可以看到有哪些樣式宣告影響了該元素,也可以使你很方便的禁用 JavaScript和CSS,讓你瞭解在沒有JavaScript或者CSS的情況下, 你的頁面是如何工作的。

  如果你需要在IE瀏覽器下除錯,你可以嘗試嘗試IE開發者工具條 。它在功能上跟Firebug和Web Developer很相似。如果你想找更多的整合在瀏覽器內的IE除錯工具來幫你i節省除錯時間,你可以點選這個連結。

  五、程式碼重用

  如果你發現你自己老是在做重複的事情,這時候你應該反思反思你的程式碼結構了。考慮學習一下常見的設計模式它會幫助你建立可重用的靈活的方法,函式,以及物件。

  打個比方,如果,你需要頻繁的連結到資料庫,你可能需要建立一個資料庫的訪問類,來處理資料庫的連結,查詢以及資料的提交。

  六、 線上協作以及追蹤專案狀態

Basecamp screen shot.

  實際上——你工作並不孤單。無論你是為一個開發團隊工作或是為某人工作(這個人可能是你上司或者你的客戶),你都應該充分享受線上協作和追蹤專案狀態說給你帶來的好處。

  你在行政性任務上花費的時間越少,或者在在無窮無盡的會議上花費的時間越少(或者,更糟的,是那種需要出差的面對面會議)——你在程式碼上花費的時間就越多。

  像Basecamp, Lighthouse, 和activeCollab 這類工具就給你提供了一站式團隊協作服務,讓你隨時追蹤專案的狀態,你也可以設定專案的目標和里程碑(milestones)——這樣所有人就可以自動同步,為你省下頻繁回覆電子郵件的時間,你也無需在進度確認會議上花費大量無用時間。

  這些工具l另外會幫助你區分事情輕重,確保了所有的事情都在一個集中的地方組織和記錄下來。

  七、程式碼的自動格式化和標準化

  你需要將你的所有程式碼格式標準化,這樣做不僅僅這是一個很好的習慣,而且日後你一旦需要回來看這些程式碼,這會幫你很快的理解這些程式碼。

  程式碼的自動格式化可以讓你一鍵格式化你所有的程式碼,而不是一行一行來做這事,這也確保了程式碼編寫的一致性。自動的格式化也減少了手動修改產生錯誤的風險。

  我們有許多工具來幫助我們做這事,很多是網路版的工具 。對於CSS而言,一個流行的開源解決方案就是CSSTidy (Clean CSS is an CSSTidy的線上版本)。對於HTML我們有HTML Tidy。

  對於指令碼,我們有PHP Source Code Formatter, Ruby Script Beautifier, 和Code Beautifier Plus (這個工具是用來格式化 C#, ActionScript, and Java).

  八、在需求收集和規劃階段多花時間

  預防遠勝過補救。或許某些思想學派的人物強調不要在計劃上浪費時間——確保你已經收集到了你需要知道的所有資訊,在做功課方面花費必要時間依然是必要的。如果在需求收集方面沒做足功課會導致功能氾濫(feature Creep),原因就是各種未曾預料到的功能需求

  九、使用已經編寫好的程式碼

PHP Classes Repository Screen shot.

  古人以及幫我們發明了車軲轆,所以我們也沒必要親自再搗鼓出車軲轆來。如果在某個地方看到某個感興趣的功能,其他人極有可能已經為你寫好了程式碼(嗯,不僅僅是為你,而是為我們大家。)對於PHP而言, PHP Classes Repository為你提供了大批的類和指令碼供你下載和使用。Hot Scripts則提供了其他語言的各種指令碼。如果你只是想要一些小的程式碼段,你可以去devSnippets 上面淘淘寶。

注意:只有當你具備充足的經驗,能分辨出好程式碼和差程式碼,上面的這個辦法才會真正幫你大忙。否則你會發現你最終成品中程式碼bug叢生,書寫混亂。

  十、精簡功能

  你必須對網頁應用的某些功能做一個評估,以判斷在這個功能上面的時間投入是否值得。

  你的使用者真的需要一個並不經常更新的內容管理系統為每一個類別的文章提供一個自定義的RSS輸出嗎?你真的需要一個網站樣式轉換器來幫你檢測到使用者地理位置哪裡,然後將網站呈現不同的風格。

  編寫網站功能就是一場艱苦的戰鬥 ,不要在對終端使用者無用的功能上耗費開發時間,況且這些功能而且會使使用者介面複雜化。

  相關文件:10個步驟讓你成為高效的Web開發者

  原文sixrevisions.com 譯文:21haolou

相關文章