03 2020 档案
摘要:1. 文件不随编译变化 文件hash不使用[hash],而使用[chunkhash],使得文件只随着内容变化,不随着编译变化,[hash]是每次编译都变化一次 2. css文件不受js模块变化影响 css文件hash使用contenthash,这样不受js模块变化影响 3. 提取vendor 公共库
阅读全文
摘要:webpack打包多入口页面时,访问非index页面,要加上文件名后缀,否则访问不到。 在dist文件部署上去之后,可以通过配置nginx的路由,来省略文件名后缀。 在开发模式,使用webpack-dev-server时候,若打包生成index.html和login.html, 访问login.ht
阅读全文
摘要:1. 整个bundle.js打包后,是一个匿名自执行函数,参数是一个数组。 2. 数组每一项都是一个function,function的内容就是每个模块的内容,并按照require的顺序排列。 3. webpack的每个模块都有一个唯一的id,是从0开始递增的,其他模块通过id来引用该模块 具体形式
阅读全文
摘要:1. ajax轮询 定时发送ajax请求2. ajax长轮询 发送ajax请求后,服务端不返回,直到有消息或超时,客户再次重新建立ajax请求3. WebSocket 在TCP连接上的全双工通信协议,需要单独的websocket服务器4. SSE server-sent-event,也叫events
阅读全文
摘要:webpack核心概念 entry: 编译入口module: 模块,在 webpack 中,一切皆为模块,一个模块对应一个文件Chunk: 代码块,一个 chunk 由多个模块组合而成,用于代码的合并与分割Loader: 模块转换器,将非js模块转化为webpack能识别的js模块Plugin: 扩
阅读全文
摘要:div默认无法聚焦,所以不能触发keyUp事件。 1. 为其添加tabIndex,可以使其能聚焦。 $('div').attr('tabIndex',0); $('div').focus(); 2. 此外,div如果包含a链接,也能聚焦。 <div> <a href='#'>必须有内容</a> </
阅读全文
摘要:参数 触发时机 更新方式 componentWillReceiveProps componentWillReceiveProps(nextProps) 只有一个参数nextProps,下一次的props 收到新的props之前做一些事情 仅在props变化时会触发 更新状态是同步的, 不触发重新re
阅读全文
摘要:React.memo是一个高阶组件,本质就是一个函数。基本形式如下: React.memo(functionl Component, areEqual) React.memo与PureComponent作用一样,都是用来减少组件渲染。区别如下: 1. React.memo针对函数式组件,PureCo
阅读全文
摘要:useState 生成状态 useEffect 执行副作用(不会阻塞浏览器渲染,原理是使用了requestIdleCallback,在浏览器空闲时执行callback) useContext 获取context参数 useReducer 修改状态 useCallback 缓存函数 useMemo 缓
阅读全文
摘要:1. JSON.stringfy做深拷贝会丢失信息 JSON.parse(JSON.stringfy(obj))做深拷贝,会有以下问题 1. 日期变字符串 2. RegExp、Error对象变空对象, 3. 函数,undefined会丢失 4. NaN、Infinity和-Infinity会变成nu
阅读全文
摘要:1. padding/margin的百分比实现 padding-top/bottom,margin-top/bottom都是基于父元素的宽度为参照的,可以实现高宽比固定的盒子 .box{ width: 50%; padding-bottom: 30%; } 就实现了高宽比为3:5的盒子 然后设定im
阅读全文
摘要://vue2.x写法 new Vue({ router, render: h => h(App) }).$mount("#app"); //或者 new Vue({ el: '#app', router, render: h => h(App) }); //也可以先得到Virtual DOM,再挂载
阅读全文