web_02 | Web 前置知识——初次接触前端，咱们要理解哪些名词？

时间 2019-11-06

标签 web 前置知识初次接触前端咱们理解哪些名词栏目 HTML 繁體版

原文原文链接

本文推荐 PC 端阅读~

本文版权归 “公众号 | 前端一万小时” 全部，未经受权，请勿转载！
复制代码

前言： 在上一篇《老生常谈的从 URL 输入到页面展示背后发生的事》中，咱们了解了从输入到输出背后到底发生了什么，也初步认知到“前端”在这个过程当中扮演了什么角色。这一篇，咱们就正式从名词解释开始，慢慢推开“前端”这扇大门。如下系列文章先从 web 前端开发谈起。所以，所说的“前端”都指 web 前端开发。php

1 前端职能定位

前端这个职位，咱们主要仍是在互联网公司里边称呼。css

1.1 什么是互联网公司？

我认为最直接的辨别方式就是看这个公司是否有它的网站地址，且用户是否能够经过这个网页进行相关的操做（例如：国内的 BAT——百度、阿里、腾讯，国外的 facebook 等都属于互联网公司）。html

1.2 互联网公司基本运做模式是怎样的？

1.3 其中 RD（程序开发）包括哪些岗位？

1.3.1 前端开发

实现面向用户操做层面的代码搭建（能够分为 iOS 工程师、Android 工程师、web 前端工程师、pc/mac 工程师）。前端

1.3.2 后端开发

后端开发：开发提供给客户端进行数据接收和推送的服务器运行系统（主要语言 java、php……）。java

固然，公司里边的任何职位都不是孤立的。对于前端来讲，只要节点到了 PM 这里，就意味着哪里都会有你的身影。node

2 初识前端，咱们须要知道最基本概念

2.1 第一类：初作一个静态页面

HTML（HyperText Markup Language 超文本标记语言）：用来描述网页的一种语言，它包含不少的“标签”和“纯文本”。——HTML 的结构决定这个页面是否稳定、规范、性能好很差；
HTML5：是 HTML 的新标准，它更加的语义化（且增长了许多语义化的标签）。咱们近些年说的 H5 就是这个东西。——通常用来作移动端的页面；
CSS（Cascading Style Sheets 层叠样式表）：用来控制 HTML 的表现。——CSS 决定页面好很差看、动画效果酷不酷炫；
CSS3 ：最新的 CSS 标准，在 CSS 的基础上增长了一些属性，对动画效果、流媒体等资源有更好的支持。

总结：webpack

HTML+CSS 是一个静态页面的基本组成。就比如一个女生在有基本的身体五官 (HTML) 后，又对本身打扮了下：化了妆、梳了发型、穿了好看的衣服（CSS）；
而 HTML5+CSS3 能够知足更高级的动画效果，但只能兼容高级浏览器（对 IE 的兼容很差）。

2.2 第二类：让上边的静态页面动起来

JavaScript ：它是一种很轻量级的编程语言，在上边的静态页面中插入 JavaScript，可让页面“动”起来，实现交互；
jQuery ：它是 JavaScript 的一个函数库——不过，目前项目中我已经基本不用它了。

总结：ios

若是说 HTML+CSS 是一我的的皮肤五官毛发，再加点妆容、打扮，那么JavaScript 就是这我的的关节、骨架、血液，可以让页面动起来，实现人机的“交互”；
若是说 JavaScript 是一块块砖，你要使用的时候就拿这些砖搭建房屋。那么 jQuery 就是已经搭建好的各式各样的房屋，你只须要拿你想用的那一块去用就能够了——提升了开发效率。

2.3 第三类：让页面更新的更有效率

AJAX（Asynchronous JavaScript and XML 异步的 JavaScript 和 XML）：git

AJAX 是一种用于建立快速动态网页的技术；
经过在后台与服务器进行少许数据交换，AJAX 可使网页实现异步更新。这意味着能够在不从新加载整个网页的状况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）若是须要更新内容，必需重载整个网页面。

