《每周一点canvas动画》——从2D到3D

前面的章节我们介绍了2D层面的canvas动画，基本上如果你对原理和概念都理解了，一般的2D层面的动画对你来说都是小菜一碟。从这一章开始我们介绍如何使用2D的canvas来渲染3D系统。1.CSS3与webGL提到3D效果，你可能首先会想到css3中的3D动画。通过它，单个元素或是整个页面都可以通过动画，图片滤镜，以及2D或3D的变换变得生动起来。使用它来构建3D效果，一个

业界 2016年08月06日

《JavaScript高级程序设计》笔记系列3-- 数据类型

数据类型ECMAScript 中有 5 种简单数据类型（也称为基本数据类型）：Undefined、Null、Boolean、Number和 String。还有 1 种复杂数据类型——Object，Object 本质上是由一组无序的名值对组成的。typeof操作符typeof 检测给定变量的数据类型var message = "some string";alert(typeo

业界 2016年08月08日

如何打造一个令人愉悦的前端开发环境（二）

前情提要上一篇文章介绍了目前前端比较流行的各种编辑器，以及各种流行的打包方式，最后给了一个Gulp的例子，这个例子还是14年的时候写的，还有一些可以优化的空间，就不讨论了，这篇文章主要讲目前火热的打包构建方式--Webpack的使用方式。主菜--没有开胃汤其实Webpack的入门指导文章非常多，配置方式也各有各样，这里我推荐题叶大神的入门级指南--Webpack 入门指迷，

业界 2016年08月08日

用 JS 更改元素的属性

用 bigSlide 生成的可滑动侧边栏需要更改其定位和高度属性，更改定位令其与中间内容区域的顶部对齐，更改高度令其与中间内容区域的底部对齐。这个问题可以拆分为下面几个需求来依次实现：更改侧边栏定位获取中间内容区域顶部与页面最上方的距离通过结合 CSS 选择器，可以快速定位目标元素，然后利用 offset() 方法的 top 属性，即可得到元素顶部与页面最上方的距离。var

业界 2016年07月04日

【page-monitor 前端自动化 上篇】初步调研

前端自动化测试主要在于：变化快，不稳定，兼容性复杂；故而，想通过较低的成本维护较为通用的自动化case比较困难。本文旨在通过page-monitor获取和分析dom结构，调研能否通过监控和分析核心dom，来进行前端自动化测试。一：page-monitor 介绍page-monitor：通过xpath获取dom节点结构，之后可视化的渲染出页面的差异。github地址：http

业界 2016年08月07日

canvas 入门－利用 canvas 制作一个七巧板

简介是 HTML5 新增的元素之一，它允许脚本语言动态渲染位图像。最初是由 Apple 引入，用于 Mac OS X 的仪表盘，后来又在 Safiri 和 Google Chrome 中被实现。 就像个神奇的画布，你可以在上面画出你想要的绚丽的效果。使用元素之前，需要一些基本的 HTML 和 Javascript 知识。 元素不被一些老的浏览器支持，但是主流的高级浏览器都

业界 2016年07月13日

初步了解this

在面向对象编程中，this指针的指向我经常弄不清楚，看了几篇博客之后，乘有了一点点了解，赶快做笔记记录下来。 this的指向取决于调用的模式，而在js中有4中调用模式：方法调用模式，函数调用模式，构造函数调用模式，apply调用模式 方法调用模式 当一个函数是作为一个对象的属性被调用时，this会指向该属性所属的对象。 var name = 'window'; var pe

业界 2016年07月03日

Electron 开发的 gulp 配置

源自 Atom-shell 的 Electron 目前是一个很火的项目。已经有很多开发者基于 Electron 开发出了各种各样的桌面程序。在我看来，对于广大前端开发者来说，最为耳熟能详的应该是 Atom 和 VS Code。在 Electron 的官网上能够看到更多有意思的项目。之前提到过，我的计划之一就是玩一下 Electron，打造一个桌面工具。上个星期经过几次摸索和

业界 2016年08月05日

转载：《44个Javascript变态题》

第1题['1','2','3'].map(parseInt);第2题[typeof null,null instanceOf Object]第3题[[3,2,1].reduce(Math.pow),[].reduce(Math.pow)]第4题var val = 'smtg';console.log('value is' + (val === 'smtg') ? 'Some

业界 2016年07月05日

讨论：A标签要不要避免使用 javascript:void(0)

甲是我的同事，乙是我。某天讨论了要不要避免 a 标签加 javascript: void(0)，最后还是决定加！甲：在某些IE里是bug。使用 更好，这样页面还不会跳转到最顶端乙：使用 有个问题，点击后 windows.location 变了。这个被记录到浏览器的 history 了，这样不利于浏览器后退前进操作。还有 在 IE 下可能会在点击后出现虚线外框，这个样式

业界 2016年07月06日