实现网站变灰

css实现网站变灰

1
2
3
4
5
6
7
8
9
10
html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-filter: gray;
    filter: gray;
    filter: progid:dximagetransform.microsoft.basicimage(grayscale=1) /*ie*/
}

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。

查看详情»

循环中正确绑定事件的N种方法

面试中常考的题，把想到的方法都整理一下，代码如下：

1
2
<ul id="list">
</ul>
1
2
3
4
5
6
7
8
9
10
var list = document.getElementById("list");
for (var i = 1; i <= 5; i++) {
  var item = document.createElement("li");
  item.appendChild(document.createTextNode("列表 " + i));

  item.onclick = function (e) {
    console.log("列表 " + i + " 被点击.");
  };
  list.appendChild(item);
}

上面这段代码的意图是创建5个li,点击不同的li能够打印出当前li的序号。但是点击任何li打印出来的都是“列表 6 被点击“，因为i是函数级变量，5个内部函数都指向了同一个i ,而i最后一次赋值是5，当点击时i已经是6了。

查看详情»

触发display为none元素的动画效果

写模态框时，当模态框show的时候动画没有，原来是元素有display:none时添加样式里css3的变幻效果无法生效，解决的方法总结，测试代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
.modal{
  z-index: 100;
  height: 200px;
  width: 200px;
  background: yellow;
  transition: all 1s;
  display:none;
}
.modal.active{
  background: red;
  transform: translateX(100px);
}
1
2
<a href="javascript:" id="trigger" data-target="#model1">运行动画</a>
<div id="model1" class="modal"></div>

查看详情»

同时使用flex、white-space和overflow的bug

写这个博客文章列表标题时遇到的bug，当flex和white-space、overflow一起用的时候，发现overflow:hidden失效了。代码如下：

1
2
3
4
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

解决办法：再加上min-width: 0属性。

1
2
3
4
5
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
min-width:0;

使用$.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;
		});

如何关闭微信内置浏览器

做微信开发中发现window.close失效，不能关闭浏览器，解决如下：

1
2
3
4
5
6
7
8
9
10
function closeWindow() {   
    if (wx != undefined) {
        wx.closeWindow();
    }
    else if (typeof(WeixinJSBridge) != "undefined") {
        WeixinJSBridge.call('closeWindow');
    } else {
        window.close();
    }
}

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());

查看详情»