以上是对一个 web 页面相关名词的解释，初学的咱们能够暂时在这打住（即便后边还有不少不少）。如下将解释一些综合性的名词，让咱们有一个大局观，了解一下前端这个职业到底都要接触些什么东西。github

3 相关名词概述

3.1 代码编辑器（需下载安装）

初学的第一个月却是建议用记事本/文本编辑器把代码一个个敲出来。

3.1.1 是什么

就是咱们编写代码的载体。

3.1.2 有哪些（前端最经常使用）

Visual Studio Code（操做普通，免费，用起来方便）；
Sublime（操做简单，启动运行速度快，功能较弱，须要本身配置一些插件使之强大）；
WebStorm（操做较复杂、收费、功能强大，启动有点慢）。

3.2 markdown

3.2.1 是什么

是一个简单的标记语言，这些标记和 html 的一些标签对应，经过一些转换库能够把 markdown 转换成 html 或者把 html 转换成 markdown。

3.2.2 做用

用来在网页上展现文章，省去排版布局的烦恼。

3.2.3 局限性

并非全部的网页编写文章都支持 markdown 格式，好比如今的知乎，我就不能用 markdown 来轻松的书写（“语雀”能够用）。

3.2.4 相关基本语法学习参考

参考连接：语雀 markdown 官方指南

3.3 命令行、终端（windows 用户需下载安装）

3.3.1 是什么

与之对应的概念是“图形界面”——打开一个应用有选项、有菜单供咱们很直观的点击。而“命令行”就是一打开什么也没有，须要敲击一些字母、命令来和计算机进行对话。

3.3.2 用处和必要性

为了之后开发过程当中咱们与后台服务器（不少后台服务器系统是没有图形界面供咱们点击的）进行对话。

3.3.3 命令行在哪里敲击

命令行是敲击在一个叫“终端”的地方。

3.3.4 终端

Linux：系统自带终端，直接能够找到；
macOS：command+空格，而后在对话框中输入 terminal 或“终端”——因 macOS 系统内核就是 Unix；
windows：安装 git 后，会附带一个“Git Bash”终端——一个小型的仿 Linux 操做系统。

3.3.5 Bash

Linux 操做系统通常分为 Kernel（内核）和 Shell（外壳）;
常见的 Shell 有 Bash 和 Zsh；
Bash 是一种命令行式的软件；
Bash 是对 Shell 的一种具体实现形式。

3.3.6 Shell

用于去执行你的在终端上写的命令的这么一个东西。

3.4 Git（须要官网下载安装）、版本控制系统

3.4.1 是什么

Git 是一个免费、开源且新时代的“分布式版本控制系统”。能够高效处理从小到大的各类项目。

3.4.2 什么是“版本控制系统”

它是一种记录一个或多个文件内容变化，以便未来查阅特定版本修订状况的系统。主要发展历程：

本地版本控制系统（很早之前有）；
集中式版本控制系统（svn）；
分布式版本控制系统（Git）。

3.4.3 优点

速度快；
设计原理简单；
能够容许成千上万个并行分支同时去开发；
不怕断网（由于断网能够先提交到本地库）。

3.5 GitHub（需自行注册）

3.5.1 是什么

它是一个成立于 2008 年 4 月，公司地址在旧金山的公司；
它是一个经过 Git 进行版本控制的软件源代码托管服务平台；
它是世界上最大的代码存放网站和开源社区。

3.5.2 做用

用于往后的软件开发等——很重要。

3.5.3 GitHub 与 Git 的关系

Git 是 GitHub 上用来管理项目的一个工具，如今 GitHub 上托管的全部项目代码都是基于 Git 来进行版本控制的。

3.5.4 注册时注意事项

