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也提供了其它的方 ...
随机推荐
- 去掉uitableveiw多余的分割线
UIView *v = [[UIView alloc] initWithFrame:CGRectZero]; [_tableView setTableFooterView:v];
- spring security 3 自定义认证，授权示例
1,建一个web project,并导入所有需要的lib. 2,配置web.xml,使用Spring的机制装载: <?xml version="1.0" encoding=& ...
- Ubuntu 下安装 nfs
1先安装sudo apt-get install nfs-kernel-server(安装nfs-kernel-server时,apt会自动安装nfs-common和portmap) 分开看就是1.服 ...
- jquery datatable 参数api
jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序.浏览器分页.服务器分页.筛选.格式化等功能.dataTables 的网站上也提供了大量的演示和详细的文档进行说明 ...
- 关于IP在MySQL中的存储
对于很多新手而言,他们总会纠结,怎样才能更好的设计MySQL数据库呢:作为一个从菜鸟走过来的人,深有体会,刚开始我也不知道什么是外键.什么是事务处理.怎样合理的定义一个字段,说到字段,今天我就带领大家 ...
- phpStorm 2016.1.2 最新版激活方法【亲测可用】
测试日期:2016-07-29 下载地址:https://yunpan.cn/c6mWAGbExcyjf 访问密码 00fb 1.windows版本 菜单help >>>> ...
- perl命令+关键字
来源: http://www.cnblogs.com/itech/archive/2012/11/01/2749666.html http://www.garybeene.com/vb/tut-per ...
- Django 用户认证及OneToOneField
Django 用户认证如果自己不想写 就可以用django自带的认证 首选导入模块 models.py #!/usr/bin/env python #_*_ coding:utf8 _*_ from ...
- jquery 简单的栏目切换
<style> ul{ list-style:none; padding:0px; margin:0px;} #nav_box{ width:502px; height:402px; ov ...
- CodeForces 682C Alyona and the Tree（广搜 + 技巧）
方法:从根节点开始广搜,如果遇到了应该删除的点,就再广搜删掉它的子树并标记,然后统计一下被标记的个数就是答案,所谓技巧就是从根节点开始搜索的时候,如果遇到了某个节点的距离<0,就让它是0,0可以 ...