• 图片放大镜效果实现过程详解

    Posted by : lon.y@qq.com on 2017年7月4日

    由项目需要,原生写了个详情页图片放大镜的效果,扔上代码供学习分享,也作为日常笔记… 效果如图(例子中偷偷链了张天猫的图片,希望没啥事 -。-): 实现过程教简单,但我们还是从css开始分析,过程如下(图片已正方形为例): css: /* 图片容器 */ .imgBox{ width: 200px; /* 各位大老爷们看着办 */ height: 200px; /* 各位大老爷们看着办 */ position: relative; /* 必需 */ } /*

    阅读全文...

  • Async/Await替代Promise的6个理由

    Posted by : lon.y@qq.com on 2017年7月4日

    译者按: Node.js的异步编程方式有效提高了应用性能;然而回调地狱却让人望而生畏,Promise让我们告别回调函数,写出更优雅的异步代码;在实践过程中,却发现Promise并不完美;技术进步是无止境的,这时,我们有了Async/Await。 Node.js 7.6已经支持async/await了,如果你还没有试过,这篇博客将告诉你为什么要用它。 Async/Await简介 对于从未听说过async/await的朋友,下面是简介: async/await

    阅读全文...

  • 3 月值得关注的 15 个 JavaScript 和 CSS 库

    Posted by : lon.y@qq.com on 2017年7月4日

    Tutorialzine 是一个教程资源网站,每月都会发布一些优秀资源,以让读者了解最新最酷的网络开发趋势,本月同样精心挑选了 15 个 JavaScript 和 CSS 供大家参考学习。 Propeller Propeller 是一个基于 Bootstrap 和 Google’s Material Design 语言的 CSS 组件框架。它包含 25 个组件,响应敏捷,具有典型 Material Design 动画的特点。该项目可以作为 Bootstra

    阅读全文...

  • 你需要了解的 Node.js 模块

    Posted by : lon.y@qq.com on 2017年7月4日

    Node 使用两个核心模块来管理模块依赖: require 模块,在全局范围可用——无需 require(‘require’)。 module 模块,在全局范围可用——无需 require(‘module’)。 你可以将 require 模块视为命令,将 module 模块视为所有必需模块的组织者。 在 Node 中获取一个模块并不复杂。 const config = require('/path/to/file'); 由 require 模块导出的主要对

    阅读全文...

  • 从一道坑人的面试题说函数式编程

    Posted by : lon.y@qq.com on 2017年7月4日

    一道著名的坑人题,可能一些同学见过: ['2', '3', '4'].map(parseInt); 说出上面代码的执行结果。 如果不过脑子的说是 [2, 3, 4],那么肯定是错了。实际上,真正的执行结果是 [2, NaN, NaN]。为什么会这样呢?是因为 map 的算子是有两个参数的,第一个参数是被迭代数组的元素,第二个参数是该元素的下标。所以 ['2', '3', '4'].map(parseInt) 实际上相当于执行了 [parseInt('2',

    阅读全文...

  • 移动端输入框填坑系列(一)

    Posted by : lon.y@qq.com on 2017年7月4日

    输入在移动端是一个很常用的功能,那么输入框必然是一个很重要的部分。然而,移动端输入框总会遇到各种各样的问题,无论是样式还是ios和android两端体验不一致都是很让我们头疼的问题,那么如何使移动web的输入框体验更贴近原生也成了一个需要我们多多思考和研究的问题。 一、文字输入限制问题 我们拿最多可输入16个字为例。当输入字数(注意,不是字符长度)超过16字时,会触发tips提示,并且不能继续输入。 办法一: textarea可以使用maxlength进行

    阅读全文...

  • 如何通过 Web 技术实现一个简单但有趣的 AR 效果

    Posted by : lon.y@qq.com on 2017年7月4日

    增强现实(Augmented Reality,简称AR):是一种实时地计算摄影机影像的位置及角度并加上相应图像、视频、3D模型的技术,这种技术的目标是在屏幕上把虚拟世界套在现实世界并进行互动。 本文将让你了解“如何通过 Web 技术实现一个简单但有趣的 AR 效果”。 实现分析 正如文章开头说道:AR 是将真实环境与虚拟物体实时地叠加到一个画面。因此我们需要通过摄像头实时获取真实环境,并通过识别算法识别与分析真实环境中特定的物体,然后结合得到的数据,将虚拟

    阅读全文...

  • 13 个最佳 JavaScript 数据网格库

    Posted by : lon.y@qq.com on 2017年7月4日

    JavaScript 是一种通常被用在网页开发中的编程语言。它主要是在互联网上的网页浏览器中开发出效果出众且可交互的特效。它是客户端脚本语言中的一种,是被用来作为通过用户的网页浏览器进行处理的源代码。JavaScript 是动态、高级、可解释且无类型的编程语言。JavaScript 主要被用在不是基于 Web 的环境之中,像是特定站点的浏览器,桌面小部件以及 PDF 文件。事实上,JavaScript 还被程序员们用在了视频游戏开发之中。 数据网格可以帮助

    阅读全文...

  • 深入理解 JSON

    Posted by : lon.y@qq.com on 2017年7月4日

    我们先来看一个JS中常见的JS对象序列化成JSON字符串的问题,请问,以下JS对象通过JSON.stringify后的字符串是怎样的?先不要急着复制粘贴到控制台,先自己打开一个代码编辑器或者纸,写写看,写完再去仔细对比你的控制台输出,如果有误记得看完全文并评论,哈哈。 var friend={ firstName: 'Good', 'lastName': 'Man', 'address': undefined, 'phone': ["1234567",un

    阅读全文...

  • JavaScript 中的遍历

    Posted by : lon.y@qq.com on 2017年7月4日

    编程这么多年,要是每次写遍历代码时都用 for 循环,真心感觉对不起 JavaScript 语言~ 对象遍历 为了便于对象遍历的测试,我在下面定义了一个测试对象 obj。 测试对象 // 为 Object 设置三个自定义属性(可枚举) Object.prototype.userProp = 'userProp'; Object.prototype.getUserProp = function() { return Object.prototype.user

    阅读全文...