前端开发者手册读书笔记

发表于 | 分类于 | 本文总阅读量 次
字数统计: 2,458 | 阅读时长 ≈ 10
万丈高楼平地起，夯实基础是第一

前端开发者手册

前言

1.概述并讨论了前端工程的实践，如何学习以及时间时应该使用什么工具

2.目的：提供学习资料以及开发工具的专业资源，提供研究材料

3.支持web技术(HTML,CSS,DOM以及JavaScript)

1.什么是前端开发者

一个前端开发者, 要会使用Web技术(如：HTML,CSS,DOM和JavaScript)设计和开发网站应用. 网站应用, 或运行于 Web平台 之上, 或用于编译非Web平台环境的输入(如：NativeScript).

Web浏览器

  • Chrome

  • Internet

  • Explorer

  • Firefox

  • Safari

无壳浏览器

  • PhantomJS

  • slimerjs

  • trifleJS

Web视图

  • Cordova (用于本地手机/平板应用)
  • NW.js (即 Node-Webkit, 用于桌面应用)
  • Electron (用于桌面应用)

2.前端的工作职称

  • 前端开发者/工程师
  • CSS/HTML开发者
  • 前端JavaScript开发人员
  • 前端Web设计师
  • Web/前端用户界面开发者/工程师
  • 移动/平板前端开发者
  • 前端SEO专家
  • 前端可访问性专家
  • 前端开发运维
  • 前端测试/QA

3.前端开发者常用的网络技术

  • Hyper Text Markup Language(超文本标记语言, 又称 HTML)
  • Cascading Style Sheets (层叠式样式表, 又称 CSS)
  • Document Object Model (文档对象模型, 又称 DOM)
  • JavaScript Programming Language (JavaScript编程语言, 又称: - ECMAScript 6, ES6, JavaScript 2015)
  • Web API’s (Web应用程序接口, 又称 HTML5 API 或浏览器 API)
  • Hypertext Transfer Protocol (超文本传输协议, 又称 HTTP)
  • Uniform Resource Locator’s (统一资源定位符, 又称 URL)
  • JavaScript Object Notation (JavaScript对象表示, 又称 JSON)
  • Web Content Accessibility Guidelines (网页内容无障碍设计指南, 又称 WCAG) & Accessible Rich Internet Applications (Internet应用程序的无障碍设计, 又称 ARIA)

Hyper Text Markup Language(超文本标记语言, 又称 HTML)

超文本标记语言, 通常被称为 HTML, 是被用于创建网页的标准标记语言. Web浏览器能将 HTML 文件渲染成可见的或者可听到的. HTML 随着线索提示, 语义化地描述了网站的结构, 使它成为一种标记语言, 而不是编程语言. - wikipedia.org

Cascading Style Sheets (层叠式样式表, 又称 CSS)

层叠式样式表(CSS)是用于描述外观和格式化标记语言编写的文档的样式表语言. 尽管经常被用来改变用 HTML 和 XHTML 编写的网页和用户界面的样式, 但也可用于任何 XML 文档, 包括纯 XML, SVG 和 XUL. 跟 JavaScript 和 HTML 一样, CSS是被大多数网站用于为Web应用程序创建富有吸引力的网页, 用户界面的一种基础技术, 也为许多移动应用程序创建用户界面. - wikipedia.org

Document Object Model (文档对象模型, 又称 DOM)

文档对象模型用于代表和对象交互的HTML, XHTML 和 XML 文档, 是一种跨平台和语言无关性的约定. 每一份文档的所有节点被组织成一种树结构, 称为 DOM 树. DOM 对象通过使用对象上的方法被处理和操作, 一个 DOM 对象的公共接口被指定为它的应用程序编程接口(API). - wikipedia.org

JavaScript Programming Language (JavaScript编程语言, 又称: ECMAScript 6, ES6, JavaScript 2015)

