YangJiyuan
YangJiyuan
## 前言 使用过React的同学对于Virtual DOM并不陌生，作为React的重要核心概念，Virtual DOM凭借其高效的diff算法，让我们不用关心应用的性能问题，毫无顾忌地修改各种数据状态。在实际的开发中，我们并不需要关注Virtual DOM在一个框架中是如何运行的，但是理解Virtual DOM的实现原理却是非常有必要的，同时也有助于我们更加深入React。 ## 一、前端应用状态管理 在日益复杂的前端应用中，状态管理是一个经常被提及的话题，从早期的刀耕火种时代到jQuery，再到现在流行的MVVM时代，状态管理的形式发生了翻天覆地的变化，我们再也不用维护茫茫多的事件回调、监听来更新视图，转而使用使用双向数据绑定，只需要维护相应的数据状态，就可以自动更新视图，极大提高开发效率。 但是，双向数据绑定也并不是唯一的办法，还有一个非常粗暴有效的方式：一旦数据发生变化，重新绘制**整个视图**，也就是重新设置一下innerHTML。这样的做法确实简单、粗暴、有效，但是如果只是因为局部一个小的数据发生变化而更新整个视图，性价比未免太低了，而且，像事件，获取焦点的输入框等，都需要重新处理。所以，对于小的应用或者说局部的小视图，这样处理完全是可以的，但是面对复杂的大型应用，这样的做法不可取。 说到这里，你会说这跟Virtual DOM有什么关系呢？其实Virtual DOM就是这么做的，只是在高效的diff算法计算下，避免对整棵DOM树进行变更，而是进行针对性的视图变更，将效率做到最优化。 ## 二、什么是Virtual DOM Virtual DOM的概念有很多解释，从我的理解来看，主要是三个方面，分别是：一个对象，两个前提，三个步骤。 一个对象指的是Virtual DOM是一个基本的JavaScript对象，也是整个Virtual DOM树的基本。 两个前提分别是JavaScript很快和直接操作DOM很慢，这是Virtual DOM得以实现的两个基本前提。得益于V8引擎的出现，让JavaScript可以高效地运行，在性能上有了极大的提高。直接操作DOM的低效和JavaScript的高效相对比，为Virtual DOM的产生提供了大前提。 三个步骤指的是Virtual DOM的三个重要步骤，分别是：生成Virtual DOM树、对比两棵树的差异、更新视图。这三个步骤的具体实现也是本文将简述的一大重点。 ## 三、Virtual...
> 原文 | [A Guide To Transclusion in AngularJS](http://teropa.info/blog/2015/06/09/transclusion.html) > 作者 | [Tero Parviainen](http://teropa.info/) 在[transclusion](https://docs.angularjs.org/api/ng/service/$compile#transclusion)（注：本文将transclusion翻译为嵌入，而且从实际的运用来看也比较贴切）方面我一直有困惑。虽然我时不时会用到，但是用起来总觉得不顺手。我从来没有明确的明白这个API做了什么事，或者更确切地说是我应该用它做些什么。 据我所知，并不止我一个人对此感到困惑。当人们谈论在使用Angular的困难的时候，嵌入总是经常被大家提及。 是什么原因造成了这样一个困难的话题呢？从概念上看，我们讨论的并不是什么太复杂的东西——本质上只是移动了一些DOM元素。我认为更大的问题是显而易见的： - API很棘手，主要是因为其高阶函数和“奇怪的参数” - 部分API已被弃用，而且很难找出哪些是被弃用的 - 文档中写了很多的空话（“嵌入链接方法预绑定到正确的嵌入作用域”） - 同一个API却提供了[两种不同的特性](https://github.com/angular/angular.js/issues/3368#issuecomment-40326064)：常规嵌入和元素嵌入 直到在[我的书](http://teropa.info/build-your-own-angular)（注：本文作者[Tero Parviainen](https://github.com/teropa)写了一本书，叫[build-your-own-angularjs](https://github.com/teropa/build-your-own-angularjs)，也就是文中作者提到的这一本，书中对angular的各种特性逐一讲解）中写嵌入章节的时候我才感觉完全掌握了这个专题。虽然书中涵盖了API的诸多细节，但这篇文章是为了完成我之前就想写的用户使用指南。我想要阐明可以使用嵌入做什么以及如何去做。 这篇文章不包括API中已经被弃用的部分，而是专注于官方支持的内容。 --- “嵌入”这个词让许多人看起来不舒服，并且还经常被人诟病这是一个拼装出的词汇。...
**下面通过一些简单的示例说明Angular指令中属性的值的获取方式以及函数的使用。** ## 直接获取 ``` app.directive('my-directive',function(){ return { scope:{ attr1:'@', attr2:'=', attr3:'&' }, link: function(scope){ // scope.attr1 // scope.attr2 // scope.attr3 } }; }) ``` - `attr1` 是一次性获取 - `attr2` 是双向绑定...
## AngularJS中的依赖注入 AngularJS官方文档中对于依赖注入（Dependency Injection）以及AngularJS中的DI做出如下解释： > Dependency Injection (DI) is a software design pattern that deals with how components get hold of their dependencies. > > The Angular injector subsystem is...
git hooks想必很多攻城狮都不陌生，官方对于hooks有详细的[文档](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks)，也有网友的文章[Git Hooks (1)：介绍](https://segmentfault.com/a/1190000000356485),[GIt Hooks (2)：脚本分类](https://segmentfault.com/a/1190000000356487)，说的非常详细了，这里就不多做介绍，这里主要介绍一下如何写一个hook。 ## 一个基本的git hook长什么样？ 对git-hooks有一个入门认识的朋友都知道，hooks存放在git仓库的`.git/hooks`目录下，其中包括很多hooks，这些是在git 仓库创建的时候自动生成的，后缀名统一都是`.sample`，表示这些hooks都是默认不启用的，当把后缀名去掉之后，就变成了可以使用的hook。 ### 举个栗子 ![][1] pre-commit这个hook是在`git commit`的时候触发的hook，这个hook里面写了什么呢？代码我就不贴了，没啥劲，主要的几点就是： 1. 这是一个shell脚本 2. 这个脚本运行了一些东西然后退出了 3. 退出的时候退出的错误码不是确定的 这就是一个hook的最基本的组成：在命令行执行git操作的时候，自动执行hooks目录下相应的可执行脚本，然后根据脚本的退出状态决定此次操作是否成功。当退出的错误码不为0的时候，表示失败，操作终止，否则操作继续。 ### 模拟场景 如果现在有这样一个场景，在你的git仓库里，要求不允许提交`dist`目录，并且通过`mocha`的测试，否则不允许提交，用git hook 怎么做呢？ 首先，这是在提交的时候的一个限制，所以应该考虑使用`pre-commit`这个hook，代码就不写了（不会写shell... Orz），整个过程如下：...
前几天在一个segmentfault上看到一个文章，介绍的是作者用不到1KB的js代码实现的占位符图片，[传送门](http://segmentfault.com/a/1190000004161123)，看到之后觉得蛮有意思的，觉得这个轮子可以造一造。 之前接触过一个项目，也有图片占位符的需求，当时的做法是当图片加载失败，也就是触发onerror事件的时候，替换图片的src为一张占位符图片，这样的做法简单易行，只是缺乏一定的可配置性，如果一个页面需要多种占位符图片的话，那就得有多个这样的图供替换，如果不按照这样传统的做法，而是用js进行可配置化的生成占位符图片又该怎么做呢？ ## 思路分析 有了目的，那从哪入手呢？首先有几个问题需要捋一捋。 - 如何生成占位符图片（的地址） - 既然解决的是配置问题，有哪些可配置选项 以上问题依次分析一下。首先，img标签是需要src地址的，那么如果图片加载失败，就要替换地址，替换的地址哪来呢？又控制不了服务器...那就换一个思路，还有什么方式可以显示图片？答案就是[base64编码](https://zh.wikipedia.org/zh/Base64)。base64的概念以及用处说实话我了解不多，目前知道可以作为img标签的src属性值，也可以显示图片。那这就有点思路了，操作不了服务器，生成编码js还是有希望做到的。那么问题来了（挖掘机技术哪家强？），base64编码又该怎么生成，我可对生成编码的算法过敏。问了下Google，发现canvas对象有一个方法：toDataURL，可以将绘制好的canvas转化为base64编码。Bingo！这样就可以事先用js画好canvas，再调用toDataURL方法，不就有base64编码了嘛。 第二个问题：哪些是可配置的呢？首先想一下一个占位符图片有哪些要素，文字得有，图标就视情况而定了，颜色也是，宽高什么的都是应该的。 ## 最终效果   ## 干货代码 代码地址:[image-placeholder](https://github.com/y8n/image-placeholder) #### 使用方法 首先引入脚本 ``` html ``` 可以有多种方式进行调用 ``` javascript // 直接传递图片DOM对象 var...
fis3-hook-amd 包从v0.2.2升级到 v0.2.4的时候，发现引入D3库的项目打包会有问题。 排查的结果是 [commit#bf7bbeaa12](https://github.com/fex-team/fis3-hook-amd/commit/bf7bbeaa120aa979a3ab3c239eea1152c3f6f7e0#diff-76e550d35e425cc4e3fbc21d58dbb630R101) 中 L101 的正则匹配问题，将D3中如下正常代码匹配成了注释，继而导致parse编译失败 PS. d3版本为v4.13.0 