Javascript的封装

js的封装分为以下几种模式：

工厂模式，代码如下：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<script language="JavaScript">
function CreateCar()
{
var Car=new Object();
Car.Color="blue";
Car.ShowColor=function()
{
alert(this.Color);
}
return Car;
}
var car1=CreateCar();
var car2=CreateCar();
car1.Color="red";
car2.Color="blue";
car1.ShowColor();
car2.ShowColor();

//改造并加入参数
function CreateCar(color,doors,mpg)
{
var oCar=new Object();
oCar.Color=color;
oCar.Doors = doors;
oCar.Mpg=mpg;
oCar.ShowColor=function(){
alert(this.Color);
alert(this.Doors);
alert(this.Mpg);
}
return oCar;
}

var car3=CreateCar("red",4,23);
var car4=CreateCar("blue",4,20);
alert(car3.Color);
alert(car4.Color);

</script>
</body>
</html>

工厂模式改造：代码如下：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<script language="JavaScript">
function showColor()
{
alert(this.Color);
}
function CreateCar(color,idoor)
{
var oCar=new Object()
oCar.Color=color;
oCar.Door=idoor;
oCar.showColor=showColor;
return oCar;
}

var car1=CreateCar("red",5);
car1.showColor();
</script>
</body>
</html>

构造函数模式，代码如下：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<script language="JavaScript">
function CreateCar(color,idoor)
{
this.Color=color;
this.Door = idoor;
this.showColor=function()
{
alert(this.Color);
}
}
var car1=CreateCar("green",6);
car1.showColor();
</script>
</body>
</html>

原型模式，代码如下：

Car.prototype.drivers=new Array("a","b");
//call
var oCar1=new Car();
var oCar2=new Car();
oCar1.drivers.push("c");

alert(oCar1.drivers);//output "a,b,c"
alert(oCar2.drivers);//output "a,b,c"

</script>
</body>
</html>

联合构造函数和原型模式：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<script language="JavaScript">
function Car(sColor,sDoor)
{
this.color=sColor;
this.door=sDoor;
this.drivers=new Array("a","b");
}
Car.prototype.showColor=function(){
alert(this.color);
}

var oCar1=new Car("red",4);
oCar1.drivers.push("c");
alert(oCar1.drivers);
var oCar2=new Car("blue",5);
alert(oCar2.drivers);
</script>
</body>
</html>

动态原型模式，代码如下：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<script language="JavaScript">
function Car(iColor,iMsg,iDoors)
{
this.color=iColor;
this.msg=iMsg;
this.doors=iDoors;
this.drivers=new Array();
if(typeof Car._initialized=="undefined")
{
Car.prototype.showColor=function(){
alert(this.color);
};
Car._initialized=true;
}
}
//call
var oCar=new Car("yellow",10,20);
oCar.showColor();
</script>
</body>
</html>

Javascript的封装的更多相关文章