JavaScript 是一种高级的, 动态的, 无类型的和解释型的编程语言, 它已经在 ECMAScript 语言规范中被标准化. 跟 HTML 和 CSS 一样, JavaScript 是 WWW 内容生成的第三种必不可少的技术; 大多数的网会使用Javascript, 并且 Javascript 被所有现在Web浏览器支持. JavaScript 基于原型和函数优先的特点, 使它成为多范型的语言, 支持面向对象的, 命令式的, 和函数式编程风格. JavaScript 能提供 API 来处理文本, 数组, 日期和正则表达式, 但不包括任何 I/O, 如网络, 存储或图形工具, 对这些的依赖取决于宿主环境中嵌入了什么. - wikipedia.org

Web API’s (Web应用程序接口, 又称 HTML5 API)

当使用 JavaScript 为Web程序写代码时, 有很多不错的 API 是可以利用的. 下面列举了所有在Web APP 或网站开发中可能会用到的接口. - Mozilla

Hypertext Transfer Protocol (超文本传输协议, 又称 HTTP)

超文本传输协议是一个用于分布式, 协作和超媒体信息系统的应用协议, 是 WWW 数据通信的基础. - wikipedia.org

Uniform Resource Locator’s (统一资源定位符, 又称 URL)

一个 URL (也称Web地址)是一个资源引用, 指定了资源在计算机网络和检索机制中的位置. 与之类似的概念是 Uniform Resource Identifier(URI), 尽管许多人认为两个术语可以互换使用, 但 URL 是统一资源标识符( URI ).URL 不仅常用于引用一个网页(http), 也可用于文件传输(ftp), 邮件(mailto), 数据库访问(JDBC) 和许多其它应用. - wikipedia.org

JavaScript Object Notation (JavaScript对象表示, 又称 JSON)

JSON, 有时也称 JavaScript 对象表示, 是一种使用人类可读的文本传输由键值对组成的数据对象的开放格式. 对于异步浏览器/服务器通信(AJAJ), JSON 是主要的数据格式, 很大程度上代替了 XML(AJAX). 尽管最初是从 JavaScript 脚本语言衍生而来, 但是 JSON 是语言无关性的数据格式, 在许多编程语言中, 代码解析和生成 JSON 是很容易的. JSON 的格式最初是由 Douglas Crockford 指定的, 但目前却被描述成两种标准: RFC 7159 和 ECMA-404. ECMA 标准只允许被合法的语法语句描述, 而 RFC 则提供了一些语义化描述和安全考虑. JSON 的官方网络媒体类型 application / JSON, 扩展名是 .json. - wikipedia.org

Web Content Accessibility Guidelines (网页内容无障碍设计指南, 又称 WCAG) & Accessible Rich Internet Applications (富Internet应用程序的无障碍设计, 又称 ARIA)

无障碍设计是指产品, 设备, 服务, 或者环境是为残疾人设计的. 无障碍设计的概念意味着与一个人的辅助技术(例如, 电脑屏幕阅读器)相兼容, 确保直接访问(即独立)和”间接访问”. - wikipedia.org

4.前端开发的技术栈

