面向对象

• 生活中的对象

1. 点根烟：使用打火机（我们只需要知道如何使用打火机就行，无须知道打火机是如何制造的）
2. 去中关村买电脑：对于不懂电脑的我可以通过熟悉的行情的同学（对象）帮我去买（ 我无须知道电脑型号、配置、价钱，只需让熟悉行情的同学去买即可）

   总结：上面的本质都反映了找个工具（对象）帮我完成某件事，这其实就是面向对象的体现，对象就像一个工具一样，每个工具都可以帮我们完成某项功能，我只需要知道工具如何操作，而不用知道工具是如何制造的，总之，我们生活中遇到的一切都是对象

• 代码体会面向对象的好处

     通过比较传统方式和面向对象方式体会面向对象的好处

    传统方式

   1、定义变量 -产品    

var name = 'iphone8'
var description = '各地区货源已陆续到库，我们将在十月十号左右发货，对于此次延迟发货给您带来的不便表示致歉，望您谅解。'
var price = 3330;

   2、获取元素

/*获取元素*/
var pdomPrice = document.getElementById('pprice')
var pdomDes= document.getElementById('pdescription')

  3、绑定元素、绑定事件

    window.onload=function(){
        /*绑定元素*/
        pdomName.innerHTML = name
        pdomPrice.innerHTML = price
        pdomDes.innerHTML = description

        /*绑定事件*/
        pdomAdd.onclick=function(){
        }
        pdomBuy.onclick=function(){

        }
    }

 

面向对象方式

定义某个工具包 --专门用来保存跟某个东西相关的工具

/*产品工具包 - 保存和产品有关的工具*/
    var product={
        name:'iphone8',
        description:'各地区货源已陆续到库，我们将在十月十号左右发货，对于此次延迟发货给您带来的不便表示致歉，望您谅解。',
        price:6660,
        /*绑定元素*/
        bindDom:function(){},
        /*绑定事件*/
        bindEvents:function(){},
        /*立即购买，暂时不考虑里面的代码是如何写的*/
        buy:function(){},
        /*加入到购物车*/
        addCart:function(){}
    }

获取元素 --产品

  /*获取元素 产品*/
    var pdomName = document.getElementById('pname')
    var pdomPrice = document.getElementById('pprice')
    var pdomDescription = document.getElementById('pdescription')
    var pbtnAdd= document.getElementById('add')
    var pbtnBuy= document.getElementById('buy')

绑定事件

window.onload=function(){
        /*绑定产品模块元素*/
        product.bindDom()
        
        /*绑定产品模块事件*/
        product.bindEvents()
        
    }

 

总结：

传统方式的特点：直接写细节，代码不可分割

面向对象方式的特点：宏观思考，再写细节，将代码进行分类管理，提倡功能的分割（即每个对象对应其功能）

传统方式开发的缺点：将代码杂糅在一起，如果代码量庞大，每次修改需要读懂整个d代码，维护成本大

面向对象的优点：代码清晰，容易维护，代码可读性高，便于团队作战---一个制造工具，一个使用工具

如何定义对象

分析人的共性

特征：姓名，年龄，身高，性别

行为：吃喝拉撒

分析学生共性

特征：姓名，年龄，身高，性别

分析网站开发中对象的属性和方法

京东--用户

属性：姓名，登录名，密码，邮件，手机号...

行为：登录，退出，修改密码，修改用户...

 

京东----产品列表页

属性：名称，价格，图片，描述，评论

行为：购买，加入购物车，评论，退货

 

京东--购物车

属性：产品列表，总价格，购买的个数

行为：结算，删除商品，清空购物车

用代码实现对象

产品对象：

//产品对象
function Product(){
	//属性 
	this.image = '';
	this.discount = '';
	this.name = '';
	this.price = '';
	this.original = '';
	this.sales = '';
	
}

属性和方法：

特性：我们一般将特性称为属性

行为：称为方法，其实就是一个函数

语法规范：

• 我们一般将属性放在上面，方法放在下面
• 上面的这个容器叫构造函数，又叫构造对象，专门放属性
• 下面的这种写法叫原型对象，专门放置方法

如何使用我们定义好的对象

抽象和具体：

