作为一只网瘾少女,各种酷炫的网页效果已经不能再引起我的注意了,直到有一天我看到了这个http://matthew.wagerfield.com/parallax/ ,瞬间晕船了。嗯,我喜欢这种微醺的感觉。这时我的脑洞突然开了一下,想起了前段时间票圈疯转的各种360°全景摄影。当手机绕着你360°转动的时候,就好像置身照片中的场景一样,那这个框架应该可以做成这样的效果~(虽然后来知道这个效果并不是用parallax.js做的sad)。于是开启了我用parallax.js来变身炫酷少女之路。

 

Parallax.js到底干嘛的

为什么先讲数组


数据结构可以简单的被分为线性结构和非线性结构。

线性结构大致包括:

  1. 数组(连续存储);
  2. 链表(离散存储);
  3. 栈(线性结构常见应用,由链表或数组增删和改进功能实现);
  4. 队列(线性结构常见应用,由链表或数组增删和改进功能实现);

非线性结构大致包括:

  1. 树;
  2. 图;

其中,数组是应用最广泛的数据存储结构。它被植入到大部分编程语言中。由于数组十分容易懂,所以它被用来作为介绍数据结构的起点非常合适。

使用 window.performance 提供了一组精确的数据,经过简单的计算就能得出一些网页性能数据。

配合上报一些客户端浏览器的设备类型等数据,就可以实现简单的统计啦!

额,先看下兼容性如何:http://caniuse.com/#feat=nav-timing

这篇文章中 Demo 的运行环境为最新的 Chrome 的控制台,如果你用的是其他浏览器,自查兼容性哈~

在Web中使用ES 2015

想要在浏览器端使用ES 2015最新语法,其实很简单,只需要一个转换器即可,Babel是ES 2015最流行的转换器之一,Babel加上各种插件和polyfill能基本上支持绝大部分新语法。

在你的构建中,插入一步使用Babel将ES 2015的代码转换成完全兼容ES5的代码的任务,你甚至都不必了解Babel的具体用法,就可以爽爽的开始写ES 2015代码了。

使用gulp-babel在需要的地方转换一下即可。

 

TAT.rocket 使用js实现思维导图
In JavaScript,Web开发,作品 on 2015年08月28日 by view: 11,117
2

本文主要阐述使用js实现思维导图的关键技术点,如果还不知道什么是思维导图的同学,请自行度娘。以下是demo和源码的传送门:
demo:http://rockyren.github.io/mindmaptree/
源码:http://github.com/RockyRen/mindmaptree/tree/master

在源码中我使用了svg绘制思维导图。与canvas相比,svg将图像当成对象,我们可将思维导图中节点和线等图形表现为对象,而且svg更适合用于动态交互的应用

起源

众所周知,js是一门弱类型的语言,类型转换往往隐含在各种业务代码中,同时也埋下了不少的坑。比如以下代码




不得不说的废话

随着前端工程化的推进,相信越来越多的项目都用上了自动化构建。
对前端构建来说,使用最多的莫过于gruntgulp

本文的主角是gulp,所以花一两句话来介绍gulp还是有必要的。

gulp是一款基于stream的前端构建工具,由于底层使用stream,可以将多个任务无缝串连在一起,相比使用临时文件的grunt要快不少;同时也不用像grunt一样写一大堆配置文件,每一个任务都可以可编程的来完全控制逻辑。

gulp比grunt“快”这是公认的事实,这里不再过多比较两者之间的差异,还是那句话,各有千秋吧。

 

场景描述

有时候我们会碰到这样的任务场景,需要在一个界面上展示,许多图表内容,而获取图表数据的CGI做得非常原子化,也不方便更改,那么只能发很多个请求来拉取数据,展示图表,大致像下面的界面。
liushui
或者有时候,希望一系列函数按照一定顺序自动执行,但里面内嵌各种回调,完全不知道函数何时执行。可能不得不使用标志位来记录执行阶段。(当然可以使用promise,这里是尝试给出另外一种解决方案和思路),这样代码看来一团糟,作为有处女座潜质的程序员多少有些纠结。

背景交代完毕,现在是正题,小技巧分享。
其实呢,我们需要的只是一个有加载顺序的队列来完成任务。
但是这里有个思维难点是程序执行流程并非线性推进,而是通过事件推进,不符合常规的线性思维方式。

我就想了一种可以让代码看起来更线性的一种方案.

代码如下:

这里我做的事情就是将队列函数,交给调用方自己来决定,何时执行。
同时run是个幂等函数,方便随时调用,还可以保证只有一个队列在执行,且不被多次调用。
这样就满足了开场需求,在ajax中顺序回调:)

 

一、概念解析:

Mongoose:

Let’s face it, writing MongoDB validation, casting and business logic boilerplate is a drag. That’s why we wrote Mongoose.

Mongoose简单来说就是数据库操作ORM

createConnection 与 connect:

许多入门学徒在看到这两个函数的时候都会有一定疑惑,但是这两个函数其实并不是一个东西,

createConnection 创建的并非一个默认的数据库连接,它返回的是一个Connection。我们需要通过这个Connection来创建Model、Instance,然后进行数据表操作,这通常是在程序需要连接多个数据库的情况下使用,否则一般使用connect来打开默认的数据库连接,这时候我们就可以用mongoose.model来创建我们的Model了。

TAT.Perlt void 操作符
In JavaScript on 2015年06月30日 by view: 678
0

语法

描述

这个操作符允许插入一个计算结果等效于undefined的表达式。
void操作符经常仅仅是用来获得undefined值,比如经常使用到的“void(0)”(这等效于“void 0”)。