易迅前端团队
易迅前端团队
# 简单得尝试了一下 node-webkit 前些日子看到有人用 electron 做了一个音乐播放器，出于好奇就粗略学习了一下比较热门的 node-webkit 和 electron。这篇文章总结学习 node-webkit 后的一点心得。 ## 关于 node-webkit node-webkit 是一款由 C++ 编写，致力于让开发者使用 Web 技术开发不同操作系统下的本地应用的软件。从名字中可以看出，node-webkit 由 Chromium 和 Node.js 结合而成，所以开发者在开发过程中既可以使用传统的 Web 技术，也可以使用 Node.js 给我们带来的新功能。 node-webkit...
# 整站侧边栏开发实践（三）——转场 转场，即是其字面意思，从场景转换到另一个场景，做过单页应用的同学相必对转场两字并不默认。在整站侧边栏的需求中，各个栏目的内容在切换的过程中需要一些过渡效果，这里就借用单页应用中常见的术语，姑且称之为“转场效果”了。 既然名字都是借鉴单页应用而来的，那么技术实现上自然也是仿照单页应用的转场实现。接下来我们就聊聊转场效果的实现。 ## 入场与出场 侧边栏中每一个栏目的内容对应的转场效果都需要有两个过渡效果，即入场效果与出场效果，这里我们仅以 CSS3 方式实现这两种过渡效果。对于 IE8，就让它自便吧。 ### 入场效果 我比较喜欢 POP 效果，这里仅以 POP 效果做例子。 首先需要知道的是，在内容区域，隐藏着 N 个栏目的内容面板（`div` 元素）。 ``` HTML ... ``` 我们需要给所有的面板加上一些样式，以满足我们后续的动画需求和隐藏需求。 ``` css .bar-panel {...
# 把嵌套的 if else 撸撸平 **_我想这篇文章如果有副标题，它应该是：code review 带来的代码优化。**_ 怎么从一堆的回调中抽身，相信大家已经了解过 promise 等方法。今天我们来看看，我是怎么将代码从一堆 if else 嵌套中解放出来的。 ## 遇到的问题 在我编写一个游戏的时候，键盘（不光是键盘啦）的上下左右键在不同的面板下具有不同的功效，大致如下： | 按键 | 地图界面 | 命令面板 | 物品面板 | 数量面板 | | ---...
# 利用 jQuery.when 简化代码 最近有一些项目，是从已有的功能上新增一些数据，比如个人账户中新增一些数据。后端并没有在原有接口上提供所需数据，而是希望我们调用另一个接口，这个接口仅仅提供新增的数据。 由于新接口和旧接口在数据上并没有依赖关系，所以我们可以等两个接口都请求完成后将数据填充到 DOM 结构中。在这个问题的解决过程中就出现了一些不太简洁的代码，比如： ``` javascript var len = 2, data = {} cb = function () {...} //一个请求 $.ajax({ url: url1, ... }).then(function (d) {...
# 易豆每日签到功能实现 为了更好的推动电商媒体化战略，产品希望在网站的顶部增加“每日签到”功能，每天签到可以赠送易豆（类似于积分的概念，目前仅用于报名[众测活动](http://zhongce.yixun.com)，原因是众测活动太火热了，用易豆做为门槛）。由于是偏向社交的功能，所以在交互方面的效果会更加注重一些。 目前初版已经完成（年后发布），效果图如下：  下面就来说说签到功能中一些效果的实现。 ## 数字动画 从效果图中可以看到，当获取到用户的易豆数量以及签到成功后增加易豆的时候，易豆数量都会有一个不断变化数字的动画效果。实现这个效果的方法如下： ``` javascript /** * 数字变换动画 * @param {Number|String} oldNumber 初始值 * @param {Number|String} deltaNumber 增量 * @param {Number} time 动画时长 */...
# 整站侧边栏开发实践（二）——内容 上一节我们了解了侧边栏实现过程中利用栏目类实现侧边栏栏目的添加。这一节我们讲讲栏目展开后的内容区域的处理。 ## 消息提示设计 在内容区域的交互过程中，涉及到许多提示消息，比如异步加载过程中的 loading 提示，删除收藏、添加购物车等提示。所以在编写栏目的充填方法之前需要先定义好一套简易的消息 api。 - 满足简单消息状态（成功、失败、警告）； - 具有过渡动画。 先在模板中埋一个 DOM 节点： ``` javascript ``` 然后我们使用这个节点展示/隐藏提示消息。 ``` javascript var tipTimer function _showMsgTip (txt, type) { tipTimer...
# 整站侧边栏开发实践（一）——栏目 我们主站上至今没有侧边栏，但是这个功能其实在主站首页改版的需求中已经提出，而令大家迟迟未见其踪迹的原因是因为里面的部分接口尚需完善。 目前在产品的需求中，侧边栏需要有登录、购物车、我的收藏、我的足迹、APP客户端二维码、回到顶部功能，这其中有些功能是必然会一直持续的，而有些功能可能是尝试性的，不长久的。比如我的足迹功能设计就相当的简单的，数据是存放在客户端这边（考虑到后端人力关系先做个简易版）。所以在开发之初我把可以简单的切换侧边栏栏目做为首要实现目标。  ###### 侧边栏效果图 ## 抽象栏目类 从功能上看，购物车、我的收藏、我的足迹的表现基本一致，都是点击后展开侧边栏并显示内容。所以我们可以将它们抽象为栏目类（由于其他的栏目比较简单，比如登录是跳转 URL，所以不做抽象）。 每个栏目在侧边栏上会有图标和标题，我在 CSS 中使用不同的 class 以展现不同的图标，所以栏目类需要接受 class 和标题作为参数。而每个栏目在打开侧边栏内容区域后需要完成不同的动作，比如打开我的收藏需要展示用户的收藏商品，打开购物车则展示用户购物车中的商品等。所以出了 class 和标题，栏目类还需要接受一个回调作为后续执行方法（填充栏目内容）。 实现代码比较简单： ``` javascript var Item = function (klass, text, fn)...
# 关于 CORS —— 小船翻在了 IE8 的小沟沟里 如今使用 CORS 技术做跨域通信已经不是什么新鲜事情了，我们网页中的很多接口在跨域方案上也首选 CORS。然而 CORS 看似完美的背后，却有值得我们注意的地方。 我们团队在开发新需求的时候，测试 MM 发现 IE8 下网页中的一个 CORS 接口返回异常，提示没有权限，排查这个问题的过程中加深了我们对 IE 实现 CORS 技术的认知。 ## CORS 是什么 网上已经有太多的篇幅描述 CORS 是什么，这里简单介绍一下。CORS...
# HTA, HTML Application 这年头，前端框架不支持移动原生应用开发都会让人觉得奇怪了。而使用前端技术开发桌面应用更是很早就有。大名鼎鼎的 node-webkit 就是其中一员。而我们今天要讲的，是 node-webkit 的爷爷辈老物 —— HTA，HTML 应用程序。 ## Hello world 编写 HTA 格外的简单，用一个文本文档，写上几句 HTML 语句，保存为 `.hta` 格式，双击即可运行。 ``` HTML Hello world ```  我们再来添加一些样式试试： ```...
# Google Safebrowsing 与 前端静态资源加载 这些年随着互联网的兴起，钓鱼网站、恶意站点也是层出不穷。浏览器生产商为解决这些问题费了不少力，想了不少解决办法。比如给 `alert` 对话框添加了 “阻止此页面创建更多对话框” 选项以避免浏览器被恶意的无限弹框；增加了恶意站点的提示，需要手动加入白名单后才可以访问等。 这些防止用户受到伤害的措施中，有一项是我们今天要讲述的主角 —— Google Safebrowsing。它会对网页请求的静态资源经由浏览器与谷歌通信以识别资源是否安全，这也就改变了我们对前端静态资源加载的一般认知。 ## 什么是 Google Safebrowsing Google Safebrowsing 是由谷歌提供的一个服务，它存有一份具有潜在危险的资源 URL 列表，实际用于比对的应该是 URL 字符串的哈希值。当对资源 URL 的哈希进行碰撞检测命中后，会告知用户该资源具有潜在危险。 目前 Firefox、Chrome 和...