使用 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: 4,988
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: 498
0

语法

描述

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

Strong Mode介绍
In JavaScript,Node.js,Web开发 on 2015年06月30日 by view: 795
7
If it is too strong, then you are too weak.

就算是背景吧

随着ES2015的到来,JavaScript引进了许多新特性,很多很强大的特性完全可以弥补JS本身语法上的弱点,比如让很多初次尝试JS的程序员感到不习惯的变量提升问题、没有块级作用域问题等问题。

strong mode

ES5增加了strict mode,现在V8又实现了一种新的模式——strong mode

strong modestrict mode的升级版,在语法要求上更严格了,同时正因为这些严格的要求,让开发者得以规避语言本身一些糟粕或者让人困惑的地方。

为什么要使用数据结构和算法(程序=数据结构+算法)


        数据结构是对在计算机内存中(有时在磁盘中)的数据的一种安排。包括数组、链表、栈、二叉树、哈希表等。

        算法是对这些结构中的数据进行各种处理。比如,查找一条特殊的数据项或对数据进行排序。

        举一个简单的索引卡的存储问题,每张卡片上写有某人的姓名、电话、住址等信息,可以想象成一本地址薄,那么当我们想要用计算机来处理的时候,问题来了:

  • 如何在计算机内存中安放数据?
  • 所用算法适用于100张卡片,很好,那1000000张呢?
  • 所用算法能够快速插入和删除新的卡片吗?
  • 能够快速查找某一张卡片吗?
  • 如何将卡片按照字母进行排序呢?