2019年度前端知识点总结

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

Vue或者React框架使用过程中的笔记

改变父组件标签上属性绑定值的方式

  • 方式一 普遍做法,通过在标签上绑定一个事件,在子组件上调用$emit触发该事件进而改变属性值
  • 方式二 借助.sync修饰符 这种方式无需再绑定事件
    • 父组件 :msg.sync = "msg"
    • 子组件 this.$emit(‘update:msg‘, ‘传递的值‘)
    • 不能接受表达式和字面量对象

v-model 几个实用的修饰符

  • lazy 将双向绑定的input事件变成change事件
  • trim 自动过滤首位空白字符
  • number 将输入值转为数值类型

插槽用法

  • <slot>后备内容</slot>
  • 具名插槽 用 v-slot:default 绑定,必须用在 <template> 上,如果只有default则可以用在其他标签上
  • 作用域插槽(让插槽内部访问子组件数据)
    子组件:<slot :user="user"></slot>
    父组件:<template v-slot:default="slotProps"/> 通过 slotProps.user 获取,
    也可以使用 ES6 解构语法 {user} / {user: 别名}
    

动态的绑定标签特性

<a v-bind:[dataAttr]="url"></a>
...
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‘ => <ConfigProvider locale={zhCN}>...</ConfigProvider>
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
<textarea rows="1" className="input-msg" value={currentContent} type="text" onChange={(e) => setCurrentContent(e.target.value)} onInput={autoTextAreaHeight} onBlur={handleBlur}></textarea>

const autoTextAreaHeight = (e) => {
    if (e.target.scrollHeight <= 90) {
        e.target.style.height = ‘auto‘
        e.target.style.height = e.target.scrollHeight + "px"
    }
}
const handleBlur = () => {
    //解决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 在入口页面加上<meta name="referrer" content="no-referrer" />

其他

  • localStorage 只能存储字符串,存储数组对象需要用JSON转换
  • momentJS 配置成中文 moment.locale(‘zh-cn‘, xxx) xxx是中文配置
  • [‘a‘]==‘a‘ 为true
  • typeof([]) = ‘object‘
  • 跳过ESlint检测
/*eslint-disable*/
...
/*eslint-enable*/

结束语

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

原文地址:https://www.cnblogs.com/eightFlying/p/2019note.html

时间: 2024-11-08 20:12:49

2019年度前端知识点总结的相关文章

停下来,多想想,再出发(2019年度总结)

停下来,多想想,再出发(2019年度总结) 1.前言 ? 前一段看到高中同学在群里发的一张之前高中双旦晚会的照片,感觉就发生在不久之前,然而实际上现在已经大四了,明年就要毕业了.这么多年了,还没有认认真真地停下来总结一下自己过去的时间里都做了什么,有什么不足的地方需要改正,有什么做的比较好的地方需要自己以后需要坚持下去.那么就从今年开始吧,定期停下来,想一想自己做了什么,对于这个结果满意吗,以后该怎么做. 2.关于2019 2.1.开始学习Spring ? 说起Spring,还要从最初的一个微信

前端知识点总结(转载)

转自--- https://github.com/hawx1993/Front-end-Interview-questions/blob/master/README.md 本文旨在加深对前端知识点的理解,资料来源于网络,由本人(博客:http://segmentfault.com/u/trigkit4) 收集整理. 一些开放性题目 1.自我介绍:除了基本个人信息以外,面试官更想听的是你与众不同的地方和你的优势. 2.项目介绍 3.如何看待前端开发? 4.平时是如何学习前端开发的? 5.未来三到五

前端知识点总结1

前端知识点总结 WendySays 关注 2016.10.14 17:10* 字数 1074 阅读 759评论 3喜欢 8 知识框架 知识框架图,每个部分有很多书推荐https://github.com/JacksonTian/fks Paste_Image.png 浏览器工作原理 How browsers work 浏览器工作原理相关的译文 浏览器渲染浏览器的渲染原理简介 看到这个标题大家一定会想到这篇神文<How Browsers Work>,这篇文章把浏览器的很多细节讲得很细,而且也被翻

python学习第六十五天:前端知识点总结

前端知识点串讲 1 HTML 1.1 组成 HTML标签: 单 双 HTML标签属性 class id 1.2 HTML标签 # 页面结构标签 html body head # HEAD 头部标签 meta title style link script # 格式标签 p h1~6 pre br hr # 文本标签 em strong sub sup del ins i # 列表 ul ol li dl dt dd # 表格 table thead tbody tfoot tr td th ca

2019年度个人计划

本计划写于:2018-12-22  12:40:16 2019年度计划: 1. 上半年熟悉公司的常用技术,具备应对公司日常开发的能力 2. 熟读2018年的所读过的书和熟悉学过的技术,并且写相关博客进行记录.本阶段要达到熟悉各项技术的实现原理. 4. 了解并整理Tomcat,MySQL,JVM等的相关优化,有机会的话在工作中去尝试. 5. 学习分布式相关的技术 至此,已经具备了熟悉运用各项技术的能力 2020年度计划: 1. 继续上一年度的学习计划 2. 深入学习算法 3. 同时关注市面上的相关

2019年度计划

本计划写于:2018-12-22  12:40:16 2019年度计划: 1. 上半年熟悉公司的常用技术,具备应对公司日常开发的能力 2. 熟读2018年的所读过的书和熟悉学过的技术,并且写相关博客进行记录.本阶段要达到熟悉各项技术的实现原理. 4. 了解并整理Tomcat,MySQL,JVM等的相关优化,有机会的话在工作中去尝试. 5. 学习分布式相关的技术 至此,已经具备了熟悉运用各项技术的能力 2020年度计划: 1. 继续上一年度的学习计划 2. 深入学习算法 3. 同时关注市面上的相关

深圳市共创力咨询推出2019年度公开课年卡服务!

共创力企业管理咨询2019年度公开课计划 共创力研发咨询公开课学习年卡主要包括以下几个类型:至尊卡.白金卡.金卡,有效期从购买之日起,到满一年时止,逾期不用将作废.共创力研发咨询标准价格为每人次(每人次:每个人参加两天的课程)为4000元. •        至尊卡:40人次起售,包括40人次(每人次:每个人参加两天的课程),每人次课程费用为2400元/人次: •        白金卡:30人次起售,包括30人次,每人次课程费用为2800元/人次: •        金  卡:20人次起售,包括

中级前端知识点提要

中级前端知识点提要 标签(空格分隔): JavaScript HTML 基础 1 Restful API Representational State Transfer(表现层状态转移). URL定位资源,用HTTP动词(GET POST PUT DELETE)描述操作. 资源.统一接口.URI.无状态. 应该将API的版本号放入URL:URL中只能有名词而不能有动词:API应该提供参数. 2 CommonJS/AMD/CMD/ES6 Module 2.1 CommonJS 是Node.js模块

小猿圈之2019年前端JavaScript面试题(二)

小猿圈前端讲师今天继续给你总结js面试题,前面一篇文章咱们已经有一片js基础部分面试题,今天小猿圈web讲师为你讲解js前端应用设计问题,一定要好好看哦,为了能赢在其他人前面. JavaScript前端应用设计问题 1.解释单向数据流和双向数据绑定. Angular1.x基于双向数据绑定,而React,Vue,Elm等基于单向数据流架构. 2.单向数据流架构在哪些方面适合MVC? MVC拥有大约50年的悠久历史,并已演变为MVP,MVVM和MV*.两者之间的相互关系是什么?如果MVC是架构模式,