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 相关文章推荐
不错的JS中变量相关的细节分析
Aug 13 Javascript
Javascript实现的类似Google的Div拖动效果代码
Aug 09 Javascript
javascript数组去重方法终极总结
Jun 05 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
利用Angular.js限制textarea输入的字数
Oct 20 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
javascript基本常用排序算法解析
Sep 27 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
Jan 08 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
vue 项目中使用Loading组件的示例代码
Aug 31 Javascript
原生js代码能实现call和bind吗
Jul 31 Javascript
Vue实现boradcast和dispatch的示例
Nov 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数据库连接类~~做成一个分页类!
2006/11/25 PHP
推荐php模板技术[转]
2007/01/04 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
2011/03/17 Javascript
jQuery新闻滚动插件 jquery.roller.js
2011/06/27 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
2015/09/14 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
JS实现鼠标框选效果完整实例
2016/06/20 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
2017/01/04 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
深入了解Django中间件及其方法
2019/07/26 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
澳大利亚相机之家:Camera House
2017/11/30 全球购物
什么叫做SQL注入,如何防止
2016/10/04 面试题
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
《灯光》教学反思
2014/02/08 职场文书
大学生社会实践评语
2014/04/25 职场文书
咖啡店创业计划书
2014/08/15 职场文书
担保书格式
2015/01/20 职场文书
生产现场禁烟通知
2015/04/23 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL