网站的前端开发-网站前端开发工资

单页应用中使用的方法

首先要明确一点，单页本身只是一个概念，其实就是将多个网页组合成一个网页。 但是很多人将单页应用与一些框架或工具（如Vue-CLI、Angular2及后续版本）混淆，认为只有通过这些框架才能创建单页应用。 其实单页应用还是网页，基础技术还是HTML+CSS+JavaScript。 但是，单页应用往往交互更复杂，网页元素更多，因此网页内部非常复杂，模块化的问题更加突出。 然而，一些框架或工具（如Vue-CLI、Angular 2及后续版本）提供了完整的模块化解决方案，因此使用这些框架开发单页应用程序相对容易。 事实上，单页应用仍然是一个网页，只是一个相对复杂的网页。 下面介绍一些单页应用使用的方法。

1.通过交互事件控制网页元素

单页应用只是将多个网页组合成一个网页，所以我们仍然可以通过一些交互事件来控制网页元素。 例如，某些页面元素在单击按钮后显示。

2.通过路由

路由是通过监听 URL 的变化来控制网页元素。 有两种路由方法，hash 和 history。 下面首先介绍hash方法。

哈希是 URL 中的哈希 (#) 和后面的部分。 比如#/home中的#/home就是hash。 仅在浏览器地址栏中更新这部分不会导致页面刷新和重新加载。 我们可以通过hashchange事件监听URL的变化，然后根据变化的值来操作网页元素。 例如HTML代码如代码3.42所示，点击标签后URL的哈希部分发生变化，JavaScript代码如代码3.43所示，URL中的哈希部分发生变化，ChangePage()函数被触发，可以在函数内对网页元素进行操作。

代码清单 3.42HTML代码

……

……

代码清单 3.43 JavaScript 代码

//点击标签后，改变URL的hash部分，触发ChangePage函数

window.addEventListener('hashchange', ChangePage);

函数 ChangePage(){

……

位置.哈希； // 通过这个变量获取url的hash部分，然后根据这部分的值来操作网页元素

……

}

history 方法使用 history.pushState() 和 history.replaceState() 等 API 修改 URL 的路径部分，使用这些 API 修改 URL 的路径部分不会导致跳转。 如果改为，一般情况下在浏览器地址栏手动修改会导致跳转网站的前端开发，但是通过这些API修改不会导致跳转。 但是，这些 API 不会触发事件通知，只会修改 URL。 所以我们需要自己触发事件。示例如下所示。 HTML代码如代码3.44所示，JavaScript代码如代码3.45所示。 当标签被点击时网站的前端开发，它会被 JavaScript 拦截。 JavaScript拦截后，会执行history.pushState()函数，调用ChangePage()函数修改页面元素

代码清单 3.44HTML代码

……

家

……

清单 3.45 JavaScript 代码

//监听路由变化，当浏览器中的“前进”或“后退”按钮被点击时触发

window.addEventListener('hashchange', ChangePage);

……

//拦截标签点击事件，调用history.pushState()修改函数URL调用ChangePage()函数

var 链接列表 = 文档。 querySelectorAll('a[href]')

linkList.forEach(el => el.addEventListener('点击', function (e) {

e.preventDefault();

history.pushState(null, '', el.getAttribute('href')); //改变

更改页面();

}))

……

函数 ChangePage(){

……

//利用这个变量获取URL中的路径部分，然后根据这部分的值来操作网页元素

位置.路径名；

……

}

对比“通过交互事件改变网页元素”和“通过路由改变网页元素”这两种方式，原理上都是监听事件改变网页元素，只是后者在点击“前进”或“前进”浏览器。 “后退”按钮时响应，但前者可能跳转到其他网页。

注意：目前Vue.js、Angular、React.js都提供了路由封装，比上面提到的native方法更容易使用，而且这些框架会将路由和自己的模块化方法关联起来，所以使用框架会使单一的 Web 应用程序的开发劳动强度较低。

单页应用趋势

关于单页应用的讨论，网上很多人提倡把网站做成单页应用，好像不是单页应用的网站很快就会被淘汰。 但是在实际开发中，将整个网站做成一个单页应用是非常危险的。 具体问题如下：

·目前市场上的模块化解决方案还不够好。 Web开发简单，但是引用了模块化框架之后就变得很难开发了。

缺乏良好的网页本地缓存机制，用户每打开一个网站，都需要下载一个网页。

以上问题虽然有不同的解决方案，但是在模块化方面，可以通过学习掌握模块化框架的使用； 在缓存方面，浏览器可以缓存JavaScript、CSS等资源文件。 然而，当你想象并实际将整个网站做成一个单页网站时，你会发现网站内部代码杂乱无章，代码层级面目全非，网站加载速度极慢。 笔者曾经历过这样一个项目（将大型网站做成单页应用）。 当时打开网站需要几分钟，操作不流畅。 更糟糕的是，普通电脑想要打开其他网页，这样做会导致浏览器崩溃。

因此，与其盲目响应单页应用的趋势，不如着眼于当下，毕竟网站是为今天的人服务的。 毕竟现在的浏览器不是操作系统，没有完善的本地存储机制，也没有完善的内存管理和进程线程调度机制。 现在的浏览器对网页的要求是网页必须是轻量级的。

综上所述，前端架构需要合理使用单页应用，权衡哪些网页需要合并成一个单页应用，哪些网页需要分离。

注：按照目前的技术发展趋势，未来可能会出现桌面软件、App等Web应用，但仍然不建议将整个网站做成一个单页应用。

概括

对于大型网站的前端网页部分，很多人误以为只要选好前端框架就可以把前端网页部分做好。 但现实是，即使使用了最好的前端框架，也不一定能让前端网页的质量“优秀”。 很多时候我们过于依赖某种现成的技术，而忽略了项目过程其实是一个量身定做的过程。 每个项目都会有许多需要我们注意和解决的细节。 因此，前端架构开发人员应该对项目本身有足够的了解，知道前端工程存在哪些问题。 采用现成技术的根本原因很简单，因为它可以解决我们需要解决的一些问题。

本文详细介绍了前端架构和相应的解决方案，包括正则化、适配兼容、模块化、单页应用等。 另外，本章尽可能还原问题产生的原因，然后介绍具体的解决方法。 希望读者在了解了这些问题和解决方案后，能够对前端架构有一个清晰全面的认识。

本篇详解大型网站架构技术细节：前端架构、单页应用 下一篇详解大型网站架构技术细节：后端架构、后端工作原理 转发本文并关注小编； 感谢您的支持