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图形实例:曲线方程”中,我们学习了利用曲线的方程绘制曲线的方法.如果想看看曲线是怎样绘制出来的,怎么办呢?编写简单的动画,就可以 ...
随机推荐
- ES6学习笔记七Generator、Decorators
Generator异步处理 { // genertaor基本定义,next()一步步执行 let tell=function* (){ yield 'a'; yield 'b'; return 'c' ...
- Linux中OCI开发库的配置
Oracle调用接口(Oracle Call Interface,简称OCI)提供了一组可对Oracle数据库进行存取的接口子例程(函数),通过在第三代程序设计语言(如C语言)中进行调用可达到存取Or ...
- Python2018-字符串中字符个数统计
1 编写程序,完成以下要求: 统计字符串中,各个字符的个数 比如:"hello world" 字符串统计的结果为: h:1 e:1 l:3 o:2 d:1 r:1 w:1 prin ...
- git 创建分支
- Spring4-@Enable** 注解的实现原理
背景 在前面的工作中使用SpringBoot的时候,我碰到了很多的使用@Enable***注解的地方,使用上也都是加在@Configuration 类注解的类上面,比如: (1)@EnableAuto ...
- vue 上实现无缝滚动播放文字系统公告
首先实现效果,当时的需求做的系统公告框设定一个宽度,超宽滚动播放,没超宽则静态展示,有了需求,想了下实现原理,最开始打算js更改字体内容的方式,但是想了下感觉会有点麻烦,想起之前做了表格的左侧边固定, ...
- NPOI写Excel,Spire.XLS for.NET组件转换Excel为PDF
首先要引用NPOI动态库和Microsoft.Office.Interop.excel.dll (Microsoft.Office.Interop.excel.dll 最好使用使用NuGet下载 , ...
- Confluence 6 考虑使用自定义 CSS
CSS 的知识储备 如果你没有有关 CSS 的相关知识,请参考页面 CSS Resources section 中的内容.当你打算开始对 Confluence 的样式表进行修改之前,你应该对 CSS ...
- Django框架之Form组件
一.初探Form组件 在介绍Form组件之前,让大家先看看它强大的功能吧!Go... 下面我们来看看代码吧! 1.创建Form类 from django.forms import Form from ...
- 剑指offer 二叉树的层序遍历
剑指offer 牛客网 二叉树的层序遍历 # -*- coding: utf-8 -*- """ Created on Tue Apr 9 09:33:16 2019 @ ...