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