js防抖和节流

防抖和节流在前端性能优化中很常用，防抖和节流都是对一段时间内事件触发函数执行频率的控制；使用场景就是当频繁事件时怎样去处理函数执行。

防抖

在限定时间内，如果事件再次触发，丢弃当前已响应的函数执行，以当前事件响应函数重新计时

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function debounce(fn, wait) {
    wait = wait || 200;
    var timer = null;
    return function () {
        if (timer) {
            clearTimeout(timer);
        }
        var args = arguments;
        var that = this;
        timer = setTimeout(function () {
            timer = null;
            fn.apply(that, args);
        }, wait)
    }
}

查看详情»

深入理解JS执行细节

以前看Tom大叔的深入理解JS系列介绍的很在错，但这篇文章短而好懂，mark一份。

转自http://www.cnblogs.com/onepixel/p/5090799.html

javascript从定义到执行，JS引擎在实现层做了很多初始化工作，因此在学习JS引擎工作机制之前，我们需要引入几个相关的概念：执行环境栈、全局对象、执行环境、变量对象、活动对象、作用域和作用域链等，这些概念正是JS引擎工作的核心组件。这篇文章的目的不是孤立的为你讲解每一个概念，而是通过一个简单的demo来展开分析，全局讲解JS引擎从定义到执行的每一个细节，以及这些概念在其中所扮演的角色。

1
2
3
4
5
6
7
8
9
10
var x = 1;  //定义一个全局变量 x
function A(y){
   var x = 2;  //定义一个局部变量 x
   function B(z){ //定义一个内部函数 B
       console.log(x+y+z);
   }
   return B; //返回函数B的引用
}
var C = A(1); //执行A,返回B
C(1); //执行函数B

这个demo是一个闭包，执行结果是4，下面我们将分全局初始化、执行函数A、执行函数B 三个阶段来分析JS引擎的工作机制:

查看详情»

Promise和Deferred的用法对比

ES6原生提供了Promise对象，高版本的nodejs可以直接使用，服务器端的开发中借住babel工具也可以使用，但是如果直接用到浏览器中，兼容性还是个问题。试下了最新的firefox和chorme浏览器都支持了，为了安全还是老老实实用jquery提供的Deferred对象吧。Promise能实现的功能$.Deferred也能实现。

查看详情»

vue中使用基于客户端的缓存

在写基于express、vuejs博客的小项目过程中，折腾了下在vuejs中怎么使用浏览器缓存请求。

原理是利用vue-resource拦截器interceptor，判断当前请求是否存在localStorage里，有则返回缓存的内容；没有则请求服务器，并在localStorage写入缓存。

用到的依赖包：

详细代码在https://github.com/liukaijv/lnode-blog/tree/master/frontend。

查看详情»

使用$.ajax上传文件到七牛

用jquery的ajax方法上传文件到七牛和常规的ajax有点区别，直接上代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var $input = $('#upload-qiniu');
var token = 'sMTdcnRxls_IaTJ1uSOR1Rb7zFkcdJq3LK0MPjR1:4k547QcZwzo2fK7zPJeu28UgXNM=:eyJzY29wZSI6Im9haGEiLCJkZWFkbGluZSI6MTQ0MTk2NzY1Mn0=';
var url = 'http://up.qiniu.com/';
var prefix = 'http://7vii28.com1.z0.glb.clouddn.com/';

$input.on('change', function(){
	var me = $(this);
	var file = this.files[0];     
	var formData = new FormData(),
	    filename = file.name;
	formData.append('token', token);
	formData.append("file", file);
	$.ajax({  
		url : url,  
		type : 'POST',  
		data : formData, 
		processData : false, // 对数据不作处理
		contentType : false // 使用原始类型
	}).done(function(json){ 
		console.log(json);
	}).fail(function(json){                
		console.log(json.responseJSON.error);
	});              
});

查看详情»

lodash集合的sortBy排序

lodash sortBy的用法

数组对象：

