AMD的规范演化

对于web项目来说,打交道的不仅仅有后台,前台页面也是少不了的,而前台的页面js也常常是我们后台程序员必须要使用的语言, 今天说下项目中的js的组织方式。

文件函数型

所谓文件函数型是指所有的js的脚本都是中都是一个一个的方法,没有任何的封装,这也是传统的项目中常用的方法。如下:

file1.js

 function add(a,b){
   return a+b;
 }   

file2.js

 function minutes(a,b){
   return a-b;
 }   

当我们想使用个方法的时候只需要应用相应的js就行了,这样的缺点很明显,就是要时刻明确文件之间的相互依赖关系的顺序,不然就会导致程序无法正常的运行。 比如还是上面的两个js,我在file1.js中有家一段代码:

file1.js

 function add(a,b){
   return a+b;
 }   

 function sum(a,b,c){
    return add(a,minutes(b,c));
 }

如果在引用的时候,先引用的file1.js则会导致files1.js中有方法没有找到。 如果项目足够的大,就纯粹的js的依赖关系就足以让我们焦头烂额。

这种方法还有很多潜在的风险,如果我在file1.js中有定义了一个minutes方法,这样file2.js中的方法就面临被覆盖的风险,所以这种布局的方式,不应该是项目的首选。

jquery扩展型

在web的项目中,在面对dom操作的时候,传统的js的过于繁杂,所以jquery的使用应该占了很大的一部分的比重(确切的说在MVVM框架流行前)。

jquery也提供了两种扩展方法:   

  • 静态方法扩展 jquery静态方法的扩展是直接扩展到$对象上面 :
   $.funcA=function(){
      // do something
   }  

在任何引入jquery的地方都可以使用$.funcA()来调用

  • jquery对象方法扩展
$.fn.funcB=function(){
 //do something
}

使用的方法: $(“#id”).funcB()来调用。

上面的方面解决了方法见的相互的依赖顺序问题,但没有解决方法被覆盖的问题,同时又带来了一个副作用,增加了js方法的调用深度,降低了js的执行效率。

模块加载型

模块话加载是对jquery扩展和文件方法的一个进化,把每个方法都用一个模块封装起来,不至于被外面的方法覆盖。

module1.js

var module1=function(){
	
	return {
                    add:function(a,b){
                    	return a+b;
                    }
	}
}();

module2.js

var module2=function(){
	return {
                    minutes:function(a,b){
                    	return a-b;
                    }
	}
} ();

如果想使用add方法可以直接引用module1.js,调用module1.add方法。

上面的方法解决的方法被覆盖的问题,但没有解决模块化依赖的问题,这个问题的解决就要靠我们下面要说的AMD的规范。

AMD模块开发规范

上面模块话的开发虽然解决的js的方法的覆盖问题,但js依赖的问题仍然存在,解决这个问题的终极方案就是AMD规范。

AMD规范就是其中比较著名一个,全称是Asynchronous Module Definition,即异步模块加载机制。从它的规范描述页面看,AMD很短也很简单,但它却完整描述了模块的定义,依赖关系,引用关系以及加载机制。

这里用requirjs来解释说明AMD加载的原理:

定义模块:

define(['math', 'graph'], 
    function ( math, graph ) {
		return {
            plot: function(x, y){
                return graph.drawPie(math.randomGrid(x,y));
            }
        }
    };
);

上面代码 依赖math和graph两个库,在定义模块前声明了依赖。

引用模块:

require(['foo', 'bar'], function ( foo, bar ) {
        foo.doSomething();
});

更多内容参见: 阮一峰-requireJS和AMD规范

(本文完)

作者:老付 如果觉得对您有帮助,可以下方的订阅,或者选择右侧捐赠作者,如果有问题,请在捐赠后咨询,谢谢合作 如有任何知识产权、版权问题或理论错误,还请指正。 自由转载-非商用-非衍生-保持署名,请遵循:创意共享3.0许可证 交流请加群113249828: 点击加群 或发我邮件 laofu_online@163.com

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Netty实现心跳

    心跳机制是常用的一个健康监测的机制,说白了就是每隔一段时间向服务器发送一个心跳的报文,服务收到报文后,就认为当前的客户端在活动的状态,否则会进入异常的机制,比如...

    付威
  • ES中nest join

    nested 类型是一个特殊object数据类型,允许数组的object的字段可以被独立的查询出来。

    付威
  • 博客添加浮动目录

    一直都想给自己的博客添加一个浮动的目录,在网上也找也几个,从易用性方面都不是太理想,所以今天才有了想法自己去写一个插件 。

    付威
  • 前端知识学了却不会用,都是没走心

    我发现,许多人在学习前端的时候,更多的时候是处于一种“对外宣称正在学习中”的状态。而他本人真正的学习了多少前端知识?未必。 我之前就多次说过,“学习前端开发不是...

    web前端教室
  • 为啥总感觉跟前端开发“隔”了一层?因为你没有构建自己的三位一体的前端开发能力。

    三体一体,一般是指核反击能力,陆海空三个维度都有足够的能力。看清了哈,是反击的能力。 先说结论,我这个说法落实到具体人身上,就是“js技能 + 分析需求的能力 ...

    web前端教室
  • 网站pjax后统计浏览量极少问题

    这不最近刚装上了这个博客,博客的主题是 handsome, 然后最近我发现百度统计有点不正常,主动提交收录也是抽风。

    乔千
  • python 异步程序 dramatiq

    py3study
  • 构建Vue项目-身份验证

    通常,在开始使用新框架或新语言工作时,我会尝试查找尽可能多的最佳实践,而我更喜欢从一个易于理解,维护和升级的良好结构开始。在这篇文章中,我将尝试解释自己的想法,...

    前端知否
  • Day2 | 数据库操作-DDL

    索引相当于数据表的目录,其优点是可以提高检索数据的速度,但同时也增加了系统维护工作,以及会减慢写入速度。

    DataScience
  • Uncaught SyntaxError: Unexpected token ' in JSON at position 1

    玩蛇的胖纸

扫码关注云+社区

领取腾讯云代金券