201908 前端知识升华

1.关于html标签的理解

标签即标记，从宏观结构来看，可以理解为容器，不同标签有预置属性和行为，也可自定义拓展属性和行为。从微观运行原理来看，可以理解为传给浏览器DOM解析器的参数。

1.link 标签，引入文件包括样式文件，图标等。

// favorite.icon 网页标题旁边的小图标
<link rel="icon" type="image/x-icon" href="" sizes="16*16">

2.form标签的action 属性默认值为当前页面地址，如果在监听提交事件的回调函数里，不终止表单提交（return false），则ajax提交后响应的结果则无法在当前页面使用。因为form表单提交后，浏览器将对表单提交（非异步）的结果进行渲染，又是新的页面。

2.关于css属性的理解

样式即呈现方式，从宏观结构来看，可以理解为对容器外观以及位置的定义。从微观运行原理来看，可以理解为传给浏览器渲染引擎的参数。

• 定位方式：除了相对定位和静态定位，其他定位，块级元素会变成宽度自适应，需要重新设定。
• 背景：属性成对出现，根据渲染顺序写，

 background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

背景同比缩放，使用位置居中，不平铺，覆盖。

background:bg-image center center no-repeat;background-size:cover;

CSS3中提出了background-size属性，该属性可以设置背景图片的大小，该属性的值设置为绝对数值或者百分比时对background-position没有任何影响，当设置为contain/cover时就会产生影响，其中有一个值会无效。 background-size:contain 该属性会让背景图片宽度或高度适应父元素，如果要缩放的话是等比例缩放，背景图片绝对不会超出父元素background-size:cover 该属性会让背景图片填满父元素，如果要缩放的话是等比例缩放，背景图片可能会超出父元素当图片的宽度大于高度时，position的top值无效当图片的宽度小于高度时，position的left值无效

• 禁止浏览器对img的鼠标事件，使用事件穿透

img{pointer-events:none}

• 优化IOS溢出滚动

.list{
-webkit-overflow-scrolling: touch;
}

• h5 ios 输入框兼容

	-webkit-user-select: text !important;

• 字体多行，垂直居中，超过指定行，显示省略号。

div{
display:table-cell; 
vertical-align: middle; // 对 inline 和table-cell 使用垂直居中。
}

• 文本两端对齐

div{
text-align:justify;
text-align-last:justify;
// ios 不支持 text-align-last:justify,所以需要使用after 伪类进行换行。
&:after{
display:'inline-block';
content:'';
width:100%;
height:0;


}

}

• 文字竖排 书写

*{
writing-mode: vertical-rl; // 中国古文书写模式，从右及左，至上而下
}

• clip-path 属性

// 对元素进行多边形剪切
 clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    0 calc(100% - 5vw)
  );

• border-radius 属性

 // 底部圆柱形
  border-bottom-left-radius: 50% 20%;
  border-bottom-right-radius: 50% 20%;

3.关于js脚本的理解

• jquery 的特色是css选择器，可以操控DOM结构，即html里的所有标签以及他们的属性，并能为他们绑定行为

- 1.闭包函数
- 2.立即执行函数
- 3.js创建对象
- 4.创建对象变量
- 5.创建对象函数
- 6.加载完dom即执行 $(document).ready(function(){
 初始化对象
});
- 7.将对象设置为全局变量

• float类型的数据计算，因为二进制储存的原因，运算之后会出现丢失精度，常用金额计算保留2位小数，使用toFixed(2)固定小数位数。

• 提交按钮绑定事件要注意防止二次点击。

• JS渲染3D建模文件参考库 ，1.DDSLoader.js 2.OBJLoader.js 3.OBJMTLLoader.js

• 按位双取反可以实现对小数去精度保留整数部分。 ~~1.5 = 1

前端用户体验优化

• 1.表单校验包括数据有效性，大小，类型，文件格式等。
• 2.等待动画，提示动画，过渡动画。
• 3.禁用复制和右键菜单

//  禁用右键
document.oncontextmenu = function() {
   return false;
}
// 禁用复制
document.oncopy=function(){
   return false;
}

5.x5内核兼容：

