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瓜哥提两个也许大家都回“纳闷”的问题:
- 如何定义模块?
- 如何获取外部依赖的模块?
CMD模块定义规范中的主要内容正是回答这两个问题。下面请看经D瓜哥简化的规范如下:
- 定义、封装模块的方法。(CMD模块定义规范中有好多定义方法。简单起见,目前只考虑使用如下这一种方式。)如下: