🍀 FourLeaf
Switch language
zh
Switch theme
Light

  • js-完全复制一个-数组,-而非引用复制

    // 1. 引用复制, 共用内存 let arr = [1, 2, 3] let brr = arr brr.splice(1, 1) console.log(brr) // [1, 3] console.log(arr) // [1, 3] // 2. 完全复制, 不共享内存 let arr = [1, 2, 3] let brr = [...arr] brr.splice(1, 1) console.log(brr) // [1, 3] console.log(arr) // [1, 2, 3] 在 React 中对 state 数组数据的处理, 不要直接引用赋值, 而要完成复制赋值 因为直接修改 state 数据会对 React 性能调优造成影响

  • js-对象的-key-是个变量时,-如果赋值

    // react 中 this.setState(key, value){ [key]: value } 参考自 csdn:

  • taro-alias

    官方文档: https://taro-docs.jd.com/taro/docs/config-detail 还要引入 path const path = require('path') // 此步骤不能少 const config = { . . . alias: { '@/components': path.resolve(__dirname, '..', 'src/components'), '@/utils': path.resolve(__dirname, '..', 'src/utils'), '@/assets': path.resolve(__dirname, '..', 'src/assets'), '@/static': path.resolve(__dirname, '..', 'src/static') }, . . . }

  • 多个-eventListener,-如何取消

    参考: JavaScript事件机制 背景: 在 taro3.0.2 中, 小程序端使用 onPullDown(), 会造成 h5 端可以下拉, 但是不正常(顶部出现下拉空白, 不可恢复) 后来发现 tao-tabbar__pannel 的 touchmove 事件造成的 于是要关闭这个事件, 但是 使用 removeEventListener 不管用, 使用 addEventListener 覆盖, 会发现会依次执行, 不会覆盖, 于是就有了参考文章里的方法 e.stopImmediatePropagation() async componentDidMount() { // h5 不支持下拉刷新, 下拉会出现空白, 且不消失 if (process.env.TARO_ENV === 'h5') { const obj = document.getElementsByClassName('taro-tabbar__panel') obj[0].addEventListener('touchmove', function (e) { e.stopImmediatePropagation() e.preventDefault() }) } . . . }

  • react-render(),-组件名

    render 方法中只能有一个 顶级父元素 // 正确 render() { <div> <p>1111</p> <p>2222</p> </div> } // 错误 render() { <p>1111</p> <p>2222</p> } 组件类名及 html 标签 的名称必须 首字母大写

  • vue-awesome-swiper-响应式

    使用 vue-awesome-swiper 版本为 3.1.4 (对应的 swiper 版本为 swiper4) // 先用原生 js + swiper4 写了一个响应式 demo.html, 每次 resize 重新 new 一个 swiper <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js"></script> <style> .swiper-container { position: relative; margin: 0 auto; } .swiper-slide { background-color: #eee; text-align: center; } .avatar { width: 120px; border-radius: 50%; /*margin: 0 auto;*/ } p.

  • mouseout-和--mouseleave

    在 firefox 和 chrome 中有不同的表现 在 firefox 中 mouseout 和 mouseleave 一样, 在 chrome 中, mouseout 是离开当前元素(不包括子元素)

  • 限制-div-或-p-内文本行数

    /* css */ .text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } 注意 不能设置行高 不论设备窗口多大 (pc, mobile), 始终显示指定行数

  • 微信开发者工具报-Provisional-headers-are-shown

    表现为没有响应结果 原因可能是 ios 设备对 get 请求头长度限制, 更换为 andriod 设备后没问题, 再换回 iphone 突然也好了 可能与设置的 axios.defaults.retry 及 axios.defaults.retryDelay 有关 参考:

  • axios-304-而无法正常拿到数据

    服务器报 304 的原理: 客户端第一次向服务端请求资源时, 服务端响应 200 并在响应头中返回一个 ETag 值 客户端再次向服务端请求同一个资源( url 未变), 此时会带上上一次服务端返回的 ETag, 服务器检查其自身内容的 ETag 值是否与其一致，如果一致就会返回 304 状态码，告诉你内容和你保存的一致，没有发生改变过。 解决办法: 在请求头中加入 'Cache-Control': 'no-cache' // axios 封装时, 全局设置 const options = { headers: { 'Cache-Control': 'no-cache' } } const client = axios.create(options) 在请求中添加一个随机的查询字符串, 如 ?query=时间戳 参考:
🍀