总结下前端h5学习导图

菜鸟pod
228 阅读6分钟

一.概览图

前端.png

二. html、css、javacript

css扩展
  • less
1、Less是一门CSS预处理语言，而css是一种用来表现HTML或XML等文件样式的计算机语言；
2、less扩展了CSS语言，增加了css本身没有的变量、函数等特性；
3、css可以被浏览器直接识别，less需要先编译为css
  • sass
Sass和Less都属于CSS预处理器,其基本思想是，用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用。

不同之处：
1、编译环境不一样 Less是基于JavaScript，是在客户端处理的。Sass是基于Ruby的，是在服务器端处理的。
2、变量符不一样，Less是@，而Scss是$。
3、输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。
4、Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。
5、引用外部CSS文件 css@import引用的外部文件如果不想编译时多生成同名的.css文件，命名必须以_开头, 文件名如果以下划线_开头的话，Sass会认为该文件是一个引用文件，不会将其编译为同名css文件.
6、Sass和Less的工具库不同 Sass有工具库Compass, Less有UI组件库Bootstrap.
js扩展
  • jquery
https://www.w3school.com.cn/jquery/index.asp

jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
  • angular
https://angular.cn/
  • vue
https://cn.vuejs.org/guide/essentials/application.html
  • react
https://react.docschina.org/docs/getting-started.html
  • canvas
http://caibaojian.com/book/canvas.html
​
canvas 是 HTML5 新增的，一个可以使用JavaScript脚本在其中绘制图像的HTML 元素，可以看做是一个矩形的画布。
  • webGL
http://www.hewebgl.com

WebGL是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染。

OpenGL是底层的驱动级的图形接口（和显卡有直接关系）类似于 DirectX。
  • typescript
https://www.tslang.cn/docs/handbook/basic-types.html

TypeScript 是 JavaScript 的一个超集，增加了静态类型、类、模块、接口和类型注解。
TypeScript 可用于开发大型的应用。
TypeScript 提供编译时的静态类型检查。
TypeScript: 静态类型语言，编译
javascript: 动态类型语言，解释
ui框架
  • bootstrap
https://getbootstrap.com/docs/5.2/components/modal/
Bootstrap5：Bootstrap5重构已放弃Jquery

BootstrapVue: https://bootstrap-vue.org/docs/components/carousel
React-Bootstrap: https://react-bootstrap.github.io/components/tabs/
  • Ant Design
https://ant.design/docs/spec/introduce-cn

Ant Design Of Vue: https://antdv.com/components/overview
Ant Design Of React: https://ant.design/components/overview-cn/
Ant Design Of Angular: http://ng.ant.design/docs/introduce/zh
  • Element
ElementUI Vue: https://element-plus.gitee.io/zh-CN/component/button.html
Element Of React: https://elemefe.github.io/element-react/#/zh-CN/quick-start
  • Arco Design
Arco Design Of Vue:  https://arco.design/vue/docs/start
Arco Design Of React: https://arco.design/react/docs/start
  • Easyui
https://www.jeasyui.net/
  • 微信小程序
WeUI: https://weui.io/
WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一.

LinUI: https://doc.mini.talelin.com/component/basic/button.html
小程序UI框架
  • 移动端
uniApp: https://uniapp.dcloud.net.cn/
uni-app是DCloud推出的终极跨平台解决方案，是一个使用Vue.js开发所有前端应用的框架

MUI: https://dev.dcloud.net.cn/mui/
MUI页面设计很接近原生App,能方便的使用App扩展规范Html5 Plus（http://www.html5plus.org/doc/h5p.html）

Mint UI: https://mint-ui.github.io/#!/zh-cn
Mint UI 是基于 Vue.js 的移动端组件库
插件库
  • Echarts
https://echarts.apache.org/examples/zh/index.html

ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。
ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。
  • D3js
https://d3js.org/

D3js 是一个可以基于数据来操作文档的 JavaScript 库。可以帮助你使用 HTML, CSS, SVG 以及 Canvas 来展示数据。
D3 遵循现有的 Web 标准，可以不需要其他任何框架独立运行在现代浏览器中，它结合强大的可视化组件来驱动 DOM 操作。
  • video.js
https://github.com/videojs/video.js

html5视频播放组件
  • Openlayers
https://openlayers.org/en/latest/examples/
https://github.com/openlayers/openlayers
https://openlayers.org/ol-cesium/

OpenLayers（简称OL）是一个专为WebGIS 客户端开发提供的JavaScript类库包用于实现标准格式发布的地图数据访问，它是一个开源的WebGIS引擎，使用JavaScript、最新的HTML5技术及CSS技术，支持dom，canvas和webgl三种渲染方式。
除了支持网页端，还支持移动端。
在地图数据源方面，支持各种类型的瓦片地图，既支持在线的，也支持离线的。比如OSM, Bing, MapBox, Stamen, MapQuest等等；还支持各种矢量地图，比如GeoJSON，TopoJSON，KML，GML等等
  • Cesium
https://github.com/CesiumGS/cesium
https://cesium.com/platform/cesiumjs/
教程合集：https://cesiumjs.org/tutorials/
Api文档：https://cesiumjs.org/refdoc/
示例程序：https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/

Cesium是AGI公司计算机图形开发小组与2011年研发的三维地球和地图可视化开源JavaScript库，Cesium一词来源于化学元素铯，铯是制造原子钟的关键元素，研发小组通过命名强调Cesium产品精益求精，专注时间数据可视化。Cesium为三维GIS提供了一个高效的数据可视化平台。即：
（1）Cesium是一个跨平台、跨浏览器的展示三维地球和地图的JavaScript库
（2）Cesium使用WebGL来进行硬件加速图形，使用时不需要任何插件支持。
（3）Cesium是基于Apache2.0许可的开源程序，可以免费用于商业和非商业用途。

Cesium的知识体系，跨GIS、Web前端和图形学。
Cesium用于地理数据可视化。支持海量数据的高效渲染，支持时间序列动态数据的三维可视化，具备太阳、大气、云雾等地理环境要素的动态模拟和地形等要素的加载绘制。包含丰富的可用工具。即Cesium基本控件所提供的工具，如地理编码器，图层选择器等。
  • Three.js
http://www.webgl3d.cn/
https://github.com/mrdoob/three.js/

Three.js和unity3D一样都是为了开发三维应用封装的3D引擎，区别在于unity3D是基于OpenGL技术封装得到的三维引擎，unity3D开发的项目一般直接运行在操作系统上，而Three.js引擎是基于WebGL技术封装得到的3D引擎，Three.js开发三维应用程序可以直接运行在浏览器上，打开Three.js开发的三维场景，就像打开一个普通的网页一样，只不过显示内容是3D的。

使用three.js可以加载3dmax资源。
  • grapesjs
https://grapesjs.com/

grapesjs是一个开源的网页设计器，grapesjs可以灵活的进行二次开发。
  • Cytoscape.js
https://js.cytoscape.org/

Cytoscape.js是一个用javascript编写的开源图库. 您可以使用Cytoscape.js进行图形分析和可视化展示。
Cytoscape.js允许您轻松显示操作丰富的交互式图形. 因为Cytoscape.js允许用户与图形交互, 并且允许客户端在用户事件中挂在钩子, 所以Cytoscape.js可以轻松集成到您的应用程序中, 特别是因为Cytoscape.js支持桌面浏览器, 如Chrome, 和移动浏览器, 如iPad. Cytoscape.js包括您期望开箱即用的所有手势, 包括捏合缩放, 框选择, 平移等等。
avatar
文章
阅读
粉丝