在SharePoint解决方案中使用JavaScript (2) – 模块化

本文是在SharePoint中使用JavaScript的第二篇文章,前面的文章包括:html

 

理论上,无论你是在哪一个场景中编写JavaScript代码,都应该让你的代码模块化。JavaScript代码是很是容易变成一团乱麻的,特别是在你没有将代码进行模块化的状况下。在SharePoint中使用JavaScript也一样如此。一些基本的JavaScript模块化的原则包括:git

  • 尽可能让每个.js文件都是一个模块
  • 每一个模块均可以有只属于本身的"私有"数据和函数,模块只暴露必要的数据和方法出去
  • 模块之间存在依赖关系
  • 经过某个加载方案,使模块能按照正确的顺序(一般是它们的依赖关系)被加载

 

下面介绍两种常见的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一起工做。

相关文章
相关标签/搜索