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 相关文章推荐
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 Javascript
javascript实现随机显示星星特效
Jan 28 Javascript
Javascript如何判断数据类型和数组类型
Jun 22 Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 Javascript
使用jQuery调用XML实现无刷新即时聊天
Aug 07 Javascript
js制作支付倒计时页面
Oct 21 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 Javascript
bootstrap表单示例代码分享
May 18 Javascript
vue如何集成raphael.js中国地图的方法示例
Aug 15 Javascript
手动下载Chrome并解决puppeteer无法使用问题
Nov 12 Javascript
vue cli使用融云实现聊天功能的实例代码
Apr 19 Javascript
javascript实现的时间格式加8小时功能示例
Jun 13 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函数utf8转gb2312编码
2006/12/21 PHP
分享一下贝贝成长进度的php代码
2012/09/14 PHP
解析php中memcache的应用
2013/06/18 PHP
php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
php 生成自动创建文件夹并上传文件的示例代码
2014/03/07 PHP
CI框架出现mysql数据库连接资源无法释放的解决方法
2016/05/17 PHP
php 反斜杠处理函数addslashes()和stripslashes()实例详解
2016/12/25 PHP
js 获取服务器控件值的代码
2010/03/05 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
直接在JS里创建JSON数据然后遍历使用
2014/07/25 Javascript
js+CSS实现弹出居中背景半透明div层的方法
2015/02/26 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
写给小白的JavaScript引擎指南
2015/12/04 Javascript
jQuery语法小结(超实用)
2015/12/31 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
在Node.js中使用Javascript Generators详解
2016/05/05 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
可能被忽略的一些JavaScript数组方法细节
2019/02/28 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
2021/02/08 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
[32:39]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第一场 11.04
2020/11/04 DOTA
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
python使用代理ip访问网站的实例
2018/05/07 Python
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
python集合是否可变总结
2019/06/20 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
学术会议邀请函范文
2014/01/22 职场文书
投标服务承诺书
2014/05/28 职场文书
社区好人好事材料
2014/12/26 职场文书
vue3中provide && inject的使用
2021/07/01 Vue.js
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android
python数字图像处理:图像简单滤波
2022/06/28 Python