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 相关文章推荐
jQuery快速上手:写jQuery与直接写JS的区别详细解析
Aug 26 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
JavaScript类型系统之Object详解
Jan 07 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
node.js文件上传处理示例
Oct 27 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
Oct 08 Javascript
vue实现节点增删改功能
Sep 26 Javascript
javascript中正则表达式语法详解
Aug 07 Javascript
js前端对于大量数据的展示方式及处理方法
Dec 02 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
thinkphp实现面包屑导航(当前位置)例子分享
2014/05/10 PHP
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
让JavaScript和其它资源并发下载的方法
2014/10/16 Javascript
JS上传图片前实现图片预览效果的方法
2015/03/02 Javascript
Javascript实现获取及设置光标位置的方法
2015/07/21 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
基于JQuery实现分隔条的功能
2016/06/17 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
Angular 2.0+ 的数据绑定的实现示例
2017/08/09 Javascript
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
bootstrap fileinput插件实现预览上传照片功能
2018/01/23 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
[06:53]2018DOTA2国际邀请赛寻真——勇于创新的Vici Gaming
2018/08/14 DOTA
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
Python 一键制作微信好友图片墙的方法
2019/05/16 Python
Python 脚本实现淘宝准点秒杀功能
2019/11/13 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
canvas压缩图片以及卡片制作的方法示例
2018/12/04 HTML / CSS
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
中专生毕业个人鉴定
2014/02/26 职场文书
产品开发计划书
2014/04/27 职场文书
2015年教学工作总结
2015/04/02 职场文书
2015年城乡环境综合治理工作总结
2015/07/24 职场文书
法院执行局工作总结
2015/08/11 职场文书
2016大学生就业指导课心得体会
2016/01/15 职场文书
初一语文教学反思
2016/03/03 职场文书
OpenCV-Python实现怀旧滤镜与连环画滤镜
2021/06/09 Python