Panda's Blog

个人博客

Grid 网格布局

网格布局 Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。Grid 布局远比 Flex 布局强大。 display: grid display: grid指定一个容器采用网格布......
css

react 的生命周期

React 组件生命周期 static getDerivedStateFromProps() 1static getDerivedStateFromProps(props, state) getDerivedStateFromProps 会在调用 render 方法之前调用,并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state,如果返回 null 则不更新任何内容。 此......

react 中的api

组件 React.Component React.PureCompoent React.PureComponent 与 React.Component 很相似。两者的区别在于 React.Component 并未实现 shouldComponentUpdate(),而 React.PureComponent 中以浅层对比 prop 和 state 的方式来实现了该函数。 如果赋予 Rea......

Webpack中的hash值

⽂件哈希值 ⽂件哈希值就是打包后输出的⽂件名的后缀 例如:3.bfb2172c.js app.d3635098.js ⽂件哈希值如何⽣成 Hash:和整个项⽬的构建相关,只要项⽬⽂件有修改,整个项⽬构建的 hash 值就会更改 Chunkhash:和 webpack 打包的 chunk 有关,不同的 entry 会⽣成不同的 chunkhash 值 Contenthash:根据⽂......

Webpack - 核心概念

核心概念之 Entry Entry 用来指定 webpack 的打包⼊口 Entry 的⽤法 单⼊⼝:entry 是⼀个字符串 123module.exports = { entry: './src/index.js'}; 多⼊⼝:entry 是⼀个对象 123456module.exports = { entry: {......

自己撸的koa-ioc 插件

koa-ioc ioc middleware for koa 指定一个服务目录,在启动服务app时,自动灌入服务路由 基于koa-router二次封装 app.get,app.post,app.put 等均可使用。 installation unsing npm : 1npm install kao-ioc API Reference ioc_dir( path : string......

Webpack 优化

webpack 慢的原因 string -> ast -> string/buff,文件过多 n * string -> ast -> string/buff entry 过多 复杂 繁杂 fonts css js async import(/***/‘xxx.js’) entry 解决方案 async 插件 speed-measure-webpack-plu......

JS中的错误捕获

try catch 捕获 可以捕获到同步代码的错误,但是异步的微任务或这宏任务就不可以了。 window.error 可以捕获到异步队列的任务异常,但是网络请求之类的异常捕获不到。get 请求捕获不到哦。 网络请求捕获不到,io错误之类的。 1234567<img src ='./a.jpg'> get 请求捕获不到window.onerror = funct......
js

看透matrix3

先看我之前的一个例子:http://47.100.202.222/splitball/ 可以看下工具调试,满屏的matrix3 跳动的热血沸腾的。 123456789101112131415161718192021222324252627282930/** a = 控制 X 的宽度*  b = 控制 Y 的倾斜*  c = 控制 X 的倾斜*  d = 控制 Y 的高度*  tx = 控......
css

css专业素养

cascading style sheet 层叠样式表 1.引入css 1234567891011121314151617181920212223<html lang="en"> <head> <meta charset="UTF-8"> <title>Document<......
css