web端基本技术点整理

最新推荐文章于 2022-09-15 16:42:11 发布

ywhlyx

最新推荐文章于 2022-09-15 16:42:11 发布

阅读量814

点赞数

分类专栏：前端技术文章标签：知识点整理

本文链接：https://blog.csdn.net/ywhlyx/article/details/87854375

版权

前端技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1 WEB端概述
1.1 前端框架演变
https://blog.csdn.net/bjweimengshu/article/details/79563440
1.2 技术概览
https://blog.csdn.net/fighting_no1/article/details/79599806
1.3 学习路线
https://blog.csdn.net/zwjweb/article/details/78704342
https://blog.csdn.net/zwjweb/article/details/82290125

2 WEB端基础概念
2.1 html5/画布/SVG/CSS、 Less /Sass（Scss）
详细描述：http://www.w3school.com.cn/html5/html_5_webstorage.asp
Less -->Sass（Scss）区别：https://blog.csdn.net/lsy__lsy/article/details/80305593
简介：
Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，Sass语法属于缩排语法，比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。
简单点：Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。
不管是Sass，还是Less，都可以视为一种基于CSS之上的高级语言，其目的是使得CSS开发更灵活和更强大，Sass的功能比Less强大,基本可以说是一种真正的编程语言了，Less则相对清晰明了,易于上手,对编译环境要求比较宽松。考虑到编译Sass要安装Ruby,而Ruby官网在国内访问不了,个人在实际开发中更倾向于选择Less。
注：node-sass 把 sass编译成css
sass-loader 是webpack的一个loader,

2.2 JS与 ES6/7、TS
ES6：是ECMAScript的一个发布版本，当前有ES7/8，是JavaScript语言的下一代标准，ES6.0已经在2015年6月正式发布了。目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
ECMAScript和JavaScript的关系：
由于JavaScript的创造者Netscae公司的版权问题吧，ECMAScript不能叫Javascript。总之，ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现（另外的ECMAScript方言还有Jscript和ActionScript）。
具体JS和ES语法参考：http://www.w3school.com.cn/js/pro_js_syntax.asp
TS是Javascript的超集，也就是说，含有很多工具。
2.2.1 iEMP编码规范-JavaScript版

2.2.2 js模块化开发了解

2.3 AJAX/Jquery/JSON
详细参考：http://www.w3school.com.cn/b.asp
2.3.1 Ajax
即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。
Ajax 是一种用于创建快速动态网页的技术。不是新的编程语言，而是一种使用现有标准的新方法。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
2.3.2 Jquery
jQuery 是一个 JavaScript 库。极大地简化了 JavaScript 编程。
2.3.3 JSON
JavaScript 对象表示法（JavaScript Object Notation）。
是存储和交换文本信息的语法。类似 XML。
比 XML 更小、更快，更易解析。
2.4 Node、npm
Node.js本质上是一个JavaScript的运行环境。
基于Google的V8引擎，实际上，是从Chrome上抠下的V8引擎并加以封装的一个执行环境。
基本了解：https://blog.csdn.net/weixin_37823121/article/details/82250852
官网：https://nodejs.org/en/download/

npm 之于 Node.js ，就像 pip 之于 Python， gem 之于 Ruby， pear 之于 PHP 。
npm 是 Node.js 官方提供的包管理工具，他已经成了 Node.js 包的标准发布平台，用于 Node.js 包的发布、传播、依赖控制。npm 提供了命令行工具，使你可以方便地下载、安装、升级、删除包，也可以让你作为开发者发布并维护包。
是随同 Node.js 一起安装的包管理工具，能解决 Node.js 代码部署上的很多问题
详细了解：https://blog.csdn.net/csdn_yudong/article/details/78946708

2.5 webpack （Babel、Loaders）
详细描述： https://segmentfault.com/a/1190000006178770
简介： WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

Babel是一个编译JavaScript的平台，它可以编译代码达到以下目的：
• 让你能使用最新的JavaScript代码（ES6，ES7…），而不用管新标准是否被当前使用的浏览器完全支持；
• 让你能使用基于JavaScript进行了拓展的语言，比如React的JSX；

3 WEB端主流框架与组件
3.1 前端主流框架概览
在这里插入图片描述

补充：jQuery 是一个快速、轻量级、可扩展的 js 库，它提供了易于使用的跨浏览器的API

参考：https://blog.csdn.net/hu_belif/article/details/81258961

注：Angular1 与 Angular2的区别
• Angular2不是从Angular1升级过来的，Angular2是重写的，所以他们之间的差别比较大，不是你用过1就能直接上手2的，计划可以认为是一个新的框架；
• Angular2使用了javascript的超集‘Typescript’，所以angular1和angular2从设定之初就是不一样的；
• Angular1.x在设计之初主要是针对pc端的，对移动端支持较少（当然也有其他一些衍生框架如ionic），而Angular2是设计包含移动端的；
• Angular 1的核心概念是 $s c o p e ，但是 a n g u l a r 2 中没有$ scope，angular2使用zone.js来记录监测变化；
• Angular 1 中的控制器在angular2中不再使用，也可以说控制器在angular2中被‘Component’组件所替代
3.2 AntUI/ NG-ZORRO UI（阿里）等等UI组件库
UI组件：是对一组相关的交互和样式的封装，提供了简单的调用方式和接口，让开发者能很便捷地使用组件提供的功能来实现业务需求。

上述各类UI是基于前台框架，封装的组件库，以方便开发出适用的最终页面。
参考： https://www.ui.cn/detail/332889.html
另quick UI比较内容丰富，但是收费，供了解：http://www.uileader.com/product_quickui.html
3.3 华为的UI
eView： http://rnd-iemp.huawei.com/help/eview/#/node/rest/donut_chart
TinyUI2.0：http://rnd-think.huawei.com/#/aui
TinyUI3.0：http://rnd-isourceb.huawei.com/WCC/Tiny3/tree/master
Agile UI: http://10.66.71.214:4200/components/grid

说明，如eView是基于agile做的UI ，而agile基于NG-ZORRO做的UI，所以，存在基于UI的UI，一般当前国内或公司内的UI，都是基于通用开源框架或基础UI丰富与封装后的。

3.4 可视化通用组件
3.4.1 Echarts
详细参考：http://echarts.baidu.com/
简介：当前国内图表可视化的基础组件，特别说明是基础组件库，当前一般用其他增强的套件。
3.4.2 Grafana
Grafana是一个开源的度量分析与可视化套件。经常被用作基础设施的时间序列数据和应用程序分析的可视化，它在其他领域也被广泛的使用包括工业传感器、家庭自动化、天气和过程控制等。
基本了解：https://blog.csdn.net/bbwangj/article/details/81109615
https://www.cnblogs.com/imyalost/p/9873641.html
官网：https://grafana.com/
3.4.3 D3
D3是用来做web页面可视化的组件，其官方网址为：http://d3js.org