既然本系列博客的目的性很强:直接本着仿造jQuery框架而去的。那么很多理论性原理性的东西就不过于赘述了,直接以例子出发,由点到线,再由线到面循序渐进的穿插知识点来讲解。我们先来看看JS定义对象的两种方式。
new Obect创建对象
有过JS编程经验的同学都知道,JS中自带Array,Math,Date,RegExp,doucment等对象,它们提供了一些原始的方法,如document.write(),doucment.getElementById()等方法来操作对象。那么我们怎么样来自定义属于自己的对象呢?下面我直接先上一个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一种定义对象的方式</title>
<script>
var object = new Object();
object.qq = "290794272";
object. showQQ = function() {
alert(this.qq)
}
object.showQQ();
</script>
</head>
<body>
</body>
</html>
这例子创建了一个Object对象,这对象里面有一个属性qq,然后有一showQQ()方法,然后我调用object.showQQ()方法来显示qq属性值,如果不出意外,上诉代码运行之后浏览器将弹出一个对话框,然后显示”290794272″,这个例子就这么简单。
看到这里,一些前端的老鸟会微微一笑,这例子未免也忒young忒simple了点儿。俗话说,万丈高楼拔地起,我相信脚踏实地的走,一步一个脚印的网上跑,总会向高手进阶的。
字面量方式定义对象
下面我们用另一种方式来创建对象,用{}类似与json这种方式来创建对象,通常我们称为字面量方式来创建对象,我将上诉的例子改装,新的方式定义为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第二种方式创建对象</title>
<script>
var object = {
qq : '290794272',
showQQ : function () {
alert(this.qq);
}
};
object.showQQ();
</script>
</head>
<body>
</body>
</html>
这里用object={}这种方式来创建对象,同样的给了qq属性和showQQ方法,并在showQQ方法中打印出自身的qq属性值。
接下来我们给这个对象封装更多的属性值,如name,sex等属性值,js代码如下:
var object = {
qq : '290794272',
name : "Spring Chang",
sex : 'sex',
showQQ : function () {
alert(this.qq);
},
showName : function () {
alert(this.name);
},
showSex : function () {
alert(this.sex);
}
};
object.showQQ();
object.showName();
object.showSex();
以后的例子中,在没必要额时候我将不再贴出整个html文档的所有内容。比如该例子,核心代码只包裹在head标签的script里面,所以我只贴出了js代码。上诉代码的含义是定义仨属性和仨方法,这仨方法分别输出了该对象对应的属性。
上诉俩例子就是js编程中最简单的对象的定义和封装,当然我知道你看了上诉俩例子之后肯定会觉得这是俩然并卵的例子,虽然看懂了但是不知道有什么用,下面我们来封装一个比较好玩的例子,四则运算的例子。
封装四则运算
四则运算我们都知道,就是用来处理两数之间的±*/四则运算的,在面向过程我们是这样设计的。
//js面向过程的四则运算
//加法运算法则
function add(num1, num2) {
return num1 + num2;
}
//减法运算法则
function sub(num1, num2) {
return num1-num2;
}
//乘法运算法则
function muti(num1, num2) {
return num1*num2;
}
//除法运算法则
function divsition(num1, num2) {
return num1/num2;
}
alert(add(1,2));
alert(sub(1,2));
alert(muti(1,2));
alert(divsition(1,2));
这里定义了四个方法,每个方法定义俩参数,然后在方法之外调用到了这些方法,弹窗输出相应的值。下面我们将上诉面向过程的代码改为面向对象的编程。首先得定义一个类Operation,然后该类的属性中带有上述四则运算法则属性,代码如下:
//js面向对象的四则运算
//定义了一个Operation操作对象
var Operation = {
add :function (num1, num2) {
return num1 * num2;
},
sub : function (num1, num2) {
return num1-num2;
},
muti:function (num1, num2) {
return num1*num2;
},
divsition:function (num1, num2) {
return num1/num2;
}
};
alert(Operation.add(1,2));//调用Operation对象的加法运算
alert(Operation.sub(1,2));//调用Operation对象的减法运算
alert(Operation.muti(1,2));//调用Operation对象的乘法运算
alert(Operation.divsition(1,2));//调用Operation对象道的除法运算
上诉代码先定义了一个Operation对象,对象封装了±×/四种法则,按后调用Operation.add(),Operation.sub(),Operation.muti(),Operation.divsition()来分别操作它们,你可以尝试着运行上述代码来观察输出值,我觉得如果你的代码和我的一致的话,将要依次输出:2,-1,2,0.5。
封装素数
接下里我们再来看看如何封装一个素数操作类,寻找素数在C/C++编程入门或者算法入门中经常提到的一道问题,但是这里我们的重点并不是在算法,而是在面向对象思维编程上面,我假设你已经知道什么是素数,以及如何运算计算机语言来判定和寻找素数。
这里还是容许我罗罗嗦嗦重提一下什么是素数把,素数就是除了1和本身之外,不能被其他数整除的自然数。比如:[2,3,5,7,11…],那么我们在编程中如何判定一个自然数是否属于素数呢?解决方法很简单:就是在一循环语句内,循环的变量从2开始,不断的尝试用该数去除以循环变量的值,如果一直除不尽,则判定为素数,否则不是素数。
算法思路大概就说这么多,下面拔刀相见直接开干。
var Primer = {
isPrimer : function (number) {
if(number <= 1) {//如果该数小于等于1,则不是素数,
return false;
}
for(var i = 2; i < number; i++) {
if(number%i == 0) {
return false;
}
}
return true;
}
}
alert("2:" + Primer.isPrimer(2)); //true
alert("3:" + Primer.isPrimer(3)); //true
alert("4:" + Primer.isPrimer(4)); //false
alert("5:" + Primer.isPrimer(5)); //true
alert("9:" + Primer.isPrimer(9)); //false
上诉代码中定义了一个Primer对象,然后里面有一方法isPrimer(),调用代码传如参数:2,3,4,5,9,如果不出意外,你将输出注释后面的值。
下面我们尝试向该对象中添加更多的方法,比如判断一定范围内,有多少素数来着的,那么思路怎么做呢?这里需要再次重申一下,本系列博客的重点不是算法,而是面向对象。所以考虑到代码的重用性,我们值需要在新增的方法中,从圈定的范围内开始遍历数据,调用Primer.isPrimer(),如果判定为素数,则push()进我们的数组,然后在输出数组的内容即可。
var Primer = {
//定义一个素数素质
primerArr:[],
//判断一个数是否为素数
isPrimer : function (number) {
if(number <= 1) {//如果该数小于等于1,则不是素数,
return false;
}
for(var i = 2; i < number; i++) {
if(number%i == 0) {
return false;
}
}
return true;
},
//获取给定范围内的所有素数
getPrimer : function (start, end) {
for(var i = start; i <= end; i++) {
if(this.isPrimer(i)) {
this.primerArr.push(i); //向数组中追加元算
}
}
var arr = this.primerArr;
return arr;
}
}
新增的getPrimer方法如上诉所述,遍历了start到end之间的所有整数,然后判断是否属于素数,如果是则push进primerArr数组,最后将这个数组返回调用者,调用代码如下:
document.write(Primer.getPrimer(1, 100));
页面输出值为:
2,3,5,7,11,13,17,19,23,29,31,37,41,43,47,53,59,61,67,71,73,79,83,89,97
按照上面的思路,我们再来给Primer类添加getCount()方法获取上诉范围内素数的个数,代码如下:
var Primer = {
//定义一个素数素质
primerArr:[],
//判断一个数是否为素数
isPrimer : function (number) {
if(number <= 1) {//如果该数小于等于1,则不是素数,
return false;
}
for(var i = 2; i < number; i++) {
if(number%i == 0) {
return false;
}
}
return true;
},
//获取给定范围内的所有素数
getPrimer : function (start, end) {
for(var i = start; i <= end; i++) {
if(this.isPrimer(i)) {
this.primerArr.push(i); //向数组中追加元算
}
}
var arr = this.primerArr;
return arr;
},
//获取给定范围内数组长度
getCount :function (start, end) {
var arr = this.getPrimer(start, end);
this.length = arr.length;
var length = this.length;
return length;
}
}
调用代码如下:
document.write("1到100之间的素数个数:" + Primer.getCount(1, 100) + "<br />");
页面输出值为:
1到100之间的素数个数:25
一个素数类大致的封装就到此结束了,当然了,你还可以自由发挥定义更多额方法。
本章节你已经学会了如何使用两种方式来定义JavaScript中的对象以及学会了封装两个类Operation四则运算类和Primer素数类,这俩例子在我们编程入门例子中较为常见,偏向于用来解决数学问题。后一章节将封装一些对象来实现一些简单的页面特效,我觉得如果你有JS Dom编程基础学起来轻快且轻松些,先这样了,我们下章节见!