易迅前端团队
易迅前端团队
# Canvas 操作图像像素 HTML5 中最吸引我的新标签就是 canvas，canvas 元素为我们操作图像带来了更多的可能。 ## ImageData 对象 canvas 元素给我们提供了一系列绘制 2d 图像的 API，比如绘制一个正方形或者一个椭圆等，同时我们也可以利用 `getImageData()` 方法返回的 `ImageData` 对象，获取一个图像的像素点。 ``` javascript var ctx = canvas.getContext('2d') // 获取 ImageData 对象 var...
# 巧用 JAVASCRIPT 中的位运算 最近边忙边啃朴神写的《深入浅出 Node.js》，在讲述 Node.js 中模块机制的章节中看到了一段话： > Javascript 的一个典型弱点就是位运算。Javascript 的位运算参照 Java 的位运算实现，但是 Java 位运算是在 int 型数字的基础上进行的，而 Javascript 中只有 double 型的数据类型，在进行位运算的过程中，需要将 double 型转换为 int 型，然后在进行。所以，在 Javascript 层面上做位运算的效率不高。 在书中，这段话告诉我们，为了提高模块的性能，在频繁出现位运算的需求时，我们可以使用 C/C++...
# 使用 JSDUCK 生成 API 文档 > “程序员最讨厌的2件事： ①代码没文档； ② 写文档。” :joy: 如何在工作过程中简单方便的维护好文档，应该是每个程序员都需要考虑的问题。今天我们来认识一下一款常见的文档生成工具 —— JSDUCK。  ## 安装与使用 如果你安装了 Ruby，可以使用 gem 安装 JSDUCK。 ``` gem install jsduck ``` WINDOWS 下还可以直接下载...
# 学习 SVG（四）—— 复用图形 在复杂的图形中，经常可以看见重复的图形。在 SVG 中确实也存在着可以为我们实现复用图形的元素。 ## use 元素 use 元素可以简单的利用它的 `xlink:href` 属性声明引用的图形。比如我们要引用一个 id 为 `picture` 的图形，可以这么写： ``` HTML ... ``` 除了直接引用同一个文件中的元素，use 元素还可以引用外部文件中的 SVG 内容。比如我们可以将所有需要复用的元素都打包在一个文件 identity 中： ``` HTML...
# 学习 SVG（三）—— 路径 我们已经在本系列的第一篇[文章](https://github.com/YIXUNFE/blog/issues/26)中介绍了 SVG 中的一些基本形状，现在我们一起来学习一下路径元素 path 的一些知识。 ## path 元素中的命令 | 命令 | 参数 | 效果 | | --- | --- | --- | | M m |...
# 学习 SVG（二）—— 变换 这篇我们来学习一下 SVG 中的变换效果，有点类似 CSS 的 `transform`，但是 SVG 的变换是属性。 ## 效果列表 | 变换 | 描述 | | --- | --- | | translate(x, y) | 按照指定的 x...
# 浅谈前端缓存粗粒度 缓存对于我们前端来说是一个用于提高网页性能非常重要的工具。简单的“缓存”两字，其中包含了许多有趣的知识，其中对于缓存粗粒度的讨论也一直不绝于耳。 目前见过的缓存粗粒度分为三类： - 以全部文件为最小单位； - 以单独文件为最小单位； - 以字符为最小单位。 下面让我们一起看看这三种方案的到底是如何处理生产环境下的缓存的。 ## 以全部文件为最小单位 这种做法相当的直白而且由来历史悠久，无论开发过程中的文件有多少个，整个打包成一个文件后在页面中引用。这样做带来的好处是可以最大的减少对资源的请求数，至今仍使用这种方法进行线上缓存处理的网站还有很多（特别是某些后端框架自带合并资源功能时）。然而这种方案的缺点也十分明显。 由于太粗放，开发环境中的一个文件被修改，就会导致整个页面的资源都将失效。客户端不得不因为一小部分的修改，而重新下载所有的内容，这是移动互联网大环境下不能被容忍的（流量就是钱，客户也是，公司也是）。 另外一点是对于开发人员来说维护困难。由于每个页面的业务逻辑都不相同，所以每个页面引用的资源文件也不会相同。但是当一个整站共用的文件出现了修改，那么整站的资源内容都要重新打包上传，如果不是某些框架或者工具为你处理的话，相信大家都会疯掉。 ### 改良版本一 —— 一分为二 针对上述两个硬伤，马上出现了方案的改良版。将整站通用的资源打包一份，页面级的资源打包一份。页面上引用的资源数不再是一，而是二了。 改良后的方案，在遇到整站共用的内容发生修改时，仅仅重新打包整站共用资源即可，大大降低了维护成本。而遇到页面级逻辑发生修改时，用户也仅仅是重新下载新的页面级资源，相比以前好得多了。 ### 改良版本二 —— 三层架构 所谓的三层架构，即将资源划分成 `通用底层 - 通用组件层...
# 使用 stroke-dasharray 制作环形图 近期项目中有一个环形图的需求，经过大家研究后决定使用一款开源插件完成。选用插件主要是考虑到需要兼容 IE678，而目前我们团队中没人熟悉 VML。但是这里我仅简单介绍下我们完成的 N 个实验性方案中的一个 —— 使用 `stroke-dasharray` 制作环形图。 ## 原理 以前在[《玩转虚线边框》](https://github.com/YIXUNFE/blog/issues/11)的文章中提及过，SVG 元素可以通过 `stroke-dasharray` 设置虚线边框的长度以及虚线之间的宽度。所以我们只需要通过圆形的路径，使用虚线长度表述所占百分比即可。 比如环状图中有 4 个区域，每个区域各占 25%，那么每个区域应该设置虚线长度为周长的 25%，虚线与虚线之间的间距应该是周长的 75%。 我们可以使用 `circle` 元素画圆，并指定它的圆心与半径。由于我们最终需要的是圆环，那么我们也需要给圆形指定边宽 `stroke-width`。 ```...
# 理解 JS 中的函数表达式与函数声明 常用闭包的同学肯定很清楚下面一段代码： ``` javascript //通常的闭包写法 (function () { ... }()) ``` 那么我们的问题来了，为什么要在 `function () {...}()` 之外用圆括号包裹呢？解答这个问题，就需要我们理解 Javascript 中函数表达式与函数声明的概念。 ## 函数定义带来的错误 虽然 `function () {...}` 看上去像是一个函数声明，但是由于没有函数名，它的本质其实是一个函数表达式。我们看下规范中对于函数声明与函数表达式的定义：  可以看出来，函数声明是必须带有函数名的。所以在直接执行...
# SEO 优化，旁路服务处理 AJAX 数据 平时接触 SEO 不算多，但是公司最近挺重视 SEO 的，因为我们除了商品，还有内容频道。这个内容频道叫[易启玩](http://zdm.yixun.com/)，上面有许许多多的关于测评、导购、晒单等等的文章。公司希望这些文章能给我们带来用户，就特意为我们招聘了一位 SEO 专员。 专员上来的第一件事，当然是纠正我们过去犯下的 SEO 禁忌。这里面有一条，就是 ajax 接口方式获取数据。 ## ajax 接口方式 与 源码输出方式 因为大多数爬虫不会运行 JS（据说谷歌的会），它只能分析服务器给到的源码，即我们在浏览器右键查看源码得到的内容，这种我们通常成为源码输出方式。所以我们在项目中，需要把用 ajax 接口方式获取的数据嵌在源码中输出。 比如一个列表，本身为了照顾用户体验，分页通过 ajax 拉取数据，这样可以实现无跳转刷新。但是这对于爬虫来说，就拿到什么信息了。于是改成降低体验，将 ajax...