JS面向對象一:MVC的面向對象封裝

JS面向對象一:MVC的面向對象封裝

MDNjavascript面向對象

面向對象(Object-Oriented)

面向對象裏面向的意思是以...爲主,面向對象編程既以對象爲主的編程.

面向對象的一些概念:

Namespace 命名空間
容許開發人員在一個獨特, 應用相關的名字的名稱下捆綁全部功能的容器。
Class 類
定義對象的特徵。它是對象的屬性和方法的模板定義.
Object 對象
類的一個實例。
Property 屬性
對象的特徵，好比顏色。
Method 方法
對象的能力，好比行走。
Constructor 構造函數
對象初始化的瞬間, 被調用的方法. 一般它的名字與包含它的類一致.
例如Object(),String(),Number()
Inheritance 繼承
一個類能夠繼承另外一個類的特徵。
Encapsulation 封裝
一種把數據和相關的方法綁定在一塊兒使用的方法.
Abstraction 抽象
結合複雜的繼承，方法，屬性的對象可以模擬現實的模型。
Polymorphism 多態
多意爲‘許多’，態意爲‘形態’。不一樣類能夠定義相同的方法或屬性。

命名空間

// 全局命名空間
var MYAPP = MYAPP || {};

javascript命名空間
MYAPP包含了全部的命名,他就像一個房間同樣,裝着全部的屬性,因此就叫命名空間

// 給普通方法和屬性建立一個叫作MYAPP.commonMethod的容器
MYAPP.commonMethod = {
  regExForName: "", // 定義名字的正則驗證
  regExForPhone: "", // 定義電話的正則驗證
  validateName: function(name){
    // 對名字name作些操做，你能夠經過使用「this.regExForname」
    // 訪問regExForName變量
  },
 
  validatePhoneNo: function(phoneNo){
    // 對電話號碼作操做
  }
}

// 對象和方法一塊兒申明
MYAPP.event = {
    addListener: function(el, type, fn) {
    //  代碼
    },
   removeListener: function(el, type, fn) {
    // 代碼
   },
   getEvent: function(e) {
   // 代碼
   }
  
   // 還能夠添加其餘的屬性和方法
}

//使用addListener方法的寫法:
MYAPP.event.addListener("yourel", "type", callback);

解釋:
由於

1||2//返回1,不是true或者false!!!

五個falsy值
0 NaN null undefined ''

在javascript中,a||b c&&d的返回值只會在abcd中選一個!

阮一峯-且運算符（&&）或運算符（||）

且運算符（&&）每每用於多個表達式的求值。
它的運算規則是：若是第一個運算子的布爾值爲true， 則返回第二個運算子的值（注意是值，不是布爾值）；若是第一個運算子的布爾值爲false，則直接返回第一個運算子的值，且再也不對第二個運算子求值。

若是是一連串的&&,他的返回值就是遇到的第一個falsy值,後面的不看了

1 && 0 && console.log(3)//console.log(3)不會執行,返回0

console.log(3)//返回undefined

而||和&&相反

返回第一個爲真的值.後面的不看
那麼:

var a = b || {}
意思就是若是b是存在的(b的返回值爲true),那麼a=b,若是b不存在,那麼a={}

類(從MVC提煉面向對象是什麼)

使用的代碼是
模塊化、MVC裏的V和C、閉包與當即執行函數的使用和MVC中的M(model)、MVC總結

接下來優化老版本的message.js
箭頭函數內外this相通

優化前的結構:

在幾個模塊化文件裏,都有MVC


那麼咱們能夠吧每一個js文件中的MVC寫成一個模板,這個模板就是類
所謂模板,就是寫個函數把他造出來,那麼咱們來封裝MVC

封裝 Model View Controller

首先建三個封裝的文件,再引入

View():

Model():

原先的model:

封裝後Model():

而且save()傳入object
而後就能夠用封裝後的Model()代碼了,修改message.js代碼爲:

也就是說,封裝後咱們的使用方法是:

若是有兩個model,不須要寫重複代碼

View,Model封裝後的完整代碼

Controller():

封裝Controller.js,可是沒有將封裝運用,由於本身的簡歷項目比較小,代碼結構不復雜,封裝後反而會難理解,知道如何封裝和如何使用的思想就能夠

封裝後的全部MVC代碼

總結

密愛想對象封裝後MVC的使用方法:
view:

/*
var view = View('.xxx')
*/

model:

/*
var model = Model({
  resourceName: '表名'
})
*/

controller:

/*
Controller({
  init:(){
    this.view
    this.model
    this.xxx()
    this.yyy()
  },
  xxx(){},
  yyy(){}
})
*/

簡單了很多.

總結:
面向對象就是既然這些對象有相同的屬性和相同的行爲,那麼就把相同的地方存到一個地方,當作一個模板.這就叫類
當須要生成對象的時候,new一個對象出來,這個對象就有這個模板上的屬性和行爲.這就叫實例化一個對象.
面向對象的核心就是實例化一個對象

其餘:對象的方法

如下引用自MDNjavascript面向對象

若是一個Object的的屬性是函數,那麼這個屬性叫方法

在JavaScript中方法一般是一個綁定到對象中的普通函數, 這意味着方法能夠在其所在context以外被調用。 思考下面示例中的代碼:

function Person(firstName) {
  this.firstName = firstName;
}


Person.prototype.sayHello = function() {
  alert("Hello, I'm " + this.firstName);
};

var person1 = new Person("Alice");
var person2 = new Person("Bob");
var helloFunction = person1.sayHello;

person1.sayHello();                                 // alerts "Hello, I'm Alice"
person2.sayHello();                                 // alerts "Hello, I'm Bob"
helloFunction();                                    // alerts "Hello, I'm undefined" (or fails
                                                    // with a TypeError in strict mode)
console.log(helloFunction === person1.sayHello);          // logs true
console.log(helloFunction === Person.prototype.sayHello); // logs true
helloFunction.call(person1);                        // logs "Hello, I'm Alice"
helloFunction.call(person2);                        // logs "Hello, I'm Bob"

如上例所示, 全部指向sayHello函數的引用 ，包括 person1, Person.prototype, 和 helloFunction 等， 均引用了相同的函數.

console.log(helloFunction === person1.sayHello);          // logs true
console.log(helloFunction === Person.prototype.sayHello); // logs true

在調用函數的過程當中，this的值取決於咱們怎麼樣調用函數. 在一般狀況下，咱們經過一個表達式person1.sayHello()來調用函數：即從一個對象的屬性中獲得所調用的函數。此時this被設置爲咱們取得函數的對象（即person1）。這就是爲何person1.sayHello() 使用了姓名「Alice」而person2.sayHello()使用了姓名「bob」的緣由。

然而咱們使用不一樣的調用方法時, this的值也就不一樣了。當從變量 helloFunction()中調用的時候， this就被設置成了全局對象 (在瀏覽器中即window)。因爲該對象 (很是可能地) 沒有firstName 屬性, 咱們獲得的結果即是"Hello, I'm undefined". (這是鬆散模式下的結果， 在 嚴格模式中，結果將不一樣（此時會產生一個error）。 可是爲了不混淆，咱們在這裏不涉及細節) 。另外，咱們能夠像上例末尾那樣，使用Function#call (或者Function#apply)顯式的設置this的值。

本身的理解:call()的第一個參數就是this的值.若是沒用call,默認this是那個調用函數的當前的對象.在全局做用域中,就是被隱藏的window.因此不寫call()且在全局做用於調用函數的時候,this就是window.可使用call()或者apply本身指定this的指向