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 相关文章推荐
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
Jun 26 Javascript
Div Select挡住的解决办法
Aug 07 Javascript
js 页面关闭前的出现提示的实现代码
May 25 Javascript
js加强的经典分页实例
Mar 15 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
Apr 06 Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 Javascript
javascript的 {} 语句块详解
Feb 27 Javascript
node.js中的事件处理机制详解
Nov 26 Javascript
微信小程序 解析网页内容详解及实例
Feb 22 Javascript
在vue中使用公共过滤器filter的方法
Jun 26 Javascript
AngularJS自定义表单验证功能实例详解
Aug 24 Javascript
详解前端任务构建利器Gulp.js使用指南
Apr 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 如何向 MySQL 发送数据
2006/10/09 PHP
php防止sql注入代码实例
2013/12/18 PHP
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
如何运行/调试你的PHP代码
2020/10/23 PHP
js中传递特殊字符(+,&amp;)的方法
2014/01/16 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
js实现网页抽奖实例
2015/08/05 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
vue使用v-for实现hover点击效果
2018/09/29 Javascript
Vuex 使用 v-model 配合 state的方法
2018/11/13 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
vue实现几秒后跳转新页面代码
2020/09/09 Javascript
自己使用总结Python程序代码片段
2015/06/02 Python
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
css3发光搜索表单分享
2014/04/11 HTML / CSS
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
EJB timer的种类
2014/10/28 面试题
广告艺术设计专业自荐书
2014/07/08 职场文书
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
责任书范本大全
2015/05/11 职场文书
张思德观后感
2015/06/09 职场文书
2015暑假假期总结
2015/07/13 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书
人力资源部工作计划
2019/05/14 职场文书
利用JavaScript写一个简单计算器
2021/11/27 Javascript
详解Python如何批量采集京东商品数据流程
2022/01/22 Python
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