現代Web開發方法

時間 2019-11-24

標籤現代 web 開發方法欄目 HTML 简体版

原文原文鏈接

前言

最近,讀了一些外文,以爲這篇現代web開發方法的文章還能夠,就翻譯了一下,盡我最大的努力,蹩腳的英文非常費勁,其中有的夾雜了一些本身粗淺的理解,若是有誤導,請多多包涵,還請路過的老師多提意見和指正,若是你想閱讀英文原文,可直接掃文末下方二維碼閱讀便可若想聽音頻,直接戳該連接便可html

幾個提示脫穎而出的現代網絡發展

在本文中，我將介紹使用基於單頁JavaScript的框架的基本概念，優勢和缺點前端

首先，單頁面應用程序是什麼？web

讓咱們看看傳統的Web應用程序是如何工做的。一般，一個完整的堆棧服務器端應用程序在服務器自己上生成Web應用程序的全部數據。只有這樣才能在頁面呈現以前將其發送給客戶端數據庫

單頁應用程序概述（SPA）

內容從數據庫中獲取，而後經過控制器傳遞，最後在視圖模板發送前與視圖模板合併express

這體如今每次瀏覽應用程序或網站時從新加載的頁面的形式。 JavaScript在這裏的做用是很是小的。它只負責控制用戶界面的小部分json

幾年前，單頁應用程序開始在開發人員中流行起來。單個頁面應用程序向服務器發送一個HTML文件框架的請求，以及樣式和腳本設計模式

與此同時，以Ajax請求的形式向服務器發出後續請求。 HTML頁面內容自己使用JavaScript呈現，並使用CSS進行樣式化。瀏覽器

好處是咱們只取得咱們須要的內容的一部分，而不是整個頁面，這提供了更少的服務器負載和更快的用戶界面。bash

如下是最流行的基於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事件(好比點擊,滾動)等時,頁面的局部刷新呈遞新數據的展示,至於更深的體會,仍是要多擼代碼,概念的東西說多了都是故事,虛無縹緲,蒼白無力的,代碼就是對概念理論最好的解釋