前端踩坑杂记

哈呀
284 阅读3分钟

1. package-lock.json的重要性

功能：

  • 锁定package依赖库的版本号，防止出现版本和安装的时候不一致的问题
  • 由于package安装的包存在^大版本号一致，小版本向上兼容的情况，原来package.json文件只能锁定大版本，也就是版本号的第一位，并不能锁定后面的小版本，你每次npm install都是拉取的该大版本下的最新的版本，为了稳定性考虑我们几乎是不敢随意升级依赖包的，这将导致多出来很多工作量，测试/适配等，所以package-lock.json文件出来了，当你每次安装一个依赖的时候就锁定在你安装的这个版本。所以提出package-lock.json进行版本号锁定，需要进行更新的时候需要使用npm install xxx@x.x.x

2. CSS滚动吸附--偏门知识

最外层样式{
scroll-snap-type: x mandatory;
}
子元素样式{
scroll-snap-align:start   //元素滚动未全部完成 会吸附到开始位置，这个值可以修改
}
//样式剪切
skew：剪切映射  tansform:skew 对于X、Y轴进行斜切角旋转的效果

3.react import 样式不起作用

需要在less中使用：global 全局标签，即添加全局样式

4.antdpro protable的筛选会将antd select的模糊搜索下拉样式搞乱

.ant-pro-form-query-filter .ant-form-item-control{
   overflow: hidden;
}
这条样式的问题，将overflow修改未initial

5.Vue相关细节

  • data为什么是函数

    每次return新对象，多个组件不会相互影响

  • 深度监听

“a.b.b”:function(neval,olval){}

//vue渲染过程
加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

//父子组件出现传值不更新问题，父组件数据修改成功，子组件始终不更新，使用$forceupdate也不更新
使用vue.set方法进行更新
  • $route获取当前路由页面的属性 keep-live缓存后其他生命周期不会走，但是提供activated deactivated两个生命周期函数

6.ProTable scroll={{x:'100%'}}滚动条未出现 ？不换行

未设置 columns每行属性ellipsis: true,

7.清空模板

npm install rimraf -g
 rimraf node_modules

8.Const类型定义一定要赋值，不然会报错

9.微信小程序

vant-image无法加载本地图
微信小程序不会出现上传的file字段
微信小程序真机上才能测出来input type=“number”

10.其他

  • 表单点击submit才能触发onsubmit事件，执行submit()不能触发该事件；reset类似
  • slice(start,end);end截取的不包括end，start如果为负数则从倒数第几个开始，end为负数择最后一个为0，倒数第二个为-1
  • a.splice（start,end）;对a会进行直接操作，而且end是个数不是索引，如果end没有则截取位置到末尾
  • toLocaleString()将数组转换为字符串
  • UTC时间为标准时间，本地时间为东八区时间，所以差8个小时
  • 计算时间getUTCmonth从1开始 getMonth从0开始 所以需要加1
  • getTimezoneOffset 计算本地时间和GMT时间的时间差 单位为分钟
  • Date.UTC(year,month,day,hour,minutes,seconds,ms); day从1开始 其他都是从0开始
  • math.ceil向上取整 math.round可能向上或向下取最接近的整数，负数的话往0靠近；math.floor向下舍入
  • 正则.exec(字符串)；匹配到则返回数组，索引0返回字符串，索引1返回匹配第一个，索引2返回匹配到的第二个；依此类推
  • 正则.test(字符串)；返回true或者false；
  • 字符串.match(正则)，未全局匹配则返回匹配的对象包括位置，全局匹配没有位置
  • String.localeCompare（target） 比较两个字符串String小于target时返回小于0
  • substring返回的是from索引到to索引的字符，不包括from索引字符，包括to索引字符
  • unescape 解码 eacape编码
avatar
文章
阅读
粉丝