william.chan's Blog

CSS: canvas绘制曲线生成工具

二次贝赛尔曲线

二次贝赛尔曲线 http://blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve.html 三次贝赛尔曲线 http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html

Posted by chanweiyan on October 6, 2020

CSS: calc() and line-height

CSS的单位及css3的calc()及line-height百分比

calc() calc()语法非常简单，就像我们小时候学加（+）、减（-）、乘（*）、除（/）一样，使用数学表达式来表示： 1 2 3 4 5 6 7 8 .haorooms { width: calc(expression); } .haorooms{ width: calc(100% - 20px); /* 注：减号前后要有空格，否则很可能不生效 */ } lin...

Posted by chanweiyan on October 5, 2020

CSS: box-shadow

box-shadow: h-shadow v-shadow blur spread color inset;

box-shadow 1 box-shadow: h-shadow v-shadow blur spread color inset; 水平投影、垂直投影、模糊值、阴影尺寸、颜色、内部阴影和外部阴影，默认是外部阴影。参考 https://www.haorooms.com/post/box_shadow_css

Posted by chanweiyan on October 5, 2020

JavaScript: event.clientX and offsetLeft

clientX, offsetLeft, offsetWidth

clientX, offsetLeft, offsetWidth offsetLeft计算当前元素距离有定位属性（static除外）的先辈元素的距离，如果所有的先辈元素都没有设置定位属性，那么计算的就是当前元素距离窗口左侧的距离。 clientX：当事件被触发时鼠标指针相对于窗口左边界的水平坐标。 offsetLeft：该元素左外边框至窗口左边界的距离。 offsetWid...

Posted by chanweiyan on October 3, 2020

JavaScript: 避免事件重复触发

js性能优化

避免事件重复触发 1 2 3 4 5 // 每次事件触发后，先清除之前的事件，再继续执行 floor.$win.on('scroll resize', floor.showFloor = function() { clearTimeout(floor.floorTimer); floor.floorTimer = setTimeout(floor.timeToShow, 250);...

Posted by chanweiyan on October 2, 2020

CSS: 在.css文件中对样式进行分组

将分组后的样式折叠起来

vscode 将分组后的样式折叠起来 I had the same issue, and fixed it by doing this: Go to Code -> Preferences -> Settings and change the following entry from auto to indentation 1 "editor.foldingStrategy...

Posted by chanweiyan on October 1, 2020

JavaScript: javascript 中x++和++x的不同

++ 含有隐式的赋值

”++”含有隐式的赋值 “++”运算符在操作数之前，称为“前增量”（pre-increment）运算符，它对操作数进行增量计算，并返回计算后的值。当“++”运算符在操作数之后，称为“后增量”（post-increment）运算符，它对操作数进行增量计算，但返回未做增量计算的（unincrement）值。 1 2 3 var i=1,j=++i;//i和j的值都是2。 va...

Posted by chanweiyan on July 21, 2020

JavaScript: es5 中的模块介绍

为模块定义引入包装函数，并保证它的返回值和模块的API保持一致。

为模块定义引入包装函数，并保证它的返回值和模块的API保持一致。 js 模块介绍 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function CoolModule() { var something = "cool"; var another = [1, 2, 3]; function doSomething() { cons...

Posted by chanweiyan on July 21, 2020

JavaScript: 区分函数声明和表达式最简单的方法

function 关键字是否位于声明的开始

function 关键字是否位于声明的开始区分函数声明和表达式最简单的方法区分函数声明和表达式最简单的方法是看 function 关键字出现在声明中的位 (不仅仅是一行代码，而是整个声明中的位置)。 1 2 3 4 5 6 7 8 // 表达式 (function(){})() var foo = function () {} // 声明 function foo() {} ...

Posted by chanweiyan on July 21, 2020

React: react UI组件的业务逻辑

import connect from 'react-redux';

当使用 React + Redux 时，组件如何使用 state 和修改 state UI组件 vs 容器组件 1 2 3 4 5 import connect from 'react-redux'; const List = connect( mapStateToProps, mapDispatchToProps )(Count); React UI组件的业务逻辑 ...

Posted by chanweiyan on July 19, 2020

ABOUT ME

william.chan's blog

CSS: canvas绘制曲线生成工具

二次贝赛尔曲线

CSS: calc() and line-height

CSS的单位及css3的calc()及line-height百分比

CSS: box-shadow

box-shadow: h-shadow v-shadow blur spread color inset;

JavaScript: event.clientX and offsetLeft

clientX, offsetLeft, offsetWidth

JavaScript: 避免事件重复触发

js性能优化

CSS: 在.css文件中对样式进行分组

将分组后的样式折叠起来

JavaScript: javascript 中x++和++x的不同

++ 含有隐式的赋值

JavaScript: es5 中的模块介绍

为模块定义引入包装函数，并保证它的返回值和模块的API保持一致。

JavaScript: 区分函数声明和表达式最简单的方法

function 关键字是否位于声明的开始

React: react UI组件的业务逻辑

import connect from 'react-redux';

FEATURED TAGS

FRIENDS