Panda's Blog

个人博客

Grid 网格布局

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

Posted by Panda on 2020-01-01

css

react 的生命周期

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

Posted by Panda on 2019-12-31

react

react 中的api

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

Posted by Panda on 2019-12-31

react

Webpack中的hash值

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

Posted by Panda on 2019-12-30

Webpack

Webpack - 核心概念

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

Posted by Panda on 2019-12-30

Webpack

自己撸的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......

Posted by Panda on 2019-12-30

nodejs

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......

Posted by Panda on 2019-12-30

Webpack

JS中的错误捕获

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

Posted by Panda on 2019-12-30

js

看透matrix3

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

Posted by Panda on 2019-12-29

css

css专业素养

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

Posted by Panda on 2019-12-29

css

FEATURED TAGS
Web3 css js nodejs Webpack HTTP node nginx react CSS React webpack 性能优化 浏览器
ABOUT ME

Stay hungry,Stay foolish

RECENT POSTS
FRIENDS
ARCHIVES