題外話
? ? ? ? 前兩天，我平生第一次被人催更乎赴，雖然是個偽粉絲忍法，但還是有那么一點點小興奮￠藕穑“TypeScript”這一系列饿序，從實際的訂閱數(shù)據上看非常尷尬，比起vue.js的系列差好遠友题。腳手架（or 手腳架）框架盛行的世界嗤堰，我的這個東西，便像是一株不合群的奇葩傲立于世間度宦，除了孤芳自賞踢匣，剩下就是自娛自樂。
? ? ? ? No,No,No戈抄。离唬。。划鸽。前面這一段并不是喪氣的話输莺，只是表明我個人玩技術的一種固有心態(tài)，便是“自娛自樂”裸诽！
正題
? ? ? ? 其實嫂用，我這幾天把業(yè)余時間都放在了重構這個TS的Demo項目上。準備把項目弄得相對完整些丈冬，并且把代碼優(yōu)化得能夠入得了大家的眼后嘱函，才逐步把其中的過程和思路剖析出來給大家看。不過埂蕊，既然有人等不及往弓，我就繼續(xù)來寫邊邊角角用于填坑的內容吧。
模塊化（Module）
首先蓄氧，什么是模塊化函似？
我的理解：系統(tǒng)功能的拆解歸類抽象化而形成的功能區(qū)塊，然后把這些區(qū)塊的功能組合起來便形成一套完整的系統(tǒng)解決方案了喉童。我的模塊化的依據是OO（Object Oriented,面向對象）撇寞。為什么要模塊化？不模塊化可以嗎？
模塊化代碼可讀性更強蔑担，好維護露氮，重用方便。至于模不模塊化看實際項目情況钟沛，功能簡單結構單一的其實也沒什么好模塊化的；如果是比較復雜的系統(tǒng)局扶，建議還是弄一下的好恨统，不然假設再1個ts里面堆上一百幾十個類，幾千行代碼三妈，誰看了誰都會罵娘畜埋，程序員何苦為難程序員呢？
我的模塊設計
假設畴蒲，我要做一個用戶查詢產品的系統(tǒng)悠鞍。模塊劃分如下：
src/
├── app.ts
├── libs/
│ └── router.ts
├── modules/
│ ├── product/
│ │ ├── index.ts
│ │ ├── list.ts
│ │ └── detail.ts
│ └── user/
│ ├── index.ts
│ ├── login.ts
│ └── info.ts
└── utils/
├── http.ts
├── ui.ts
└── cache.ts
說明一下，我的demo是web前端模燥，所以modules下對應每個文件對應的是一個頁面功能咖祭。index.ts除外！index.ts作為模塊聚合導出的入口來用的蔫骂。例如：
import { List } from "./list";
import { Detail } from "./detail";
export { Detail, List };
然后么翰，在app.ts里的import就可以這樣：
import * as Product from "./modules/product/index";
var listPage = new Product.List();
require.js加載模塊
? ? ? ? 說完模塊化，趁熱打鐵就說一下模塊的加載辽旋。其實浩嫌，上一篇最后提到過，我是用require.js來做編譯后的js的加載补胚。眾所周知码耐，require.js是javascript模塊加載的AMD派系的代表。早前的項目我也用過溶其，比較熟所以就選它了骚腥。
? ? ? ? 被加載的模塊的寫法，這里直接略過握联。因為在tsconfig.json里面module設為amd的話桦沉，tsc編譯后就會自動生成對應的格式，我們幾乎感覺不到金闽。
? ? ? ? 按照上面的項目模塊結構纯露，我只需要在index.html引入require.js，然后加載的入口指向app.js便可代芜，也就是下面data-main這一段埠褪。
<script src="http://cdn.staticfile.org/require.js/2.3.6/require.min.js" data-main="scripts/app"></script>
app.js 會按照app.ts 的各項 import 把 模塊間的引用關系和次序都弄好，用起來非常非常的輕松。
? ? ? ? 對于第三方的js庫钞速，就要借助require.config來配置一下（沒錯贷掖，上一片有提到過）】视铮可以把這個腳本寫在html文件底部苹威，也可以獨立弄一個js文件<script>引用進頁面。對于外部第三方的庫最好驾凶，用shim配置建立一個依賴的關系牙甫，避免網絡原因，所依賴第三方庫沒有先加載導致腳本報錯调违。
require.config({
paths: {
'jquery': '//g.alicdn.com/sj/lib/jquery/dist/jquery.min',
'marked': '/js/libs/marked.min'
},
shim: {
'app': {
deps: ['jquery']
}
}
});
模塊的發(fā)布
? ? ? ? 細心的讀者可能會數(shù)一下窟哺，我這么一個超簡單的Demo項目都已經有十多個js了。那么一個真正的項目豈不是得有上百個js文件技肩？且轨！HTTP請求會嚇死人的！冒昧地下個結論虚婿，看到這里會吃鯨的很定是新手旋奢。因為，老鳥們會很淡定的說雳锋，打包起來就完事了嘛~
? ? ? ? 是的黄绩，這里先賣個關子，打包發(fā)布的內容留到下一講玷过，敬請期待~~
