前端随笔.

1.常见的模块化规范：commonJS：node实现、amd、cmd、es6的modules
2.可以在页面上显示log输出内容的插件：screenlog.js插件
3.计算机基础：计算机硬件RS485
4.winXray软件使用文档
5.iframe标签 常用于嵌套页面
6.node的下载包括node环境，还会一并下载 npm 和 Gitbash;

7.vue脚手架2和3的项目初始化方式
vue init webpack demo
vue create demo
8.auto.js
AutoJS是一款新的手机脚本开发工具，开发语言是JS；
系统目前只支持安卓7.0以上的版本，IOS不能使用。
他的主要工作原理是使用无障碍服务，获取APP的控件信息，包括控件的：类名、包名、id、文本、描述等。
通过直接操作控件可以精确操作APP，包括：点击、滑动、输入文本等操作。
使用AutoJS，不需要手机root，脚本写好后，可以打包发布成一个独立的APP，用户安装这个APP就可以了，使用时很方便。
需要吐槽的一点，就是编译环境，因为这个工具是在安卓手机上运行的，所以你要在手机上写代码了。
我一般是使用TotalControl工具，把手机屏幕投影到电脑上，然后通过键盘输入脚本。但是，键盘的方向键不能使用。
切换光标位置，就只能使用鼠标点了。
auto.waitFor();//获取无障碍服务权限

9.在早先发布的html规范中，br，hr和img等标记元素是无需“封闭自身”的，这就造成了html规范本身的不严谨
10.在浏览器不支持WebGL技术的时代，如果你想在网页上展示一款产品往往是通过2D图片的形式实现。如果想3D展示一个产品，往往依赖于OpenGL技术。

不需要加载外部贴图和模型文件的three.js案例，可以直接使用浏览器打开.html案例文件，通常一个threejs项目案例往往都会加载一些外部模型，因此打开threejs案例要搭建一个本地的静态服务器，否则的话，threejs案例无法正常打开，浏览器控制台会提示跨域问题。
如果你知道怎么搭建本地静态服务器，自己用任何方式搭建都可以。如果不了解的话，建议使用nodejs去快速搭建一个本地静态服务器，对于一个WebGL工程师或前端工程师来说，肯定是要学习Nodejs的。

11.一些编辑器快捷键

1. 删除光标所在行代码
   idea快捷键： Ctrl+X/Y
2. 复制光标所在行代码，或者鼠标选中的代码
   idea快捷键： Ctrl+D
3. 快速定位到上一次编辑的位置
   idea： Ctrl+Alt+左右键
4. 快速搜索类和接口
   idea：Ctrl+Shift+R
5. 格式化代码
   idea：先Ctrl+A选择全部代码 然后 Ctrl+Alt+L
6. 撤销与反撤销
   Ctrl+z和Ctrl+shift+z

12.blender：3D建模软件，可以对一些格式文件进行转换
13.Keepserver
14.
1.网络上的两个程序通过一个双向的通信连接实现数据的交换，这个连接的一端称为一个socket。
2.丢包率：就是你传送数据时.有没有掉失.掉包多了.证明网络质量差.
网络延迟：就是你发数据到对方要多久时间.网络延迟高了,就是俗称的"卡".
3.图像噪声是图像在摄取或传输时所受的随机信号干扰，是图像中各种妨碍人们对其信息接受的因素。

15.
Math.floor()为向下取整；
Math.random() 函数返回一个浮点数, 伪随机数在范围从0到小于1；
Math.ceil() 函数返回大于或等于一个给定数字的最小整数；
Math.round()给定数字的值四舍五入到最接近的整数；
16.很多应用的快捷键
win+d 回到桌面
win+e 打开文件资源管理器
Ctrl+T 打开一个新的标签页
「Ctrl+Shift+T」一键打开上一个被关闭的网页
【Ctrl+Tab】，就是在同一个窗口内的多个标签页之间切换
鼠标抖动 最小化其他所有窗口
鼠标中键 关闭当前页面/点击链接则是新页面打开
17.新建文件夹一般小写，具体文件名一般大写
18.江湖上流传一个久远的传说：“凡是能用 JS 写出来的，最终都会用 JS 写。”不管网络上有多少人在 diss 这门语言，都不可否认的是，JS 目前还是 Web 端的老大。没有 JS 这个原生语言，你所钟爱的各种库、框架都是无源之水无本之木。
更何况框架总有被淘汰的一天，面对这种事情，难道你只能被时代推着走吗？既要面对无所适从的尴尬，也要面对重新学习的窘境。
一个优秀的前端不应只图立竿见影和方便省事。前期消化掉这些知识点，后期面对前端圈突然出现的一个技术点、框架、术语的时候，才能轻松理解。
一句话概括，学得越深，工作越简单。
19.程序员本身不该受语言的约束，更不该受框架是约束。
什么样的场景用什么样的工具，对nodejs而言，最好用的还是小型工具系统。
nodejs是针，没必要纠结必须用针盖一个摩天大楼，该用JAVA这种钢筋混泥土就用。
你要盖一个小木屋，Python挺好的，不用和JAVA过不去，他要打地基。
你要搭个工地简易房，php一天完事，防火防潮。
所谓的没有前途一直都是错误的使用正确的工具。
所以工程师更多应该反省自己，到底是什么约束了自己。

