以下是对(前端)可视化工作的并不系统的总结,新手向,主要是想说一下前端如何组成、功能如何实现、资源如何请求,进而说到数据如何显示,并在最后列举了一些十分重要的参考资料(非常重要)。
前言:从百度说起
案例
点击百度搜索框显示出搜索结果
涉及前端的三大要素,从初级到高级的应用都可以由其完成,三者即:
- 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 //路由请求拦截
其他细节内容
- 前后端的跨域资源访问
- 前端的异步执行顺序控制
主要体现在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,不应存在过多请求),优化整体前后端响应性能。 - 应用场景(刷新率高)
//前端仪表盘、实时折线等、图形的连续变化等
- 优点
- servlet方式
待补充…
相关资料
引导资源
【W3Cschool前端路线图】>>LINK<<
非常全面的知识汇总,基础弱的可以详细看下这个【菜鸟教程的WEB开发路线图】>>LINK<<
这里是覆盖前后端的学习路线,思维导图形式,可以了解下有个大致概念【可视化学习路线图】 >>LINK<<
强力推荐,内容不多,但可以说明白可视化到底在做什么,以及如何做
- 【Node路线】>>LINK<<
Node还是非常强大的,夸张一点可以基本实现现有后台的所有功能
知识点在线查询+在线练习/测试
快速测试
【引用库】>>LINK<<
有网络资源就引用网络资源,一些大库可以在上述网站搜索,直接引用网络资源,省去本地保存的多余操作【构建Node环境】>>LINK<<
需要后端支持时可以用node迅速进行搭建,使用上述网站查询相应的包【官方文档】
使用某JS库(例如D3、Echarts)的最好方法没有之一,就是查看官方文档,基本能涵盖八成所需内容
debug常用网站
- 【csdn、cnblog、github issues】
- 【V2EX】>>LINK<<
- 【StackOverflow】>>LINK<<
- 【OutOfMemory】>>LINK<<
- 【SegmentFault】>>LINK<<
😒 留下您对该文章的评价 😄