william.chan's blog

done is better than perfect

JavaScript: async函数

async函数是使用async关键字声明的函数。

async函数是AsyncFunction构造函数的实例, 并且其中允许使用await关键字。async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为,而无需刻意地链式调用promise。 语法 1 2 3 async function name([param[, param[, ... param]]]) { statements } ...

JavaScript: 关于类型,有哪些你不知道的细节?

从运行时的角度去看 JavaScript 的类型系统

运行时类型是代码实际执行过程中我们用到的类型。所有的类型数据都会属于 7 个类型之一。从变量、参数、返回值到表达式中间结果,任何 JavaScript 代码运行过程中产生的数据,都具有运行时类型。 问题 为什么有的编程规范要求用 void 0 代替 undefined? 字符串有最大长度吗? 0.1 + 0.2 不是等于 0.3 么?为什么 JavaScript 里...

JavaScript: bind,apply,call三者的区别

bind,call,apply的作用都是用来改变this指向的

为什么要改变this指向? 1 2 3 4 5 6 7 8 9 10 var name = "lucy"; let obj = { name: "martin", say: function () { console.log(this.name); } }; obj.say(); //martin,this指向obj对象 set...

css: 要求超过两行的文本显示为两行文字

最多显示两行文字的css样式设置

ellipsis 1 2 3 4 5 6 7 8 @mixin line2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; display: box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

JavaScript: 函数注释规范

JSDoc Guide

@methed 声明函数或类方法,用法 1 2 3 4 5 6 /*方法说明 *@method 方法名 *@for 所属类名 *@param{参数类型}参数名 参数说明 *@return {返回值类型} 返回值说明 */ JSDoc Guide http://yuri4ever.github.io/jsdoc 参考连接 1.https://blog.csdn.net/bo...

JavaScript: 立即执行函数前面添加分号';'的作用

;(function(){})();

问题:前面为什么添加分号 https://github.com/madrobby/zepto/blob/b5ed8d607f67724788ec9ff492be297f64d47dfc/src/fx.js#L5 解释 对于常见的(function($){…})(jQuery);即是将实参jQuery传入函数function($){},通过形参$接收。 上述函数中,最开始的那个括号,可...

CSS: 单行和多行文字溢出

ellipsis

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 .text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 多行时不要配合 height 使用 */ .multiline...

CSS: canvas绘制曲线生成工具

二次贝赛尔曲线

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

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

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