易迅前端团队
易迅前端团队
# 麻麻不会告诉你的几点 Javascript 知识（一） ### 直接使用 id 获取元素 当给 HTML 元素一个 id 后， ``` HTML ``` 我们就可以使用 `getElementById` 方法获取该 DOM 对象。而除了这种方式外，浏览器还提供了更加方便方法。 ``` javascript window.foo === document.getElementById('foo') // true ``` 直接使用...
# 认识 Lazy Function Definition 记得有一期的 blog 我们讲了通过 code review 、变量命名技巧等尽可能的去除代码中的 `if else`。今天我们再来认识一个方法，它可以让我们的程序在运行过程中自动“瘦身”，这种方法一般称之为 Lazy Function Definition。 ## 定义函数也能懒？ 我们接触过很多“懒”的场景，常见的比如图片懒加载，数据懒加载，那么函数也可能“懒”吗？ 通常我们在定义一个函数后，即使没执行，JS 引擎也已经将函数解析好只等待程序调用了。但是一个函数是可以在其内部定义子函数的，而内部定义的子函数只有在这个父函数被执行时才会被引擎解析并放入内存。 ``` javascript var son function parent () { son...
# Event Loop & Message Queue 这些年提到 Event Loop 的文章已经有很多了，为什么在这里又重新拾起这个话题，主要还是希望大家能对 Javascript 的运行环境是如何处理异步操作有更多的了解。当回忆起最初写 Javascript 程序的时候，想必你也和我一样，困惑于 Javascript 语音的异步特性。比如： ``` javascript setTimeout(function () { console.log(0) }, 0) console.log(1) // //1 //0 ``` 这个简单的程序的运行结果，在当时也出乎了我的预料。...
# Promise的队列与setTimeout的队列的有何关联？（内容转自知乎） ##### 本篇文章内容来自[知乎上的一个问题](http://www.zhihu.com/question/36972010/answer/71445911?utm_campaign=webshare&utm_source=weibo&utm_medium=zhihu) ## 令人疑惑的问题 执行如下代码： ``` javascript setTimeout(function(){console.log(4)},0); new Promise(function(resolve){ console.log(1) for( var i=0 ; i 作者：[何幻](http://www.zhihu.com/people/thzt) > 链接：http://www.zhihu.com/question/36972010/answer/71338002 > 来源：知乎 > > 原因：有一个事件循环，但是任务队列可以有多个。整个 script 代码，放在了 macrotask queue...
# 让浏览器为你朗读 [上一篇](https://github.com/YIXUNFE/blog/issues/23)我们提到在 Speech API 中有语音合成的部分，只可惜该 API 只有浏览器启用实验性功能后才会生效，这就给我们在实际应用中实现语音合成造成了极大地麻烦。这里我为大家介绍两个可选方案。 ## speak.js [speak.js](https://github.com/kripken/speak.js) 是基于一个 C++ 的开源语音合成软件 [espeak](http://espeak.sourceforge.net/) 制作而成。它利用一款叫做 [Emscripten](https://github.com/kripken/emscripten) 的工具将 C++ 源码转成 javascript，让其能够在浏览器中运行。 **说实话，Emscripten 这个工具比 speak.js 更加让我感兴趣，大家可以去[看看](https://github.com/kripken/emscripten/wiki/Porting-Examples-and-Demos)都有哪些项目被转到了浏览器下运行。** 话题扯回来，将 speak.js 中的 demo.html 用浏览器打开，语言合成确实是生效的，但是除了英文，没有其他的语言可选，需要手动修改代码后再次编译，这样切换语言显得不是很方便。...
# 使用 PhantomJS 实现自动化页面体检报告（二） —— 定时检查页面 回到[上一篇](https://github.com/YIXUNFE/blog/issues/20)的出发点，出门在外，如何能够保证我们的页面能够正常呢？是不是应该带个电脑，是不是上网检查一下？ PhantomJS 来为你解决难题。利用 PhantomJS，我们可以定时检查页面状态并记录在日志中。 **如果你不了解 PhantomJS，推荐你先阅读这篇[文章](https://github.com/YIXUNFE/blog/issues/20)。** **文章中仅仅使用 PhantomJS 进行定时检查，但在实际环境中，推荐集成 CI 工具执行定时任务。** ## 构建一个定时任务 我们以检查易迅商详页为例： > 场景：有 3 个特殊商品，需要我们每 6 小时检查一次商品价格，并记录在日志中。 分析一下场景，我们需要实现的功能点有： - 遍历多个商品； -...
# 使用 PhantomJS 实现自动化页面体检报告（一） —— PhantomJS 学习 国庆长假，7 天不在公司，着实担心会不会出个什么问题，身边不备个电脑这都不敢出门了呐。 那我们是否应该实现一个自动化的页面体检工具，以帮助我们周期性的为页面体检并发送体检报告呢？ 利用 PhantomJS 就可以帮助我们实现这些功能。在开始之前我们先介绍一下 PhantomJS。 ## PhantomJS 介绍 打开 [PhantomJS 官网](http://phantomjs.org)，就会看到一段介绍： > PhantomJS is a headless WebKit scriptable with a JavaScript...
# 使用 ES6 去编程 随着今年 Node.js 4.0.0 版本的发布，ECMAScript 6（ECMAScript 2015）再次进入了我们的视野。这篇文章不讲解 ES6 的新特征，只讲解如何在我们的项目中使用 ES6，是到了直接使用 ES6 写代码的时候了。 虽然最新的 Node.js 已经支持了 ES6 语法，但对于我们 Web 前端来说似乎在使用方面还有一些障碍摆在面前。从各大浏览器对 ES6 的支持情况看，目前还难全线使用 ES6 进行开发。 下图是 ES6 中展开运算符的支持情况（截图来自 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_operator)）：...
# 用 PS 去切图 作为前端，你可能认为用 PS 切图那是重构工程师需要负责的内容，并没有多大必要学习切图技巧。这里我本着“能多会一点就能少求人一点”的宗旨，还是给大家简要的讲解一下，如何使用 PS 去切图。 ### 职业细分 在讲解技巧之前，我先哆嗦几句职业细分给我们带来的好处。从人类历史的发展上来看，职业细分是对我们文明的产生有着极大的作用的。人类通过职业细分，从最初的采集和狩猎，细分出种植、畜牧、工匠等等，乃至到今天各种各样类目繁多的职业。职业细分的目的在于可以让我们更好的集中注意力在更小的范围上，这样能使我们在这个范围中创造更高效的收益。 ## 准备工作 - 确认安装了 Adobe Photoshop; ## 界面介绍 下文中提及的术语可以对应下图的区域。  这里为了减小篇幅，就不多做 PS 中各项工具的功能介绍了，大家可以通过 PS 教程了解应用中各菜单项、工具等的功能。 **工具栏与面板位置可以改变，截图仅代表笔者的设置。** ## 初始设置...