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. Linux SSH 连接不上

    http://blog.csdn.net/cryhelyxx/article/details/46473783 在xshell下用ssh登录远程主机centos出现以下问题: Connection e ...

  2. ASP.NET 网站支持多语言

    ASP.NET网站支持多语言 (本地资源文件和全局资源文件的调用及需注意的地方总结)   一.   本地资源文件(App_LocalResources): ①.     本地资源的生成及调用 1.本地 ...

  3. STM32 程序所占用空间计算 && FLASH存储的起始地址计算

    程序编译完成,会乘车program size .. 对STM32容量选型或者 计算FLASH 充当EEPROM起始地址时会用到此参数. 按照下面截图  程序空间 = (16700+732+4580)/ ...

  4. CyanogenMod wiki reading tips | Android tips

    To Enable the Developer and Performance settings on CyanogenMod 10.1 In the Settings app, choose the ...

  5. Java知多少（110）数据库之插入记录

    插入数据表记录有3种方案 一.使用Statement对象 实现插入数据表记录的SQL语句的语法是: insert into 表名(字段名1,字段名2,……)value (字段值1,字段值2,……) 例 ...

  6. Do not to test a private method.

    If you want to unit test a private method, something may be wrong. Unit tests are (generally speakin ...

  7. Dir /U /c 输出Unicode字符的特性

    比如某个目录列表如下: D:\Spec\a.txtD:\Spec\Dir・C.txtD:\Spec\else.txtD:\Spec\קתקווה.dataD:\Spec\中・文.txt 直接dir / ...

  8. SQL年月日方面的查询信息

    这是计算一个月第一天的SQL 脚本:   SELECT DATEADD(mm, DATEDIFF(mm,0,getdate()), 0) --当月的第一天 SELECT DATEADD(mm, DAT ...

  9. javaScript一些函数包括调试方法（二）

    Number():设法把括号里面的值,转换成一个数,转换不了为数字的话,就返回NaN. 注意:Number()函数,会拒绝任何包含,非数字字符的字符串(阿拉伯数字.一个有效的小数位.+.-符号是允许的 ...

  10. AEAI WM V1.0 工作管理系统开源发版

    AEAI WM工作管理系统是沈阳数通畅联软件公司基于AEAI DP平台开发的开源Java Web系统,用来管理记录日常工作内容及周工作内容等事务,AEAI WM工作管理系统包括一些核心的工作管理业务功 ...