---
# System prepended metadata

title: 'How do you organize your code? (module pattern, classical inheritance?)'

---

# 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)

