JS面向对象使用面向对象进行开发

面向对象基础一之初体验使用面向对象进行开发

主要内容是

面向对象的概念及特性

用面向对象的方式解决简单的标签创建实例

一些基础的概念

面向对象

面向对象的概念

面向对象就是使用对象

面向对象开发就是使用对象开发

面向过程就是以过程的方式开发

面向对象是面向过程的封装

面向对象的特性

抽象性



抽取需要的核心属性和方法

需要在特定情况下,才能明确对象的具体意义

封装性



在 js 中, 对象就是键和值的集合

键值如果是数据(基本数据, 复合数据, 空数据), 就称为属性

键值如果是函数,就称为方法

对象就是将属性和方法封装起来

方法是将过程封装起来

继承性



传统继承基于模板

js 的继承基于对象

在 js 中的简单的继承模式: 混入模式(mix)

在 jQuerty 中的混入叫做: extend

var o1 = { name : 'Jhon' };
var o2 = { age : 19 };
function mix(o1,o2){
for(var key in o2){
o1[key] = o2[key];
}
}
mix(o1, o2);

使用面向过程和面向对象进行标签创建

使用面向过程创建div, 并设置样式

按部就班, 一步一步来

只能一个一个添加属性

如果创建多个div标签, 非常麻烦

var div = document.createElement('div');
documet.appendChild(div);
div.style.width = '200px';
div.style.height = '200px';
div.style.backgroundColor = 'red';
div.style.border = '10px dashed blue';
...

使用面向对象创建div, 并设置样式

抽取对象(名词提炼): div, body

分析属性和方法(动词提炼): appendChild, style

function DivTag(){
// 注意这里的 this 指的是 通过构造函数创建出来的实例对象
this.DOM = document.createElement('div');
appendTo : function(node){
// this是实例对象, 不是DOM节点, 不能直接使用DOM属性和方法
node.appendChild(this.DOM);
};
css : function(option){
for(var key in option){
this.DOM.style[key] = option[key];
}
}
}
var divTag = new DivTag();
divTag.appendTo(document.body);
divTag.css({
width : '200px',
height : 200px,
backgroundColor : 'red',
border : '10px dashed blue'
});

这样的使用对象的方式进行创建标签非常方便, 创建多个不同样式的标签也非常轻松

但是这样也有缺点, 不能和 jQuery 一样, 不能进行链式变成, 我们可以这样修改, 在每一个方法后面加上一个

return this

function DivTag(){
// 注意这里的 this 指的是 通过构造函数创建出来的实例对象
this.DOM = document.createElement('div');
appendTo : function(node){
// this是实例对象, 不是DOM节点, 不能直接使用DOM属性和方法
node.appendChild(this.DOM);
return this;
};
css : function(option){
for(var key in option){
this.DOM.style[key] = option[key];
}
return this;
}
}
var divTag1 = new DivTag()
.appendTo(document.body)
.css({
width : '200px',
height : 200px,
backgroundColor : 'red',
border : '10px dashed blue'
});
var divTag2 = new DivTag()
.appendTo(document.body)
.css({
width : '400px',
height : 400px,
backgroundColor : 'pink',
border : '10px dashed green'
});

总结

什么是面向对象

面向对象说白了就是对面向过程进行了封装

比如说:

需求是 一个字符串是

str = 'abcdefg'

, 找到里面的

e

,并返回

e

的索引

使用面向过程的处理办法就是, 遍历字符串, 得到索引

var str = 'abcdefg';
for(var i = 0;i < str.length;i++){
var char = str.charAt(i);
if(char == 'e'){
conole.log(i);
break;
}
}

使用面向过程的处理办法就是, 使用

indexOf

, 得到索引

var str = 'abcdefg';
console.log(str.indexOf('e'));

用生活中吃饭的的例子就可以这样理解:

如果你自己烧, 那就需要(非常的麻烦, 时间有很长)

买菜

洗菜

烧饭烧菜

收拾

洗碗

如果是上饭店, 那就非常简单(因为买菜, 洗菜, 烧饭烧菜, 洗碗的工作都是别人帮你完成了)

吃就行了