成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Scliang / 1699人閱讀

摘要:自己的理解的第一個參數(shù)就是的值如果沒用默認是那個調用函數(shù)的當前的對象在全局作用域中就是被隱藏的所以不寫且在全局作用于調用函數(shù)的時候就是可以使用或者自己指定的指向

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

MDNjavascript面向對象

面向對象(Object-Oriented)

面向對象里面向的意思是以...為主,面向對象編程既以對象為主的編程.

面向對象的一些概念:

Namespace 命名空間
允許開發(fā)人員在一個獨特, 應用相關的名字的名稱下捆綁所有功能的容器。
Class 類
定義對象的特征。它是對象的屬性和方法的模板定義.
Object 對象
類的一個實例。
Property 屬性
對象的特征,比如顏色。
Method 方法
對象的能力,比如行走。
Constructor 構造函數(shù)
對象初始化的瞬間, 被調用的方法. 通常它的名字與包含它的類一致.
例如Object(),String(),Number()
Inheritance 繼承
一個類可以繼承另一個類的特征。
Encapsulation 封裝
一種把數(shù)據(jù)和相關的方法綁定在一起使用的方法.
Abstraction 抽象
結合復雜的繼承,方法,屬性的對象能夠模擬現(xiàn)實的模型。
Polymorphism 多態(tài)
多意為‘許多’,態(tài)意為‘形態(tài)’。不同類可以定義相同的方法或屬性。

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

javascript命名空間
MYAPP包含了所有的命名,他就像一個房間一樣,裝著所有的屬性,所以就叫命名空間

// 給普通方法和屬性創(chuàng)建一個叫做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中選一個!

阮一峰-且運算符(&&)或運算符(||)

且運算符(&&)往往用于多個表達式的求值。
它的運算規(guī)則是:如果第一個運算子的布爾值為true,則返回第二個運算子的值(注意是值,不是布爾值);如果第一個運算子的布爾值為false,則直接返回第一個運算子的值,且不再對第二個運算子求值。

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

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

而||和&&相反

返回第一個為真的值.后面的不看
那么:

var a = b || {}
意思就是如果b是存在的(b的返回值為true),那么a=b,如果b不存在,那么a={}

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

使用的代碼是
模塊化、MVC里的V和C、閉包與立即執(zhí)行函數(shù)的使用和MVC中的M(model)、MVC總結

接下來優(yōu)化老版本的message.js
箭頭函數(shù)內外this相通

優(yōu)化前的結構:

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


那么我們可以吧每個js文件中的MVC寫成一個模板,這個模板就是
所謂模板,就是寫個函數(shù)把他造出來,那么我們來封裝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的的屬性是函數(shù),那么這個屬性叫方法

在JavaScript中方法通常是一個綁定到對象中的普通函數(shù), 這意味著方法可以在其所在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函數(shù)的引用 ,包括 person1, Person.prototype, 和 helloFunction 等, 均引用了相同的函數(shù).

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

在調用函數(shù)的過程中,this的值取決于我們怎么樣調用函數(shù). 在通常情況下,我們通過一個表達式person1.sayHello()來調用函數(shù):即從一個對象的屬性中得到所調用的函數(shù)。此時this被設置為我們取得函數(shù)的對象(即person1)。這就是為什么person1.sayHello() 使用了姓名“Alice”而person2.sayHello()使用了姓名“bob”的原因。

然而我們使用不同的調用方法時, this的值也就不同了。當從變量 helloFunction()中調用的時候, this就被設置成了全局對象 (在瀏覽器中即window)。由于該對象 (非??赡艿? 沒有firstName 屬性, 我們得到的結果便是"Hello, I"m undefined". (這是松散模式下的結果, 在 嚴格模式中,結果將不同(此時會產生一個error)。 但是為了避免混淆,我們在這里不涉及細節(jié)) 。另外,我們可以像上例末尾那樣,使用Function#call (或者Function#apply)顯式的設置this的值。

自己的理解:call()的第一個參數(shù)就是this的值.如果沒用call,默認this是那個調用函數(shù)的當前的對象.在全局作用域中,就是被隱藏的window.所以不寫call()且在全局作用于調用函數(shù)的時候,this就是window.可以使用call()或者apply自己指定this的指向

文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉載請注明本文地址:http://systransis.cn/yun/108390.html

相關文章

  • 大前端2018現(xiàn)在上車還還得及么

    摘要:面向對象三大特征繼承性多態(tài)性封裝性接口。第五階段封裝一個屬于自己的框架框架封裝基礎事件流冒泡捕獲事件對象事件框架選擇框架。核心模塊和對象全局對象,,,事件驅動,事件發(fā)射器加密解密,路徑操作,序列化和反序列化文件流操作服務端與客戶端。 第一階段: HTML+CSS:HTML進階、CSS進階、div+css布局、HTML+css整站開發(fā)、 JavaScript基礎:Js基礎教程、js內置對...

    stormgens 評論0 收藏0
  • 大前端2018現(xiàn)在上車還還得及么

    摘要:面向對象三大特征繼承性多態(tài)性封裝性接口。第五階段封裝一個屬于自己的框架框架封裝基礎事件流冒泡捕獲事件對象事件框架選擇框架。核心模塊和對象全局對象,,,事件驅動,事件發(fā)射器加密解密,路徑操作,序列化和反序列化文件流操作服務端與客戶端。 第一階段: HTML+CSS:HTML進階、CSS進階、div+css布局、HTML+css整站開發(fā)、 JavaScript基礎:Js基礎教程、js內置對...

    mylxsw 評論0 收藏0
  • MVC && MVVM

    摘要:面向對象是自己組裝電腦,硬件已生產完畢。面向過程吃狗屎面向對象狗吃屎確切的講是一種軟件設計規(guī)范,早在年的理念就已經(jīng)誕生。后期的維護成本會減少很多。減輕了開發(fā)人員的負擔,也減少了操作邏輯導致業(yè)務邏輯混亂的可能性。 什么是MVC,什么是MVVM? 面向過程 --> 面向對象 --> MVC --> MV* 面向過程: 開發(fā)人員按照需求邏輯順序開發(fā)代碼邏輯,主要思維模式在于如何實現(xiàn)。先細節(jié),...

    klinson 評論0 收藏0
  • 前端基本功-常見概念()

    摘要:前端基本功常見概念一點這里前端基本功常見概念二點這里前端基本功常見概念三點這里什么是原型鏈當一個引用類型繼承另一個引用類型的屬性和方法時候就會產生一個原型鏈。函數(shù)式編程是聲明式而不是命令式,并且應用程序狀態(tài)通過純函數(shù)流轉。 前端基本功-常見概念(一) 點這里前端基本功-常見概念(二) 點這里前端基本功-常見概念(三) 點這里 1.什么是原型鏈 當一個引用類型繼承另一個引用類型的屬性和方...

    bladefury 評論0 收藏0

發(fā)表評論

0條評論

Scliang

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<