前端基础：作为菜鸟，初次接触前端要理解哪些名词？

代码开发 08-01 186

前言：

此刻兄弟们对“ajax预处理”大约比较关注，看官们都需要分析一些“ajax预处理”的相关内容。那么小编也在网摘上网罗了一些有关“ajax预处理””的相关资讯，希望咱们能喜欢，看官们快快来学习一下吧！

链接：

1 前端职能定位

前端这个职位，主要还是在互联网公司的称呼。

1.1 什么是互联网公司？

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

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

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

1.3.1 前端开发

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

1.3.2 后端开发

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

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

2 初识前端，我们需要知道最基本概念

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

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

总结：

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

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

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

总结：

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

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

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

AJAX 是一种用于创建快速动态网页的技术；通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。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 已成为现如今中大型项目的标配。

3.7.3 Parcel

Parcel 官方文档（）

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

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 的替代方案，一样可以达到非同步处理的功能，而且又轻量。是 Vue.js 作者（尤雨溪）极力推崇的基于 Promise 的 HTTP 库。

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 前端框架

3.13 动画工具

3.13.1 Animate.css

Animate.css（）