purplebamboo
purplebamboo
hass更新到 2022.2版本后，小米空气净化器的 速度控制失效。 错误日志是： set_percentage raise NotImplementedError 好像是官方支持的方法有了重大改变。 参考：https://githubhot.com/repo/smartHomeHub/SmartIR/issues/776 盼修复。
目前 magix本身已经支持了虚拟dom diff。 但是做的是先`模板编译`，再`运行时字符串转换`到vdom，再去`diff`。 这带来一些问题： * 模板编译这块因为是渲染之后变成，需要处理很多html实体转换的问题，参数透传也很麻烦 * 运行时转换vom性能应该比较差，当然期待后续的具体测试。 另外，项目人员使用magix时经常会纠结语法的问题。 基于这些考虑，我们是否可以直接用jsx去写magix解决这些问题。
# reactjs源码分析-下篇（更新机制实现原理） reactjs是目前比较火的前端框架，但是目前并没有很好的解释原理的项目。reactjs源码比较复杂不适合初学者去学习。所以本文通过实现一套简易版的reactjs，使得理解原理更加容易。包括： * [reactjs源码分析-上篇（首次渲染实现原理）](http://purplebamboo.github.io/2015/09/15/reactjs_source_analyze_part_one) * [reactjs源码分析-下篇（更新机制实现原理）](http://purplebamboo.github.io/2015/09/15/reactjs_source_analyze_part_two) 声明： * 本文假定你已经对reactjs有了一定的了解，如果没有至少看下ruanyifeng老师的[入门demo](http://www.ruanyifeng.com/blog/2015/03/react.html)。 * jsx不在本文的讨论范围，所有的例子原理都是使用原生的javascript。 * 篇幅限制，服务器端的reactjs也不在本文讨论范围内。 * 为了演示方便，本文以jQuery作为基本工具库。 * 为了更清晰的演示原理，本文会忽略很多细节的东西，千万不要用于生产环境。 所有实例源码都托管在github。[点这里](https://github.com/purplebamboo/little-reactjs)里面有分步骤的例子，可以一边看一边运行例子。 ## 前言 紧接上文，虚拟dom差异化算法（diff algorithm）是reactjs最核心的东西，按照官方的说法。他非常快，非常高效。目前已经有一些分析此算法的文章，但是仅仅停留在表面。大部分小白看完并不能了解（博主就是 ＝ ＝）。所以我们下面自己动手实现一遍，等你完全实现了，再去看那些文字图片流的介绍文章，就会发现容易理解多了。 ## 实现更新机制 下面我们探讨下更新的机制。 一般在reactjs中我们需要更新时都是调用的setState。看下面的例子： ```js...
# iconfont字体生成原理及使用技巧 好久不写文章了，罪过罪过，最近一直在忙iconfont改版的事情，各种焦头烂额。今天做了次iconfont的分享，所以整理下，发一篇水文。 主要给大家同步下iconfont的字体生成原理，以及解答下使用上的一些比较常见的问题 ## 原理篇 iconfont技术早就不是什么新技术了，我们iconfont.cn也已经做了快三年了。后来陆陆续续的来了很多新同学，可能只知道用这个，却不知道它内部的原理，这里给大家同步下，知道了原理可以更好的去使用。 ### css加载自定义字体 首先前端都知道我们可以定义web上面文字的fontfamily。 ```css css: .test{ font-size: 16px; font-family: '微软雅黑'; } html: iconfont字体原理 ``` 但是这种情况下我们只能用系统默认的一些字体，限制比较大。比如微软雅黑就是windows下面才有。 其实css是可以自定义字体的，所以我们可以加载自己的字体。 使用 @font-face 定义一个字体family： ``` css: @font-face {...
# promise规范 promise最早是在commonjs社区提出来的，当时提出了很多规范。比较接受的是promise/A规范。后来人们在这个基础上。提出了promise/A+规范，也就是实际上的业内推行的规范。es6也是采用的这种规范。 promise/A规范在[这里](http://wiki.commonjs.org/wiki/Promises/A) promise/A+规范在[这里](https://promisesaplus.com/)还有[中文版](http://www.ituring.com.cn/article/66566) 不过规范这种东西看着比较晦涩。下面具体说说promise的用法。 ##规范里的定义 什么是promise呢，说白了就是一个承诺，我承诺你叫我做的事情我将来会去做，不过要等我能去做的时候。 一个promise对象有三种状态，预备状态（pending），成功态（fulfilled），失败态（rejected）。 我们看下promise对象的构造函数： ```js var promise = new Promise(function(resolve, reject) { //if(报错){ //reject(new Error('promise出错啦。。')) //} //某个异步操作，比如ajax请求 setTimeout(function(){ resolve('异步请求结束了。。变成完成态') },1000) }); ``` promise对象初始状态一般是预备状态，并且promise对象的状态转换只能是预备状态到成功态或者预备状态到失败态。 *...
# reactjs源码分析-上篇（首次渲染实现原理） reactjs是目前比较火的前端框架，但是目前并没有很好的解释原理的项目。reactjs源码比较复杂不适合初学者去学习。所以本文通过实现一套简易版的reactjs，使得理解原理更加容易。包括： * [reactjs源码分析-上篇（首次渲染实现原理）](http://purplebamboo.github.io/2015/09/15/reactjs_source_analyze_part_one) * [reactjs源码分析-下篇（更新机制实现原理）](http://purplebamboo.github.io/2015/09/15/reactjs_source_analyze_part_two) 声明： * 本文假定你已经对reactjs有了一定的了解，如果没有至少看下ruanyifeng老师的[入门demo](http://www.ruanyifeng.com/blog/2015/03/react.html)。 * jsx不在本文的讨论范围，所有的例子原理都是使用原生的javascript。 * 篇幅限制，服务器端的reactjs也不在本文讨论范围内。 * 为了演示方便，本文以jQuery作为基本工具库。 * 为了更清晰的演示原理，本文会忽略很多细节的东西，千万不要用于生产环境。 所有实例源码都托管在github。[点这里](https://github.com/purplebamboo/little-reactjs)里面有分步骤的例子，可以一边看一边运行例子。 ## 前言 前端的发展特别快，经历过jQuery一统天下的工具库时代后，现在各种框架又开始百家争鸣了。angular，ember，backbone，vue，avalon，ploymer还有reactjs，作为一个前端真是稍不留神就感觉要被淘汰了，就在去年大家还都是angularjs的粉丝，到了今年又开始各种狂追reactjs了。前端都是喜新厌旧的，不知道最后这些框架由谁来一统天下，用句很俗的话说，这是最好的时代也是最坏的时代。作为一个前端，只能多学点，尽量多的了解他们的原理。 reactjs的代码非常绕，对于没有后台开发经验的前端来说看起来会比较吃力。其实reactjs的核心内容并不多，主要是下面这些： * 虚拟dom对象(Virtual DOM) * 虚拟dom差异化算法（diff algorithm） *...
# javascript组件化 作为一名前端工程师，写组件的能力至关重要。虽然javascript经常被人嘲笑是个小玩具，但是在一代代大牛的前仆后继的努力下，渐渐的也摸索了一套组件的编写方式。 下面我们来谈谈，在现有的知识体系下，如何很好的写组件。 比如我们要实现这样一个组件，就是一个输入框里面字数的计数。这个应该是个很简单的需求。  我们来看看，下面的各种写法。 > 为了更清楚的演示，下面全部使用jQuery作为基础语言库。 ## 最简陋的写法 嗯 所谓的入门级写法呢，就是完完全全的全局函数全局变量的写法。（就我所知，现在好多外包还是这种写法） 代码如下： ``` js test $(function() { var input = $('#J_input'); //用来获取字数 function getNum(){ return input.val().length; } //渲染元素...
# 局部刷新模板那些事 模板是每个前端工作者都会接触到的东西，近几年前端的工程化，发展的如火如荼。从基本的字符串拼接到字符串模板，再到现在各种框架给出的“伪模板”解决方案，前端模板经历了种种变革。 下面就不同时期的模板做一下回顾。 > 本文假定读者已经对`underscore`, `mustache`，`angularjs`，`reactjs`等技术有了一定的了解。否则请先看看相关资料了解下。 ## 原始的模板 提到模板，不得不提到每个前端都会经历的字符串拼接的阶段。 看下面这段代码： ```js var students = [{ name:'张三', age:'19' },{ name:'李四', age:'17' },{ name:'王五', age:'21' }] var htmlArray = [],tmplStr for(var...
# javascript语法树 这个月公司业务比较多，累死了，好久不写博客了。罪过罪过。花了段时间研究了下javascript的语法树，记录一下。虽然跟平时的写代码没有太多关系，但是了解下js的语法树结构还是有必要的。 ## javascript解析流程 在我还在上大学的时候，那时候参加软考，依稀的学过，作为一门语言。执行的时候大致需要经过以下过程： 词法分析＝>语法分析＝>语义分析＝>中间代码生成＝>优化代码＝>代码生成 当然这是编译型的语言的一般步骤。 但是对于javascript这样的解释性语言，其实只有 前面的词法分析还有语法分析，词法分析就是挨个字符的去扫描源代码，把关键token识别出来。之后通过语法分析，建立上下文关系语法树ast（abstract syntax tree），解释器再根据语法树开始解释执行。所以会比c，c++这类的慢很多。 java是生成了一个jvm的中间代码。而php也是可以生成opcode来加快速度。当然其实最新的javascript解析引擎，比如V8也做了优化，会将部分js代码编译成目标代码。 ## 语法树详解 关于语法树里面的各个节点的规范在这里可以看到：[SpiderMonkey](https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey/Parser_API#Builder_objects) > SpiderMonkey是Mozilla项目的一部分，是一个用C语言实现的JavaScript脚本引擎 首先我们看一个简单的例子，有很多库还有工具可以解析出js的语法树。比如[esprima](https://github.com/ariya/esprima),[acorn](https://github.com/marijnh/acorn)。 esprima有个很赞的在线parse的web页面：http://esprima.org/demo/parse.html# 我们直接看个最简单的列子： ``` var a = 1,b=2; /*解析后的语法树 { "type": "Program",...
# javascript分段读取的实现 最近需要做这样一个需求，就是一个接口请求，服务器端执行时间比较长，过了好久才会返回内容，这个体验是很不好的。在浏览器端就会感觉浏览器死掉了。 优化方案就是给前端浏览器一些提示，所以需要一种实时的进度条一样的东西。告诉用户，当前到底执行到什么程度了。 ## 问题实例化 首先以一个简单的例子来大概说明下问题，你去餐厅一屁股坐下来点完菜，菜要7秒种才能上来。（这边假设7秒已经很长时间了）： 为了更容易理解，我们尽量使用原生的node代码实现。 服务端代码： ``` var http = require('http'); var fs = require('fs'); var url = require('url'); http.createServer(function (req, res) { var path = url.parse(req.url).pathname;...