blog
blog copied to clipboard
aooy
杨敬卓的个人博客
**作者：杨敬卓** **转载请注明出处** # 异步的思考 event loops隐藏得比较深，很多人对它很陌生。但提起异步，相信每个人都知道。异步背后的“靠山”就是event loops。这里的异步准确的说应该叫浏览器的event loops或者说是javaScript运行环境的event loops，因为[ECMAScript](https://tc39.github.io/ecma262/)中没有event loops，event loops是在[HTML Standard](https://html.spec.whatwg.org/#event-loops)定义的。 event loops规范中定义了浏览器何时进行渲染更新，了解它有助于性能优化。 思考下边的代码运行顺序： ```js console.log('start') setTimeout( function () { console.log('setTimeout') }, 0 ) Promise.resolve().then(function() { console.log('promise1'); }).then(function() {...
**作者：杨敬卓** **转载请注明出处** # 目录 * 前言 * 基本原理 * html结构 * 实践 * 小结 # 前言 移动端，滑动是很常见的需求。很多同学都用过[swiper.js](https://github.com/nolimits4web/swiper/)，本文从原理出发，实践出一个类swiper的滑动小插件[ice-skating](https://github.com/aooy/ice-skating)。 小插件的例子： * [移动端](https://aooy.github.io/iceSkating/example/mobile.html) * [pc端](https://aooy.github.io/iceSkating/example/pc.html) 在写代码的过程中产生的一些思考： * 滑动的原理是什么 * 怎么判断动画完成 * 事件绑定到哪个元素，可否使用事件委托优化 *...
**作者：杨敬卓** **转载请注明出处** # 目录 * 前言 * virtual dom * 分析diff * 总结 # 前言 vue2.0加入了virtual dom，有向react靠拢的意思。vue的diff位于[patch.js](https://github.com/vuejs/vue/blob/dev/src/core/vdom/patch.js)文件中，我的一个小框架[aoy](https://github.com/aooy/aoy)也同样使用此算法，该算法来源于[snabbdom](https://github.com/snabbdom/snabbdom)，复杂度为O(n)。 了解diff过程可以让我们更高效的使用框架。 本文力求以图文并茂的方式来讲明这个diff的过程。 # virtual dom 如果不了解virtual dom，要理解diff的过程是比较困难的。虚拟dom对应的是真实dom， 使用`document.CreateElement` 和 `document.CreateTextNode`创建的就是真实节点。 我们可以做个试验。打印出一个空元素的第一层属性，可以看到标准让元素实现的东西太多了。如果每次都重新生成新的元素，对性能是巨大的浪费。 ```js var...
aoy的说明书
**作者：杨敬卓** **转载请注明出处** # 目录 * 前言 * 动机 * 原理 * 使用 * 总结 # 前言 随着移动端的崛起，现代标准浏览器的推广，为解决浏览器兼容问题的jQuery渐渐没落。vue和react这些新的前端框架带来了完全不一样的开发体验，不再需要手动去处理dom节点，只需要关心数据层面的问题。 # 动机 流行的框架和库往往因为功能齐全导致体积巨大，有时我们只用到它们很少的功能，尝试去学习原理，自己实现特定功能有益于学习。 [aoy](https://github.com/aooy/aoy)深受Vue和react的影响，是使用Vue和react后，去实践写的一个简单框架。在Vue和react中，每个组件都可以有自己的数据存储容器，当父子组件或不同层级组件需要频繁大量的通信数据时，如果没有Vuex和redux这些状态管理框架，往往最后会变得一团糟。 **把所有组件的数据存储在一个唯一的容器里，数据只在容器和组件之间流动。** 这是aoy的设计理念。现在aoy只有最基本的功能。只有600行代码，想了解Virtual DOM和diff算法的同学可以试着去阅读源码。 # 原理 使用了Object.defineProperty绑定store的数据，当观察到数据改变，比较新旧数据产生的Virtual DOM，将差异应用到真实dom上。练练ps,给大家画张图。 # 使用...
**作者：杨敬卓** **转载请注明出处** # 前言 黑白照片的时代虽然已经过去，但现在看到以前的照片，是不是有一种回到过去的感觉，很cool有木有~ 看完这篇文章，就可以把彩色照片变成各种各样的黑白的照片啦。 本文完整的在线例子[图片灰度算法例子](https://aooy.github.io/blog/issues4/index.html)，例子的图片有点多，可能有些慢。 例子的源码位于[blog/demo](https://github.com/aooy/blog/tree/master/demo/issues4)里 # 三原色与灰度 **原色**是指不能透过其他颜色的混合调配而得出的“基本色”。一般来说叠加型的三原色是**红色**、**绿色**、**蓝色**，以不同比例将原色混合，可以产生出其他的新颜色。这套原色系统常被称为“RGB色彩空间”，亦即由红（R）绿（G）蓝（B）所组合出的色彩系统。 **当这三种原色以等比例叠加在一起时，会变成灰色；若将此三原色的强度均调至最大并且等量重叠时，则会呈现白色。灰度就是没有色彩，RGB色彩分量全部相等。** # 获取图片的像素数据 算法不区分语言，这里以前端举例。可以使用`canvas`取得图片某个区域的像素数据 ```js //伪代码 var img = new Image(); img.src = 'xxx.jpg'; var myCanvas = document.querySelector(canvasId); var...