Javascript模塊化編程(三):模塊化編程實戰,試用SeaJS

  前段時間轉載了阮一峯老師的兩篇講解Javascript模塊化編程的文章:
“JavaScript模塊化編程(一):模塊原型和理論概念詳解”,介紹了Javascript模塊原型和理論概念;Javascript模塊化編程(二):模塊化編程實戰,require.js詳解,介紹了在實戰中,如何利用RequireJS庫,進行模塊化編程。

  在這兩篇文章發佈出來之後,在和網友的交流討論中,瞭解到了SeaJS,這個由國人玉伯自己創建的模塊化編程庫。然後,我就想學習學習,再寫篇文章給大家介紹一下。

背景介紹

  官網的資料是最靠譜的。在SeaJS的官網上發現,有一個“5分鐘上手SeaJS”的例子,然後就從這個例子的開始學習。不過,只看明白了個六六七七。我沒看明白和我平時的JavaScript編程有啥區別。另外,我沒有動手實踐,心裏面不踏實。所以,動手寫個程序,玩味一下。後來,就想到了“猜手機號遊戲”!

  由於官網已經有使用SeaJS的教程,我就不重複這方面的工作了,而且我也覺得我我肯定沒有官網寫的好。由於我不清楚,使用SeaJS進行“模塊化編程”和我平時不進行“模塊化編程”的區別。所以,我準備從另外一個角度來介紹SeaJS:將一個沒有進行模塊化編程的程序,改造成使用SeaJS進行“模塊化編程”的程序。由於這個想法的跨度比較大,信息量也比較多。所以我把我的想法組織成了三篇文章:第一篇文章,“給哥三十五次機會,哥就能猜中你的手機號”,通過一個小遊戲,來吸引大家的興趣;第二篇,“‘猜手機號遊戲’的源碼分析:二分查找+面向對象”,來講解在沒有進行模塊化編程時,程序的實現細節;然後,這是第三篇,在沒有進行模塊化編程的基礎上,將原來的程序改造成一個使用SeaJS進行模塊化編程的例子。

  在閱讀這篇文章之前,請閱讀前兩篇,尤其是“‘猜手機號遊戲’的源碼分析:二分查找+面向對象”。同時,還建議閱讀一下“JavaScript模塊化編程(一):模塊原型和理論概念詳解”Javascript模塊化編程(二):模塊化編程實戰,require.js詳解,規範、系統一下關於Javascript模塊化編程的知識。

CMD模塊定義規範介紹

  想享受模塊化編程帶來的良好封裝,就必須遵循模塊化編程的規範。在 SeaJS 中,所有 JavaScript 模塊都遵循 CMD(Common Module Definition) 規範。該規範確定了模塊的基本書寫格式和基本交互方式。所以,使用SeaJS之前,必須閱讀一下SeaJS所要求遵循的規範。

  鑑於規範覆蓋的東西比較多,看多了頭大。所以,我把這個規範提煉簡化一下,只關注我們需要用到的。至於,更詳細的CMD模塊定義規範,等先把例子跑通,理解了整個流程,然後再回頭看規範,梳理、規範這部分知識。

  在介紹簡化版規範之前,D瓜哥提兩個也許大家都回“納悶”的問題:

  1. 如何定義模塊?
  2. 如何獲取外部依賴的模塊?

  CMD模塊定義規範中的主要內容正是回答這兩個問題。下面請看經D瓜哥簡化的規範如下:

  1. 定義、封裝模塊的方法。(CMD模塊定義規範中有好多定義方法。簡單起見,目前只考慮使用如下這一種方式。)如下:
代碼比較多,不好整。請去我的博客看全文:
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章