AOP 在javascript 中的使用
AOP(Aspect Oriented Programming) 意为面向切面编程
可以在不修改原有代码的情况下增加新功能，利用AOP可以对业务逻辑各个部分进行隔离，从而使得业务逻辑各部分的耦合度降低，提高程序的可重用性。
主要功能
日志记录，性能统计，安全控制，事务处理，异常处理等等
主要意图
将日志记录，性能统计，安全控制，事务处理，异常处理等代码从业务逻辑代码中划分出来，通过对这些行为的分离，我们希望可以将它们独立到非指导业务逻辑的方法中，进而改变这些行为的时候不影响业务逻辑的代码。
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() 从数组的开头插入一个元素。
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 要做两件事情：
- 禁用 submit 按钮；
- 调用备份好的原 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);
})
AOP 在javascript 中的使用的更多相关文章
- 由实现JavaScript中的Map想到的
项目中要用到JavaScript中的Map数据类型,它不像JDK那样有自带的,怎么办?搜了找到一个不错的(http://darkmasky.iteye.com/blog/454749).用这个可以满足 ...
- javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈
Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...
- javascript中的this与函数讲解
前言 javascript中没有块级作用域(es6以前),javascript中作用域分为函数作用域和全局作用域.并且,大家可以认为全局作用域其实就是Window函数的函数作用域,我们编写的js代码, ...
- JavaScript 中的数据类型
Javascript中的数据类型有以下几种情况: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,Date,Ar ...
- javascript中的操作符详解1
好久没有写点什么了,根据博主的技术,仍然写一点javascript新手入门文章,接下来我们一起来探讨javascript的操作符. 一.前言 javascript中有许多操作符,但是许多初学者并不理解 ...
- 掌握javascript中的最基础数据结构-----数组
这是一篇<数据结构与算法javascript描述>的读书笔记.主要梳理了关于数组的知识.部分内容及源码来自原作. 书中第一章介绍了如何配置javascript运行环境:javascript ...
- javascript中变量提升的理解
网上找了两个经典的例子 var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); // 10 var ...
- 前端开发：面向对象与javascript中的面向对象实现（二）构造函数与原型
前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...
- 简单分析JavaScript中的面向对象
初学JavaScript的时候有人会认为JavaScript不是一门面向对象的语言,因为JS是没有类的概念的,但是这并不代表JavaScript没有对象的存在,而且JavaScript也提供了其它的方 ...
随机推荐
- onPostCreate——Activity彻底运行起来之后的回调
记得之前想要在Activity布局完成,彻底跑起来之后,再获取当前Activity的窗口中,某个View的宽高,之前用的办法很土,弄个Handler,发个Message出来,使用sendMessage ...
- Clock Pictures
Clock Pictures 题目描述 You have two pictures of an unusual kind of clock. The clock has n hands, each h ...
- POJ1308 Is It A Tree?
题目大意:和HDU1272-小希的迷宫题目一样, 如果有一个通道连通了房间A和B,那么既可以通过它从房间A走到房间B,也可以通过它从房间B走到房间A,为了提高难度,小希希望任意两个房间有且仅有一条路径 ...
- /var/lib/mysql/mysql.sock错误的解决办法
问题描述: 使用mysql -uroot -p登录出现找不到 /var/lib/mysql/mysql.sock或者被使用的问题. 可以用如下命令登录:mysql -p --socket=/tmp/m ...
- 取得GridView某行的DataKey
首先绑定DataKeyNames GridView.DataKeyNames = new string[] { "字段名称" }; 取值 string aaa= GridView. ...
- 快学scala-第七章 包和引入
知识点: 1. Scala.Java.C++的包的目的都是为了管理大型程序中的名称.与对象或类的定义不同,同一个包可以定义在多个文件当中.或者在同一个文件中,为多个包贡献内容. 2. Scala的包和 ...
- [转]new一个Object对象占用多少内存？
我们分解下ArrayList arr = new ArrayList();等同于ArrayList arr = null;//初始化arr = new ArrayList();//实例化这两个过程.初 ...
- CodeForces#378--A, B , D--暴力出奇迹....
A题 A. Grasshopper And the String time limit per test 1 second memory limit per test 256 megabytes in ...
- hdu Eddy's picture （最小生成树）
Eddy's picture Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) Tota ...
- 优化のzencart URL &zenid=.....
zencart URL后面带有一串&zenid=.....解决方案 发布时间:2013年3月16日 次浏览:106 经木木测试,此方法可用. ================= 最近一个客户的 ...