前端开发应该掌握哪些知识（前端基础作为菜鸟）

前端开发应该掌握哪些知识（前端基础作为菜鸟）1.3.2 后端开发实现面向用户操作层面的代码搭建（可以分为 iOS 工程师、Android 工程师、web 前端工程师、pc/mac 工程师）。1.2 互联网公司基本运作模式是怎样的？1.3 其中 RD（程序开发）包括哪些岗位？1.3.1 前端开发

链接：https://mp.weixin.qq.com/s/A4LZgei1qPSC9RRr6uuYjg

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 官方指南https://www.yuque.com/yuque/help/lnobo9

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 官方文档（https://www.gulpjs.com.cn/）

Gulp：对于自动化工具来说，Gulp 算是相当轻便且好理解的，拿来用作 Server 服务启用、编译 SASS、编译 ES6，压缩图片大小等工作，在一些小型项目上非常适合。

3.7.2 Webpack

Webpack 官方文档（https://www.webpackjs.com/）

Webpack：目前市场占有率最高的自动化工具，不管是编译、打包或是服务器服务，都相当全面。

入门门槛比较高，Webpack 的配置要透过 loader 工具转换，再透过简单的正则表达式去配置，一开始接触可能会觉得没有 Gulp 方便，可是当 WebPack 使用习惯后会发现很多东西真的非常方便。

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

3.7.3 Parcel

Parcel 官方文档（https://parceljs.org/）

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

3.8 JS 预处理

Babel

Babel 官方文档（https://www.babeljs.cn/）

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

所以，我们需要通过编译的方式把新的语法转换成浏览器的可以识别的 ES5。

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

3.9 CSS 预处理

3.9.1 SASS

sass 中文文档 Sass 参考手册（http://sass.bootcss.com/docs/sass-reference/）

SASS：2007 年诞生，最早也是最成熟的 CSS 预处理器，目前受 LESS 影响，已经进化到了全面兼容 CSS 的 SCSS。

3.9.2 LESS

Less 中文文档（https://less.bootcss.com/）

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

3.9.3 Stylus

Stylus 文档（http://stylus-lang.com/）

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（https://daneden.github.io/animate.css/）

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

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

3.13.2 TweenMax

TweenMax（https://www.tweenmax.com.cn/）

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

3.13.3 Popmotion

Popmotion（https://popmotion.io/）

Popmotion：2018 年展露头角的动画工具，可以说是跟以往你看到的动画工具的使用是完全不一样的，舍弃了一般常见的动画工具使用的架构，在 Web 动画方面有了很多的创新，可以持续关注。

3.13.4 CSS3

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

3.14 2D Canvas 游戏开发

3.14.1 Createjs

Createjs（https://createjs.com/）

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

3.14.2 Pixijs

Pixijs（https://www.pixijs.com/）

Pixijs：是一款效能极好，不管是在游戏还是画面处理上面都很优异的 Canvas 框架。

3.15 MDN 网站

3.15.1 是什么

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

3.15.2 怎么用

在搜索相关疑难、未知知识点时，空格加上 MDN，便会跳转到该网站相应的教程、文档上。

地址：https://developer.mozilla.org/zh-CN/