20.Ajax相关的一些基本的概念
学会Http的请求和响应、
Json数据格式、
异步和同步、超时。预计在4个小时到16个小时之间。
Ajax和JSON这两个技能是必须的，当我们要动态的改变页面的元素时，我们就需要从远程获取最新的数据结果。
JSON字符串和JS对象的转换方法

21.面向对象编程、函数式编程、MVC / MVVM / MV概念
22.CSS属性：

1. curse:pointer ：鼠标放上去会有小手的样子**
2. :root 是一个伪类选择器，它是一个能够匹配文档根元素的选择器，通常指的是 html 元素。 我们在 :root 里创建变量在全局都可用，即在任何选择器里都生效。
3. 当元素的定位设置为 relative 时，它允许你通过 CSS 指定该元素在当前文档流页面下的相对偏移量。 CSS 里控制各个方向偏移量的属性是 left、right、top 和 bottom。 它们代表从原来位置向远离该方向偏移指定的像素、百分比或者 em。
4. 单冒号和双冒号区别？
   单冒号是伪类；双冒号是伪元素；便于css区分；

23.
jQuery中有很多便利节点的方法：
find()，filter()，nextAll()，prevAll()
24.
//addAttribute() --> element.setAttribute(name, value);
// 设置指定元素上的某个属性值。如果属性已经存在，则更新该值；
// 否则，使用指定的名称和值添加一个新的属性
//BufferAttribute()–>BufferAttribute( array : TypedArray, itemSize : Integer, normalized : Boolean )
// 用于存储与BufferGeometry相关联的 attribute,可更高效的向GPU传递数据。
25.点云数据（point cloud data）是指在一个三维坐标系统中的一组向量的集合。
扫描资料以点的形式记录，每一个点包含有三维坐标，有些可能含有颜色信息（RGB）或反射强度信息（Intensity）。
26.摄像头提供rtsp协议的视频流，通过开源转码器ffmpeg拉流rtsp，到自搭建的nginx服务器的rtmp服务器模块，推出rtmp流和flv流，使用html5 flv,js播放
27.modbus 协议从后端请求数据显示
28.vue路由vue页面跳转传参

跳转页
this.$router.push({name:‘路由命名’,params:{参数名:参数值,参数名:参数值}})

