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>

原型模式，代码如下：

<!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(){};
Car.prototype.color="red";
Car.prototype.door=4;
Car.prototype.showColor=function(){
alert(this.color);
}

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的封装的更多相关文章

  1. 2016/11/17 周四 <javascript的封装简单示例>

    这是一个简单的javascript代码封装的示例以及封装后的调用方法: var ticker={ n:0, add:function() { this.n++; }, show:function() ...

  2. 第一百三十五节，JavaScript，封装库--拖拽

    JavaScript,封装库--拖拽 封装库新增1个拖拽方法 /** tuo_zhuai()方法,将一个弹窗元素实现拖拽功能 * 注意:一般需要在css文件将元素里的某一个区块光标设置成提示可以拖拽, ...

  3. 第一百三十四节，JavaScript，封装库--遮罩锁屏

    JavaScript,封装库--遮罩锁屏 封装库新增1个方法 /** zhe_zhao_suo_ping()方法,将一个区块元素设置成遮罩锁屏区块 * 注意:一般需要在css文件将元素设置成隐藏 ** ...

  4. 第一百三十三节，JavaScript，封装库--弹出登录框

    JavaScript,封装库--弹出登录框 封装库,增加了两个方法 yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面,chuang_kou_shi_jian()方法,浏览器窗口事 ...

  5. 第一百三十二节，JavaScript，封装库--下拉菜单

    JavaScript,封装库--下拉菜单 封装库,增加了3个方法 shu_biao_yi_ru_yi_chu()方法,给元素设置鼠标移入移出事件,接收两个参数,参数是移入和移出时的执行函数(包含代码) ...

  6. 第一百三十一节，JavaScript，封装库--CSS

    JavaScript,封装库--CSS 将封装库里的方法,改成了原型添加方法 增加4个方法 tian_jia_class()方法,给获取到的元素添加class属性,参数是class属性值,可以连缀1 ...

  7. 第一百三十节，JavaScript，封装库--连缀

    JavaScript,封装库--连缀 学习要点: 1.连缀介绍 2.改写库对象 本章我们重点来介绍,在调用库的时候,我们需要能够在前台调用的时候可以同时设置多个操作,比如设置CSS,设置innerHT ...

  8. Openlayer3之C++接口在javaScript的封装使用

    0.写在前面: 1)涉及的关键词定义: 传入:JavaScript向CAPI传值 传出:CAPI向JavaScript传值 2)关于类和结构体的封装,需要严格执行内存对齐,以防止读取越界,但是避免不了 ...

  9. 第一百四十二节，JavaScript，封装库--运动动画和透明度动画

    JavaScript,封装库--运动动画和透明度动画 /** yi_dong_tou_ming()方法,说明 * * yi_dong_tou_ming()方法,将一个元素,进行一下动画操作 * 1,x ...

  10. 第一百四十一节，JavaScript，封装库--DOM加载

    JavaScript,封装库--DOM加载 DOM加载,跨浏览器封装DOM加载,当网页文档结构加载完毕后执行函数,不等待图片音频视频等文件加载完毕 /** dom_jia_zai()函数,DOM页面加 ...

随机推荐

  1. 当在ECLIPSE中import现存项目时，如遇到版本不符

    当在ECLIPSE中import现存项目时,如遇到版本不符,可选Run-->Run Configurations,进入'Run Configurations'界面,选左边的Android App ...

  2. 未能找到类型或命名空间名称“Coco”(是否缺少 using 指令或程序集引用)

    未能找到类型或命名空间名称"Coco"(是否缺少 using 指令或程序集引用),如果你确实引用了,那说明你引用的和你的项目环境版本不一样,.NET framework的问题,修改 ...

  3. php分享三十三：用php中的register_shutdown_function和fastcgi_finish_request

    已前言 在php中又两个方法都是在请求快结束的时候执行.方法名分别是 register_shutdown_function和fastcgi_finish_request.虽然执行的时机差不多,但是功能 ...

  4. LoRaWAN协议(一)--架构解析

    LoRaWAN 分层 总体架构一共分为4部分: LoRaWAN从底层到最后用户拿到数据的通讯过程通讯大致可分为三段: MOTE <---> GW (MAC层) GW <---> ...

  5. tar的-t参数使用

    -t, --list           list the contents of an archive 例如: pengdl@localhost:~/test$ tar -czvf shell.ta ...

  6. node.js中文资料导航 Mark

    Node.js HomePage Infoq深入浅出Node.js系列(进阶必读) Node.js中文文档 被误解的 Node.js Node.js C++ addon编写实战系列 热门node.js ...

  7. C#加密类

    var es= EncryptSugar.GetInstance(); string word = "abc"; var wordEncrypt = es.Encrypto(wor ...

  8. VS问题汇总——竹子整理

    VS这个宇宙第一IDE有时候也会淘气一把,此贴记录下日后遇到的VS本身的问题 1.VS显示正忙!!!其他项目能打开,就这个不行,关闭vs进程重启vs还是无法解决. 这个问题从VS2010开始就遇到过, ...

  9. 数论 - 算数基本定理的运用 --- nefu 118 : n!后面有多少个0

     题目链接:http://acm.nefu.edu.cn/JudgeOnline/problemshow.php Mean: 略. analyse: 刚开始想了半天都没想出来,数据这么大,难道是有什么 ...

  10. IDM主机上安装融合应用程序配置框架

    IDM主机上安装融合应用程序配置框架   安装Oracle融合应用程序>设置>身份和访问管理节点安装融合应用程序配置框架 由于我们使用Oracle VirtualBox虚拟机这一次,我们在 ...