易迅前端团队
易迅前端团队
# 利用 Electron 开发快速截图工具（二） 上一篇我们讲到主界面开发完成，这一篇我们讲子界面的开发。 子界面的生命周期比较短，罗列如下： - 窗口打开并显示截图； - 用户截图点击确定后，发送截图数据至主进程； - 主进程关闭子界面。 我们来看看子界面中的一个个功能是如何实现的。 ## 子界面中元素 ### canvas 元素 我选用了 `canvas` 作为截图的容器，主要是考虑到后续用户划取选区时比较方便。 - `DIV` 难以实现遮罩中的选区透明的效果； - `DIV` 在从右至左，从下至上划取选区时需要不断的计算起始点坐标（左上角为起始点）。 ### 按钮元素 子界面中有三个按钮：...
# 利用 Electron 开发快速截图工具（一） 上周和大家介绍了下 Electron，这周我们利用 Electron 实战开发一款简易的屏幕截图工具。先在这里罗列一下这款工具的一些需求点： - 主界面小巧，始终悬浮于屏幕之上，且不占据任务栏位置； - 支持快捷键截图与退出应用； - 支持保存截图文件； - 截图存于剪贴板，便于复制黏贴。 --- > 名词解释： > - 主进程指 main.js； > - 主界面指 index.html，是一个渲染进程； > - 子界面，也是一个渲染进程。...
# 认识Shadow DOM 你知道 Shadow DOM 吗？这个概念你可能不清楚，但我可以确定，你肯定遇见过它们。 ## Shadow DOM 在哪里 我们来看一个在 Chrome 开发者工具下的截图。  有没有看见一个 `#shadow-root` 标记？那就是 Shadow DOM 啦。 上图中的 Shadow DOM 是笔者通过 JS 创建的，我们来看一个原生的例子。 ...
# 移动端构建可滑动区块 在移动设备中，页面中元素的滑动一直是一个困扰人的问题。PC上一个简简单单的`overflow: auto`便能解决的事情，在移动端却需要各种“花式”解法。 这里我们先简单罗列一下JS和CSS常见解法。 ### 使用iScroll来模拟滑动 [iScroll](http://cubiq.org/iscroll-5)是一款强大的用于移动端滑动效果的插件，很多移动端应用都会用到它来制作滑动效果。它除了具有实现滑动中的回弹、势能、吸附边界、滚动条等效果外，还有实现slide的能力，放大缩小，无限滚动，键盘绑定，滚轮控制等额外功能。iScroll为了使滑动效果更加流畅，会阻止实例化对象中的元素节点上的click事件的默认行为和冒泡，再动态的生成事件对象，触发事件。这种追求完美的解决方案也是令人生畏的地方。抛开一些安卓机型无法阻止默认事件的例外(遇到了也挺烦人的)，iScroll的体积也更适合在混合应用中引用，在流量问题凸显的移动端，似乎我们需要的是一款轻巧的产品。 **在iOS中，iScroll表现相当不错，但在安卓机下流畅度一般，主要是因为安卓机在CSS3 transition中使用贝塞尔曲线做扭曲函数表现不佳。** ### 使用overflow:auto达到原生滑动 在移动端的网页中，实现滑动效果变得不再那么困难是在安卓3.x版本也开始支持`overflow:auto`后，在安卓2.3以及更老版本中，网页对待`overflow:auto`和`overflow:hidden`是一样的。而在iOS中，`overflow:auto`的表现也不理想，一旦手指离开屏幕，滑动元素就不再有任何动作，既没有回弹效果，也没有“惯性”动画效果。只有当我们加上`-webkit-overflow-scrolling: touch`之后，滑动效果就变得和原生的一样了(iOS下存在不能吸附边界的小遗憾)。 需要注意的是： - **iOS中多个`overflow:auto`滑块嵌套有严重BUG，[测试地址](http://ajccom.github.io/nicescroller/test.html)。** - **安卓下滑块没有回弹效果，比较生涩。** 虽然使用CSS方式能够使我们简洁高效的开发出一个滑动效果，但是考虑到为了使网页效果更具普遍性、通用性以及能够满足我们更多的交互，我们仍有必要开发一款轻巧的滑动插件以满足我们一些小小的愿望（比如安卓中的回弹效果，iOS下解决吸附边界问题等）。 ## 认识NiceScroller NiceScroller是一款体积轻巧(gzip开启时2.1K)，功能齐全的插件，能够满足我们对滑动效果的需求。 NiceScroller支持的功能： - [x] 边界回弹； - [x] 自动判断滑动方向；...
# 认识浏览器缓存 据SmartBear研究表明，Amazon加载时间每延长1秒一年就会减少16亿美元的营收。那么如何提高网站性能，加速网页呈现速度？今天我们先以浏览器缓存为切入点，学习一下如何利用浏览器缓存，提速我们的WEB应用。 ## 什么是浏览器缓存 浏览器缓存可以理解成为你提供客户端本地副本的服务，使用这个功能，能够减少HTTP请求，提升网页呈现速度。当我们主动告知浏览器，哪些内容需要缓存后，浏览器将会为这些资源创建一个本地副本。下次缓存命中时，就可以调用本地副本而非再次请求服务器获取完整文件了。 ## HTTP头的秘密 如何告知浏览器，我的资源需要被缓存呢？答案就在请求资源的HTTP响应头中。这里我们列一下响应头中设置的与缓存相关的字段： | 字段名 | 说明 | | --- | --- | | Cache-Control | 指定缓存时间，缓存命中时不会发送请求 | | Expires | 指定过期时间，缓存命中时不会发送请求 | |...
# 移动端调试工具 [Mobile Console](https://github.com/yixunfe/mobile-console) 介绍 > 移动 Web 发展至今，手机浏览器却一直没有一个原生的 devTool 供我们开发者使用。虽然已经出现了很多与桌面联调的优秀方案，但面对突发的线上问题需要快速定位时，手机屏幕前的你是不是也显得手足无措？如果能够仅仅依靠 Web 页面中预设的一个控制台检查问题，那将是我们都希望拥有的美好明天。 关于开发一款移动端调试工具的想法其实由来已久，从很久以前在页面上打印 `window.onerror` 时就开始有这个想法了。而最终促成 Mobile Console 诞生的机缘则是发现了 [AlloyLever](https://github.com/AlloyTeam/AlloyLever) 项目。 不得不说 AlloyLever 项目让我眼前一亮，我发现这正是我寻求已久的一款漂亮的可视化工具。但是当我使用后，发现它所提供的功能和我的需求还是有些出入的。 ## 开发缘由 首先让我们一起理解为何需要开发如此一款由 JS 构建的调试工具。 相信大家都有了解如何在桌面调试移动端网页的经验。比如使用...
# 使用 Tool Box 进行移动端调试 好消息，好消息，工具盒子加入了移动端与 PC 端联调功能。 我们先来看个 GIF，  ###### 调试示例 是不是很方便？接下来我们来讲解如何使用 Tool Box 的移动端调试功能进行真机调试。 ## 如何真机调试 ### 开启代理服务器 真机调试需要保证手机在 WIFI 环境下与 PC 同一网段中，然后通过如 Fiddler 之类代理设置后使手机通过 PC 进行网络请求。...
玩转虚线边框
# 玩转虚线边框 为一个 `DIV` 元素设置虚线边框，大家都知道怎么做。简单的设置 `border: 1px dashed #000` 即可。这里面 `dashed` 即能产生我们今天要讲的"猪脚" —— 虚线边框。 那么虚线边框有什么样不广为人知的秘密呢？我们用三个效果来和大家一起体验下虚线边框的魅力所在。 ## 透明三角 当我们在设计图中发现有一个三角形，你可能为了省去一张图片而选择使用 `CSS border` 方式模拟三角形。 ``` css div { width: 0px; height: 0px; border-width:...
# checkbox 的第三种状态 我们知道，checkbox 元素的状态有两种，一种是 `checked` ，一种是 `unchecked` 。但实际上，checkbox 元素还有第三种状态 `indeterminate`。 ## indeterminate 状态 我们看看 MDN 中关于 `indeterminate` 状态的描述： > The indeterminate attribute is used to indicate that the checkbox...
# NPM 悲剧了！ 作为一个前端er，相信你不会不认识 NPM，而就是这个广为人知的 NPM，最近悲剧了！ 有个叫做 Azer 的开源贡献者，因为不满 NPM 官方对于他个人项目的干扰，删除了他在 NPM 上发布的所有开源项目。而其中的一个仅 11 行代码的 `left-pad` 模块的消失，直接造成了包括 Babel、React Native 等重量级开源项目无法安装。这一事件直接引爆了 NPM 圈。 ## 关于 left-pad 事件的讨论 我们先来看看一下子广为人知的 `left-pad` 模块的代码： ...