2019年度前端知识点总结

#2019年度前端知识点总结| 来源: 网络整理| 查看: 265

掘金上的排版好看点 ➡️https://juejin.im/post/5e33e1c451882536c964f3ff

本文旨在整理和记录 2019年度从事前端工作的过程中遇到的问题以及解决问题的思路。内容偏新手且叙述不深，整理的目的是为了方便以后快速查阅之前遇到过的问题。

Vue或者React框架使用过程中的笔记改变父组件标签上属性绑定值的方式方式一普遍做法，通过在标签上绑定一个事件，在子组件上调用$emit触发该事件进而改变属性值方式二借助.sync修饰符这种方式无需再绑定事件父组件 :msg.sync = "msg" 子组件 this.$emit('update:msg', '传递的值') 不能接受表达式和字面量对象 v-model 几个实用的修饰符 lazy 将双向绑定的input事件变成change事件 trim 自动过滤首位空白字符 number 将输入值转为数值类型插槽用法后备内容具名插槽用 v-slot:default 绑定，必须用在上，如果只有default则可以用在其他标签上作用域插槽（让插槽内部访问子组件数据）子组件：父组件：通过 slotProps.user 获取，也可以使用 ES6 解构语法 {user} / {user: 别名} 动态的绑定标签特性 ... data: { dataAttr: 'href' } 问题描述解决方法本地图片无法正常显示使用 require('本地图片路径') 打包后的html页面显示空白找到文件 config/index.js 修改 build 配置下的 assetsPublicPath 为相对路径 './' 清除浏览器默认样式在项目引入 reset.css vue中绑定键盘事件 @keydown.enter 注意绑到按钮上无效改变状态值页面无响应，页面需下一帧才能得到变化 setTimeout(()=>{...}, 0) vue中还可以使用 this.$nextTick(()=>{...}) 路由使用history模式无效这种模式需要在服务端有响应的配置用hash模式可在前端使用路由 ES6常用语法 Promise的基本用法 var p = new Promise((resolve, reject) => { //new 后立即执行的操作 resolve() //异步执行成功后要进行的操作，在then中进行 reject()//异步执行失败后要进行的操作，在catch中进行 }) p.then().catch().finally() Promise.all([p1, p2, p3]).then().catch() //全部拿到结果后再执行 Promise.race([p1, p2, p3]).then().catch() //有一个拿到结果就执行 export 与 export default 参考这个语法格式简单描述 Array.includes() 检测数组中是否包含指定项，返回布尔值 ()=>{} 箭头函数，注意它没有自己的作用域 `xxx${var}` 模版字符串 new Set(array) ==> 使用[...array] 数组快速去重 Array.from(new Set(array)) 将Set变成普通数组 Object.keys().length 判断对象是否为空 js技巧对象拷贝深拷贝 JSON.parse(JSON.stringify(obj)) 对象包含可序列化值并且没有循环引用时有效浅拷贝 {...obj} Object.assign({}, obj) 拷贝的仅为对象的指针对URI编码和解码 encodeURI()、decodeURI() encodeURIComponent()、decodeURIComponent() 可对特殊字符如#，/，￥等起作用注意当使用浏览器地址传参数时（如路由跳转时），如果参数中有中文，需要使用 encodeURIComponent() 编码，因为浏览器url会自动解码一次所以需要编码两次才能生效：encodeURIComponent(encodeURIComponent(url)) toFixed 出现无限循环小数 Math.floor(xx * 100) / 100 xx.toString().match(/^\d+(?:\.\d{0, 2})?/)[0] CSS技巧 flex流布局项目开发中经常用到的布局，推荐参考阮一峰老师的教程，非常详细。选择器优先级参考文本内容超出容器显示省略号单行文本 #content{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 多行文本（背景颜色设为transparent） #content{ position: relative; overflow: hidden; } #content::after{ content: '...'; position: absolute; bottom: 0; right: 0; } 消除img标签中的图片为空时的边框 img[src=""], img:not([src]){ opacity: 0; } 制作一个表头固定表体滚动的表格（需设置高、宽） thead, tr 设置 display: table; table-layout: fixed; tbody 设置 display: block; overflow-y: scroll; 子元素设置浮动后父元素设置 height: auto 无效 .parent::after{ content: ""; display: table; clear: both; } BFC（块格式化上下文）参考这篇文章什么是BFC？看这一篇就够了上面这个例子(子元素设置浮动后父元素设置 height: auto 无效)就是创造了BFC 如何创建BFC float的值不是none position的值不是static或者relative display的值是inline-block、table-cell、flex、table-caption或者inline-flex overflow的值不是visible 设置图片宽高为相对百分比的情况下让宽高相等 .parent{ position: relative; height: 0; padding-bottom: 100%; } .child{ width: 100%; height: 100%; position: absolute; } 设置图片的填充方式和位置 object-fit: fill/cover.contain/scale-down 参考 object-position: 值或者方向词参考在less/scss中使用calc()无效 //less中加上~转译符号 height: calc(~"100vh-200px") //scss中使用插值#{} height: calc(100% - #{$var}) 样式格式简单描述 text-decoration: line-through 定义穿过文本的一条线 text-align-last: justify 让文字两端对齐 resize: none 禁止textarea拉伸 font-size: 0 让 input 的 cursor: pointer 样式生效 touch-action: none 禁用浏览器触摸交互 pointer-events: none 让元素永远不能成为鼠标事件的target 常用库问题集锦 ElementUI 问题描述解决方法图标无法正常显示在 build/utils.js 文件中的 ExtractTextPlugin 插件中加入 publicPath: '../../' AntDesign 问题描述解决方法日期选择框中的年月日是英文 import {ConfigProvider} from 'antd' => import 'moment/locale/zh-cn => import zhCN from 'antd/es/locale/zh_CN' => ... Table组件中含有表单控件时无法正常使用状态state Table的column属性不要定义在状态中，直接用const接收 Echarts 问题描述解决方法使用内置的百度地图不显示需要引入 import 'echarts/extension/bmap/bmap' Axios 利用 qs 库序列化请求参数 qs.stringify({ids: [1, 2, 3]}, { indices: false }) //形式： ids=1&ids=2&id=3 qs.stringify({ids: [1, 2, 3]}, {arrayFormat: 'indices'}) //形式： ids[0]=1&aids1]=2&ids[2]=3 qs.stringify({ids: [1, 2, 3]}, {arrayFormat: 'brackets'}) //形式：ids[]=1&ids[]=2&ids[]=3 qs.stringify({ids: [1, 2, 3]}, {arrayFormat: 'repeat'}) //形式： ids=1&ids=2&id=3 参考封装： import axios from 'axios' import qs from 'qs' import {message} from 'antd' axios.defaults.baseURL = 'http://XXX/' axios.defaults.withCredentials = true //设置为true 可以让请求带上cookie中的值，用于获取登录状态的SESSION axios.interceptors.request.use(function (config) { // 判断请求的类型 // 如果是post请求就把默认参数拼到data里面 // 如果是get请求就拼到params里面 if (config.method === 'post' || config.method === 'put') { let data = qs.parse(config.data) config.params = { ...config.params } config.data = qs.stringify({ ...data }, { arrayFormat: 'brackets' }) } return config }, function (error) { return Promise.reject(error) }) axios.interceptors.response.use((res) => { //对响应数据做些事 // if (res.config.method === 'get') { // return res // } if (res.data.code === '0000') { // if (res.config.method === 'post') { return res.data.data // } } else if (res.data.statusCode === 304) { window.location.href = '/#/login' } else { return Promise.reject(res.data.message) } }, (error) => { return Promise.reject('请求异常') }) function request(params){ return new Promise((resolve, reject) => { axios({ url: params.url || '', method: params.method || 'post', params: params.params || {}, data: params.data || {}, headers: { 'Content-Type': params.contentType || 'application/x-www-form-urlencoded' }, paramsSerializer: function (param) { return qs.stringify(param, { arrayFormat: 'repeat' }) }, }).then(res => { resolve(res) }).catch(err => { console.log(err) message.error(err || '出问题') reject(err) }) }) } export default request 操作DOM DOM.getBoundingClientRect().bottom 获取DOM元素相对于可视页面底部的距离注意：元素的 offsetTop、offsetLeft 的值是根据css定位来的，默认是相对 body，出现 relative 会改变这种行为，利用 offsetParent 可查看父元素 DOMid.scrollTop = DOMid.scrollHeight 可以让元素滚动到最底部一个高度自适应内容且高度有最大值的的textarea setCurrentContent(e.target.value)} onInput={autoTextAreaHeight} onBlur={handleBlur}> const autoTextAreaHeight = (e) => { if (e.target.scrollHeight { //解决IOS失焦事件先于click事件导致click事件无效 setTimeout(() => { window.scroll(0, 0) }, 0) } //css // resize: none; web端与移动端的兼容性问题描述解决方法 IOS/Safari XXXX-XX-XX 日期无效不支持这种 - 的格式，利用正则替换日期字符串 replace(/\-/g, "/") 火狐浏览器在文件域中无法发起ajax请求请求json文件首先在浏览器地址栏中输入 about:config 然后找到 security.fileuri.strict_origin_policy 置为 false IOS/Safari 使用 transform 时，z-index 无效需要在祖先元素上加上 overflow: hidden; 浏览器默认字体不一样导致空格显示的长度不一样设置样式 font-family: Times New Roman IE 报错 Promise 未定义安装 babel-polyfill 然后在 main.js 中引入手机上H5的网络图片不显示 403 Forbidden 在入口页面加上其他 localStorage 只能存储字符串，存储数组对象需要用JSON转换 momentJS 配置成中文 moment.locale('zh-cn', xxx) xxx是中文配置 ['a']=='a' 为true typeof([]) = 'object' 跳过ESlint检测 /*eslint-disable*/ ... /*eslint-enable*/ 结束语

暂时就这么点了，有什么遗漏的以后再补充。

欢迎作者投稿，投稿即表明您已阅读并接受本站投稿协议(https://www.xinglianwangluo.com/gougao.html)。本网刊登的文章均仅代表作者个人观点，并不代表本网立场。文中的论述和观点，敬请读者注意判断。

本文地址：https://www.gyxlkj.com/notes/js/2384.html

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章