前言
最近,读了一些外文,觉得这篇现代web开发方法的文章还可以,就翻译了一下,尽我最大的努力,蹩脚的英文很是费尽,其中有的夹杂了一些自己粗浅的理解,如果有误导,请多多包涵,还请路过的老师多提意见和指正,如果你想阅读英文原文,可直接扫文末下方二维码阅读即可
正文从这里开始~
几个提示脱颖而出的现代网络发展
在本文中,我将介绍使用基于单页JavaScript的框架的基本概念,优点和缺点
首先,单页面应用程序是什么?
让我们看看传统的Web应用程序是如何工作的。通常,一个完整的堆栈服务器端应用程序在服务器本身上生成Web应用程序的所有数据。只有这样才能在页面呈现之前将其发送给客户端
单页应用程序概述(SPA)
内容从数据库中获取,然后通过控制器传递,最后在视图模板发送前与视图模板合并
这体现在每次浏览应用程序或网站时重新加载的页面的形式。 JavaScript在这里的作用是非常小的。它只负责控制用户界面的小部分
几年前,单页应用程序开始在开发人员中流行起来。单个页面应用程序向服务器发送一个HTML文件框架的请求,以及样式和脚本
与此同时,以Ajax请求的形式向服务器发出后续请求。 HTML页面内容本身使用JavaScript呈现,并使用CSS进行样式化。
好处是我们只取得我们需要的内容的一部分,而不是整个页面,这提供了更少的服务器负载和更快的用户界面。
以下是最流行的基于JavaScript的单页面应用程序(SPA)框架
2017年5个最佳JavaScript框架
单页应用程序在内容,逻辑控制器和演示文稿之间创建了界限。对于MVC框架来说,它是一个关注点的分离
小结: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的客户端开发
下列文中的一些陌生词汇
1. drawbacks 缺点 2. advantage 优点
3. frameworks 架构 4. rendered 呈现
5. manifests 表示,表明 6. navigate 导航
7. interface接口 8. skeleto 骨架
9. subsequent 随后 10. subset 子集
11. boundaries 边界 12. Presentation 介绍
13. functionality 功能 14. establish 建立
15. persistent 一贯,固执 16. disconnects 断开,拆开
整篇主要是从传统的web应用过度到现代的web应用,也就是现在流行的单页面应用开发,其实单页面应用本质上也就是Ajax的应用,不就是改变传统的客户端与服务端的频繁的数据交互模式,避免响应慢,页面闪烁空白,整个页面刷新等诟病嘛,提高用户体验减少服务器端的压力嘛,将视图层(view),控制层(control),数据层(model)进行分离,将一些页面逻辑控制从服务器端给抽离出来让前端来处理,比如路由等,服务端只提供能识别前端http请求的数据,达到在不刷新整个页面的情况下,在用户执行某些DOM事件(比如点击,滚动)等时,页面的局部刷新呈递新数据的展现,至于更深的体会,还是要多撸代码,概念的东西说多了都是故事,虚无缥缈的,代码就是对概念理论最好的解释