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 实现图片滑块,图片缩放,文字滚动时,遇到的问题有:
- 缩放后无法捕捉到图片的DOM结构,发现将body设置margin值能解决该问题。
- 使用图片轮播后,使用原生CSS写法,overflow:scroll;来实现文本溢出滚动,会与轮播功能冲突,因为左右滑动和上下滑动的手势监听冲突,IOS端容易出现卡顿,渲染延迟等不友好的用户体验,故此采用swiper实现文本滚动,bug解决。实现文本滚动时,容器高度需要设具体数值,百分比会出问题。
- 建议不再使用的swiper实例采用destory(true,true)函数将其事件和css销毁。
// html
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 生命周期
- beforeCreate: 实例未初始化 e l 和 el和 el和data。
- created: 实例已经初始化 d a t a , 未 初 始 化 data,未初始化 data,未初始化el。
- beforeMout:实例已经初始化 d a t a , 未 初 始 化 data,未初始化 data,未初始化el,此时虚拟化了DOM。
- mouted:实例已经初始化$el,DOM真实存在。
- beforeUpdate:页面重新渲染前,仅修改$data不触发该钩子函数。
- updated:页面重新渲染后,仅修改$data不触发该钩子函数。
- beforeDestory: d a t a 和 data和 data和el可见。
- destoryed: d a t a 和 data和 data和el可见。
3.组件封装原则
- 完整性,结构,样式和行为 均为私有,能独立支持内部功能需求。
- 独立性,与整体框架解耦,与各端解耦。
- 属性,用于传输数据,包括业务数据,样式数据等。
- 事件,用于在组件内触发父级组件中的事件。
- 先设计,后开发。
4.应用场景
- 列表分页
- 列表流加载
- 拖放
- 缩放
- 图片查看
- 轮播
- 弹窗动画
- 登录表单
- 编辑表单
- 修改密码
- 评论区
- 搜索预览
- 筛选框
- 音频
- 视频
- 聚合展开
- 地图
5.虚拟DOM和DIFF算法
虚拟DOM(Virtual Dom),也就是我们常说的虚拟节点,是用JS对象来模拟真实DOM中的节点,该对象包含了真实DOM的结构及其属性,用于对比虚拟DOM和真实DOM的差异,从而进行局部渲染来达到优化性能的目的。
- 虚拟的DOM 的意义在于减少浏览器重新渲染的工作量,因为它的重新渲染是通过DIFF算法进行差异比较后,进行差异渲染,保留之前渲染的结果。
- DIFF 算法的基本思想是同层比较,相同则递归子层进行比较,不同则更新(该换就换,该加就加,该减就减)。
- 如果业务场景存在翻天覆地的改变,那么DIFF算法的结果也是几乎100%不同,此时虚拟DOM的优势也许成了画蛇添足,因为中间多了DIFF这个过程。
- 虚拟DOM和DIFF算法迎合了当前主流应用的特点,仅存在局部频繁更新。