1
2
3
4
5
6
7
8
9
10
11
var tags = [ 
		{ name: 'php', post_count: 2 },
		{ name: 'html', post_count: 3 },
		{ name: 'lua', post_count: 5 },
		{ name: 'css', post_count: 2 },
		{ name: 'python', post_count: 2 },
		{ name: 'javascript', post_count: 1 },
		{ name: 'express', post_count: 4 },
		{ name: 'css3', post_count: 6 },
		{ name: 'mongoose', post_count: 0 } 
	]

以post_count升序排序：

1
2
3
tags = _.sortBy(tags, function(item){
			return item.post_count;
		});

以post_count降序排序，排序项加个负号：

1
2
3
tags = _.sortBy(tags, function(item){
			return -item.post_count;
		});

javascript函数作为变量传递

js中当函数不加括号时可以把函数当成值传递。

无参数：

1
2
3
4
5
6
// 无参函数
function foo (){
	console.log(1);
}

var bar = foo;

有参时需要用一个匿名函数：

1
2
3
4
5
6
function foo (arg1, arg2) {
	console.log(1);
}
var bar =  function(arg1, arg2) {
	foo(arg1, arg2);
};

javascript中的隐式类型转换

在Javascript 中，只有在一些极少数情况下才会因为类型错误而抛出一个异常，大多数情况会偷偷的把类型转换了，这就是所谓的“隐式类型转换”，js中的基本类型有：string、number、boolean、object、symbol、undefined、null，其中object为引用类型。不同类型的变量比较或运算时会产生隐式类型转换。

算术运算

+号可以当算术运算符也能当连字符号，使用+情况为：

1
2
3
4
5
6
7
// 只要有一个类型为string，另一个也会转为string
console.log(1+'1') // '11'
console.log('1'+1) // '11'
console.log('1'+true) // '11'
// number和boolean时，boolean转为number
console.log(1+true) // '2'

查看详情»

javascript中创建对象的几种方式

javascript中没有类，可以用一些变通的方法模拟出来，整理的几种创建类的方法。

工厂方式

缺点是不能实现私有属性和私有方法

1
2
3
4
5
6
7
8
9
10
11
function Person() {
  var Obj = new Object();
  Obj.name = 'attr name';
  Obj.eat = function() {
    console.log('method eat');
  }
  return Obj;
}
var person = Person();
console.log(person.name);
console.log(person.eat());

查看详情»

让jquery插件支持AMD和CMD规范

jquery插件支持AMD和CMD规范的改造：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
;function(root, factory) {
	 "use strict";
	if (typeof define === 'function' && (define.amd || define.cmd)) {

		// register as anon module
		define(['jquery'], factory);

	} else {

		// invoke directly
		factory( (typeof(jQuery) != 'undefined') ? jQuery : window.Zepto );

	}
}(this, function($){
	'use strict';

		// your code

});

js验证只能输入数字

js验证只能输入数字函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function parseNumber(value) {
  // 替换非数字值
  value = value.replace(/[^\d.]/g, '');
  // 替换第一位为.
  value = value.replace(/^\./g, '');
  // 替换最后一位为.
  value = value.replace(/\.$/g, '');
  // 替换连续.+
  value = value.replace(/\.{2,}/g, '.');
  // .号前只能有一个0
  value = value.replace(/^0+\./g, '0.');
  // 保留一个.，替换其它的.
  value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
  return value;
}

javascript获取浏览器视口大小 

1
2
3
4
5
6
7
8
9
10
11
12
13
function getViewport() {
    if(document.compatMode == 'BackCompat'){
        return {
            width: document.body.clientWitdh,
            height: document.body.clientHeight
        }
    } else {
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        }
    }
}

javascrit常见排序算法

总结一下javascrit常见排序算法。

冒泡排序（Bubble Sort）

冒泡排序是一种简单的排序算法。它重复地走访过要排序的数列，一次比较两个元素，如果它们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。

查看详情»