AOP 在javascript 中的使用

javascript 中的 onload 事件,

支持该事件的HTML标签: <body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>

支持该事件的javascript 对象: image , layer, window

(

  Array.prototype.slice(begin, end) 这个方法是 返回数组的一部分, begin不写为0, end不写为数组的末尾;

  push(2) 数组的末尾插入 数字2,

  pop() 从数组的末尾删除一个元素,

  shift() 从数组的开头删除一个元素,

  unshift() 从数组的开头插入一个元素。

用的比较多的,通过document.getElementsByTagName选择的dom 节点是一种类似array的array。它不能应用Array下的push,pop等方法。我们可以通过:
var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*")); 这个里面 begin ,end两个参数都每传。
这样domNodes就可以应用Array下的所有方法了

)

AOP 大量运用于:权限控制、日志记录、数据校验、异常处理、主动通知等领域。     

AOP 主要思想是把一些与核心业务无关但又在多个模块使用的功能分离出来,然后动态给业务模块添加上 需要的功能。。JavaScript 有得天独厚的动态解析执行的优势,用来实现类似 AOP 这样的模式是非常简单的,

在AOP 编程领域, before , after 这两个是“切面”函数, 就是让一个函数在另一个函数之前或者之后执行,巧妙的是, before 和 after 都可以和当前的函数共用 this  和 arguments,

为什么要 AOP, 举一个简单的例子:

清单 1. 一个简单的 HTML 表单
 <form action="/test.jsp" method="post">
        <input type=”text” name=”username” />
        <input type="submit" />
 </form>
这是一个最简单的 form 表单,看起来没什么问题。但在低速网络环境下,心急的浏览者没耐心等待,很可能会重复提交表单,如图 1。

作为一个 Web 开发者,我们是绝对不希望浏览者重复提交表单的,这时您可能会想到以下方案
清单 2. 表单提交时禁用 submit 按钮
 <form action="/test.jsp" method="post">
        <input type=”text” name=”username” />
        <input type="submit" onClick="this.disabled=true;" />
 </form>
很好,问题解决了,点击“提交”按钮同时该按钮也被禁用了,这样浏览者就不能重复提交了。
可是,如果您的工程很大,有成百上千个页面,每个页面都有一段类似的代码,难道您还独自编辑吗?如果有一天要在按钮 disabled 之前 alert 一个提示信息,那您还不抓狂?

  

基于 AOP 思想的解决方案

前面我讲过“AOP 主要思想是把一些与业务无关但又在多个模块使用的功能分离出来”,在这里,每个页面都可以看作是一个模块,而“表单提交时禁用提交按钮”这个功能就可以分离出来,在不改变各模块代码的前提下为模块织入此功能。(注:实际上还是要修改代码的,因为要引入 .js 文件,但这非常简单,完全可以使用工具批量完成,并且是一劳永逸的)。下面谈谈具体的实现思路:

  • 把禁用 submit 按钮的代碼封裝成 function,写入 JS 文件(在 AOP 领域,这个 function 的术语叫做 “通知(Advice)” );
  • 在各页面引入该 JS 文件;
  • JS 引入时,把原 submit 事件处理函数备份起来;
  • 把 submit 事件处理函数替换成我们的通知 function;
  • 其中,通知 function 要做两件事情:
  1. 禁用 submit 按钮;
  2. 调用备份好的原 submit 事件处理函数;
 // 这就是我们要实现的通知 function
 function disableFormSubmitButton(){ 

        // 首先获取要操作的 DOM 对象 ( 织入点 ),我们需要拦截所有 form,代码如下 $("form")
        // 因为一个页面可能会有多个 <form>,所以这里需要遍历
        $("form").each(function(i, v){
                // 原 submit 事件函數,备份成 _ invokesubmit,
                //_invokesubmit 是随便起的名字,充分利用了 javascript 的动态特性。
                v._invokesubmit = v.onsubmit ;
                // 替换原 submit 事件函數
                v.onsubmit = function(){
                    // 禁用提交表单按钮
                $(this).find(“input[type= ‘submit‘]”).prop(“disabled”, true);
                v._invokeprocess();// 调用备份的 submit 事件函数
                };
        });
 }

  

下面是我自己实现 -:)的一段 AOP 的代码:

  Cat.prototype = {
        food: "fish",
        say: function(){
            alert("i like " + this.food);
            return this;
        },
        after: function(func){
            func.call(this);
        },
        before: function(func){
            func.call(this);
            return this;
        }

    };

    var cat = new Cat()
    Dog = {food: "bone"};
    cat.before(function(){
        alert("before" + this.food);
    }).say().after(function(){
        alert("after" + this.food);
    })

  

时间: 2024-12-18 17:02:31

AOP 在javascript 中的使用的相关文章

你相信么,只需一个函数5行JS代码即可在Javascript中实现完整的AOP功能