2016/11/17 周四 <javascript的封装简单示例>
这是一个简单的javascript代码封装的示例以及封装后的调用方法: var ticker={ n:0, add:function() { this.n++; }, show:function() ...
第一百三十五节，JavaScript，封装库--拖拽
JavaScript,封装库--拖拽封装库新增1个拖拽方法 /** tuo_zhuai()方法,将一个弹窗元素实现拖拽功能 * 注意:一般需要在css文件将元素里的某一个区块光标设置成提示可以拖拽, ...
第一百三十四节，JavaScript，封装库--遮罩锁屏
JavaScript,封装库--遮罩锁屏封装库新增1个方法 /** zhe_zhao_suo_ping()方法,将一个区块元素设置成遮罩锁屏区块 * 注意:一般需要在css文件将元素设置成隐藏 ** ...
第一百三十三节，JavaScript，封装库--弹出登录框
JavaScript,封装库--弹出登录框封装库,增加了两个方法 yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面,chuang_kou_shi_jian()方法,浏览器窗口事 ...
第一百三十二节，JavaScript，封装库--下拉菜单
JavaScript,封装库--下拉菜单封装库,增加了3个方法 shu_biao_yi_ru_yi_chu()方法,给元素设置鼠标移入移出事件,接收两个参数,参数是移入和移出时的执行函数(包含代码) ...
第一百三十一节，JavaScript，封装库--CSS
JavaScript,封装库--CSS 将封装库里的方法,改成了原型添加方法增加4个方法 tian_jia_class()方法,给获取到的元素添加class属性,参数是class属性值,可以连缀1 ...
第一百三十节，JavaScript，封装库--连缀
JavaScript,封装库--连缀学习要点: 1.连缀介绍 2.改写库对象本章我们重点来介绍,在调用库的时候,我们需要能够在前台调用的时候可以同时设置多个操作,比如设置CSS,设置innerHT ...
Openlayer3之C++接口在javaScript的封装使用
0.写在前面: 1)涉及的关键词定义: 传入:JavaScript向CAPI传值传出:CAPI向JavaScript传值 2)关于类和结构体的封装,需要严格执行内存对齐,以防止读取越界,但是避免不了 ...
第一百四十二节，JavaScript，封装库--运动动画和透明度动画
JavaScript,封装库--运动动画和透明度动画 /** yi_dong_tou_ming()方法,说明 * * yi_dong_tou_ming()方法,将一个元素,进行一下动画操作 * 1,x ...
第一百四十一节，JavaScript，封装库--DOM加载
JavaScript,封装库--DOM加载 DOM加载,跨浏览器封装DOM加载,当网页文档结构加载完毕后执行函数,不等待图片音频视频等文件加载完毕 /** dom_jia_zai()函数,DOM页面加 ...

随机推荐

学习使用:before和:after伪元素
如果你一直密切关注着各种网页设计的博客,你可能已经注意到了:before和:after伪元素已经在前端开发中获得了相当多的关注.特别是在Nicolas Gallagher的博客中,后期运用了很多伪类元 ...
react-native SyntaxError xxxxx/xx.js:Unexpected token (23:24)
在运行react-native项目时提示 SyntaxError xxxxx/xx.js:Unexpected token (23:24) 我这边的问题原因:jsx语法错误,解决办法就是认真排查代码然 ...
cron语法
最近在搞whenever时看到可以用cron语法设置定时任务.所以研究了下cron 语法. every '0 0 27-31 * *' do command "echo 'you can u ...
transition & transform
transition: 过渡时间被改变属性执行函数延迟时间 transition:width 1s,height 2s 1s; transform: 平移(translate).缩放(scale ...
jquery.uploadify 异常 “__flash__removeCallback”未定义
使用场景结合artdialog弹出框使用时发生“__flash__removeCallback”未定义,原因在于artdialog基于iframe加载的uloadify,在关闭artdialog的时候 ...
Web程序员开发App系列 - 认识HBuilder
Web程序员开发App系列 Web程序员开发App系列 - 认识HBuilder Web程序员开发App系列 - 申请苹果开发者账号 Web程序员开发App系列 - 调试Android和iOS手机代码 ...
DDD：Command模式的好处
背景会有朋友问我为啥用命令模式(Command Pattern)组织应用层,先看看MartinFowler咋说:http://martinfowler.com/bliki/CommandOrient ...
[ML] Naive Bayes for Text Classification
TF-IDF Algorithm From http://www.ruanyifeng.com/blog/2013/03/tf-idf.html Chapter 1, 知道了"词频" ...
EB-SAM9G45裸机程序下载方法
开发板:EB-SAM9G45 这里提供一种裸程序下载的方法. 在官方提供的下载方法中有手动下载和自动下载,它们都离不开SAM-BA软件,而该软件使用比较麻烦,而且操作不当很容易导致电脑蓝屏,还有一个很 ...
Java sun.misc.Unsafe类的学习笔记
Java未开源的Unsafe类 Unsafe类可以为我们提供高效并且线程安全方式操作变量,直接和内存数据打交道. 获取Unsafe实体的方法 private static Unsafe getUnsa ...

Javascript的封装

Javascript的封装的更多相关文章

随机推荐

热门专题