1. 程式人生 > >前端知識點2

前端知識點2

1.MVVM和MVC的區別

一、MVC

MVC模式的意思是,軟體可以分成三個部分

  • 檢視(View):使用者介面。
  • 控制器(Controller):業務邏輯
  • 模型(Model):資料儲存

各部分之間的通訊方式如下。

  1. View 傳送指令到 Controller
  2. Controller 完成業務邏輯後,要求 Model 改變狀態
  3. Model 將新的資料傳送到 View,使用者得到反饋

所有通訊都是單向的。

二、互動模式

接受使用者指令時,MVC 可以分成兩種方式。一種是通過 View 接受指令,傳遞給 Controller。

另一種是直接通過controller接受指令。

三、例項:Backbone

實際專案往往採用更靈活的方式,以 Backbone.js 為例。

1. 使用者可以向 View 傳送指令(DOM 事件),再由 View 直接要求 Model 改變狀態。

2. 使用者也可以直接向 Controller 傳送指令(改變 URL 觸發 hashChange 事件),再由 Controller 傳送給 View。

3. Controller 非常薄,只起到路由的作用,而 View 非常厚,業務邏輯都部署在 View。所以,Backbone 索性取消了 Controller,只保留一個 Router(路由器) 。

四、MVP

MVP 模式將 Controller 改名為 Presenter,同時改變了通訊方向。

1. 各部分之間的通訊,都是雙向的。

2. View 與 Model 不發生聯絡,都通過 Presenter 傳遞。

3. View 非常薄,不部署任何業務邏輯,稱為"被動檢視"(Passive View),即沒有任何主動性,而 Presenter非常厚,所有邏輯都部署在那裡。

五、MVVM

MVVM 模式將 Presenter 改名為 ViewModel,基本上與 MVP 模式完全一致。

唯一的區別是,它採用雙向繫結(data-binding):View的變動,自動反映在 ViewModel,反之亦然。

Angular 和 Ember 都採用這種模式。


2,js定義類的方式

在前端開發中,經常需要定義JS類。那麼在JavaScript中,定義類的方式有幾種,分別是什麼呢?本文就JS定義類的六中方式說明如下(案例說明):

1、工廠方式

?
1 2 3 4 5 6 7 8 9 10 11 function Car(){ var ocar = new Object; ocar.color = “blue”; ocar.doors = 4; ocar.showColor = function (){ document.write( this .color) }; return ocar; } var car1 = Car(); var car2 = Car();

呼叫此函式時將建立新物件,並賦予它所有的屬性和方法。使用此函式可以建立2個屬性完全相同的物件。

當然可以通過給它傳遞引數來改版這種方式。

?
1 2 3 4 5 6 7 8 9 10 11 12 13 function Car(color,door){ var ocar = new Object; ocar.color = color; ocar.doors = door; ocar.showColor = function (){ document.write( this .color) }; return ocar; } var car1 = Car(“red”,4); var car2 = Car(“blue”,4); car1.showColor() //output:”red” car2.showColor() //output:”blue”

現在可以通過給函式傳遞不同的引數來得到具有不同值的物件。

在前面的例子中,每次呼叫函式Car(),都要建立showcolor(),意味著每個物件都有一個自己的showcolor()方法。

但是事實上,每個物件鬥共享了同一個函式。 雖然可以在函式外定義方法,然後通過將函式的屬性指向該方法。

