前端快速入门之概述

Z.TIAN

研究方向

2019年7月15日

大约1.8k字

阅读需10分钟

本页文档最后更新于：2021年3月8日

以下是对（前端）可视化工作的并不系统的总结，新手向，主要是想说一下前端如何组成、功能如何实现、资源如何请求，进而说到数据如何显示，并在最后列举了一些十分重要的参考资料（非常重要）。

前言：从百度说起

案例

点击百度搜索框显示出搜索结果

涉及前端的三大要素，从初级到高级的应用都可以由其完成，三者即：

HTML(5)
// 页面所有呈现元素（按钮、输入框、图片…）的“附着点”，所有页面可见元素都有对应的html标签，而动态交互的事件（JS完成）实际就是绑定在某些html标签上，例如按钮的点击。
CSS
// 页面呈现元素的所有样式均可以由CSS进行控制，即文字的颜色、字号、间距，区块的排列等均由CSS指定，本质上仍然是对html标签的控制，只有该html标签具有某一属性，这时才能通过CSS对其进行控制，例如，table标签具有width属性，所以可以通过CSS对width进行赋值，来达到控制table宽度的目的。
JavaScript
// 页面所有的（动态）事件，均由JavaScript绑定到html标签上，并由JavaScript完成整个交互动作的执行，包括鼠标事件、前后端的请求事件等等。

分析上述例子中的词语：

点击：由JavaScript完成，会触发一个request请求
百度搜索框：本质是input标签，通过CSS样式修饰为用户所见的样子
显示搜索结果：先前的请求到达后台后，经过处理返回查询结果（response），注意此刻的结果一般是一些数据（字符串），并非带样式（CSS）的html标签，所以还需要进行转换，这个将数据转换为html代码的过程仍然由JavaScript来完成。

已知的发展（局部）

HTML -> HTML5
CSS -> Sass, Less, Stylus
JavaScript -> jQuery -> Vue/Node -> 已不单单是前端语言

如何学习（路线图）

先易后难；先实践，后理论；

三要素的简单组合（易）
- 学习HTML的块/div、段落/p、表格/table、按钮/button等基本标签，并熟悉其具有的属性
- 学习CSS的盒模型，理解边距/padding、间隔/margin、浮动方式/float等的控制命令
- 学习原生JavaScript的选择器、事件绑定、资源请求等（之后）
- 增强版本
  - 添加资源请求（数据的读取）
    - form
    - ajax(jQuery)
    - get(jQuery)
    - getjson(jQuery)
    - websocket
- 结合IDE进行开发
  - WebStorm/IDEA

数据的展示

图形绘制

Canvas
//画布标签/容器，显示元素（点线面）的载体，本身有构造点线面的语法规则，嵌入HTML内需要放在Canvas标签内
SVG
//本身是一种可视标签，可以直接嵌入在HTML内
绘图库/引擎
- D3.js //高自定义图形
- Echats.js //图表+地图(baidu地图)
- Highcharts.js //图表绘制
- Tree.js(WebGL,3D) //3d绘制引擎
- Mapbox.js(Map) //专注地图

后端操作

Node.js
- fs //文件操作
- child_process //线程管理
- body-parser //请求解析
- nodejs-websocket //ws协议
- express //路由请求拦截

<< 更多精彩尽在『程序萌部落』>>
<< https://www.cxmoe.com >>

其他细节内容

前后端的跨域资源访问
前端的异步执行顺序控制
主要体现在ajax请求方式（如$.ajax()）和同级代码之间的执行先后顺序，一般可将ajax请求方式设为同步执行即可解决，在包含复杂的数据请求时尤其要注意这一隐含问题。
浏览器debug技巧（一般使用）
- F12/network 看加载的请求
- F12/console 看加载出现的异常（info、error、warning）
- F12/Elements/Style 看样式（盒模型）
Chrome调试插件（生产工具）
- 测试WebAPI/请求 Restlet、Postman
- 清缓存刷新 Clearcache
- 其他网上应用商店
前段环境搭建
- Tomacat -> （webapp文件夹内）
- Apache -> （www文件夹内）
- IDEA -> （内嵌服务器，一般是tomcat）
- WebStorm -> （同上）
- Node -> （http-server等）
请求资源的方式（常见的）
- servlet方式
  //前端发送请求url，后端拦截匹配对应后台处理，完成后返回结果（全局、需刷新）
- ajax方式
  //流程同上，但返回结果被控制在提交请求的ajax域内（局部结果，无刷新），可在不全局刷新页面的情况下对局部内容进行更新。其有各种实现方式：原生方式、$.ajax()、$.get()、$.getjson()等等。
- websocket方式
  //socket作为后端代码常用的传输手段，其实是一种实现了给定规范（n次握手）的代码接口
  - 优点
    //通信双方一直保持连接（长连接），在连通情况下双方可以任意的收发消息
  - 实现方式
    //前端为固定的调用方式，后端有多种实现形式（Java、Node），例如Node的websocket
  - 意义
    //真正意义上的长连接，在此之前一般只能通过ajax轮询来实现；多次轮询只是多个请求返回各时间点的结果（前端主动发起，后台被动相应），长连接则是建立连接后，后台主动推送（生产出一组数据就发送一组），前端被动接收。符合朴素的设计直觉（前端专职显示/View，不应存在过多请求），优化整体前后端响应性能。
  - 应用场景（刷新率高）
    //前端仪表盘、实时折线等、图形的连续变化等

前端快速入门之概述

前言：从百度说起

案例

已知的发展（局部）

如何学习（路线图）

数据的展示

图形绘制

后端操作

其他细节内容

待补充…

相关资料

引导资源

知识点在线查询+在线练习/测试

快速测试

debug常用网站

功能强大的NAS云存储

组网  路由  Synology HTPC

数据可视化学习路线

总结  可视化

评论