编辑推荐
Web前端开发者的内功修炼秘笈
4大社区鼎立推荐!
在这个用户体验为王的Web 2.0时代,Web应用所涉及的领域越来越广,规模越来越大,需求越来越多样化和复杂化,更新的速度也越来越快。如何才能让我们的应用应对规模化、多样化、复杂化和快速变化带来的种种问题?编写高质量的、易于维护的Web前端代码似乎是解决这些问题的惟一途径。
如何才能编写出高质量的、易于维护的Web前端代码?《编写高质量代码:Web前端开发修炼之道》的主要内容围绕Web前端开发的三大技术要素——HTML、CSS和JavaScript展开,深入地讨论了编写高质量的HTML代码、CSS代码和JavaScript代码的方法、技巧、规范和实践,从而为编写易于维护的Web前端代码打下坚实的基础。希望《编写高质量代码:Web前端开发修炼之道》能帮助大家从一筹莫展的前端维护工作中走出,从此微笑地面对需求的“变化”。
互联网进入Web 20时代以后,Web应用敲响了传统桌面应用的丧钟,它一路摧城拔寨,如今几乎所有的应用都打上了“Web”的烙印。与之相应的,Web开发技术得到了空前的发展,尤其是前端技术。近年来,随着用户对使用体验的要求越来越高,前端开发的技术难度越来越大,昔日设计和制作不分的网页设计师这一职位终于“拆分”成了视觉设计师和前端开发工程师两个职位,分别向着艺术和技术的方向纵深发展。
Web前端开发工程师是一个很新的职业,在国内乃至国际上真正开始受到重视的时间也不超过5年,这类专业人才一直供不应求。从知识体系上讲,前端开发工程师需要掌握和了解的知识非常之多,甚至可以用庞杂来形容。作为一名没有太多经验的前端开发工程师,我们应该如何去全面认识自己的工作,如何找准自己的定位,如何从合格成为优秀,最后迈向卓越?《编写高质量代码:Web前端开发修炼之道》尝试从如何编写易于维护的、高质量的Web前端代码的角度给出答案。
如果你在思考下面这些问题,也许《编写高质量代码:Web前端开发修炼之道》就是你想要的!
作为一名合格的web前端开发工程师,究竟需要具备哪些技能和素质?为什么说如果要精Web前端开发这一行,必须先精通十行?
在Web应用的实现代码中,有哪些技术因素会导致应用难以维护?
高质量的Web前端代码应该满足哪些条件?如何才能提高Web前端代码的可读性和可重用性?
在HTML代码中,为何要使用语义化标签?如何检查你使用的标签是否语义良好?语义化标签时应该注意哪些问题?
如何编写CSS代码和JavaScript代码可以避免团队合作时产生冲突?
如何组织CSS文件才能让它们更易于管理?如何让CSS模块化,从而提高代码的重用率?CSS的命名应该
注意哪些问题?何谓优良的CSS编码风格?
如何在CSS编码中引入面向对象的编程思想?这样做有哪些好处?
原生JavaScript和JavaScript类库之间有何关系?如何编写自己的JavaScript类库?
JavaScript有哪些常见的跨浏览器兼容问题?如何解决这些问题?
如何组织JavaScript才能让代码的结构更清晰有序,从而更易于维护?如何才能编写出弹性良好的JavaScript
代码?编写过程中应该注意哪些问题?
JavaScript的对象编程是如何实现的?如何用面向对象的方式重写原有的代码?
编写高质量的JavaScript代码有哪些实用的技巧?又有哪些常见的问题需要注意?
为了提高Web前端代码的可维护性,我们应该遵循哪些规范?
更多精彩好书推荐,请点击以下图片查看:
内容简介
《编写高质量代码:Web前端开发修炼之道》以网站重构为楔子,深刻而直接地指出了Web前端开发中存在的重要问题-代码难以维护。如何才能提高代码的可维护性?人是最关键的因素!于是《编写高质量代码:Web前端开发修炼之道》紧接着全方位地解析了作为一名合格的前端开发工程师应该掌握的技能和承担的职责,这对刚加入前端开发这一行的读者来说有很大的指导意义。同时,还解读了制定规范和团队合作的重要性。
《编写高质量代码:Web前端开发修炼之道》的核心内容是围绕Web前端开发的三大技术要素——HTML、CSS和JavaScript来深入地探讨编写高质量的HTML代码、CSS代码和JavaScript代码的方法、技巧、规范和实践,从而为编写易于维护的Web前端代码打下坚实的基础。这不是一本单纯的“技术”书籍,没有系统地讲解Web前端开发的基础知识,它更专注于“技巧”,探索如何为“技术”提供“技巧”。
《编写高质量代码:Web前端开发修炼之道》包含了大量的开发思想和原则,都是作者在长期开发实践中积累下来的经验和心得,不同水平的Web前端开发者都会从中获得启发。尤其是对于那些中初级水平的读者而言,《编写高质量代码:Web前端开发修炼之道》是一本不可多得的内功修炼秘籍。
作者简介
曹刘阳,网名阿当,资深Web前端开发工程师,先后就职于中国雅虎和淘宝,现就职于新浪,一直从事Web前端开发工作,实战经验非常丰富,在通过提高代码 质量来增强可维护性方面颇有心得。精通HTML、CSS、JavaScript等前端开发技术,对ActionScript、Flex、PHP、RoR等 Web开发技术也有较深入的研究。致力于敏捷开发实践,喜欢读书,阅读过大量技术书籍;擅于总结归纳,能将各种技术融会贯通。
内页插图
目录
推荐序
赞誉
前言
致谢
第1章 从网站重构说起
1.1 糟糕的页面实现,头疼的维护工作
1.2 Web标准-结构、样式和行为的分离
1.3 前端的现状
1.4 打造高品质的前端代码,提高代码的可维护性-精简、重用、有序
第2章 团队合作
2.1 揭秘前端开发工程师
2.2 欲精一行,必先通十行
2.3 增加代码可读性-注释
2.4 提高重用性-公共组件和私有组件的维护
2.5 冗余和精简的矛盾-选择集中还是选择分散
2.6 磨刀不误砍柴工-前期的构思很重要
2.7 制订规范
2.8 团队合作的最大难度不是技术,是人
第3章 高质量的HTML
3.1 标签的语义
3.2 为什么要使用语义化标签
3.3 如何确定你的标签是否语义良好
3.4 常见模块你真的很了解吗
3.4.1 标题和内容
3.4.2 表单
3.4.3 表格
3.4.4 语义化标签应注意的一些其他问题
第4章 高质量的CSS4
4.1 怪异模式和DTD
4.2 如何组织CSS
4.3 推荐的base.css
4.4 模块化CSS-在CSS中引入面向对象编程思想
4.4.1 如何划分模块-单一职责
4.4.2 CSS的命名-命名空间的概念
4.4.3 挂多个class还是新建class-多用组合,少用继承
4.4.4 如何处理上下margin
4.5 低权重原则-避免滥用子选择器
4.6 CSS sprite
4.7 CSS的常见问题
4.7.1 CSS的编码风格
4.7.2 id和class
4.7.3 CSS hack
4.7.4 解决超链接访问后hover样式不出现的问题
4.7.5 hasLayout4
4.7.6 块级元素和行内元素的区别
4.7.7 display: inline-block和hasLayout7
4.7.8 relative、absolute和float3
4.7.9 居中4
4.7.10 网格布局
4.7.11 z-index的相关问题以及Flash和IE6下的select元素
4.7.12 插入png图片
4.7.13 多版本IE并存方案-CSS的调试利器IETester
第5章 高质量的JavaScript
5.1 养成良好的编程习惯
5.1.1 团队合作-如何避免JS冲突
5.1.2 给程序一个统一的入口-window.onload和DOMReady
5.1.3 CSS放在页头,JavaScript放在页尾
5.1.4 引入编译的概念-文件压缩
5.2 JavaScript的分层概念和JavaScript库
5.2.1 JavaScript如何分层
5.2.2 base层3
5.2.3 common层
5.2.4 page层4
5.2.5 JavaScript库
5.3 编程实用技巧7
5.3.1 弹性7
5.3.2 getElementById、getElementsByTagName和getElements-ByClassName3
5.3.3 可复用性
5.3.4 避免产生副作用9
5.3.5 通过传参实现定制3
5.3.6 控制this关键字的指向7
5.3.7 预留回调接口
5.3.8 编程中的DRY规则
5.3.9 用hash对象传参
5.4 面向对象编程
5.4.1 面向过程编程和面向对象编程
5.4.2 JavaScript的面向对象编程
5.4.3 用面向对象方式重写代码
5.5 其他问题
5.5.1 prototype和内置类
5.5.2 标签的自定义属性
5.5.3 标签的内联事件和event对象
5.5.4 利用事件冒泡机制
5.5.5 改变DOM样式的三种方式
附录A 写在规则前面的话
附录B 命名规则
附录C 分工安排
附录D 注释规则
附录E HTML规范
附录F CSS规范
附录G JavaScript规范
前言/序言
Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以浏览为主。2005年以后,互联网进入Web 2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。
以前会Photoshop和Dreamweaver就可以制作网页,现在只掌握这些已经远远不够了。无论是开发难度上,还是开发方式上,现在的网页制作都更接近传统的网站后台开发,所以现在不再叫网页制作,而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要,而且需要专业的前端工程师才能做好,这方面的专业人才近两年来备受青睐。Web前端开发是一项很特殊的工作,涵盖的知识面非常广,既有具体的技术,又有抽象的理念。简单地说,它的主要职能就是把网站的界面更好地呈现给用户。
如何才能做得更好呢?
第一,必须掌握基本的Web前端开发技术,其中包括:CSS、HTML、DOM、BOM、Ajax、JavaScript等,在掌握这些技术的同时,还要清楚地了解它们在不同浏览器上的兼容情况、渲染原理和存在的Bug。
第二,在一名合格的前端工程师的知识结构中,网站性能优化、SEO和服务器端的基础知识也是必须掌握的。
第三,必须学会运用各种工具进行辅助开发。
第四,除了要掌握技术层面的知识,还要掌握理论层面的知识,包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持,等等。
可见,看似简单的网页制作,如果要做得更好、更专业,真的是不简单。这就是前端开发的特点,也是让很多人困惑的原因。如此繁杂的知识体系让新手学习起来无从下手,对于老手来说,也时常不知道下一步该学什么。
目前市面上关于Web前端开发的书主要都是针对单一技术的,本书与这些书有着本质的区别。它主要想实现两个目标:第一,为不太有经验的Web前端开发工程师建立大局观,让他们真正了解和理解这个职业;第二,帮助有一定Web前端开发经验的工程师修炼内功,通过编写高质量的代码来提高前端代码的可维护性。这是很多前端开发工程师感兴趣的内容。
本书的前两章讨论了网站重构和团队合作,这是很有必要的。网站重构的目的仅仅是为了让网页更符合Web标准吗?不是!重构的本质应该是构建一个前端灵活的MVC框架,即HTML作为信息模型(Model),CSS控制样式(View),JavaScript负责调度数据和实现某种展现逻辑(Controller)。同时,代码需要具有很好的复用性和可维护性。这是高效率、高质量开发以及协作开发的基础。建立了这种大局观后,学习具体技术的思路就更清晰了。
代码质量是前端开发中应该重点考虑的问题之一。例如,实现一个网站界面可能会有无数种方案,但有些方案的维护成本会比较高,有些方案会存在性能问题,而有些方案则更易于维护,而且性能也比较好。这里的关键影响因素就是代码质量。CSS、HTML、JavaScript这三种前端开发语言的特点是不同的,对代码质量的要求也不同,但它们之间又有着千丝万缕的联系。本书中包含着很多开发的思想和经验,都是在长期的开发实践中积累下来的,不同水平的Web前端工程师都会从中获得启发。
张克军(著名Web前端开发工程师)
2010年4月
《精益代码:打造稳健、高效的Web前端基石》 在瞬息万变的数字浪潮中,Web前端开发已不再是简单的页面搭建,而是构建用户体验、驱动业务增长的战略前沿。从静态展示到高度交互的动态应用,前端工程师面临的挑战日益严峻:如何在保证性能的同时,实现卓越的用户体验?如何在快速迭代中,维持代码的健壮性和可维护性?《精益代码:打造稳健、高效的Web前端基石》正是为应对这些挑战而生,它将带您深入探索前端开发的精髓,为您提供一套系统、实用的方法论,助您从容驾驭现代Web前端开发的复杂性。 本书并非仅仅罗列技术栈或框架用法,而是回归到代码的本质——如何编写出“好”的代码。我们认为,“好”的代码是可读的、可维护的、可扩展的、高性能的,并且能够有效传达开发者的意图。在本书中,我们将以一种“由内而外”的视角,剖析高质量前端代码的构成要素,并提供切实可行的实践指南。 第一部分:代码的基石——理解与实践 在现代Web开发中,JavaScript作为核心语言,其重要性不言而喻。但仅仅掌握语法远不足以写出高质量的代码。《精益代码》将从JavaScript的底层机制出发,深入讲解其异步编程模型、原型链继承、事件循环等核心概念。我们不会止步于表面的API调用,而是引导读者理解“为什么”是这样设计的,从而能够写出更具洞察力、更少出错的代码。 理解JavaScript的异步哲学: 回调地狱的困扰,Promise的优雅,async/await的直观,本书将系统梳理JavaScript异步编程的演进历程,并教授如何利用现代化的异步模式,编写出清晰、可控的异步代码,有效避免回调嵌套,提升代码的可读性和可维护性。我们将深入讲解Promise的内部机制,以及async/await如何通过Generator函数实现,帮助读者建立对异步执行流程的深刻理解。 掌握原型与继承的精髓: JavaScript独特的原型继承模型,是理解其动态性和灵活性的关键。本书将清晰地阐述原型链的工作原理,以及`__proto__`、`prototype`、`constructor`之间的关系。我们将探讨如何利用原型继承,实现高效的代码复用,以及避免常见的继承陷阱,编写出结构清晰、易于理解的对象模型。 事件循环与执行上下文的奥秘: JavaScript的单线程模型与事件循环机制,是理解其非阻塞I/O和异步操作的关键。本书将深入剖析事件循环的运作流程,以及调用栈、作用域链、变量环境等执行上下文的概念。理解这些底层原理,将帮助您更准确地预测代码的执行顺序,诊断棘手的异步问题,并写出性能更优的代码。 第二部分:架构与设计——构建可维护的系统 随着项目规模的增长,良好的架构设计成为保证代码质量和团队协作效率的关键。《精益代码》将引导您思考前端项目的结构化设计,从模块化到组件化,再到整体的项目组织,提供一套可借鉴的设计原则和模式。 模块化与组件化: 现代前端开发离不开模块化和组件化的思想。本书将深入探讨CommonJS、AMD、ES Modules等模块化规范,以及它们在项目中的应用。我们将着重讲解组件化开发的核心理念,如何设计出可复用、可组合、高内聚、低耦合的UI组件,以及如何构建清晰的组件通信机制,从而构建出易于管理和扩展的前端应用。 状态管理的设计之道: 在复杂的单页面应用中,管理应用的状态是一项艰巨的任务。本书将跳出具体框架的限制,从通用原则出发,探讨各种状态管理策略,包括局部状态、全局状态、数据流管理等。我们将分析不同状态管理方案的优劣,并提供设计高效、可预测状态管理系统的指导,帮助您规避状态不同步、数据混乱等常见问题。 设计模式在前端的应用: 借鉴后端开发的成熟经验,设计模式是提升代码复用性、可维护性和可扩展性的利器。《精益代码》将精选几种在前端开发中尤为实用的设计模式,如工厂模式、观察者模式、单例模式、模块模式等,并结合实际场景,通过生动的代码示例,演示它们如何帮助我们解决具体问题,写出更优雅、更健壮的代码。 第三部分:性能优化——追求极致的用户体验 在追求功能丰富的同时,性能始终是Web前端的生命线。用户对响应速度的期待越来越高,任何一个性能瓶颈都可能导致用户流失。《精益代码》将从多个维度,为您揭示前端性能优化的奥秘。 加载性能的飞跃: 首屏加载速度是用户对应用的第一印象,至关重要。本书将深入剖析浏览器渲染原理,并提供一系列行之有效的加载优化策略,包括代码分割、懒加载、图片优化、资源压缩、HTTP/2等。我们将讲解如何利用Webpack等构建工具,实现精细化的代码分割,以及如何通过服务端渲染(SSR)和预渲染(Pre-rendering)技术,显著提升首屏加载体验。 运行时性能的打磨: 即使加载完成,卡顿、掉帧等问题也会严重损害用户体验。本书将聚焦于JavaScript执行性能、DOM操作优化、事件处理机制等方面。我们将讲解如何避免不必要的重排与重绘,如何优化循环和算法,以及如何合理使用requestAnimationFrame,实现流畅的动画效果。 网络请求的极致压缩: 网络是前端性能的瓶颈之一。本书将从HTTP协议的底层原理出发,深入讲解如何优化网络请求,包括HTTP缓存策略、CDN加速、API设计、数据传输格式等。我们将探讨如何在客户端与服务端之间,构建高效、低延迟的数据通信通道。 第四部分:工具与实践——提升开发效率与质量 高效的工具链和良好的开发实践,能够极大地提升开发效率,并保证代码质量。《精益代码》将为您介绍一系列现代前端开发中不可或缺的工具和方法。 构建工具与模块打包: Webpack、Rollup、Vite等构建工具,是现代前端项目的基石。本书将深入讲解这些工具的核心概念和配置技巧,帮助您搭建高效的开发环境,实现代码的自动化构建、压缩、混淆、打包等。我们将重点讲解如何利用构建工具,优化项目结构,提升打包效率,并支持各种前端特性。 代码规范与静态分析: 统一的代码风格和静态分析工具,是团队协作和代码质量保障的关键。本书将详细介绍ESLint、Prettier等工具的使用,以及如何配置和遵循一套可执行的代码规范。我们将阐述静态分析在早期发现代码错误、提升代码可读性方面的巨大价值。 版本控制与协作流程: Git作为分布式版本控制系统的翘楚,在现代开发中不可或缺。本书将深入讲解Git的核心命令和工作流程,以及如何与其他开发者高效协作。我们将探讨分支策略、代码审查(Code Review)等最佳实践,确保项目的稳定性和可追溯性。 第五部分:测试与部署——保障应用的稳健上线 高质量的代码不仅要写得好,更要经过严格的测试,并能够稳定部署。《精益代码》将为您提供一套完整的测试与部署策略。 前端测试的艺术: 测试是保证代码质量的最后一道防线。本书将全面介绍单元测试、集成测试、端到端测试等不同层级的测试方法,并讲解Jest、Cypress等主流测试框架的使用。我们将引导您编写更具测试价值的代码,并建立一套完善的自动化测试体系。 持续集成与持续部署(CI/CD): CI/CD流程是实现自动化、高效率部署的关键。本书将为您讲解CI/CD的基本概念和工作原理,并介绍GitHub Actions、GitLab CI等主流CI/CD工具的使用。我们将帮助您搭建一个自动化构建、测试、部署的流程,极大地缩短开发周期,提高交付效率。 生产环境的稳定守护: 应用上线后,监控与日志是保证其稳定运行的重要手段。本书将探讨生产环境的常见问题,并提供相应的解决方案,包括性能监控、错误追踪、日志分析等。我们将帮助您建立一套有效的生产环境监控体系,及时发现和解决问题。 《精益代码:打造稳健、高效的Web前端基石》不仅仅是一本技术书籍,更是一本关于“工程思维”的书籍。它鼓励开发者们跳出“实现功能”的思维定势,深入理解代码的内在价值,用更精益、更严谨的态度去对待每一次编码。通过本书的学习,您将能够: 写出更易读、更易懂、更易维护的代码, 降低沟通成本,提升团队协作效率。 构建更具扩展性、更易复用的代码模块, 应对不断变化的需求。 打造更稳定、更高性能的应用, 为用户提供卓越的体验。 掌握现代前端开发的先进工具和流程, 提升个人竞争力。 培养严谨的工程思维, 成为一名真正“懂代码”的开发者。 无论您是刚入行的新手,还是经验丰富的开发者,本书都将为您提供宝贵的启示和实用的方法。让我们一起踏上精益代码的修炼之路,共同打造更加美好的Web世界!