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. 吃就行了