本文是在SharePoint中使用JavaScript的第二篇文章,前面的文章包括:html
理论上,无论你是在哪一个场景中编写JavaScript代码,都应该让你的代码模块化。JavaScript代码是很是容易变成一团乱麻的,特别是在你没有将代码进行模块化的状况下。在SharePoint中使用JavaScript也一样如此。一些基本的JavaScript模块化的原则包括:git
下面介绍两种常见的JavaScript模块化的方法,以及所对应的加载方案。github
一、最简模块化 框架
最简单的一种方式,就是直接使用JavaScript的匿名函数。经过将整个模块都放在一个当即执行的匿名函数里面,咱们就能够得到一个独立的"执行空间"。在下面的示例中,咱们能够在模块中定义"私有"的变量和函数,而后将须要暴露的内容注册到一个全局的"命名空间"MyNameSpace里面。因为JavaScript实际上并无命名空间的概念,因此咱们的命名空间,实际上也是经过定义一个全局变量实现的。将整个应用程序的全部模块都注册到同一个"命名空间"里面,能够尽可能减小全局变量的使用(理论上来讲,除了这个命名空间自己,就不须要注册其它全局变量了)。模块化
这种命名空间的定义方式,有时候也会写成以下图那个样子。在下图的例子中,模块直接暴露了一个构造函数。函数
将命名空间传递给匿名函数的参数的好处是,在其它模块中,能够经过参数所传递进来的命名空间,很天然的调用另外一个模块暴露出来的接口。requirejs
这种最简模块化定义方式最大的好处,就是它不须要依赖任何第三方的库,具备很是好的兼容性。你能够将一个模块文件从一个项目复制到另一个项目,(除了要修改一下模块注册到的命名空间以外,)极可能就能够直接使用了。网站
管理模块间的依赖关系,并按照依赖关系载入这些模块,是开发人员须要考虑的问题。你既能够用一些简单的方法(好比直接将全部模块文件都引用到页面上,若是模块比较少的话),或者建立一些自定义的方案来进行管理。ui
下面是一个简单的例子,对一个应用程序中全部的模块进行声明,并定义它们之间的依赖关系,而后经过一个自定义的脚本载入器,根据声明按照顺序载入全部的模块。嗯,具体载入器的实际代码就不附上了,这个只是随手写的一个例子。实际上,只要有了模块的声明,使用LazyLoad之类的函数来进行模块加载,并不难实现。htm
二、AMD(Asynchronous Module Definition)模块化
除了使用不依赖任何第三方库的匿名函数对模块进行封装以外,固然还可使用AMD规范来进行模块的定义。支持AMD规范的库不少,好比著名的RequireJS。下面就是一个基于RequireJS所定义的模块。
固然,一旦决定了使用哪一个AMD库,那么全部模块就须要使用那个库所要求的样子,所幸大部分基于AMD规范的库对于模块的定义要求都是很是相似的。RequireJS可以根据模块所声明的依赖,在加载一个模块时,自动加载它所依赖的其余模块。关于RequireJS的更详细信息,请参考它的官方网站。
本文只介绍了两种进行JavaScript模块化的方案。固然,进行模块化还有不少其余的方案,市面上存在着许多相似的库。不少更复杂的JavaScript框架里面(好比AngularJS),甚至会直接包含有模块化的功能。微软的TypeScript直接内置了module这个关键字(TypeScript好像是尽可能模拟ES Harmony,下一个JavaScript语言规范版本中的用法),来支持模块化。基于何种方案进行JavaScript模块化,须要你根据各个因素,选择一种对你的应用程序来讲最佳的方案。根据个人经验,基本上全部方案都应该能很好的和SharePoint一起工做。