(02)初次接触前端,我们要理解哪些名词?| Web 前置知识

6,393 阅读14分钟
原创:itsOli  @前端一万小时

本文首发于公众号前端一万小时

本文版权归作者所有,未经授权,请勿转载!

本文节选自“语雀”私有付费专栏前端一万小时 | 从零基础到轻松就业

❗️❗️❗️
以下链接为本文最新勘误篇章——《初次接触前端,我们要理解哪些名词?》



前言: 在上一篇《从零基础到轻松就业 | 老生常谈的从 URL 输入到页面展现背后发生的事》中,我们了解了从输入到输出背后到底发生了什么,也初步认知到“前端”在这个过程中扮演了什么角色。这一篇,我们就正式从名词解释开始,慢慢推开“前端”这扇大门。

以下系列文章先从 Web 前端开发谈起。因此,所说的“前端”都指 Web 前端开发。


1 前端职能定位

前端这个职位,我们主要还是在互联网公司里边称呼。

1.1 什么是互联网公司

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

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

1.3 其中 RD(程序开发)包括哪些岗位

1.3.1 前端开发

实现面向用户操作层面的代码搭建(可以分为 iOS 工程师、Android 工程师、Web 前端工程师、PC 工程师等)。

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)如果需要更新内容,必需重载整个网页面。

以上是对一个 Web 页面相关名词的解释,初学的我们可以暂时在这打住(即使后边还有很多很多)。以下将解释一些综合性的名词,让我们有一个大局观,了解一下前端这个职业到底都要接触些什么东西。


3 相关名词概述

3.1 代码编辑器(需下载安装)

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

3.1.1 是什么

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

3.1.2 有哪些(前端最常用)

  • Visual Studio Code(操作普通,免费,用起来方便);

  • Sublime Text(操作简单,启动运行速度快,功能较弱,需要自己配置一些插件使之强大);

  • 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 去写编译指令,使用起来非常方便简单。

🚀我们后边的“原生 JS 实战项目”——移动端音乐播放器,就会用 Parcel 来构建环境。

3.8 JS 预处理

Babel

🔗Babel 官方文档
Babel:现在的 JavaScript 可以说是一年就提一个规格草案,目前出到 ES2019——我们习惯简称为 ES6+,不过浏览器可没有办法很快地支持更新(即,当前我们写的 ES6 代码是没办法直接在浏览器上运行的)。

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

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

3.9 CSS 预处理

3.9.1 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 操作越来越友好(或者由于 React.js、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 实战项目”——移动端旅游网站,就会一步一步地通过 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,便会跳转到该网站相应的教程、文档上。



后记 : 以上就是作为一个零基础的我们所需要了解到的知识点,Less is more 先搞定上边的,然后以其为基点进行后续的发散学习,细水流长。

前端路很长,但充满乐趣。学无止境,它值得你我用后边的 10000 小时来对待。

祝好,qdywxs ♥ you!