前端技术基础

软件开发的目的，是为了“使用”。

为了使用者可以更容易的使用软件，通常需要为用户开发一个可视化的图形界面。

前端开发，是创建 Web 网站页面（ PC / 移动 ）或者 APP 等前端页面，并呈现给用户的过程。它是由网页制作演变而来，通过使用 HTML、CSS、JS 及衍生出来的各种技术、框架和解决方案，来实现互联网产品的用户界面交互。

「 互联网的演变 」 Web 1.0（ 内容 ）—  Web 2.0（ 基于 Ajax ）—   Web 3.0（ 基于 HTML5 ）

网页制作是 1.0 时代的产物，早期的网站都是静态内容，以图片和文字为主，用户使用网站的行为以“浏览”为主。

随着互联网技术的发展和 HTML5、CSS3 的应用，现代网页更加美观、交互效果显著，功能也更加强大。

移动互联网带来了大量高性能的移动终端设备和快速的无线网络，H5、Nodejs 被广泛应用，各类框架类库层出不穷。

了解：Web 相关概念

前端开发是 Web 开发的一个分支。一个合格的前端开发人员，在进行 Web 开发之前，需要确保充分了解 Web 相关概念：

[1] web（全球广域网）

web（ World Wide Web ）, 即全球广域网，也称为万维网。

它是一种基于超文本和 HTTP 的、全球性的、动态交互的、跨平台的分布式图形信息系统。

简单来说，web 是建立在 Internet 上的一种网络服务，为浏览者在 Internet 上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档和超链接将 Internet 上的信息节点组成了一个互为关联的网状结构。

中文名         全球广域网或万维网                               表现形式          超文本、超媒体、超文本传输协议

外文名         web                                                   别    名           万维网

全   称         World  Wide  Web                                属     性          分布式图形信息系统

[2-1] Internet（ 因特网 ）                                                          // 网络基础概念

因特网（ Internet ）是一组全球信息资源的总汇。有一种粗略（可能更容易被理解）的说法，认为 Internet 是由许多小的网络（子网）互联而成的一个逻辑网，每个子网中连接着若干台计算机（主机）。换句话来说就是，Internet 以相互交流信息资源为目的，基于一些共同的协议，并通过许多路由器和公共互联网组成，它是一个信息资源和资源共享的集合。

中文名         因特网                                                 别    名         计算机网络

外文名         Internet                                               层    次         主干网、中间层网、底层网

[2-2] URL（ 统一资源定位符 ）

Internet 上，所有 web 资源都有一个独一无二的 URL，可以通过在浏览器地址栏中输入 URL 地址，实现对资源的访问。

一个完整的 URL（ port、pathname、search、hash  都不是必须的），通常由以下几个部分组成：

[3] web 系统（ 开发 & 部署 ）

从程序架构角度讲，web 系统的发展历程，主要分为两个阶段，即 C/S 阶段和 B/S 阶段。

  • C/S，即 client / server 架构（ 客户端 / 服务器端 ）：对于 C/S 架构，可视化界面部分必须预先安装在使用者的电脑上，而且，每次对应用软件做微小的改动，都需要对客户端软件进行升级。
    • 优点：用户体验好，效果炫；对信息安全的控制较强；服务器负荷较轻，部分计算功能在客户端完成。
    • 缺点：占用硬盘空间；维护麻烦；安装使用依赖其他条件。
  • B/S，即 browser / server 架构（ 浏览器 / 服务器端，又叫请求 / 响应模式 ）：对于 B/S 结构，可视化界面无需预先安装在使用者电脑上，客户端只需要安装浏览器，就可以在 Internet 范围内实现系统的访问和信息共享。
    • 优点：维护效率得到了极大提高，升级简单，无缝升级；不用必须安装程序，极少受客户端应用的限制。
    • 缺点：动画效果受浏览器限制；对信息安装控制较差（如，需要 U 盾等）；应用服务器运行数据负荷较重，大部分计算都在服务器端；使用 Ajax 可以部分改善用户体验。

简单来说就是，部署在服务器（ 提供计算服务的设备 ）上，用于为提出不同需求的 web client 提供服务的系统。

== 部署：从通信的角度来说，web 开发的本质是：请求  —  处理  —  响应                   // HTTP 协议

不同的 web 客户端，发送不同的请求到服务器中部署的 web 系统之上，web 系统根据需求返回响应的结果。

  • 请求：客户端发起请求
  • 处理：服务器端处理请求
  • 响应：服务器端将处理结果发送给客户端