• 我们前面定义好的对象都是抽象的
• 无法直接使用，我们只能使用具体的

    例1：水果是抽象的，具体的抽个水果是具体的

    例2：学生是抽象的，具体的某个学生的具体的

    例3：产品是抽象的，每个产品是具体的

总结：先实例后使用，访问成员（属性、方法）点语法

   下面是一个简单的例子：

 

//产品对象
///*对象内如何使用对象的属性和方法：this，
///对象外如何使用：先实例化，后用点语法*/
function Product(){
	//属性 方法
	this.image = '';
	this.discount = '';
	this.name = '';
	this.price = '';
	this.original = '';
	this.sales = '';
	
}

Product.prototype = {
	//绑定元素
	bindDom:function(){
      var str = '';
      str +='<dl>';
        str +='<dt><a><img src="'+this.image+'" width="384" height="225" /></a></dt>';
        str +='<dd>';
           str +='<span><a><em>'+this.discount+'折</em>'+this.name+'</a></span>';
        str +='</dd>';
        str +='<dd class="price">';
           str +='<em>?'+this.price+'</em>';
           str +='<del>?'+this.original+'</del>';
           str +='<i>售量'+this.sales+'</i>';
        str +='</dd>';
      str +='</dl>';
      return str;
	}
}


window.onload = function() {
	/*假设这是ajax获取的json数据 -- 假设这是后台给你的数据*/
	var products = [
		{name:'手机中的战斗机',price:1111,original:1200,sales:300,discount:3.5,image:'img/boutque10_r2_c2.jpg'},
		{name:'手机中的战斗机',price:1111,original:1200,sales:300,discount:3.5,image:'img/boutque10_r2_c2.jpg'},
		{name:'手机中的战斗机',price:1111,original:1200,sales:300,discount:3.5,image:'img/boutque10_r2_c2.jpg'},
		{name:'手机中的战斗机',price:1111,original:1200,sales:300,discount:3.5,image:'img/boutque10_r2_c2.jpg'},
		{name:'手机中的战斗机',price:1111,original:1200,sales:300,discount:3.5,image:'img/boutque10_r2_c2.jpg'},
		{name:'手机中的战斗机',price:1111,original:1200,sales:300,discount:3.5,image:'img/boutque10_r2_c2.jpg'},
		{name:'手机中的战斗机',price:1111,original:1200,sales:300,discount:3.5,image:'img/boutque10_r2_c2.jporiginal'}
		]
   /*前端代码*/
  /*前后台开发不影响，我们不必等待后端人员给我们数据*/
   var str = '';
   for (var i = 0; i < products.length; i++) {
    //对象的使用必须先实例化，对象定义好之后，
    //都是抽象的，必须实例化成具体
   	  var product = new Product();
   	  product.image = products[i].image; 
   	  product.discount = products[i].discount; 
   	  product.name = products[i].name; 
   	  product.price = products[i].price;
   	  product.original = products[i].original; 
   	  product.sales = products[i].sales; 


   	  str += product.bindDom();
   	  

   } 
  var container = document.getElementById('container');
  container.innerHTML = str;

   }

 

 

对象的字面量形式

 

json字面量形式和json协议

 什么是json协议

json协议就是一种前端与服务端的数据交换格式，是一个规范，按照这个规范写法就能实现数据传递

json（协议）和json对象的区别

json是数据传输通用协议，json对象是通过字面量来表示一个对象

xml是什么，xml的作用，和json的区别

xml只是描述数据的一种结构，html结构就是xml结构中的一种

xml作用：树结构储存数据

xml和json区别

相同点：

都是一种通用协议

都可以用来描述数据

不同：

json相对于xml，数据体积小，传输速度快

json没有xml这么通用

json可以和js对象相互转化，和js天生一对，因此广泛用于前端开发

 

总结对象的三个作用

• 保存一些常用的工具来简化我们的开发工作

         把和某个主题有关的功能等放在一起，统一管理

        比如把浏览器分成window对象，document对象

        分别放置了和这个对象有关的一些操作

        我们不必关心实现细节，直接使用

• 描述数据
• 面向对象编程

 

转载于:https://my.oschina.net/u/3876057/blog/1834813