《Web前端开发最佳实践》——第1章 Web前端开发概述1.1 Web前端开发的范畴

简介:

本节书摘来自华章计算机《Web前端开发最佳实践》一书中的第1章,第1.1节,作者:党 建
更多章节内容可以访问云栖社区“华章计算机”公众号查看。

第1章 Web前端开发概述

本章首先会简单介绍Web前端开发的历史由来,以及前端开发的概念及其范畴,让读者对前端开发有个整体的认识,同时还会对前端开发的一些错误认识进行更正。其次会介绍一下Web前端的现状,包括互联网整体环境、浏览器的发展、网站的设计和开发现状等,让读者认识到前端开发的现状和趋势,以便更好地提高自身的前端开发技能。

1.1 Web前端开发的范畴

1.1.1 什么是Web前端开发
什么是Web前端开发?也许有人会说Web前端开发就是网页设计,就是美工,也有人会说Web前端的工作就是使用工具拖曳生成各种界面,然后导出为网页。其实这些都是对Web前端的误解,或者说还是停留在过去对前端开发的认识上。记得某个求职节目中,某互联网公司负责人对前来求职的前端工程师说他们理解的Web前端是需要用Java的,是需要用这种语言编写的。一个互联网公司的负责人竟然对自己公司使用的核心技术概念知之甚少,这实在是让人匪夷所思,更是闹了不小的笑话。此事件也激起了业内针对Web前端概念的大讨论,不过也从侧面说明Web前端这一概念还没有深入人心。的确,Web前端兴起的时间还很短,这也就导致了很大一部分人不太了解这个新型的职业,所以我在这里再次解释一下Web前端这个词语的来龙去脉。
对于Web前端,业内公认的说法是从2005年开始兴起的。2005年以前,因为Web网页主要以展示为主,内容基本都是静态的,所以客户端开发工作的目的就是让页面展现得更加整齐和漂亮,没有太多花哨的内容。网站的用户也只是以浏览为主,并不会有复杂的交互。正因为如此,一般的美工仅依靠Photoshop和Dreamweaver等工具就可以制作出外观漂亮的静态网页。2005年之后,互联网进入Web 2.0时代。Web 2.0更注重用户的交互作用,用户不再只是读者,同时也是作者。用户不再是仅仅阅读静态的网页,同时也为网站贡献内容。随着这一概念的发展,人们开始重新审视网站的设计,制作的网页慢慢变得生动起来,页面也有了大量的交互,不再是简单地展示静态的文字和图片。Google Gmail的发布,使得AJAX技术大红大紫,这也把对Web 2.0的概念的认识推上了一个新的高度。AJAX无刷新技术极大地增强了网页的用户体验,使得用户操作页面更流畅,操作体验更接近于本地应用。此外,搜索引擎的普及使得网站的搜索引擎优化受到了重视。搜索引擎对网站的外观并不感兴趣,只识别网站的HTML代码,这就要求网站的设计者和开发者不仅要重视网站外在的用户体验,还要重视网站内在的代码质量。
随着网站功能的丰富、设计风格的发展以及网站代码质量的要求,网页端的开发也变得复杂起来,其代码量和逻辑复杂度都增加不少,同时还需要考虑网站的性能、浏览器兼容及网站安全性方面的问题。传统的网站开发者仅仅会使用网页制作工具已经不能够满足目前的需求了,此时的网站开发更接近于后端开发,需要有专门的软件开发工程师来做网站开发相关的工作,于是原来的网页制作这一职业就演变成了Web前端开发。从职责上讲,Web前端开发要涉及网站开发的方方面面,从前端UI到和后端的数据交互都属于前端开发的范畴。因此,Web前端开发是兼具艺术气息和逻辑思维的综合体,既要考虑页面的美感和操作体验,又要关注前端代码的质量。
1.1.2 Web前端开发需要具备的技能
由于Web前端技术兴起的时间不长,因此它还没有明确的界限定义,不同的Web项目中可能要求的Web前端开发技术会有所不同。例如,某些项目可能需要前端开发人员了解一些后端技术,这样前端开发人员才可以更好地与后端开发人员配合,如在页面上留下一些后端需要调用的“钩子”等,而某些项目可能需要前端开发人员懂一些UI设计、Photoshop工具的使用方法等,以便于和UI设计师沟通和配合。虽然Web前端开发的范畴广泛,并且界限模糊,但是以下7点是Web前端开发必备的技能。

  1. 页面标记(HTML)
    由于页面HTML代码结构基本固定,HTML的标签数量也不多,因此,从学习的难易程度来说,HTML应该是前端技术中非常容易学习的技术。即使是一个新手,也能在较短的时间里学会编写一个结构良好的页面。虽然说入门容易,但是要编写语义良好、简洁整齐的HTML代码则需要大量的实践才能掌握。HTML是页面的基本结构组成部分,是网站的基础,臃肿混乱的HTML代码不但会影响其本身的展现,而且与其对应的CSS与JavaScript代码也会变得难以编写和维护。
  2. 页面样式
    CSS 是 Cascading Style Sheet(层叠样式表)的简称。在标准页面设计中,因为CSS负责网页内容的表现,所以CSS也是前端开发需要掌握的核心内容之一。丰富的CSS样式能让平淡的HTML展现出绚丽的效果,使得页面更为友好。好的样式可以让用户在页面上停留的时间更久一些,也可以帮助用户更好地阅读网站内容,同时,还可以让用户在不同浏览器上有着相同的体验。CSS和HTML代码一样,没有复杂的逻辑,上手也比较容易,其主要的难点在于如何合理地利用CSS的组合和继承特性来编写简洁、可维护性好的CSS代码。以上这两项基本技能是前端UI开发必备的技能。
  3. 前端编程
    前端编程技能主要是指JavaScript编程。JavaScript是一种基于对象和事件驱动的客户端脚本语言,是页面实时动态交互的技术基础。相较于HTML和CSS,编写JavaScript代码更能让前端开发人员找到后端程序员的感觉。JavaScript是非常灵活的脚本语言,包含了高阶函数、动态类型以及灵活的对象模型等强大的语言特性,当然,JavaScript的灵活性也可能导致代码不易维护。此外,浏览器的兼容性也增加了JavaScript编码的难度。同一个功能,可能在不同的浏览器中有不同的实现。例如,在IE浏览器中,事件绑定使用的是attachEvent()方法,但其他浏览器则使用的是addEventListener()方法。开发人员在熟悉JavaScript基本语法和基本的编码规范之外,还应该了解并解决在不同浏览器中的JavaScript的兼容性问题。另外,作为前端开发工程师,必定会涉及后端的编程,一些原因是目前流行的Web编程方式会有部分后端代码存在于前端页面中,和前端的HTML、JavaScript等混合在一起,如PHP、JSP、ASP.NET等,因此,前端开发工程师也有必要了解一些后端编程技术。
  4. 跨平台,跨浏览器
    前端代码本来不存在跨平台方面的问题,但是随着移动Web平台的兴起,跨平台的问题就逐渐显现出来了。移动设备(如智能手机和平板电脑)在近几年发展迅猛,用户通过移动设备访问Web站点的比率也是逐年增高。如何在众多移动平台、众多屏幕尺寸上展现友好的Web站点成为一项前端技能。不过,目前跨浏览器没有像几年前表现得那么突出了,这主要是因为IE 6、IE 7浏览器的占有率下降和众多浏览器对标准的重视,另外,目前流行的前端框架已经很好地解决了浏览器的兼容问题。尽管如此,但是还需要熟悉常见的浏览器兼容方法,主要包括:IE 7、IE 8的兼容,HTML5中新特性的兼容等。
  5. 前端框架
    各种前端框架的出现,在很大程度上降低了前端开发的难度。框架统一了编码的方式,封装了浏览器兼容问题并添加大量的扩展功能。如今的Web项目中前端框架应用非常广泛,在开源社区GitHub上排名靠前的开源框架也是以前端框架居多。优秀的前端框架可以在很大程度上缩短项目开发的周期,尤其是jQuery,几乎成为Web项目默认的前端框架。但是,前端框架的接口众多,各种框架的使用方式和编码方式也不尽相同,作为前端开发工程师,需要熟悉一些常用框架的使用方法,并且要了解如何编写常用框架的扩展插件,如jQuery、YUI、Ext JS等。
  6. 调试工具
    对于前端代码,在调试过程中需要查看页面的HTML结构变化、CSS渲染效果、JavaScript代码的执行情况以及HTTP请求和返回的数据,并且要了解网站各个部分的性能等,甚至需要动态更改HTML、CSS代码来查看预期的效果,模拟发起HTTP请求来查看后端返回的数据。主流浏览器都会有对应的浏览器插件来辅助完成这些工作,如IE中的IE Dev Toolbar、Chrome中的Developer Tools、Firefox中的Firebug等,此外还有HTTP请求监控和模拟工具,如Fiddler等。 开发工程师需要熟练使用这些工具来辅助完成前端代码的调试。
  7. 沟通能力
    沟通是开发人员必备的一项基本技能,尤其是对于前端开发工程师来说。Web前端开发介于UI和后端逻辑开发之间,因此,Web前端工程师在开发过程中必定会和UI设计师及后端工程师合作:前端工程师需要和UI设计师沟通,确定效果是否可以实现以及实现的代价,并对UI设计提出建议;还需要和后端工程师沟通,确定前后端交互的接口以及传输的数据实体的结构等,良好的沟通会让这些过程变得轻松许多。
