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