你相信么,只需一个函数5行JS代码即可在Javascript中实现完整的AOP功能, 你相信么,在JavaScript只需一个函数5行代码即可实现完整的面向方面AOP编程功能.这5行代码的功能包括: 无限层次的函数无害拦截 函数执行前拦截 检查函数的参数值 重新设定函数的参数值 函数执行后拦截 检查函数执行后的返回结果 重新设定函数的返回结果 虽然动态函数式语言的效率是一个存在的问题,但是对于它的高度灵活性,简直让人令人惊叹不已,剧赞. 这个小小的函数源自于和爱明兄的一次讨论:在javascri

由实现JavaScript中的Map想到的

项目中要用到JavaScript中的Map数据类型,它不像JDK那样有自带的,怎么办?搜了找到一个不错的(http://darkmasky.iteye.com/blog/454749).用这个可以满足项目中要求.在找的过程中,发现这么个轻量级的实现.http://www.iteye.com/topic/196610帖子中,二楼myy的回复内容.应该说这个简单地实现可以满足我的一些需求,但它少了size方法. 在这个简单实现的基础上,自己能不能加一个size方法呢?而不地通过封装Array那样的重

实现一个函数clone,使JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制

实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number.String.Object.Array.Boolean)进行值复制. 1 /** 对象克隆 2 * 支持基本数据类型及对象 3 * 递归方法 */ 4 function clone(obj) { 5 var o; 6 switch (typeof obj) { 7 case "undefined": 8 break; 9 case "string": o = obj + &q

javascript中的原始值和复杂值

前面的话 javascript的数据类型可以分为两种:原始类型(基本类型或者简单类型)和引用类型. 原始类型:Undefined,Null,Boolean,Number,String五种: 引用类型:Object,Array,Function: 与此相对应的,它们的值分别被称为原始值和复杂值. 特性 原始值 原始值是表示javascript中可用的数据或信息的最底层的形式或者最简单的形式.原始类型的值被称为原始值,因为它们的值是不可被细化的.也就是说,数字是数字,字符串是字符串,布尔值是true

【JS】JavaScript中的执行环境与作用域

JavaScript中的执行环境定义了变量或函数有权访问的数据(每个函数都有自己的执行环境),全局执行环境是最外围的执行环境,在浏览器中,全局执行环境就是window对象,所以所有的全局变量和函数都是作为window对象的属性和方法创建的.当某一个执行环境中所有代码执行完成后,该环境就被销毁,保存在其中的变量和函数也将被销毁,全局执行环境在关闭网页或浏览器时才被销毁. 当代码在一个环境中执行时,会创建变量对象的一个作用域链(保证对执行环境有权访问的变量和函数的有序访问),如果环境是函数,将其活动

JavaScript中的构造函数

function Accom(){};    //创建一个构造函数 //创建两个对象 var house=new Accom(); var apartment=new Accom(); 通过构造函数创建的对象有一个属性constructor,这个属性指向创建该对象时所用的Javascript构造函数. house.constructor===Accom;  或者   house instanceof Accom;     //true JavaScript中的每个构造函数都有一个prototyp

【转】十个JavaScript中易犯的小错误,你中了几枪?

在今天,JavaScript已经成为了网页编辑的核心.尤其是过去的几年,互联网见证了在SPA开发.图形处理.交互等方面大量JS库的出现. 如果初次打交道,很多人会觉得js很简单.确实,对于很多有经验的工程师,或者甚至是初学者而言,实现基本的js功能几乎毫无障碍.但是JS的真实功能却比很多人想象的要更加多样.复杂.JavaScript的许多细节规定会让你的网页出现很多意想不到的bug,搞懂这些bug,对于成为一位有经验的JS开发者很重要. 常见错误一:对于this关键词的不正确引用 我曾经听一位喜

JavaScript中Function的拓展

Function 是什么东西,就是JavaScript中的顶级类,系统级别的类.我们平时写的函数方法例如下. function Animal() { } Animal就是Function的实例,但是在我们的逻辑中 Animal是类,是自定义类. Function是类,Animal是类也是实例,Animal是Function的实例,Animal是自定义类.这点大家一定要搞清楚. 我们在顶级类上定义一个method的方法,用于进行键值对的方式进行方法链式的设定, Function.prototype

浅谈JavaScript中继承的实现

  谈到js中的面向对象编程,都有一个共同点,选择原型属性还是构造函数,两者各有利弊,而就片面的从js的对象创建以及继承的实现两个方面来说,官方所推荐的是两个相结合,各尽其责,各取其长,在前面的例子中,我已就在JavaScript中对象创建的方法做了一些总结,下面就其继承来道说一二:   1:原型链继承: 每一个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象内部的指针(默认的原型,所有默认类型都继承了Object,而这个继承也是用过原型链实现) fu