javascript OOP实例—探测器
<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 OOP特性搭建Web应用
最近,我面试了一个有五年 Web 应用程序开发经验的软件开发人员.四年半来她一直在从事 JavaScript 相关的工作,她自认为 JavaScript 技能非常好,但在不久之后我就发现实际上她对 J ...
- JavaScript教程——实例对象与 new 命令
典型的面向对象编程语言(比如 C++ 和 Java),都有“类”(class)这个概念.所谓“类”就是对象的模板,对象就是“类”的实例.但是,JavaScript 语言的对象体系,不是基于“类”的,而 ...
- JavaScript OOP 之 this指向
今天给大家分享一个JavaScript OOP中关于分辨this指向对象的小技巧,很实用呦! 我们先来看一段代码: 大家能判断出func();和obj.func();这两句的this指向吗? 首先,我 ...
- JavaScript小实例:拖拽应用(二)
经常在网站别人的网站的注册页中看到一个拖拽验证的效果,就是它的验证码刚开始不出来,而是有一个拖拽的条,你必须将这个拖拽条拖到底,验证码才出来,说了感觉跟没说一样,你还是不理解,好吧,我给个图你看看: ...
- javascript小实例,拖拽应用(一)
前面我们将了一下拖拽的基本思想,理论是有了,那实践呢,可以运用到什么地方呢?下面就给大家带来一个用拖拽思想写的一个小实例,供大家参考,大致效果看下图: 就是这样一个简单的一个拖拽条,你可以把它理解为滚 ...
- JavaScript 小实例 - 表单输入内容检测,对页面的增删改
JavaScript 小实例 - 表单输入内容检测,对页面的增删改 效果体验地址:https://xpwi.github.io/js/JavaScript01/jsForm.html 功能: 1.向页 ...
- 10种JavaScript特效实例让你的网站更吸引人
我们有三种主要的方法(从难到易):自己动手写脚本;使用类似于jQuery和mooTools的JavaScript框架(可以让编写代码变得更容易些);使用能工作于现有的JavaScript框架下的提前预 ...
- JavaScript图形实例:线段构图
在“JavaScript图形实例:四瓣花型图案”和“JavaScript图形实例:蝴蝶结图案”中,我们绘制图形时,主要采用的方法是先根据给定的曲线参数方程计算出两点坐标,然后将两点用线段连接起来,线段 ...
- JavaScript动画实例:李萨如曲线
在“JavaScript图形实例:阿基米德螺线”和“JavaScript图形实例:曲线方程”中,我们学习了利用曲线的方程绘制曲线的方法.如果想看看曲线是怎样绘制出来的,怎么办呢?编写简单的动画,就可以 ...
随机推荐
- Navicat for MySQL连接mysql数据库时提示错误:Can't connect to MySQL server (10060)
导致些问题可能有以下几个原因: 1.网络不通: 2.服务未启动: 3.防火墙端口未开放: a)首先确认mysql配置正确,并正确开启 service mysqld start; 设置mysql远程连接 ...
- frei0r-1.6.1 for win32 133 DLLs
ffmpeg中frei0r滤镜基本使用方法 ffplay -vf frei0r=filter_name=filter_params:filter_params:... 在Windows系统ffmpeg ...
- ES--01
ES概念: 垂直搜索(站内搜索) 什么是全文检索和Lucene? 1 全文检索 倒排索引 2 Lucene 就是一个jar包 里面包含了封装好的各种简历倒排索引 以及进行搜索的代码 包括各种算法 我们 ...
- JS实现图片放大查看
示例:https://wumaozheng.com/static-pages/image-magnifier.html <!DOCTYPE html> <html> <h ...
- Confluence 6 识别慢性能的宏
Page Profiling 给你了有关页面在载入的时候操作缓慢的邪教,你可以将下面的内容添加到调试(debug)级别: Version 3.1 及其后续版本 设置包名字为 com.atlassian ...
- Confluence 6 使用主题
主题是被用来修改 Confluence 站点或空间的外观的. Confluence 安装了一个单一的默认主题,或者你也可以下载和安装其他的主题.你可以从 The Atlassian Marketpla ...
- Android 基础 一 AndroidManifest.xml
一.概述 AndroidManifest.xml是Android应用的入口文件,它描述了package中暴露的组件(activities, services, 等等),他们各自的实现类,各种能被处理的 ...
- 1283: 骨牌铺方格(zzuli)
Problem Description 在2×n的一个长方形方格中,用一个1× 2的骨牌铺满方格,输入n ,输出铺放方案的总数.例如n=3时,为2× 3方格,骨牌的铺放方案有三种,如下图: Input ...
- mysql 修改配置文件my.cnf失败
一.连接Mysql提示无法通过socket的解决方法连接到本地MySQL服务器 http://www.aiezu.com/db/mysql_cant_connect_through_socket.ht ...
- swoole 使用异步redis的前置条件
redis安装 官网下载redis 下载完成之后解压: 进入redis目录执行make: 进入src目录启动redis 启动成功如下: 启动后连接redis 编译安装hiredis 下载:https: ...