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

前言:从百度说起

案例

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

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

  • 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,不应存在过多请求),优化整体前后端响应性能。
      • 应用场景(刷新率高)
        //前端仪表盘、实时折线等、图形的连续变化等

待补充…

相关资料

引导资源

  • 【W3Cschool前端路线图】>>LINK<<
    非常全面的知识汇总,基础弱的可以详细看下这个

  • 【菜鸟教程的WEB开发路线图】>>LINK<<
    这里是覆盖前后端的学习路线,思维导图形式,可以了解下有个大致概念

  • 【可视化学习路线图】 >>LINK<<
    强力推荐,内容不多,但可以说明白可视化到底在做什么,以及如何做

  • 【JS的DOM操作】>>LINK<<
  • 【JS的选择器】>>LINK<<
  • 【JS的AJAX请求】>>LINK<<
    看完这几个JavaScript的操作就会一大半了
  • 【Node路线】>>LINK<<
    Node还是非常强大的,夸张一点可以基本实现现有后台的所有功能

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

快速测试

  • 【引用库】>>LINK<<
    有网络资源就引用网络资源,一些大库可以在上述网站搜索,直接引用网络资源,省去本地保存的多余操作

  • 【构建Node环境】>>LINK<<
    需要后端支持时可以用node迅速进行搭建,使用上述网站查询相应的包

  • 【官方文档】
    使用某JS库(例如D3、Echarts)的最好方法没有之一,就是查看官方文档,基本能涵盖八成所需内容

debug常用网站