# How do you organize your code? (module pattern, classical inheritance?) > 我以前使用 Backbone 組織我的模型（model），Backbone 鼓勵採用面向對象的方法——創建 Backbone 模型，並為其添加方法。 > 模塊模式仍然是很好的方式，但是現在我使用基於 React/Redux 的 Flux 體系結構，它鼓勵使用單向函數編程的方法。我用普通對象（plain object）表示我的 app 模型，編寫實用純函數去操作這些對象。使用動作（actions）和化簡器（reducers）來處理狀態，就像其他 Redux 應用一樣。 > 我盡可能避免使用經典繼承。如果非要這麼做，我會堅持這些原則。 #### Backbone 是什麼？ Backbone是一個實現了web前端mvc模式的輕量級js框架，發佈於2010年，Backbone依賴underscore.js,jQuery搭配做使用。但它其實不是以大家所知的的(MVC) Model-View-Controller 這樣的模式，而是Model-Collection-View 這三類物件，利用event進行串連的方式。 主要的組件： Model 資料模型(核心), View (檢視,Model的改動在前端反應), Collection (模型集合), Router（路由器,對應hash值), History (開啟歷史管理) Backbone Model 與 View的範例： ```* <html xmlns="http://www.w3.org/1999/xhtml"> <title>Design2U</title> <!--import library--> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script> <script type="text/javascript" src="http://documentcloud.github.com/backbone/backbone-min.js"></script> <script type="text/javascript"> //Backbone Model var user = new Backbone.Model({ firstName: "Jack", lastName: "divaka" }); // print model result alert(JSON.stringify(user)); //Backbone View var View = Backbone.View.extend({ // 初始化 View initialize:function(){ alert("the view has been rendered"); // get the model data document.write(this.model.get("firstName")); document.write("│"); document.write(this.model.get("lastName")); } }); // 宣告一個 view 的 instance var viewInstance = new View({ model: user }); </script> ``` [線上操作連結](http://jsfiddle.net/t3qzg8L1/5/) > Backbone最適合的場景：Backbone.js適合用在小型SPA專案,需要用JS生成大量的頁面內容 ### 現在會使用React/Redux，基於 Flux 架構的單向數據流。。 什麼是 Flux？ Flux 是 Facebook 內部搭配 React 使用的一種架構，一種設計模式,提供單向資料流的概念 (Unidirectional Data Flow)。 這一連串的步驟會匯整為一個資料流(Data Flow)，Flux用　單向(unidirectional) 資料流來設計整個資料流的運作，也就是說整個資料的 流動方向 都是一致的： ![](https://i.imgur.com/KlxQcO6.png) ### 補充： 避免使用 classical inheritance ES6中的Class(類別)一些廣泛的討論與使用建議。 Class(類別)是一個全新的語法，但它的目前整體的內容，如果與Java、C++這些語言相比，還顯得粗糙與簡單，目前也沒什麼發展出什麼設計模式。 在ES6中的Class(類別)語法，並不是真的是以類別為基礎(class-based)的物件導向，在骨子裡仍然是以原型為基礎(prototype-based)的物件導向，它只是個語法糖(syntactical sugar)。加入Class(類別)語法的目的，並不是要建立另一套物件導向的繼承模型，而是為了提供更簡潔的語法來作物件建立與繼承，當然，一部份的原因是，讓已經熟悉以類別為基礎的物件導向程式語言的開發者使用，以此提供另一種在物件導向語法上的選擇。 :::danger Class 只是簡化了 JavaScript 中操作 Constructor 的語法糖而已。 ::: #### 為什麼要避免使用classical inheritance？ 1. class繼承掩蓋了ＪＳ的核心是原型繼承。 2. class鼓勵繼承，但應該要更喜歡composition。 3. class往往會將你鎖定在你想出的第一個糟糕的設計中。 那該如何更好的使用class inheritance? * 拒絕讓class成為你的公共 API。 * 不要繼承超過一次 * 不要在methoda中呼叫super * 別期望別人使用你的類別 * 學習functional programming 參考文章： [[Javascript] Backbone.js (一) Hello backbone](https://ithelp.ithome.com.tw/articles/10095695) [Backbone入門講解]([Backbone入門講解/](https://www.itread01.com/content/1546521328.html)) [講解JavaScript的Backbone.js框架的MVC結構設計理念](https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/270094/) [Top 25 Backbone.js Interview Questions & Answers (2021) ](https://career.guru99.com/top-25-backbone-js-interview-questions/) [從「鄙視 jQuery」聊起 -技術鄙視從何而來？](https://blog.darkthread.net/blog/jquery-dispise/) [Best Frontend Frameworks of 2021 for Web Development ](https://blog.devgenius.io/best-frontend-frameworks-of-2021-for-web-development-7a183652d81b) [How to Use Classes and Sleep at Night](https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4) [Day 10: ES6篇 - Class(類別)](https://ithelp.ithome.com.tw/articles/10185583) [JavaScript | ES6 中最容易誤會的語法糖 Class - 基本用法](https://medium.com/enjoy-life-enjoy-coding/javascript-es6-%E4%B8%AD%E6%9C%80%E5%AE%B9%E6%98%93%E8%AA%A4%E6%9C%83%E7%9A%84%E8%AA%9E%E6%B3%95%E7%B3%96-class-%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95-23e4a4a5e8ed) 2021年stackoverflow五月调查統計: [2021 Developer Survey](https://insights.stackoverflow.com/survey/2021#most-popular-technologies-webframe-prof) [The Two Pillars of JavaScript](https://medium.com/javascript-scene/the-two-pillars-of-javascript-ee6f3281e7f3) [请停止将JavaScript类型化（建议不要使用class实现类继承](http://ourjs.com/detail/55b5a17afbd23139de9e354c)