外行的入门 00：大前端背景知识

DM_Saturn
112 阅读6分钟

关于前端

前端是什么

使用HTML、CSS和JS将设计效果实现成为网站产品。

  • 前端的目标target：用于PC，移动端等；
  • 前端的主要工作内容content：处理视觉和交互。
前端沿革

曾经前后端并没拆分的时候，是后端工程师直接完成前端的工作。但由于前端发展速度越来越快，将这两个部分拆开了。
在前后拆分之后，前端独自完成一个项目是无法实现的。而node的出现让前端可以实现后端简单系统的开发。

前端的技术要求

根据前端招聘职位描述的要求，可以看到：

  1. 前端技术要求：ES5、ES6和前端页面渲染技术；
  2. 熟悉前端框架、库、工具：Reat、vue、Angular等；
  3. 精通HTML、CSS、JS技术；
  4. 熟悉W3C标准，对表现与数据分离、web语义化等有深刻理解；
  5. 精通Ajax异步交互；

总结来说主要技术包括：

  1. 静态页面布局技术：HTML 5+CSS3；
  2. 原生页面交互技术：JS、TS；
  3. web服务端开发技术：NodeJS+Express/Koa2框架 + MongoDB/MySQL数据库；
  4. 组件化web网站前端开发技术：Vue、React，Angular；
  5. 组件化后台管理开发技术：Vue、React，Angular；
  6. 微信小程序与多端开发：uniapp（基于Vue），Taro（基于React）；
  7. 原生APP开发：ReactNative、flutter；

引自 juejin.cn/post/720556…

另外，我发现，在前端招聘要求中提到的除技术外的一些描述，尤其精通部分（加粗字体）比较像一种专业说法。对此我进行了相关概念的补充。

补充概念：

1. W3C标准

万维网联盟（外语缩写：W3C）标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。

结构 Structure：
一、可扩展标记语言（标准通用标记语言下的一个子集、外语缩写：XML）。和HTML一样，XML同样来源于标准通用标记语言，可扩展标记语言和标准通用标记语言都是能定义其他语言的语言。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。

二、可扩展超文本标记语言（外语缩写：XHTML）现推荐遵循的是万维网联盟于2000年1月26日推荐XML1.0。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。

表现 Presentation：
层叠样式表（外语缩写：CSS）。现推荐遵循的是万维网联盟于1998年5月12日推荐CSS2，CSS3已发布，主流浏览器正在逐渐支持，程序员也开始利用CSS3代替以往冗长的旧代码。万维网联盟创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。

行为 Behavior：
一、文档对象模型（外语缩写：DOM）根据W3C DOM规范，DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对象。
二、ECMAScriptECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言（JAVAScript）。现推荐遵循的是ECMAScript 262

引自 baike.baidu.com/item/W3C%E6…

2. 表现与数据分离（前后端的分离，避免单项修改时的负担）

可以说是界面与数据分离，要体现在代码上，操作数据的代码和操作界面的代码，要分开写。 优势：当页面需求发生改变，只需要改写界面的代码，并且修改的代码不能影响到操作数据访问的代码。
引自 blog.csdn.net/Ayiayi00/ar…

3. web语义化（在代码层对信息进行标记，实现人为使机器能够读懂信息语义）

web语义化是指使用恰当语义的html标签、class类名等 让页面具有良好的结构和含义 使得人和机器都能快速理解网页内容。
引自 www.sinabz.com/keji/202105…

学术界将web语义化称为Web3.0的核心。
目标是：提高计算机和人对于web代码的可读性。
核心思想是：标注网页对象【*】使其对应本体中的实体，并通过逻辑等手段进行自动推理。 作用在于更好整合网络上的资源，使计算机能够处理分布于不同位置的信息，自动产生问题的解决方案
引自 blog.csdn.net/Ayiayi00/ar…

4. Ajax异步交互

要了解异步交互，先要了解同步交互是什么：
1.同步交互
同步交互是指发送一个请求，需要等待返回，然后才能够发送下一个请求。同步交互相当于排队，轮到下一个的情况会因为前一个而有所不同。
即：同步交互就是第二次请求必须等待第一次请求结束之后才可以开始。

2.异步交互
所谓的异步交互，就是指发送一个请求，不需要等待返回，随时可以再发送下一个请求。同步交互与异步交互的区别在于同步交互需要等待结果，而异步交互不需要等待。
即：异步交互就是第二次请求不需要等待第一次请求结束之后就可以开始。

将二者进行比较，可以看出差异在交互结果的反馈和新任务的进程上：
同步交互：客户端向服务器端发送请求，必须等待结果返回，才能向服务器端发送下一次请求。
异步交互：客户端向服务器端发送请求，不必等待结果返回，就可以向服务器端发送下一次请求。

（1）.异步交互的优势
异步交互相比同步交互的优势主要具有以下几点:

  • 用户操作无须像同步交互必须等待结果。
  • 异步交互只需与服务器端交换必要的数据内容，而不是将所有数据全部更新。
  • 异步交互对带宽造成的压力相比同步交互更小。
  • 通过Ajax实现异步交互不需要任何第三方插件，只要刘览器支持JavaScript语言即可实现。

（2）.异步交互的劣势
异步交互相比同步交互并不是优势，它也存在一些问题:

  • 异步交互破坏了浏览器原有的前进和后退机制。
  • 如果后面逻辑的执行依靠前面逻辑执行的结果的话，异步交互可能会造成问题。
  • Ajax实现异步交互对搜索引擎支持较弱。
  • Ajax实现异步交互会引起一些Web安全问题，例如 SQL 注入攻击、跨站点脚本攻击等问题。
    引自：blog.csdn.net/xue1163/art…
avatar
文章
阅读
粉丝