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. __get,__set

    __get,__set 为php的magic方法,在类中定义为 public 类型. class UserModel { private $id; public $name; public funct ...

  2. 二十、【.Net开源】EFW框架核心类库之WebService服务

    回<[开源]EFW框架系列文章索引> EFW框架源代码下载V1.1:http://pan.baidu.com/s/1qWJjo3U EFW框架实例源代码下载:http://pan.baid ...

  3. VC文件夹大小（转）

    使用自带的类 CFileFind finder.FindNextFile();  遍历所有文件,按照修改时间顺序遍历 //参数输入 文件夹路径 //返回文件夹大小 byte DWORD GetDirS ...

  4. HTML注释引起的问题

    因为规范要求需要对页面进行说明,添加作者等信息,所以在cshtml的代码中添加了html注释,包括之前使用jsp也是这样做的: 在页面布局的时候,需要对高度进行动态计算,IE8以上没有问题,主要是在I ...

  5. Android 简单计算器源码....

    PS:今天算是闲着没事做了一个小型的计算器...顺便熟悉一下Android的布局,组件,以及时间监听的方法...就当是做了一个小小的练习吧...     顺便去对比了一下别人写的代码...有的使用到了 ...

  6. Mysql学习笔记（六）增删改查

    PS:数据库最基本的操作就是增删改查了... 学习内容: 数据库的增删改查 1.增...其实就是向数据库中插入数据.. 插入语句 insert into table_name values(" ...

  7. Angular系列----AngularJS入门教程01：AngularJS模板 （转载）

    是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...

  8. Python3操作MySQL，查询数据并保存到文件中

    我们在测试过程中,可能需要到数据库中拉去一些数据,为从测试准备.比如最近在做接口性能测试的时候,就需要很多数据来支撑,所以就需要的数据库去查询数据,下面就是python3 查询 mysql 并且保存到 ...

  9. mysqldump: Couldn't execute 'show table status '解决方法

    执行:[root@host2 lamp]# mysqldump -F -R -E --master-data=2   -p -A --single-transaction 在控制台端出现 mysqld ...

  10. 复利计算6.0—软件工程（web版本）

    复利计算再升级------------------------------------------------------------ 客户在大家的引导下,有了更多的想法: 这个数据我经常会填.... ...