对于任何类型的前端开发人员, HTML, CSS, DOM, JavaScript, HTTP/URL 和浏览器利用是基本的技术要求.除此之外还应该掌握下面技术列表中的一个或多个：

  • Content Management System (内容管理系统, 又称 CMS)
  • Node.js
  • Cross-browser testing (跨浏览器测试)
  • Cross-platform testing (跨平台测试)
  • Unit Testing (单元测试)
  • Cross-device testing (跨设备测试)
  • Accessibility / WAI-ARIA (无障碍访问/无障碍富Internet应用程序)
  • Search Engine Optimization (搜索引擎优化, 又称 SEO)
  • Interaction or User Interface design (交互或用户设计)
  • User Experience (用户体验)
  • Usability (可用性/易用性)
  • E-commerce Systems (电子商务系统)
  • Portal Systems (门户系统)
  • Wireframing (框架)
  • CSS layout / Grids (CSS 布局/栅格系统)
  • DOM manipulation (e.g. jQuery) (DOM 操作)
  • Mobile Web Performance (移动Web性能)
  • Load Testing (载荷测试)
  • Performance Testing (性能测试)
  • Progressive Enhancement / Graceful Degradation (渐进增强/优雅降级)
  • Version Control (e.g. GIT) (版本控制)
  • MVC / MVVM / MV (MV 框架)
  • Functional Programming (函数式编程)
  • Data Formats (e.g. JSON, XML) (数据格式)
  • Data API’s (e.g Restful API) (数据API)
  • Web Font Embedding (Web字体嵌入)
  • Scalable Vector Graphics (可伸缩向量图形, 又称 SVG)
  • Regular Expressions (正则表达式)
  • Content Strategy (内容策略)
  • Microdata / Microformats (微数据/微格式)
  • Task Runners, Build Tools, Process Automation Tools (任务管道, 构建工具, 过程自动化工具)
  • Responsive Web Design (响应式设计)
  • Object Oriented Programming (面向对象编程)
  • Application Architecture (应用架构)
  • Modules (模块)
  • Dependency Managers (依赖关系管理)
  • Package Managers (包管理)
  • JavaScript Animation (JavaScript 动画)
  • CSS Animation (CSS 动画)
  • Charts / Graphs (图表/图形)
  • UI widgets (UI工具集)
  • Code Quality Testing (代码质量测试)
  • Code Coverage Testing (代码覆盖测试)
  • Code Complexity Analysis (代码复杂度测试)
  • Integration Testing (集成测试)
  • Command Line / CLI (命令行/命令行界面)
  • Templating Strategies (模板策略)
  • Templating Engines (模板引擎)
  • Single Page Applications (单页应用)
  • XHR Requests (aka AJAX) (XHR 请求, 又称 AJAX)
  • Web/Browser Security (Web/浏览器安全)
  • HTML Semantics (HTML 语义化)
  • Browser Developer Tools (浏览器开发者工具)

5.前端开发能做什么

一个前端开发者能在下面的操作系统列(又称: OS)表中之一上手写运行在-

  • Web平台(如: 浏览器)之上的 HTML, CSS 和 JS:
  • Windows
  • Windows Phone
  • OSX
  • iOS
  • Android
  • Ubuntu (or Linux)
  • Chromium

操作系统运行在下面中的一个或者多个设备之上:

  • Desktop computer
  • Laptop / Netbook computer
  • Mobile phone
  • Tablet
  • TV
  • Watch
  • Things (任何你能想到的, 汽车, 冰箱, 灯光, 温控器等)

一般来说, 前端技术通过使用下列运行时场景, 能运行在前面提到的操作系统和设备之上:

  • 运行在 OS 上的Web浏览器(如: Chrome, IE, Safari, Firefox)
  • 运行在 OS 上并由 CLI 驱动的 headless浏览器(如: plantomJS)
  • 一个Web视图/嵌入本机程序的浏览器Tab(当做 iframe)作为运行时环- 境, 作为与本机 API 通信的桥梁. 典型的Web视图应用包括一个由Web技术(HTML, CSS, 和 JS)构建的 UI.(如: Apache Cordova, NW.js, Electron)
  • 一个由Web技术创建的本机程序会在运行时作为与本机 API 通信的桥梁, 被解释执行, UI 将使用本机的UI部分(如: IOS 本机控制)而不是Web技术控制(NativeScript, React Native).

6.开发团队包含角色

  • 视觉设计
  • UI/交互设计/信息架构师
  • SEO 策略师
  • 前端开发者
  • 开发-运维工程师
  • 后端开发者
  • API 开发者
  • 数据库管理员
  • QA 工程师/测试人员

兵在精而不在多，与其无所不能，不如专攻一点


------------------本文结束感谢您的阅读------------------
坚持原创技术分享，您的支持将鼓励我继续创作！