接收页
this.$route.params.参数名
29.常见的git操作
git branch 查看当前所处的分支
git status 查看当前项目文件的状态
git add . 将所有已修改和添加的文件添加到暂存区
可以再次git status查看当前状态
git commit -m “此次提交日志” 把修改的代码提交到本地分支
git push 将本地的此分支推送到云端
git checkout master 切换到主分支
可以git branch确认当前处于的分支
git merge order 主动合并order分支代码
git push 将本地的master代码推送到云端仓库中
git checkout -b report 新建report子分支
可以git branch确认当前处于的分支
git push -u origin report 将本地的report分子推送到云端仓库的report分支
30.document.documentElement.clientWidth与document.documentElement.clientHeight：获得的是屏幕可视区域的宽高，不包括滚动条与工具条，跟jquery的(window).width()与(window).height()获得的结果是一样的。
31.window.innerWidth与window.innerHeight：获得的是可视区域的宽高，但是window.innerWidth宽度包含了纵向滚动条的宽度，window.innerHeight高度包含了横向滚动条的高度(IE8以及低版本浏览器不支持)。
32.jsp和jstl
1.JSP内置了9个对象！内置对象有：out、session、response、request、config、page、application、pageContext、exception。
2.JSTL的核心标签库标签共13个，使用这些标签能够完成JSP页面的基本功能，减少编码工作。
　　从功能上可以分为4类：表达式控制标签、流程控制标签、循环标签、URL操作标签。
（1）表达式控制标签：out标签、set标签、remove标签、catch标签。
（2）流程控制标签：if标签、choose标签、when标签、otherwise标签。
（3）循环标签：forEach标签、forTokens标签。
（4）URL操作标签：import标签、url标签、redirect标签、param标签。
　　在JSP页面引入核心标签库的代码为：<%@ taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core” %>
　　
33.elementUI
1.el-table-column 固定列需要使用fixed属性，它接受 Boolean值或者left/right，表示左边固定还是右边固定
34.VUE2一些内容
1.v-for指令可以基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法，其中items是元数据数组，而item则是被迭代的数组元素的别名。v-for还支持一个可选的第二个参数，即当前项的索引（item, index）in items；in可以用of替代；
2.在DOM Diff的过程中，改变前后的虚拟DOM类型相同时，为同一层的相同节点类型的节点天啊家一个唯一标识的key值，就解决了bug隐患。而index下标在元素的增加和删除后是会对应改变的，所以key不能是index下标值，key属性值必须是独一无二且不会改变的。
3.v-for比v-if优先级高，一起使用的话，每次v-for都会执行v-if，造成不必要的计算，影响性能，尤其是当只需要很小一部分需要使用v-if的时候。
35.一些前端出版优质书籍
javascript高级程序设计
你不知道的javascript
图解http
36.微服务与微前端
1、微前端将大规模的后端系统切分为很多面向前端的微服务，各个部分总是作为一个整体被使用和体验。
2、微前端特性：单个前端部分可独立开发、测试和部署；无需重新构建即可添加、移除和替换单个前端部分；不同的前端部分可使用不同的技术构建。微前端主要实现了解耦，在应用到达一定规模后，微前端就有了用武之地，它支持组织分割为更多团队，乃至创建更小的全栈团队。

3、为了解决单体前端的问题，我们可以借鉴微服务的设计思想，引入微前端概念。将微服务理念扩展到前端，解决中台微服务化后，前端由于仍为单体而存在的逻辑复杂和臃肿的问题。
在前端设计时我们需要遵循单一职责和复用原则，按照领域模型和微服务边界，将前端页面进行拆分。同时构建多个可以独立部署、完全自治、松耦合的页面组合 ，其中每个组合只负责特定业务单元的 UI 元素和功能，这些页面组合就是微前端。

微前端与微服务一样，都是希望将单体应用，按照规则拆分，并重组为多个可以独立开发、独立测试、独立部署和独立运维，松耦合的微前端或者微服务。以适应业务快速变化及分布式多团队并行开发的要求。

微前端页面只包括业务单元前端操作必需的页面要素，它只是企业级完整业务流程中的一个业务拼图块，不包含页面导航等内容。微前端除了可以实现前端页面的解耦外，还可实现页面复用，这也与中台服务共享理念是一脉相承的。
37.JS的异步
1、Generator来控制异步任务的执行先后顺序
=>
1、methods中定义的函数前加个*；
2、函数内根据顺序前加 “yield”；
3、在使用函数的周期函数中使用.next().value.then完成任务执行；
2、Promise
3、async/await
省略.then()，比promise和generator更简洁。
38.JS数组方法
1、find和filter的区别？
filter返回的是新数组，每一个匹配的内容都会返回，原数组不会改变；find返回的是内容，匹配到第一个即返回，原数组不改变；
2、some和every的区别？
都是数组的方法；都是进行判断；
some是如果有一项匹配则返回TRUE；而every则需要全部匹配才为TRUE；
39、缓存
localStorage、sessionStorage和cookie区别？
公共点：在客户端存放数据。
区别：1、数据存放有效期不同
sessionStorage仅在当前浏览器窗口关闭之前有效，关闭则消失；
localStorage始终有效，窗口或者浏览器关闭也一直保存，持久化存储；
sessionStorage/localStorage.setItem(‘key’,‘123’);
设置cookie值必须在线上环境而非静态页，cookie关闭窗口不消失，可以设置过期时间；
document.cookie = ‘name=233;exprires=‘data’’;
2、存储大小的限制
cookie存储量不能超过4k；localStorage和sessionStorage不能超过5m；
40、.substr()方法
字符串方法；返回一个新的字符串；第一个参数必需，表示开始处下标，新字符串从此下标开始；第二个可选参数，表示新字符串长度，如果省略则返回剩余全部。
41、返回几位小数的方法
1、toFixed() =》是一个number类型的方法，字符串想要使用可以先Number(字符串）.toFixed(x);
2、Math.floor()，不四舍五入 ，向下取整；
3、num = Number(num.toString().match(/^\d+(?:.\d{0,2})?/));