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

 

 

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

对 JS 中的面向对象的基础进行讲述, 初体验使用面向对象进行开发

主要内容是

1. 面向对象的概念及特性
2. 用面向对象的方式解决简单的标签创建实例

一些基础的概念

面向对象

面向对象的概念

1. 面向对象就是使用对象
2. 面向对象开发就是使用对象开发
3. 面向过程就是以过程的方式开发
4. 面向对象是面向过程的封装

面向对象的特性

1. 抽象性

   如果需要用一对象来描述一个数据, 那就需要抽取这个对象的核心数据来描述

   • 抽取需要的核心属性和方法
   • 需要在特定情况下,才能明确对象的具体意义

2. 封装性

   封装就是将数据和功能组合到一起

   • 在 js 中, 对象就是键和值的集合
     • 键值如果是数据(基本数据, 复合数据, 空数据), 就称为属性
     • 键值如果是函数,就称为方法
   • 对象就是将属性和方法封装起来
   • 方法是将过程封装起来

3. 继承性

   继承性就是自己没有, 别人有, 将别人的拿过来自己用, 并且成为自己的

   • 传统继承基于模板

   • 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'));

  用生活中吃饭的的例子就可以这样理解:
• 如果你自己烧, 那就需要(非常的麻烦, 时间有很长)
  1. 买菜
  2. 洗菜
  3. 烧饭烧菜
  4. 收拾
  5. 洗碗
• 如果是上饭店, 那就非常简单(因为买菜, 洗菜, 烧饭烧菜, 洗碗的工作都是别人帮你完成了)
  1. 吃就行了