// 此外，视频框会存在 样式被重写
handleWXAutoFullScreen() {
   			//解决自动全屏
   			var ua = navigator.userAgent.toLocaleLowerCase();
   			//x5内核
   			if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
   				$("body")
   					.find("video")
   					.attr("x-webkit-airplay", true)
   					.attr("x5-playsinline", true)
   					.attr("webkit-playsinline", true)
   					.attr("playsinline", true);
   			} else {
   				//ios端
   				$("body")
   					.find("video")
   					.attr("webkit-playsinline", "true")
   					.attr("playsinline", "true");
   			}
   		},
   		```

</p>

关于三方js库的使用

1.使用Swiper 实现图片滑块，图片缩放，文字滚动时，遇到的问题有：

1. 缩放后无法捕捉到图片的DOM结构，发现将body设置margin值能解决该问题。
2. 使用图片轮播后，使用原生CSS写法，overflow:scroll；来实现文本溢出滚动，会与轮播功能冲突，因为左右滑动和上下滑动的手势监听冲突，IOS端容易出现卡顿，渲染延迟等不友好的用户体验，故此采用swiper实现文本滚动，bug解决。实现文本滚动时，容器高度需要设具体数值，百分比会出问题。
3. 建议不再使用的swiper实例采用destory(true,true)函数将其事件和css销毁。
   // html

// js let contentSwiper = new Swiper('#swiperContent', { scrollbar: '.swiper-scrollbar', direction: 'vertical', slidesPerView: 'auto', mousewheelControl: true, freeMode: true, roundLengths: true, //防止文字模糊 });

vue 框架使用日志

1.静态资源使用

html和css里直接使用相对路径引入 assets目录下的图片，webpack 会进行打包编译到dist/static/img 目录下.js里面不能直接使用相对路径，webpack无法打包.
1.如果将该静态资源放在static目录下，则能在js里面使用绝对路径/static/*引用，webpack会将static直接放在dist目录下。
2.如果将该静态资源放在assets，则可以采取 path= require(‘relativePath’)或者 import path from ‘relativePath’,然后你可以直接使用path。

2.import component

1.通过import 引入的是组件的一个新的实例，和已经渲染到app.vue组件里的不是同一个，如果需要在别处使用已经渲染过的组件实例，可以将该实例设置为vue.prototype的属性
2.js写入的dom结构属于组件的字组件，如果style 设置scope属性，则不能应用于子组件。
4.webpack 需要配置为webpack.base.conf.js 并保证IDE生效，否则使用import，require，@alias，等会出问题
5.vue 生命周期

1. beforeCreate: 实例未初始化$el和$data。
2. created: 实例已经初始化$data,未初始化$el。
3. beforeMout:实例已经初始化$data,未初始化$el,此时虚拟化了DOM。
4. mouted:实例已经初始化$el,DOM真实存在。
5. beforeUpdate:页面重新渲染前，仅修改$data不触发该钩子函数。
6. updated:页面重新渲染后，仅修改$data不触发该钩子函数。
7. beforeDestory:$data和$el可见。
8. destoryed:$data和$el可见。

3.组件封装原则

• 完整性，结构，样式和行为 均为私有，能独立支持内部功能需求。
• 独立性，与整体框架解耦，与各端解耦。
• 属性，用于传输数据，包括业务数据，样式数据等。
• 事件，用于在组件内触发父级组件中的事件。
• 先设计，后开发。

4.应用场景

1. 列表分页
2. 列表流加载
3. 拖放
4. 缩放
5. 图片查看
6. 轮播
7. 弹窗动画
8. 登录表单
9. 编辑表单
10. 修改密码
11. 评论区
12. 搜索预览
13. 筛选框
14. 音频
15. 视频
16. 聚合展开
17. 地图

5.虚拟DOM和DIFF算法

虚拟DOM（Virtual Dom），也就是我们常说的虚拟节点，是用JS对象来模拟真实DOM中的节点，该对象包含了真实DOM的结构及其属性，用于对比虚拟DOM和真实DOM的差异，从而进行局部渲染来达到优化性能的目的。

• 虚拟的DOM 的意义在于减少浏览器重新渲染的工作量，因为它的重新渲染是通过DIFF算法进行差异比较后，进行差异渲染，保留之前渲染的结果。
• DIFF 算法的基本思想是同层比较，相同则递归子层进行比较，不同则更新（该换就换，该加就加，该减就减）。
• 如果业务场景存在翻天覆地的改变，那么DIFF算法的结果也是几乎100%不同，此时虚拟DOM的优势也许成了画蛇添足，因为中间多了DIFF这个过程。
• 虚拟DOM和DIFF算法迎合了当前主流应用的特点，仅存在局部频繁更新。