前言
最近,讀了一些外文,覺得這篇現代web開發方法的文章還可以,就翻譯了一下,盡我最大的努力,蹩腳的英文很是費勁,其中有的夾雜了一些自己粗淺的理解,如果有誤導,請多多包涵,還請路過的老師多提意見和指正,如果你想閱讀英文原文,可直接掃文末下方二維碼閱讀即可若想聽音訊,直接戳該連結即可
幾個提示脫穎而出的現代網路發展
在本文中，我將介紹使用基於單頁JavaScript的框架的基本概念，優點和缺點
首先，單頁面應用程式是什麼？
讓我們看看傳統的Web應用程式是如何工作的。通常，一個完整的堆疊伺服器端應用程式在伺服器本身上生成Web應用程式的所有資料。只有這樣才能在頁面呈現之前將其傳送給客戶端
單頁應用程式概述（SPA）
內容從資料庫中獲取，然後通過控制器傳遞，最後在檢視模板傳送前與檢視模板合併
這體現在每次瀏覽應用程式或網站時重新載入的頁面的形式。 JavaScript在這裡的作用是非常小的。它只負責控制使用者介面的小部分
幾年前，單頁應用程式開始在開發人員中流行起來。單個頁面應用程式向伺服器傳送一個HTML檔案框架的請求，以及樣式和指令碼
與此同時，以Ajax請求的形式向伺服器發出後續請求。 HTML頁面內容本身使用JavaScript呈現，並使用CSS進行樣式化。
好處是我們只取得我們需要的內容的一部分，而不是整個頁面，這提供了更少的伺服器負載和更快的使用者介面。
以下是最流行的基於JavaScript的單頁面應用程式（SPA）框架
- Angular.js - 連線到靜態HTML的客戶端庫，具有一組用於資料繫結的屬性
- ReactJS - 用於構建Web應用程式的基於元件的客戶端庫
- Vue.js - 提供雙向資料繫結（也可以在AngularJS中看到）和伺服器端渲染，如Angular 2和ReactJS
- Ember.js - 客戶端庫使用Handlebars模板引擎來構建Web應用程式
- Meteor.js - 由NodeJS和MongoDB支援的全棧框架。其中使用Blaze，Angular和React進行模板化
2017年5個最佳JavaScript框架
單頁應用程式在內容，邏輯控制器和簡報之間建立了界限。對於MVC框架來說，它是一個關注點的分離
-
內容(Model) - 通常使用REST以JSON格式提供(負責把程式碼中的與底層資料構成相關的程式碼組合在一起,包括對資料的儲存和讀取,也就是所謂的與後臺約定返回的介面資料格式)
-
邏輯控制器(control) - 負責處理請求並將資料傳送回應用程式。通過使用HTTP和WebSockets處理(負責處理系統中的業務邏輯,並在需要時更新模型和檢視,它使得模型和檢視不需要在彼此之間直接溝通,實現了他們之間的鬆耦合的連線,也就是所謂的高內聚,低耦合,模組化,彼此之間各自獨立,減少依賴)
-
簡報(view) - 由包含模板標籤的HTML模板進行控制，以執行諸如迭代資料集之類的任務(負責將那些用於把模型中所儲存的資料顯示在螢幕上的程式碼組合在一起,本質上就是對各DOM元素進行處理)
小結:MVC模式的好處
關注點進行分離,會使得程式碼更易於理解和維護,更易於測試,其實在寫html的時候,我們總是倡導內容,結構樣式進行分離也一定程度上是這種思想嘛,只是現在是另一個維度上的開發模式,它可使工作與相同專案的多位開發者根據應用程式的模型,檢視,控制器3個層次進行任務劃分,那些Vue,Angular框架都是遵循這種模式,但說得輕飄飄的,但實際上還真是不簡單的,其實這些框架背後的技術也就是一些什麼觀察者模式,組合模式,策略模式等設計模式的組合應用下的產物,此刻論原生js的重要性..哈哈
一個伺服器端的例子
這個例子展示了我們如何獲取和渲染不同級別的使用者列表
讓我們從獲取使用者的伺服器端控制器開始，以JSON格式返回一個列表
/**
* Users controller (NodeJS)
*/
const app = express(),
/**
* This function fetches staff users
* from the MongoDB collection
*/
const fetchUsers = (offset = 0, limit = 10) => {
return new Promise((resolve, reject) => {
Users.find({}, {
$offset: offset,
$limit: limit
}).then((result) => {
if(error) {
reject(error);
}
else {
resolve(result);
}
});
});
};
/**
* This function returns a list
* of users in JSON format.
*/
app.get('/staff/users', (request, response) => {
fetchUsers()
.then((result) => {
response.status(200).json(result);
})
.catch((error) => {
response.status(500).json(error);
});
});
複製程式碼如果我們請求伺服器從https：// yourserver / staff / users獲取一些使用者，則回應如下:
[
{
"name":"Savinda",
"location":"Colombo"
},
{
"name":"Thameera",
"location":"Colombo"
},
{ "name":"Andy",
"location":"California"
},
{ "name":"Ian",
"location":"New York"
}
]
複製程式碼客戶端控制器
如果我們使用客戶端控制器，程式碼將如下所示：
Template.users = {
/**
* Array to store list of users.
*/
users: [],
/**
* This event fires when a template is ready.
*/
ready: () => {
fetchUsers();
},
/**
* Make AJAX request to fetch list of users.
*/
fetchUsers: () => {
let request = new XMLHttpRequest(),
url = 'https://yourserver/staff/users'
/**
* We make the request...
*/
request.open('GET', url, true);
/**
* When the request has completed...
*/
request.onload = () => {
/**
* Check the response status code
to make sure everything working fine...
*/
if(request.status === 200) {
/**
* Assign the response to the list of users.
*/
this.users = JSON.parse(request.responseText);
}
};
}
};
複製程式碼我們可以使用以下程式碼從列表中呈現使用者
<template name="user">
<li>
{{ name }} is in {{ location }}.
</li>
</template>
複製程式碼檢視模板的mvc應用程式，使使用者看起來像這樣：
<html>
<head>
<title>
Single Page Application | Users
</title>
</head>
<body>
<ul class="list-of-users">
{{ each users }}
{{> user }}
{{ end }}
</ul>
</body>
</html>
複製程式碼瀏覽器最初呈現模板時，會呼叫控制器以獲取使用者的模板。當使用者被抓取時，它們會自動呈現給列表
一些重要的概念
這些是一些概念，如果你是初學JavaScript的客戶端開發
- 控制器 - 負責管理資料和附加的檢視檔案。還包含處理應用的UI行為的功能
- 模板 - 包含特殊標籤以呈現內容的HTML檔案
- 檢視 - 與使用和功能中的模板類似。但是，檢視是將整個頁面放在一起的不同元件的總體集合
- 繫結 - 處理該檢視的控制器內的資料更改時，自動更新的檢視的渲染內容
- 路由 - 在瀏覽應用程式時，這使用HTML5 pushState深度連結不同的檢視
- Ajax請求 - 將請求傳送到伺服器以便在不重新載入頁面的情況下獲取資料。如果沒有Ajax，將不會有單個頁面的應用程式
- Web套接字 - 用於在Web瀏覽器和伺服器之間建立持久連線的API。 HTTP協議請求資料，然後斷開連線
總結
整篇主要是從傳統的web應用過度到現代的web應用,也就是現在流行的單頁面應用開發,其實單頁面應用本質上也就是Ajax的應用,不就是改變傳統的客戶端與服務端的頻繁的資料互動模式,避免響應慢,頁面閃爍空白,整個頁面重新整理等詬病嘛,提高使用者體驗減少伺服器端的壓力嘛,將檢視層(view),控制層(control),資料層(model)進行分離,將一些頁面邏輯控制從伺服器端給抽離出來讓前端來處理,比如路由等,服務端只提供能識別前端http請求的資料,達到在不重新整理整個頁面的情況下,在使用者執行某些DOM事件(比如點選,滾動)等時,頁面的區域性重新整理呈遞新資料的展現,至於更深的體會,還是要多擼程式碼,概念的東西說多了都是故事,虛無縹緲,蒼白無力的,程式碼就是對概念理論最好的解釋