服务器端响应完毕后，客户端（ PC / 移动（ APP ） ）继续处理，将结果展现给用户

  • 浏览器：解析服务器返回的数据；
  • IOS、Android 客户端：解析服务器返回的数据，并通过相应的 UI 技术实现界面的展示功能

== 开发：从代码的角度来看，web 系统（ 网页 --> 网站 --> 应用程序 ）在服务器端的组织形式一般是 MVC 架构。

开发 web 应用程序（ 工作原理 ）时，通常需要应用客户端和服务器端两方面的技术：

  • 客户端应用的技术，主要用于展现信息内容
  • 而，服务器端应用的技术，主要用于进行业务逻辑的处理以及数据库的交互

熟悉：前端协作流程

So，如何开发一个 web 系统（ 网页 --> 网站 --> 应用程序 ）呢？需要什么角色？掌握什么技术呢？

正常情况下，开发一个动态网站应用程序，大概可以分为以下几个阶段：

  • 需求分析：产品经理分析应用程序需要实现哪些功能、应对哪些业务，形成产品需求文档（ “讲故事” ）
  • 交互原型：产品经理根据需求分析的结果规划应用程序的原型，可以理解为“打草稿”
  • UI 设计：UI 设计师将“草稿”转化为设计稿，并提供相应的产物（设计稿 or 静态网页）
  • 技术（框架）选型：根据业务场景选择对应的技术栈（前端、后端、数据库）        // 考虑因素：人、业务
  • 数据库设计：根据需求和原型，分析有哪些类型的数据需要存储，从而得到所需的数据库的基本结构
  • 项目架构设计 — 俗称“搭架构”：

主要操作是制定项目约束规范、创建基本的项目结构、编写基础的公共模块代码和组织代码

  • 迭代开发：开发者的日常，基于项目架构（ 条条框框 ）完成各项业务功能
  • 集中测试：将所有功能模块整合在一起，集中测试业务功能是否有 bug、是否满足需求
  • 部署上线：从开发环境向生产环境转换，即，把应用程序部署到服务器上

「 角色定义与技术概览 」因此，完成一个 web 系统，至少需要三种角色：

  • 视觉工程师：从视觉稿到交互原型的转化
  • 前端工程师：实现系统的前端交互逻辑
  • 后端工程师：实现系统的后端业务逻辑

前端部分，又可以再细分为：页面工程师和前端工程师

页面工程师：更注重与视觉的协作

  • 精通切图技术（ PS 切图 ）
  • 精通页面制作（ HTML、CSS ）
  • 熟悉前端开发技术（ JS、Template ）
  • 了解后端开发技术（ Nodejs、JAVA、PHP ...）

前端工程师：更多的是与后端的协作

  • 熟悉切图技术
  • 精通页面制作
  • 精通前端开发技术
  • 熟悉后端开发技术

对于前端来说，在拿到交互稿或视觉稿后，前端工程师要能够灵活的应用前端知识技能，完成相应的功能。

在实际的企业环境中，不只是有前端开发工程师，更多的场景和项目是通过团队中多人（ 不同角色 ）协作完成的。

So，作为前端开发工程师，如何与团队中的其他角色进行协作呢？

具备：web 应用开发能力

有了明确的目标之后，需要规划具体的业务方案，学习特定的技能，完成各项功能，解决各种过程中出现的问题。

# 前端技术  —  网页开发技术（ 硬性 ）

  • HTML - 结构
  • CSS - 样式
  • JavaScript - 行为
    • 库和框架 - 便捷手段，但不是必须的

# 编程思想 / 逻辑思维  —  解决问题的思路（ 软性 ）

  • 我要做什么  - 我有什么（ 我能拿到什么 ）-  我要得到什么

以上，就可以独立完成网页开发了。具体的实现是：一个个网页，还可以给页面加上一些动态的交互 ...

但是，距离一个完整的 web 应用程序（ 网页 --> 网站 --> 应用程序 ），还需要学习些什么呢？

  1. 搭建 web 服务器（ 提供网站服务的空间 ）—>  web 系统：开发 & 部署
  2. HTTP  &  Ajax（ 客户端与服务器端的通信协议 / 数据交互 ）
  3. 服务器端开发（ 动态网页技术 ）
  4. 数据库操作（ 服务器端存储数据的方式 ）