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 相关文章推荐
html 锁定页面(js遮罩层弹出div效果)
Oct 27 Javascript
Jquery选中或取消radio示例
Sep 29 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
Dec 12 Javascript
js函数在frame中的相互调用详解
Mar 03 Javascript
jquery实现图片上传前本地预览功能
May 10 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
JavaScript实现网页头部进度条刷新
Apr 16 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
Oct 23 Javascript
浅谈vue首屏加载优化
Jun 28 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
深入了解Hybrid App技术的相关知识
Jul 17 Javascript
vue组件添加事件@click.native操作
Oct 30 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/js获取客户端mac地址的实现代码
2013/07/08 PHP
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
php验证手机号码
2015/11/11 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
JavaScript 特殊字符
2007/04/05 Javascript
javascript在一段文字中的光标处插入其他文字
2007/08/26 Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
2010/03/05 Javascript
有趣的javascript数组定义方法
2010/09/10 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
原生js实现autocomplete插件
2016/04/14 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
总结AngularJS开发者最常犯的十个错误
2016/08/31 Javascript
jQuery 特性操作详解及实例代码
2016/09/29 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
2018/02/10 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
微信小程序 button样式设置为图片的方法
2020/06/19 Javascript
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
python实现微信接口(itchat)详细介绍
2017/10/23 Python
PyQt5 在label显示的图片中绘制矩形的方法
2019/06/17 Python
如何通过安装HomeBrew来安装Python3
2020/12/23 Python
pycharm 关闭search everywhere的解决操作
2021/01/15 Python
python 递归相关知识总结
2021/03/03 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
Windows和Linux动态库应用异同
2016/07/28 面试题
带薪年假请假条
2014/02/04 职场文书
商场开业庆典策划方案
2014/06/02 职场文书
2015年推广普通话演讲稿
2015/03/20 职场文书
Html5获取用户当前位置的几种方式
2022/01/18 HTML / CSS
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python