?
1 2 3 4 5 6 7 8 9 10 11 function showColor(){   alert( this .color);

相關推薦

前端知識點2

1.MVVM和MVC的區別 一、MVC MVC模式的意思是,軟體可以分成三個部分。 檢視(View):使用者介面。 控制器(Controller):業務邏輯 模型(Model):資料儲存 各部分之間的通訊方式如下。 View 傳

關於前端面試的一些知識點2

上一篇主要寫了一些基礎的知識但面試中常被問到的點,這一篇來點概念性的東西。本篇內容是我邊看JavaScript高階程式設計邊寫的,大家可以去看一下,不過那本書可比我這篇文章長的多,也可先看我的文章。最後祝大家前程似錦 1.HTML CSS JS的一些基礎概念 1

前端知識點總結(HTML篇2

html概念、全稱、含義 web標準構成----結構、表現、行為 html基本結構 doctype ---- 宣告文件型別 常用標籤 img的屬性 src alt title 含義 a的屬性 href target含義 表格屬性 border-collapse table-layout:fixed 表單 bu

前端知識點

js 知識點知識點: * ul li 中默認選擇 class="active" * $("#firstLi").removeClass("active");//去掉樣式 $("#fourthLi").addClass("active");//添加樣式 * 字體加粗: <b>李建波&l

Java進階知識點2:看不懂的代碼 - 協變與逆變

階段 off 開始 限制 array 設計者 equals 性方面 版本兼容 要搞懂Java中的協辦與逆變,不得不從繼承說起,如果沒有繼承,協變與逆變也天然不存在了。 我們知道,在Java的世界中,存在繼承機制。比如MochaCoffee類是Coffee類的派生類,那麽我

python 學習總結6 前端學習2

blog href utf-8 總結 head 默認 多余 har pytho html與css的繼續學習 1.css 書寫可以在style處先設置一個標簽的樣式 例如 這個將圖片的邊框設置為0 為多余的邊框,默認的img標簽有一個1px的邊框: <head>

j2se學習中的一些零碎知識點2

語句塊 繼承多態 this和super以及final 接口 抽象類 1、static修飾的變量叫做“靜態變量”(靜態變量,被存儲在方法區中,所有的java對象共享靜態變量,所有靜態變量是類級別的,使用“類名.”的方式訪問。),static修飾的方法叫做“靜態方法”(靜態方法中不能夠直直接訪

必背知識點-2

cisco 交換機 路由器 基礎交換 深圳雲計算王森 問題1、DHCP的全稱是什麽? 答案:dynamic host configuration protocol ,動態主機配置協議; 問題2、DHCP的作用是什麽? 答案:自動為客戶端主機分配 IP 地址 以及網關和 DNS 等相關信

前端知識點總結

splay 禁止 pat foo 狀態欄顏色 -c box eight mage 前端知識點總結 知識點一:DOCTYPE和瀏覽器渲染模式 文檔類型,一個文檔類型標記是一種標準通用標記語言的文檔類型聲明,它的目的是要告訴標準通用標記語言解析器,它應該使用

前端知識點總結——VUE

周期 響應 cookie index 通信 方式 r12 插入 outer 轉載自:http://www.bslxx.com/m/view.php?aid=1799 1.框架和庫的區別: 框架:framework 有著自己的語法特點、都有對應的各個模塊庫 library

軟件測試必備-前端知識點之css基礎及ps的用法

tro inf 軟件測試 blog gpo color 自己 ont 測量 CSS 一、 css定義 css樣式表、層疊樣式表,級聯樣式表 二、 css基礎語法 1、 寫style標簽,放在head標簽裏面的最後位置 2、 自己寫的css代碼,放在style標簽

瑣碎知識點(2)

頁面 查詢 電腦 chrome瀏覽器 webkit ie瀏覽器 工具 做的 -- 1、CSS3中-MS-,-MOZ-,-WEBKIT-,-O-瀏覽器私有前綴詳解 (1)-moz-:代表FireFox瀏覽器私有屬性 (2)-ms-:代表IE瀏覽器私有屬性 (3)-webkit

前端知識點總結——jQuery(下)

mda 服務器端 ont das 等待 .ajax AD 顏色 AS 1. 排隊和並發 1.並發: 多個css屬性同時變化放在一個animate函數內的多個css屬性默認並發變化 2.排隊: 多個css屬性先後變化對同一個元素,先後調用多個動畫API,都是排隊執行原理:

自己總結的前端知識點(vue部分)

路由 編譯 修改 com 轉化 提取 red syn 動態路由 1.MVVM model-view-viewModel,model是數據與業務邏輯,view是UI界面,viewModel是一個對象用於實現model與view的同步。 ViewModel 通過雙向數據綁定把

collection知識點2

Collection作為頂層集合介面,它不能直接建立物件,需要用多型的方式,通過父類引用指向子類物件的方式進行。     add方法,返回boolean型,表示是否將指定的元素追加到此列表的末尾了。且add會再集合中新增相應元素 例子: Collection c = new A

專案中使用到的前端知識點

1 設定跳轉 如果一個超連結,點選之後不做任何事情, <a href="javascript:void(0);"> <a href="javascript:void(0);"> 如果設定為 #  ,如果有滾動條,會跳轉到頂部  

前端知識點3

1,事件冒泡,捕獲,委託 早期的事件,是作為分擔伺服器運算負載的一種手段,實文件或者瀏覽器視窗中發生的一些特定的互動瞬間,如點選按鈕,拖放檔案等。我們可以使用偵聽器來預定事件,當事件釋出時候就可作出相應的響應,這種模式稱為觀察者模型。 事件流 事件流是從頁面接收事件

高階前端知識點

2018 大廠高階前端面試題彙總 木易楊 前端大全 今天 (給前端大全加星標,提升前端技能)   作者:木易楊   本人於7-8月開始準備面試,過五關斬六將,最終抱得網易歸,深深感受到高階前端面試的套路。以下是自己整理的面試

[django]梳理drf知識點2

原始提交的server資料 { ... "manufacturer": "DELL", "model_name": "R730" ... } server和manufacture&productmodel的關係 server如何驗證manufacture&am

Pyhton全棧的知識點(2)

1. HTTP/IP相關協議,分別位於哪層 http協議是超文字傳輸協議,http協議是基於TCP/IP通訊協議來傳遞資料 http協議工作與c/s架構上,瀏覽器作為http的客戶端通過URL向http服務端即web伺服器傳送所用請求。web伺服器收到所有請求後,向客戶端傳送響應資訊, http特點是短