JavaScript代理模式原理与用法实例详解


Posted in Javascript onMarch 10, 2020

本文实例讲述了JavaScript代理模式原理与用法。分享给大家供大家参考,具体如下:

代理模式的定义,代理是一个对象(proxy)用它来控制目标对象的访问。为此他要是先与目标对象相同的接口,但是他不同于装饰者模式,它对目标对象不进行任何修改,它的目的在于延缓"复杂"对象的初始化时间。这样可以在用到这个目标对象的时候再初始化他(对于单例来讲更是重要)。

代理模式有两种分类:

(1)普通代理

(2)惰性代理

具体看下面的例子

第一,普通代理模式

步骤一,接口检验文件的引用

//定义一个静态方法来实现接口与实现类的直接检验
//静态方法不要写出Interface.prototype ,因为这是写到接口的原型链上的
//我们要把静态的函数直接写到类层次上
//定义一个接口类
var Interface=function (name,methods) {//name:接口名字
  if(arguments.length<2){
    alert("必须是两个参数")
  }
  this.name=name;
  this.methods=[];//定义一个空数组装载函数名
  for(var i=0;i<methods.length;i++){
    if(typeof methods[i]!="string"){
      alert("函数名必须是字符串类型");
    }else {
      this.methods.push( methods[i]);
    }
  }
};
Interface.ensureImplement=function (object) {
  if(arguments.length<2){
    throw new Error("参数必须不少于2个")
    return false;
  }
  for(var i=1;i<arguments.length;i++){
    var inter=arguments[i];
    //如果是接口就必须是Interface类型
    if(inter.constructor!=Interface){
      throw new Error("如果是接口类的话,就必须是Interface类型");
    }
    //判断接口中的方法是否全部实现
    //遍历函数集合分析
    for(var j=0;j<inter.methods.length;j++){
      var method=inter.methods[j];//接口中所有函数

      //object[method]传入的函数
      //最终是判断传入的函数是否与接口中所用函数匹配
      if(!object[method]||typeof object[method]!="function" ){//实现类中必须有方法名字与接口中所用方法名相同
        throw new Error("实现类中没有完全实现接口中的所有方法")
      }
    }
  }
}

步骤二,目标类

(1)图书类

//图书类
  /*
  * bid 图书id
  * bName 图书名称
  * bPrice 图书价格
  * */
  var Book = function(bid,bName,bPrice){
    this.bid = bid;
    this.bName = bName;
    this.bPrice = bPrice;
  }

(2)真正的目标类

//目标类
  var myBookShop=(function () {
    //书店里的书
     var books={};
     return function (bks) {
       //初始化
       if(typeof bks=="object"){
         books=bks;
       }
       //加书
       this.addBook = function(book){
         books[book.bid] = book;
       }
       //找书
       this.findBook=function (bid) {
         if(books[bid]){
           return books[bid];
         }else {
           return null;
         }
       }
       //还书
       this.returnBook=function (book) {
        this.addBook(book);
       }
       //借书
       this.lendBook=function (bid) {
        var book=this.findBook(bid);
        return book;
       }
     }
  })();

步骤三,普通代理

var myBookShopProxy=function (bks) {
    var obj=new myBookShop(bks);//类似于目标类的引用
     //加书
    this.addBook=function (book) {
      obj.addBook(book);
    }
    //找书
    this.findBook = function(bid){
      return obj.findBook(bid);
    }
    //还书
        this.returnBook=function (book) {
          obj.returnBook(book);
        }
    //借书
    this.lendBook=function (bid) {
      return obj.lendBook(bid);
    }
  }

步骤四,添加数据后,开始访问

var proxy = new myBookShopProxy({
    "001":new Book("001","EXTJS","45"),
    "002":new Book("002","JS","60")
  })
  alert(proxy.lendBook("001").bName)

在普通的代理模式中,我们可以看出代理中对目标对象的引用是一次性初始化的,然后再在该基础上实现其他操作

如图:目标类和代理同时实现了同一接口。代理中一次性对目标类进行实例,然后值访问到目标类中的方法。

JavaScript代理模式原理与用法实例详解

总结,这个代理是我们严格安装定义来写的,一般开发中不会用到,应为他没什么意义。

第二种,惰性代理----在使用时才对目标类进行初始化再引用。

对代理部分的修改如下,其余部分相同,代码如下

//惰性代理---在使用时在初始化目标类的引用
  var myBookShopProxy=function (bks) {
    var obj=null;
    this._init=function () {
      obj=new myBookShop(bks);
    }

    //加书
    this.addBook=function (book) {
      this._init();
      obj.addBook(book);
    }
    //找书
    this.findBook=function (bid) {
      this._init();
      obj.findBook(bid);
    }
    //还书
     this.returnBook=function (book) {
       this._init();
       obj.returnBook(book);
     }
     //借书
    this.lendBook=function (bid) {
      this._init();
     return  obj.lendBook(bid);
    }
  }

修改后的代理执行过程,如图

JavaScript代理模式原理与用法实例详解

感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具:http://tools.3water.com/code/WebCodeRun测试上述代码运行效果。

更多关于JavaScript相关内容还可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 检测浏览器和操作系统的脚本
Dec 26 Javascript
js打印纸函数代码(递归)
Jun 18 Javascript
js动态生成指定行数的表格
Jul 11 Javascript
javascript读取Xml文件做一个二级联动菜单示例
Mar 17 Javascript
Js为表单动态添加节点内容的方法
Feb 10 Javascript
jQuery实现的简单提示信息插件
Dec 08 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 Javascript
利用HBuilder打包前端开发webapp为apk的方法
Nov 13 Javascript
Postman无法正常返回结果问题解决
Aug 28 Javascript
JavaScript控制台的更多功能
Apr 28 Javascript
JavaScript命令模式原理与用法实例详解
Mar 10 #Javascript
JavaScript实现指定数量的并发限制的示例代码
Mar 10 #Javascript
vue中的使用token的方法示例
Mar 10 #Javascript
vue瀑布流组件实现上拉加载更多
Mar 10 #Javascript
JS如何在数组指定位置插入元素
Mar 10 #Javascript
vue实现简单瀑布流布局
May 28 #Javascript
JavaScript观察者模式原理与用法实例详解
Mar 10 #Javascript
You might like
一棵php的类树(支持无限分类)
2006/10/09 PHP
PHP 源代码压缩小工具
2009/12/22 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
Yii实现显示静态页的方法
2016/04/25 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
php导出csv文件,可导出前导0实例代码
2016/11/16 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
Js保留小数点的4种效果实现代码分享
2014/04/12 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
2015/06/23 Javascript
jQuery表格插件datatables用法详解
2020/11/23 Javascript
微信小程序 网络请求(post请求,get请求)
2017/01/17 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
javascript的delete运算符知识点总结
2019/11/19 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
2020/06/01 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
在vue中使用eslint,配合vscode的操作
2020/11/09 Javascript
javascript实现左右缓动动画函数
2020/11/25 Javascript
Vue组件生命周期运行原理解析
2020/11/25 Vue.js
Python中的模块和包概念介绍
2015/04/13 Python
学习python类方法与对象方法
2016/03/15 Python
python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解
2017/10/20 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
keras:model.compile损失函数的用法
2020/07/01 Python
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
个人近期表现材料
2014/02/11 职场文书
医院护士见习期自我鉴定
2014/04/10 职场文书
考生诚信考试承诺书
2015/04/29 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android