请取一个好的用户名来正式开启你前端工程师的奋斗生涯——之后的全部与程序、代码相关的名字都是这个最好；
以后若是你要在 GitHub 上搭建博客，那么你的博客地址的前缀将是你的这个用户名；
注册过程当中，你会看到 GitHub 有两种选择： -- 公开仓库（Unlimited public repositories for free)——这种是免费的，你建立的项目是开放的，全部人都能看获得（对于我的咱们直接选择这种）；
-- 私有仓库（Unlimited private repositories for $--/month)——自从被微软收购后，我的私有仓库也免费了。通常是企业会选择，他们使用 GitHub 的私有仓库来托管本身的项目。
注册后，若是嫌英文界面很晦涩，且你用的是 chrome 浏览器，那直接右键→翻成中文（来大体熟悉界面）。以后请转回英文界面。记住，英文不可怕。

3.6 开发环境：Node.js（须要官网下载安装）、npm（下载安装 Node.js 后，其附带了npm）

3.6.1 是什么

Node 是 JavaScript 语言的服务器运行环境，Node.js 是一个开源的服务器框架。

3.6.2 能作什么

Node.js 能够生成动态页面内容；
Node.js 能够建立，打开，读取，写入，删除和关闭服务器上的文件；
Node.js 能够收集表单数据；
Node.js 能够添加，删除，修改数据库中的数据。

3.6.3 NPM

Node Package Manager ，即 node 包管理器；
它是 Node.js 预设的、以 JavaScript 编写的软件管理系统。

3.7 前端自动化工具

3.7.1 Gulp

🔗Gulp 官方文档
Gulp：对于自动化工具来讲，Gulp 算是至关轻便且好理解的，拿来用做 Server 服务启用、编译 SASS、编译 ES6，压缩图片大小等工做，在一些小型项目上很是适合。

3.7.2 Webpack

🔗Webpack 官方文档
Webpack：目前市场占有率最高的自动化工具，无论是编译、打包或是服务器服务，都至关全面。入门门槛比较高，Webpack 的配置要透过 loader 工具转换，再透过简单的正则表达式去配置，一开始接触可能会以为没有 Gulp 方便，但是当 WebPack 使用习惯后会发现不少东西真的很是方便。

Webpack 已成为现现在中大型项目的标配。

🚀咱们后边的实战项目——移动端旅游网站，就会用 Webpack 来构建环境。

3.7.3 Parcel

🔗Parcel 官方文档
Parcel：比较新的自动化工具，号称极速零配置，不用像 Webpack 或是 Gulp 去写编译指令，使用起来很是方便简单。

🚀咱们后边的实战项目——移动端音乐播放器，就会用 Parcel 来构建环境。

3.8 JS 预处理

Babel

🔗Babel 官方文档
Babel：如今的 JavaScript 能够说是一年就提一个规格草案，目前出到 ES2018——咱们习惯简称为 ES6+，不过浏览器可没有办法很快地支持更新（即，当前咱们写的 ES6 代码是没办法直接在浏览器上运行的）。

因此，咱们须要经过编译的方式把新的语法转换成浏览器的能够识别的 ES5。

Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便可以运行在当前和旧版本的浏览器或其余环境中。

3.9 CSS 预处理

3.9.1 SASS

🔗sass 中文文档 Sass 参考手册
SASS：2007 年诞生，最先也是最成熟的 CSS 预处理器，目前受 LESS 影响，已经进化到了全面兼容 CSS 的 SCSS。

3.9.2 LESS

🔗Less 中文文档
LESS：2009 年出现，受 SASS 的影响较大，但又使用 CSS 的语法，让大部分开发者和设计师更容易上手，在ruby 社区以外支持者远超过 SASS，其缺点是比起 SASS 来，可编程功能不够，不过优势是简单和兼容 CSS，反过来也影响了 SASS 演变到了 SCSS 的时代，著名的 Twitter Bootstrap 就是采用 LESS 作底层语言的。

3.9.3 Stylus

🔗Stylus 文档
Stylus：2010 年产生，来自 Node.js 社区，主要用来给 Node 项目进行 CSS 预处理支持，在此社区以内有必定支持者，在普遍的意义上人气还彻底不如 SASS 和 LESS。

3.10 DOM 操做

jQuery

