现代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事件(好比点击,滚动)等时,页面的局部刷新呈递新数据的展示,至于更深的体会,仍是要多撸代码,概念的东西说多了都是故事,虚无缥缈,苍白无力的,代码就是对概念理论最好的解释

扫上方二维码可阅读英文原文