相关文章
|
10天前
|
Java 应用服务中间件 Docker
java-web部署模式概述
本文总结了现代 Web 开发中 Spring Boot HTTP 接口服务的常见部署模式,包括 Servlet 与 Reactive 模型、内置与外置容器、物理机 / 容器 / 云环境部署及单体与微服务架构,帮助开发者根据实际场景选择合适的方案。
67 25
|
8月前
|
监控 前端开发 JavaScript
前端工程化和传统前端开发的区别是什么?
前端工程化相比传统前端开发,在开发模式、代码组织与管理、构建与部署流程、团队协作、性能优化以及技术选型等方面都有了显著的改进和提升,能够更好地应对现代前端应用开发的复杂性和高要求。
|
5月前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
191 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
5月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
141 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
8月前
|
前端开发 JavaScript 开发者
前端小白逆袭记:从零开始,如何快速掌握前端开发精髓?
本文从一个前端小白的视角,分享了快速掌握前端开发核心技能的逆袭之路。通过学习HTML、CSS和JavaScript,逐步接触前端框架如Bootstrap、Vue.js和React,克服挑战,最终实现从入门到精通的蜕变。
90 4
|
9月前
|
人工智能 前端开发
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
226 0
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
|
2月前
|
Web App开发 前端开发 JavaScript
鸿蒙5开发宝藏案例分享---Web适配一多开发实践
这是一份实用的鸿蒙Web多设备适配开发指南,针对开发者在不同屏幕尺寸下的布局难题提供了解决方案。文章通过三大法宝(相对单位、媒体查询和窗口监听)详细介绍如何实现智能适配,并提供了多个实战案例,如宫格布局、对话框变形和自适应轮播图等。此外,还分享了调试技巧及工具推荐,帮助开发者快速上手并优化性能。最后鼓励读者实践探索,并提示更多官方资源等待发现。
|
4月前
|
关系型数据库 MySQL 数据库
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
TIS 是一款基于Web-UI的开源大数据集成工具,通过与人大金仓Kingbase的深度整合,提供高效、灵活的实时数据集成方案。它支持增量数据监听和实时写入,兼容MySQL、PostgreSQL和Oracle模式,无需编写复杂脚本,操作简单直观,特别适合非专业开发人员使用。TIS率先实现了Kingbase CDC连接器的整合,成为业界首个开箱即用的Kingbase CDC数据同步解决方案,助力企业数字化转型。
698 5
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
|
9月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
508 3
|
4月前
|
机器学习/深度学习 开发框架 API
Python 高级编程与实战:深入理解 Web 开发与 API 设计
在前几篇文章中,我们探讨了 Python 的基础语法、面向对象编程、函数式编程、元编程、性能优化、调试技巧以及数据科学和机器学习。本文将深入探讨 Python 在 Web 开发和 API 设计中的应用,并通过实战项目帮助你掌握这些技术。