Javascript基于OOP实实现探测器功能代码实例


Posted in Javascript onAugust 26, 2020

代码如下

<script>
/*所有探测器都有探测的方法和分析的方法,分析当前的浏览器环境,不管是浏览器还是nodejs*/
/*container容器探测器*/
/*link链接探测器*/

/*外层用一个立即执行的匿名函数包裹住,防止一些函数声明或者变量泄露到外面*/

!function(global){
  function DetectorBase(configs){//不让外部通过直接调用方式调用,必须使用new,不使用new就会报错
    /*使用new的话,this就是最后要返回的对象,this instanceof DetectorBase应该返回true,不是的话说明没有直接通过new调用*/
    if(!this instanceof DetectorBase){/**/
      throw new Error('Do not invoke without new.');
    }
    this.configs=configs;/*所有的探测器都会有config属性*/
    this.analyze();/*所有的探测器初始化的时候都需要解析一下数据*/

  }

  DetectorBase.prototype.detect=function(){/*代表一个抽象的探测方法,基类不是具体的一个探测器所以实现没有意义,用来说明需要实现这样一个方法*/
    throw new Error('Not implemented');
  }

  DetectorBase.prototype.analyze=function(){
    console.log('analyzing...');
    this.data="###data###";
  }

  /***具体实例***/
  function LinkDetector(links){/*链接探测器,同理必须通过new来构造*/
    DetectorBase.apply(this,arguments);
    if(!this instanceof LinkDetector){
      throw new Error('Do not invoke without new.');
    }
    this.links=links;

  }

  function ContainerDetector(containers){
    DetectorBase.apply(this,arguments);
    if(!this instanceof ContainerDetector){
      throw new Error('Do not invoke without new.');
    }
    this.containers=containers;
  }
  //inherit first
  /*LinkDetector和ContainerDetector都可能挂载一些自己的方法
  需要注意,一定要先实现原型链的继承,再去扩展。
  因为继承的时候要改写LinkDetector的prototype属性*/
  inherit(LinkDetector,DetectorBase);
  inherit(ContainerDetector,DetectorBase);

  //expand later
  LinkDetector.prototype.detect=function(){
    console.log('Loading data:'+this.data);
    console.log('Link detection started.');
    console.log('Scaning links:'+this.links);
  }

  ContainerDetector.prototype.detect=function(){
    console.log('Loading data:'+this.data);
    console.log('Container detection started.');
    console.log('Scaning containers:'+this.containers);
  }

  //prevent from being altered
  /*不希望监控程序被改写,不可删,不可扩展,不可写*/
  Object.freeze(DetectorBase);
  Object.freeze(DetectorBase.prototype);
  Object.freeze(LinkDetector);
  Object.freeze(LinkDetector.prototype);
  Object.freeze(ContainerDetector);
  Object.freeze(ContainerDetector.prototype);



  //export to global object
  /*通过defineProperties一次性把3个类暴露在外面,同时保护它们不可被枚举,不可被删除和改写*/
  Object.defineProperties(global,{
    LinkDetector:{value:LinkDetector},
    ContainerDetector:{value:ContainerDetector},
    DetectorBase:{value:DetectorBase}
  });


  function inherit(subClass,superClass){//
    subClass.prototype=Object.create(superClass.prototype);
    subClass.prototype.constructor=subClass;
  }

}(this);

var cd=new ContainerDetector('#abc #def #ghi');
var ld=new LinkDetector('http://www.taobao.com http://www.tmall.com http://www.baidu.com');
cd.detect();
ld.detect();

</script>

运行结果

Javascript基于OOP实实现探测器功能代码实例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
表单内同名元素的控制
Nov 22 Javascript
Javascript 获取字符串字节数的多种方法
Jun 02 Javascript
浅谈javascript六种数据类型以及特殊注意点
Dec 20 Javascript
PHP+jQuery+Ajax实现多图片上传效果
Mar 14 Javascript
浅谈jQuery中replace()方法
May 13 Javascript
关于js二维数组和多维数组的定义声明(详解)
Oct 02 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 Javascript
vue axios登录请求拦截器
Apr 02 Javascript
vue select选择框数据变化监听方法
Aug 24 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
Oct 25 Javascript
在vue中实现给每个页面顶部设置title
Jul 29 Javascript
Vue 请求传公共参数的操作
Jul 31 Javascript
Javascript如何实现扩充基本类型
Aug 26 #Javascript
Javascript var变量删除原理及实现
Aug 26 #Javascript
js实现车辆管理系统
Aug 26 #Javascript
js实现飞机大战小游戏
Aug 26 #Javascript
JS面向对象实现飞机大战
Aug 26 #Javascript
JavaScript Image对象实现原理实例解析
Aug 26 #Javascript
js实现飞机大战游戏
Aug 26 #Javascript
You might like
精通php的十大要点(上)
2009/02/04 PHP
php park、unpark、ord 函数使用方法(二进制流接口应用实例)
2010/10/19 PHP
php中计算未知长度的字符串哪个字符出现的次数最多的代码
2012/08/14 PHP
Symfony2学习笔记之插件格式分析
2016/03/17 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
Yii2.0框架behaviors方法使用实例分析
2019/09/30 PHP
js的表单操作 简单计算器
2011/12/29 Javascript
创建、调用JavaScript对象的方法集锦
2014/12/24 Javascript
JavaScript引用类型和基本类型详解
2016/01/06 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
jQuery 的 ready()的纯js替代方法
2016/11/20 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
浅谈Ant Design Pro 菜单自定义 icon
2020/11/17 Javascript
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
python使用marshal模块序列化实例
2014/09/25 Python
在dataframe两列日期相减并且得到具体的月数实例
2018/07/03 Python
Django 多语言教程的实现(i18n)
2018/07/07 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
django 链接多个数据库 并使用原生sql实现
2020/03/28 Python
python PIL模块的基本使用
2020/09/29 Python
DOUGLAS波兰:在线销售香水和化妆品
2020/07/05 全球购物
英语简历自我评价
2014/01/26 职场文书
信息专业学生学习的自我评价
2014/02/17 职场文书
房地产项目建议书
2014/03/12 职场文书
学校社会实践活动总结
2014/07/03 职场文书
2015个人简历自我评价语
2015/03/11 职场文书
拾金不昧表扬信怎么写
2015/05/04 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP
JS数组去重详情
2021/11/07 Javascript