jQuery：前端界无人不知无人不晓的老大哥，简单的语法和操做，还有庞大的套件生态圈，让新手能够快速地作出页面效果。但因为原生 JS 的更新，对 DOM 操做愈来愈友好（或者因为 Vue.js 等框架根本不须要操做 DOM）。而 jQuery 相对来讲资源过重，愈来愈多的项目已经舍弃了 jQuery。

3.11 非同步处理

3.11.1 jQuery.ajax

jQuery.ajax：是对原生 XMLHttpRequest 对象的封装，它是 jQuery 的实现版本。除此之外还增添了对 JSONP 的支持。但：

自己是针对 MVC 的编程，不符合如今前端 MVVM 的浪潮；
基于原生的 XMLHttpRequest 对象开发，XHR 自己的架构不清晰，且已经有了 fetch 的替代方案；
jQuery 整个项目太大，单纯使用 Ajax 却要引入整个 jQuery 很是的不合理（采起个性化打包的方案又不能享受CDN 服务）。

3.11.2 Axios

Axios：是拿来取代 jQuery.ajax 的替代方案，同样能够达到非同步处理的功能，并且又轻量。

Axios 本质上也是对原生 XMLHttpRequest 对象的封装，只不过它是 Promise 的实现版本，符合最新的 ES 规范，从它的官网上能够看到它有如下几条特性：

从 node.js 建立 http 请求；
支持 Promise API；
客户端支持防止 CSRF；
提供了一些并发请求的接口（方便了不少的操做）。

3.11.3 Fetch

更加底层，提供的 API 丰富（request、response）；
脱离了 XHR，是 ES 规范里新的实现方式。

但，Fetch 是一个底层次的 API，咱们能够把它理解成原生的 XHR，因此使用起来并非那么舒服，须要进行封装。

🏆总结：就当下环境，咱们能够大胆地去用好 Axios。

3.12 前端框架

🚀咱们后边的实战项目——移动端旅游网站，就会一步一步地经过 Vue.js 来构建咱们的项目。

3.13 动画工具

3.13.1 Animate.css

🔗Animate.css
Animate.css：是一组很酷、有趣、跨浏览器的动画，供咱们在项目中使用。

🚀咱们后边的实战项目——移动端旅游网站，就会用到 Animate.css 来完成咱们的动画效果。

3.13.2 TweenMax

🔗TweenMax
TweenMax：它是一套庞大且全面的动画工具，除了 DOM 的动画操做之外，也同时支持 Canvas 动画。

3.13.3 Popmotion

🔗Popmotion
Popmotion：2018 年展露头角的动画工具，能够说是跟以往你看到的动画工具的使用是彻底不同的，舍弃了通常常见的动画工具使用的架构，在 Web 动画方面有了不少的创新，能够持续关注。

3.13.4 CSS3

目前 Web 上面 70％左右的动画咱们均可以靠 CSS3 来达成。

3.14 2D Canvas 游戏开发

3.14.1 Createjs

🔗Createjs
Createjs：CreateJS 是基于 HTML5 开发的一套模块化的库和工具。基于这些库，能够很是快捷地开发出基于HTML5 的游戏、动画和交互应用。

3.14.2 Pixijs

🔗Pixijs
Pixijs：是一款效能极好，无论是在游戏仍是画面处理上面都很优异的 Canvas 框架。

3.15 MDN 网站

3.15.1 是什么

是一个包含了不少对于咱们学习前端技术有用的、最新的、最正确的知识。

3.15.2 怎么用

在搜索相关疑难、未知知识点时，空格加上 MDN，便会跳转到该网站相应的教程、文档上（不要去用 w3cschool 中文站上的东西——与 MDN 相比，它有些过期且有错误）。

后记：以上就是做为一个零基础的咱们所须要了解到的知识点，less is more 先搞定上边的，而后以其为基点进行后续的发散学习，细水流长。
前端路很长，但充满乐趣。学无止境，它值得你我用后边的 10000 小时来对待。

祝好，qdywxs ♥ you！