2011-06-02 81 views
22

我一直是jQuery(及其一些小插件)的用戶。這些年來我開發的Javascript代碼可以被描述得最好......凌亂。它在這裏和那裏使用了大量的全局變量和函數,沒有使用組織代碼的標準方法,也沒有使用任何設計模式。Javascript:如何理解所有的框架和設計哲學?

我目前正在構建一個網站的新版本,並且我已經完成了PEAR::MDB2Smarty模板的後端工作。剩下的只是一些類的自制PHP。

現在,我要在網站頂部添加Javascript圖層,以提高某些功能的用戶友好性。 (同時確保所有的東西都優雅地退化)我想寫出比以前更好,更乾淨,更有組織的Javascript,所以我做了一些調查。我讀了Stefanov的Object-Oriented Javascript以更好地理解我只知道一些概念(原型,構造函數等)的一些概念。現在我被困在一個點,我不知道我應該使用哪個Javascript框架,以及如何組織這一切。

進行我的研究後,我明白了Cappuccino & Objective-JSproutcore不是我正在尋找的。要引用Cappucino的關於頁面:

卡布奇諾不是用來構建網站或使現有網站更「動態」的。我們認爲這些目標與應用程序開發的目標相距太遠,無法通過單一框架實現。 Prototype和jQuery等項目在這些任務中表現出色

所以就是這樣。然後我發現了Coffee Script,它更像是一對一的「編譯器」,不會幫助我實際組織我的代碼。

我也無意中發現一些文章,給予指導:

我也發現了Backbone.jsShoestringJavaScriptMVCGoogle LoaderjQuery ToolsjQuery UI。我真的不知道該怎麼做......我知道的東西......我知道的東西:

  • 我不想投入太多時間學習太複雜的東西,我想讓事情簡單而靈活儘可能多(這就是爲什麼我不在後端使用Symfony),但又幹淨整潔。
  • 我想使用jQuery,問題是,我應該使用它? (也是兼容的)

現在,我會使用jQuery和jQuery工具和「組織」所有在一個簡單的名稱空間/對象字面值與簡單的屬性和方法,而且,由於該網站是本地化的,我只是計劃使用簡單的vsprintf(就像我在後端)使用從後端提供的對象字面值加載的key:value對。 JavaScriptMVC看起來很有趣,但我擔心它會給一個規模相當小的項目帶來太多的複雜性。那是我需要你的建議的地方!非常感謝你提前。

+6

+1在提出問題之前進行研究...... – 2011-06-02 14:39:42

+0

我同意,如果您對jQuery不夠小心,最終會出現凌亂的客戶端腳本。當我第一次在真實項目中嘗試jQuery時,我已經體驗過它。 – OnesimusUnbound 2011-06-02 14:45:10

+1

我是jQuery的大用戶。但是,如果您確實需要組織和邏輯代碼,請遠離Flowplayer的** jQuery Tools **。它的方式已經過時(死了?),充滿了錯誤,幾乎不受自己的社區支持,並且使jQuery的標記行「完成更少,更多地完成」。 jQuery Tools與您應該瞭解的關於jQuery的一切有關,以及jQuery插件應該如何運行......當然,所有的恕我直言。 – Sparky 2011-06-02 15:02:10

回答

4

好吧,我嘗試在一個答案:

沒有「最好」的方式來做到這一點。你現在知道那裏有什麼,我想你可能會偏好自己想要的東西。在這種情況下,選擇一個框架並從內部學習。 (對不起,你的泡沫破滅了,但是每個框架都有一個學習曲線,有些陡峭,有些很容易,但最後要用好它,你必須投資,只要做到這一點,你就不會感到抱歉)。

您當然有一個首選乾淨的代碼,所以你可能會考慮一些考慮因素。你也說你對jQuery有偏好,這很好,但是有一些限制(eskimoblood提供的鏈接也指出了這個限制)。

有一些不錯的講座/和輔導與諮詢如何組織你的代碼中的jQuery:

一些風格指南:

工具來檢查你的代碼

標準工程(JavaScript)的

可能會有更多..也許更多的人可以貢獻,但我也認爲你」在你把手弄髒之前,你幾乎已經達到了你所能學習的結局。這些指南中的很多都是以非常通用的方式編寫的,但有趣的是,JavaScript在很多特定情況下被調用。只是發佈一些您認爲「雜亂」的代碼可能會很有用,我們可以幫助您找出如何更好地完成這項工作。祝你好運!

2

您應該watch the video and read the links in this article然後你應該再問問自己,如果jQuery是正確的工具。也許你會使用dojo,這對於大型項目來說好得多,或者你看看骨幹網,並且可以在jQuery中留下來。畢竟他們都更「javascriptish」,然後像sproutcore,cappuciono甚至GWT。當你來自jquery時,也更容易理解。

1

要考慮的一個框架絕對是來自Facebook的ReactJS。這個框架在很多方面都很漂亮。

你必須知道的第一件事是它是一個視圖框架。它可以在服務器端用於預先渲染頁面,但它確實在客戶端顯示。由於它是一個視圖框架,因此它可以與主幹或任何其他「後臺」 - 結束框架一起使用。

React的一個重點是它的快速性。它在內存中保留虛擬DOM並虛擬化所有網頁事件。所以虛擬事件被用來保持事件瀏覽器的不可知性。

虛擬DOM類型使編程動態站點,就好像你編程一箇舊的靜態網站。您可以拍攝整個HTML以呈現給視圖引擎(就好像您在「重新渲染」整個頁面一樣),並且它將管理DOM操作。它會在新的虛擬DOM和當前的虛擬DOM之間做一個差異,並只插入需要插入的節點。這樣可以減少DOM操作的數量,從而大大提高渲染速度。

開始的好地方是this tutorial,它展示瞭如何使用「Flux」(Facebook爲其網站設計的網絡流量)以實現Todo應用程序!