2014-07-06

为何时间都一样

下面的两段代码

var arr=[];
var a = 10;
function run(){
	a-- && (arr.push(+new Date()),run());
}
run()

//和

var arr=[];
a=10;
setTimeout(function(){
	if( a-- && arr.push(+new Date())  ){
		arguments.callee();
	} 
},0);

/*
这两段代码分别在控制台输出arr结果，原以为是不同的，结果是一样的
>arr
[1404582518336, 1404582518336, 1404582518336, 1404582518336, 1404582518336, 1404582518336, 1404582518336, 1404582518336, 1404582518336, 1404582518336]
*/

于是又试了下面的方式

var arr=[];
var a = 10;
function run(){
	a-- && (arr.push(+new Date()),setTimeout(run,0) ) || ( console.log(arr), dengcha(arr) );
}
setTimeout(run,0);

function dengcha(arr){
  var jiange = [];
  for(var i=0;i<arr.length-1;i++){
         jiange.push(arr[i+1]-arr[i]);
  }
  alert(jiange);
}

记得javascipt 高级程序设计里面说，setTimeout 最小间隔时间不同浏览器有不相同的结果。
于是将上面的代码分别运行在IE8 和 chrome中

//IE
(function(sec){
	var arr=[];
	var a = 10;
	function run(){
		a-- && (arr.push(+new Date()),setTimeout(run,sec) ) || ( console.log(arr), dengcha(arr) );
	}
	setTimeout(run,sec);

	function dengcha(arr){
	  var jiange = [];
	  for(var i=0;i<arr.length-1;i++){
			 jiange.push(arr[i+1]-arr[i]);
	  }
	  alert(jiange);
	}
})(0)
弹出结果一般都是 15 16 15 15 16 。。。 偶尔蹦出个31左右


//同样的代码在chrome下的表现 运行了几次
[5, 4, 5, 5, 5, 5, 5, 5, 5] 
[5, 2, 2, 11, 5, 5, 7, 5, 5] 
[17, 5, 8, 5, 5, 7, 5, 5, 7] 
[3, 3, 17, 11, 5, 7, 17, 4, 5] 
[5, 3, 3, 7, 5, 19, 8, 5, 5] 
[3, 20, 12, 5, 5, 5, 15, 5, 7]

IE8中发现只要毫秒数设置在15以内（包括15）

(function(sec){
	var arr=[];
	var a = 10;
	function run(){
		a-- && (arr.push(+new Date()),setTimeout(run,sec) ) || ( console.log(arr), difference(arr) );
	}
	setTimeout(run,sec);

	function difference(arr){//命名什么的最麻烦了 
	  var jiange = [];
	  for(var i=0;i<arr.length-1;i++){
			 jiange.push(arr[i+1]-arr[i]);
	  }
	  alert(jiange);
	}
})(15)

那么他们的运行间隔一般都是 15 16 15 15 16 。。。偶尔蹦出个31左右
但是如果设置了 16~31（包括31）那么结果一般在 31 32 31 31 32 。。。
32 时 31 47，，又不同了。。。

为了一致性，建议还是用15ms吧（chrome 和 IE 差不多，不过这么细微的差别，也没人会注意），结果可能跟电脑也有关系 - -。

周末就这么过去了 (⊙o⊙)…

来一段测试代码吧, 在自己的电脑上运行看看效果，记录了setTimeout 0 到 50毫秒，调用的时间间隔。这是在控制台跑的。

var cache = [];
for(var i = 0;i < 50;i++){
	(function(sec){
		var arr=[];
		var a = 10;
		function run(){
			a-- && (arr.push(+new Date()),setTimeout(run,sec) ) || ( console.log(arr), difference(arr) );
		}
		setTimeout(run,sec);

		function difference(arr){//命名什么的最麻烦了 
		  var spacing = [];
		  for(var i=0;i<arr.length-1;i++){
				 spacing.push(arr[i+1]-arr[i]);
		  }
		  cache[sec] = spacing;
		}
	})(i)
}
setTimeout(function(){ 
	for(var o in cache){
	  console.log("setTimeout设置为"+o+"毫秒时，实际间隔"+cache[o]);
	}
},3000)


//chrome 下的输出
setTimeout设置为0毫秒时，实际间隔2,4,2,7,6,6,5,7,16 VM594:23
setTimeout设置为1毫秒时，实际间隔2,4,2,7,6,6,5,7,16 VM594:23
setTimeout设置为2毫秒时，实际间隔2,4,9,6,6,5,7,16,6 VM594:23
setTimeout设置为3毫秒时，实际间隔4,9,6,6,5,7,16,6,4 VM594:23
setTimeout设置为4毫秒时，实际间隔4,9,6,6,5,7,16,6,4 VM594:23
setTimeout设置为5毫秒时，实际间隔6,7,6,6,5,7,16,7,6 VM594:23
setTimeout设置为6毫秒时，实际间隔9,6,6,7,6,16,6,6,7 VM594:23
setTimeout设置为7毫秒时，实际间隔9,9,8,7,17,9,7,8,7 VM594:23
setTimeout设置为8毫秒时，实际间隔9,9,8,8,16,9,10,9,9 VM594:23
setTimeout设置为9毫秒时，实际间隔9,9,10,9,13,9,10,9,9 VM594:23
setTimeout设置为10毫秒时，实际间隔10,11,10,17,12,12,10,12,11 VM594:23
setTimeout设置为11毫秒时，实际间隔12,12,17,12,12,13,13,13,12 VM594:23
setTimeout设置为12毫秒时，实际间隔14,14,13,12,13,12,13,13,12 VM594:23
setTimeout设置为13毫秒时，实际间隔14,14,13,15,13,14,15,15,14 VM594:23
setTimeout设置为14毫秒时，实际间隔14,14,15,14,15,15,14,15,16 VM594:23
setTimeout设置为15毫秒时，实际间隔17,24,16,15,15,17,23,15,17 VM594:23
setTimeout设置为16毫秒时，实际间隔17,24,16,18,16,16,20,17,17 VM594:23
setTimeout设置为17毫秒时，实际间隔17,24,19,18,17,18,19,20,18 VM594:23
setTimeout设置为18毫秒时，实际间隔19,22,19,18,20,18,18,18,20 VM594:23
setTimeout设置为19毫秒时，实际间隔21,19,20,20,21,23,20,20,23 VM594:23
setTimeout设置为20毫秒时，实际间隔21,22,20,21,20,21,20,22,21 VM594:23
setTimeout设置为21毫秒时，实际间隔22,22,22,23,21,22,21,23,21 VM594:23
setTimeout设置为22毫秒时，实际间隔34,23,24,23,22,24,23,24,24 VM594:23
setTimeout设置为23毫秒时，实际间隔34,23,24,23,24,25,23,24,24 VM594:23
setTimeout设置为24毫秒时，实际间隔34,25,26,25,25,26,27,25,25 VM594:23
setTimeout设置为25毫秒时，实际间隔32,25,25,25,26,25,27,25,25 VM594:23
setTimeout设置为26毫秒时，实际间隔32,28,26,32,27,26,26,26,26 VM594:23
setTimeout设置为27毫秒时，实际间隔32,28,29,29,27,28,29,27,27 VM594:23
setTimeout设置为28毫秒时，实际间隔29,28,29,29,29,34,29,30,42 VM594:23
setTimeout设置为29毫秒时，实际间隔29,31,29,31,29,33,30,30,37 VM594:23
setTimeout设置为30毫秒时，实际间隔32,32,32,31,31,31,31,31,31 VM594:23
setTimeout设置为31毫秒时，实际间隔33,31,32,32,33,33,33,33,33 VM594:23
setTimeout设置为32毫秒时，实际间隔33,33,33,34,32,32,33,47,34 VM594:23
setTimeout设置为33毫秒时，实际间隔33,33,33,36,38,34,34,34,33 VM594:23
setTimeout设置为34毫秒时，实际间隔36,35,39,34,36,35,36,36,34 VM594:23
setTimeout设置为35毫秒时，实际间隔36,38,36,36,37,38,36,37,37 VM594:23
setTimeout设置为36毫秒时，实际间隔38,38,37,38,36,38,47,37,44 VM594:23
setTimeout设置为37毫秒时，实际间隔39,38,37,38,39,39,38,39,41 VM594:23
setTimeout设置为38毫秒时，实际间隔39,38,40,39,39,39,40,40,40 VM594:23
setTimeout设置为39毫秒时，实际间隔41,39,40,46,40,40,41,41,39 VM594:23
setTimeout设置为40毫秒时，实际间隔41,42,41,43,41,42,41,42,42 VM594:23
setTimeout设置为41毫秒时，实际间隔41,42,41,43,41,42,41,42,42 VM594:23
setTimeout设置为42毫秒时，实际间隔42,42,44,42,44,53,44,43,42 VM594:23
setTimeout设置为43毫秒时，实际间隔44,44,43,44,44,48,43,43,45 VM594:23
setTimeout设置为44毫秒时，实际间隔44,44,45,45,45,45,45,44,45 VM594:23
setTimeout设置为45毫秒时，实际间隔47,52,45,47,46,46,46,46,46 VM594:23
setTimeout设置为46毫秒时，实际间隔47,47,48,48,61,47,47,47,48 VM594:23
setTimeout设置为47毫秒时，实际间隔47,47,48,48,61,47,48,49,48 VM594:23
setTimeout设置为48毫秒时，实际间隔48,50,52,48,54,49,50,49,50 VM594:23
setTimeout设置为49毫秒时，实际间隔50,50,53,50,49,51,51,49,51

IE 下面貌似很有规律，按照 16递增

	var logDiv = document.createElement('div');
	logDiv.id = "logDiv";
	document.body.appendChild(logDiv);
	
	function log(str){
		logDiv.innerHTML += str + "\r\n";	
	};
 
	var cache = [];
	for(var i = 0;i < 50;i++){
		(function(sec){
			var arr=[];
			var a = 10;
			function run(){
				a-- && (arr.push(+new Date()),setTimeout(run,sec) ) || ( difference(arr) );
			}
			setTimeout(run,sec);

			function difference(arr){//命名什么的最麻烦了 
			  var spacing = [];
			  for(var i=0;i<arr.length-1;i++){
					 spacing.push(arr[i+1]-arr[i]);
			  }
			  cache[sec] = spacing;
			}
		})(i)
	}
	setTimeout(function(){ 
		for(var o in cache){
		  log("setTimeout设置为"+o+"毫秒时，实际间隔"+cache[o]+"<br/>");
		};
	},3000)

//结果
setTimeout设置为0毫秒时，实际间隔16,15,16,15,16,16,15,16,16
setTimeout设置为1毫秒时，实际间隔16,15,16,15,16,16,15,16,16
setTimeout设置为2毫秒时，实际间隔16,15,16,15,16,16,15,16,16
setTimeout设置为3毫秒时，实际间隔16,15,16,15,16,16,15,16,16
setTimeout设置为4毫秒时，实际间隔16,15,16,15,16,16,15,16,16
setTimeout设置为5毫秒时，实际间隔16,15,16,15,16,16,15,16,16
setTimeout设置为6毫秒时，实际间隔16,15,16,15,16,16,15,16,16
setTimeout设置为7毫秒时，实际间隔16,15,16,15,16,16,15,16,16
setTimeout设置为8毫秒时，实际间隔16,15,16,15,16,16,15,16,16
setTimeout设置为9毫秒时，实际间隔16,15,16,15,16,16,15,16,16
setTimeout设置为10毫秒时，实际间隔16,15,16,15,16,16,15,16,16
setTimeout设置为11毫秒时，实际间隔16,15,16,15,16,16,15,16,16
setTimeout设置为12毫秒时，实际间隔16,15,16,15,16,16,15,16,16
setTimeout设置为13毫秒时，实际间隔16,15,16,15,16,16,15,16,16
setTimeout设置为14毫秒时，实际间隔16,15,16,15,16,16,15,16,16
setTimeout设置为15毫秒时，实际间隔16,15,16,15,16,16,15,16,16
setTimeout设置为16毫秒时，实际间隔31,31,16,31,16,31,31,16,31
setTimeout设置为17毫秒时，实际间隔31,31,32,31,31,31,32,31,31
setTimeout设置为18毫秒时，实际间隔31,31,32,31,31,31,32,31,31
setTimeout设置为19毫秒时，实际间隔31,31,32,31,31,31,32,31,31
setTimeout设置为20毫秒时，实际间隔31,31,32,31,31,31,32,31,31
setTimeout设置为21毫秒时，实际间隔31,31,32,31,31,31,32,31,31
setTimeout设置为22毫秒时，实际间隔31,31,32,31,31,31,32,31,31
setTimeout设置为23毫秒时，实际间隔31,31,32,31,31,31,32,31,31
setTimeout设置为24毫秒时，实际间隔31,31,32,31,31,31,32,31,31
setTimeout设置为25毫秒时，实际间隔31,31,32,31,31,31,32,31,31
setTimeout设置为26毫秒时，实际间隔31,31,32,31,31,31,32,31,31
setTimeout设置为27毫秒时，实际间隔31,31,32,31,31,31,32,31,31
setTimeout设置为28毫秒时，实际间隔31,31,32,31,31,31,32,31,31
setTimeout设置为29毫秒时，实际间隔31,31,32,31,31,31,32,31,31
setTimeout设置为30毫秒时，实际间隔31,31,32,31,31,31,32,31,31
setTimeout设置为31毫秒时，实际间隔31,31,32,31,31,31,32,31,31
setTimeout设置为32毫秒时，实际间隔47,31,47,47,31,47,47,31,47
setTimeout设置为33毫秒时，实际间隔47,47,47,46,47,47,47,47,47
setTimeout设置为34毫秒时，实际间隔47,47,47,46,47,47,47,47,47
setTimeout设置为35毫秒时，实际间隔47,47,47,46,47,47,47,47,47
setTimeout设置为36毫秒时，实际间隔47,47,47,46,47,47,47,47,47
setTimeout设置为37毫秒时，实际间隔47,47,47,46,47,47,47,47,47
setTimeout设置为38毫秒时，实际间隔47,47,47,46,47,47,47,47,47
setTimeout设置为39毫秒时，实际间隔47,47,47,46,47,47,47,47,47
setTimeout设置为40毫秒时，实际间隔47,47,47,46,47,47,47,47,47
setTimeout设置为41毫秒时，实际间隔47,47,47,46,47,47,47,47,47
setTimeout设置为42毫秒时，实际间隔47,47,47,46,47,47,47,47,47
setTimeout设置为43毫秒时，实际间隔47,47,47,46,47,47,47,47,47
setTimeout设置为44毫秒时，实际间隔47,47,47,46,47,47,47,47,47
setTimeout设置为45毫秒时，实际间隔47,47,47,46,47,47,47,47,47
setTimeout设置为46毫秒时，实际间隔47,47,47,46,47,47,47,47,47
setTimeout设置为47毫秒时，实际间隔62,47,47,47,47,62,47,47,47
setTimeout设置为48毫秒时，实际间隔62,63,62,63,62,63,62,63,62
setTimeout设置为49毫秒时，实际间隔62,63,62,63,62,63,62,63,62

2014-07-05

caogao

起因

折腾hexo时，看到了其内置主题（landscape）的Gruntfile.js:

module.exports = function(grunt){
  grunt.initConfig({
    gitclone: {
      fontawesome: {
        options: {
          repository: 'https://github.com/FortAwesome/Font-Awesome.git',
          directory: 'tmp/fontawesome'
        },
      },
      fancybox: {
        options: {
          repository: 'https://github.com/fancyapps/fancyBox.git',
          directory: 'tmp/fancybox'
        }
      }
    },
    copy: {
      fontawesome: {
        expand: true,
        cwd: 'tmp/fontawesome/fonts/',
        src: ['**'],
        dest: 'source/css/fonts/'
      },
      fancybox: {
        expand: true,
        cwd: 'tmp/fancybox/source/',
        src: ['**'],
        dest: 'source/fancybox/'
      }
    },
    _clean: {
      tmp: ['tmp'],
      fontawesome: ['source/css/fonts'],
      fancybox: ['source/fancybox']
    }
  });

  require('load-grunt-tasks')(grunt);

  grunt.renameTask('clean', '_clean');

  grunt.registerTask('fontawesome', ['gitclone:fontawesome', 'copy:fontawesome', '_clean:tmp']);
  grunt.registerTask('fancybox', ['gitclone:fancybox', 'copy:fancybox', '_clean:tmp']);
  grunt.registerTask('default', ['gitclone', 'copy', '_clean:tmp']);
  grunt.registerTask('clean', ['_clean']);
};

发现

在上面的Gruntfile.js文件中，有三个容易被忽视的方法（思路）：

临时存储区

作者使用一个tmp目录来临时存放gitclone下来的文件，取出自己需要的部分fontawesome/fonts/和fancybox/source/，然后删掉temp。

自动加载依赖

当你的Gruntfile.js里面只有少数的任务时，是否使用load-grunt-tasks无关紧要；当你有非常多任务需要load时，你就要像下面这样loadNpmTasks下去：

//加载插件
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-watch');
    ...
    ...
    ...

其实，你只需要像下面这样，使用插件，让它帮你去load依赖。

1	require('load-grunt-tasks')(grunt);

使用load-grunt-tasks这个插件的作用就很明显了。

子任务

这点一般大家都知道，不过还是提一下：

1	'gitclone:fontawesome'

只执行gitclone的fontawesome子任务。

2014-07-05

grunt笔记

grunt 笔记
30分钟学会使用grunt打包前端代码
 grunt入门指南

首先是添加package.json
http://gruntjs.cn/plugins/ 可以看到目前流行的插件

先来一个最简单的文件压缩例子：创建一个demo/package.json文件
package.json 内容为

{
    "name": "demo",
    "version": "1.0.0",
    "devDependencies": {
        "grunt-contrib-uglify": "~0.2.0"
    }
}

然后npm install 下载模块

再创建一个文件 src/hello-grunt.js ，内容随意一段javascript

接着添加demo/Gruntfile.js

module.exports = function(grunt) {
 
    // 构建任务配置
    grunt.initConfig({
        //读取package.json的内容，形成个json数据
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            //文件头部输出信息
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            //具体任务配置
            build: {
                //源文件
                src: 'src/hello-grunt.js',
                //目标文件
                dest: 'build/hello-grunt-min.js'
            }
        }
    });
 
    // 加载指定插件任务
    grunt.loadNpmTasks('grunt-contrib-uglify');
 
    // 默认执行的任务
    grunt.registerTask('default', ['uglify']);
};

然后在此目录下运行 grunt
你会发现 src/hello-grunt.js 被压缩并移动到 build/hello-grunt-min.js 中

一般可能package.json是这样

{
  "name": "hexo-theme-landscape",
  "version": "0.0.1",
  "private": true,
  "devDependencies": {
    "grunt"               : "~0.4.2",
    "grunt-git"           : "~0.2.2",
    "grunt-contrib-copy"  : "~0.4.1"   //复制
	"grunt-contrib-coffee": "*",       //把 CoffeeScript 编译为 JavaScript
	"grunt-contrib-jshint": "~0.6.3",  //用 JSHint 检查文件  代码检查
    "grunt-contrib-uglify": "~0.2.4",  //压缩
    "grunt-contrib-concat": "*",       //合并
    "grunt-contrib-clean" : "*",       //文件清理工具
	"grunt-contrib-watch" : "*",       //监听文件修改
	"grunt-contrib-cssmin": "~0.5.0",  //压缩css
	"load-grunt-tasks"    : "~0.2.0",  //自动添加依赖 
 
  }
}

实时监听插件

grunt-contrib-watch非常重要，它能监测文件的修改，触发指定任务，比如less、coffee编译等。
先来看个最简单的demo：
watch: {
options: {
spawn: false
},
scripts: {
files: [ ‘<%= pkg.version %>/*/.coffee’ ],
tasks: [ ‘coffee’]
}
}
监听源码目录下所有的.coffee文件的修改，触发coffee任务（编译coffee文件）。
spawn配置一般禁掉，设置为true时，运行任务会开启子进程处理，可能会出现不稳定的问题。
files：监听哪些文件的修改
tasks：文件修改后触发哪些任务
grunt.registerTask.(‘w’,[‘watch:scripts’])
（PS:registerTask的name不能和task的名称重复，不然会出现死循环，比如这里不能grunt.registerTask(‘watch’]);）

小技巧
我觉得入门的时候，最烦人的就是package.json和Gruntfile.js的创建。所以grunt有一个grunt-init的工具，项目地址。通过npm install -g grunt-init安装之后，还需要创建~/.grunt-init目录。在此目录中通过git clone来加载模版。模版加载完成之后，就可以通过grunt-init TEMPLATE来创建了。

另一个小技巧，在项目目录下，先通过npm init创建默认的package.json文件，然后npm install。以后需要用到哪个模块的时候（比如grunt），使用npm install –save-dev会自动把依赖关系写入到package.json中。–save-dev会自动维护package.json文件。

如果想安装制定版本的模块可以 npm install 模块名@版本号 –save-dev

2014-07-04

messages、worker和socket

原文链接

Web Messaging 、Web Worker和Web Socket是完全不同的API，但是他们都是通信API。

只有Messaging API是HTML5的正式规范之一。

Messaging允许从一个域向另一个域发送消息。

Worker允许我们圈出一块特别的代码，它将会运行而根本不会影响到浏览器，就好像我们已经创建除了一个新的线程，而浏览器本身是高效的单线程应用程序。

Socket可以创建页面到服务器的一个稳定的连接流的方法（对于主流服务器，是一个TCP连接）并且允许服务器和客户端的双向实时通信。

Worker和Socket是基于Messaging API的。

WebSocket事件：
我们将使用三个WebSocket事件：
onopen: 当接口打开时
onmessage: 当收到信息时
onclose: 当接口关闭时

检验是否支持WebSocket

if("WebSocket" in window){ 
	alert('yes');
}

else{
	alert('no');
}

var socket = new WebSocket("ws://localhost:8000/socket/server/startDaemon.php");


socket.onmessage = function(msg){  
    alert(msg); //Awesome!  
}

2014-07-03

搭建多说评论

配置文件中  hexo/_config.yml

# Disqus
disqus_shortname: vingojw  #写上多说的id

然后在after-footer.ejs 中加上

<% if (config.disqus_shortname){ %>
<section id="comment">
<script type="text/javascript">
var duoshuoQuery = {short_name:"vingojw"};
	(function() {
		var ds = document.createElement('script');
		ds.type = 'text/javascript';ds.async = true;
		ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
		ds.charset = 'UTF-8';
		(document.getElementsByTagName('head')[0] 
		 || document.getElementsByTagName('body')[0]).appendChild(ds);
	})();
	</script>
</section>
<% } %>

再找到.\themes\landscape\layout\_partial\article.ejs 中的<footer class="article-footer">.......</footer>
修改其内容为
    <footer class="article-footer">   
      <% if (!index && post.comments && config.disqus_shortname){ %>  //不是首页显示多说评论框
<!-- Duoshuo Comment BEGIN -->
<a name="comments"></a>
<div class="ds-thread" data-thread-key="<%= post.path %>" data-title="<%= post.title %>" data-url="<%= post.permalink %>"></div>
<!-- Duoshuo Comment END -->
      <% } else { %>	                                             //是首页则显示评论条数
 <a href="<%= post.permalink %>" class="ds-thread-count comment-link alignright" data-thread-key="<%= post.path %>" data-count-type="comments"></a> 
 
	  <% } %>
      <%- partial('post/tag') %>
    </footer>

2014-07-01

css实用片段

   //清浮动
.clearfix:before,
.clearfix:after{content: ''; display: table;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}
//去除双边距
.fl{float: left;}
.fr{float: right;}
.fl,.fr{display: inline;}

2014-06-30

javascript写多行文本

var s = '\
aaaa\
<a href="#" class="sssss" onclick="alert(\'abc\')">×</a>\
aaaa\
';

每行后面要加\ 如果内容有 “ ‘ “ 那么就需要转义

打两个单引号中间加一个 \ 然后回车后面每段后面都要加上 \

var s = ‘\
每段都要加上\
‘;

2014-06-29

格式化与空白

不知为什么git上报这个警告
warning: CRLF will be replaced by LF in GeneSmartStay/res/values-zh-rTW/strings.xml.The file will have its original line endings in your working directory.[这是因为文件中换行符的差别导致的。这个提示的意思是说：会把windows格式（CRLF）转换成Unix格式（LF），这些是转换文件格式的警告，不影响使用。]
找到stackoverflow上的回答

原来是因为git为了各个平台的代码，所处理格式化与空白的方式：
假如你正在Windows上写程序，又或者你正在和其他人合作，他们在Windows上编程，而你却在其他系统上，在这些情况下，你可能会遇到行尾结束符问题。这是因为Windows使用回车和换行两个字符来结束一行，而Mac和Linux只使用换行一个字符。虽然这是小问题，但它会极大地扰乱跨平台协作。

Git可以在你提交时自动地把行结束符CRLF转换成LF，而在签出代码时把LF转换成CRLF。用core.autocrlf来打开此项功能，如果是在Windows系统上，把它设置成true，这样当签出代码时，LF会被转换成CRLF：

1	$ git config --global core.autocrlf true

Linux或Mac系统使用LF作为行结束符，因此你不想 Git 在签出文件时进行自动的转换；当一个以CRLF为行结束符的文件不小心被引入时你肯定想进行修正，把core.autocrlf设置成input来告诉 Git 在提交时把CRLF转换成LF，签出时不转换：

1	$ git config --global core.autocrlf input

这样会在Windows系统上的签出文件中保留CRLF，会在Mac和Linux系统上，包括仓库中保留LF。

如果你是Windows程序员，且正在开发仅运行在Windows上的项目，可以设置false取消此功能，把回车符记录在库中：

1	$ git config --global core.autocrlf false

2014-06-27

插入元素 insertAdjacentHTML

如果你想在网页中插入
你可以：

var a = document.createElement('a');
a.id = "linkA";
a.target="_blank";
a.href="http://vingojw.github.io";
document.body.appendChild(a);

但是如果不想通过这种方式，想用文本的形式创建。
就像操作css时，如果你不想这样

obj.style.height = '10px';
obj.style.width = '10px';
......

你可以 obj.style.cssText="height:10px;width:10px;border;1px solid red;......";

可以使用以下例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>兼容浏览器的insertAdjacentHTML</title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta http-equiv='content-type' content='text/htm;charset=utf-8' />
<style type="text/css">
* {margin:0; padding:0;}
body {background-color:#fff}
dl, dd {margin:20px;}
.color_1 {color:#F7941D; border:1px solid #F7941D;}
.color_2 {color:#f00; border:1px solid #f00;}
.color_3 {color:#01FE34; border:1px solid #01FE34;}
.color_4 {color:#F49AC1; border:1px solid #F49AC1;}
.color_5 {color:#00AEEF; border:1px solid #00AEEF;}
.color_6 {color:#DB00EF; border:1px solid #DB00EF;}
.color_7 {color:#00CCFD; border:1px solid #00CCFD;}
</style>
</head>
<body>
<script type='text/javascript'>
/**
*
*
* @param {HTMLElement} el
* @param {String} where beforeBegin、afterBegin、beforeEnd、afterEnd
* @param {String} html
*/
function insertHTML(el, where, html) {
     if (!el) {
          return false;
     }
     where = where.toLowerCase();
     if (el.insertAdjacentHTML) {//IE
          el.insertAdjacentHTML(where, html);
     } else {
          var range = el.ownerDocument.createRange(),
               frag = null;
          switch (where) {
               case "beforebegin":
                    range.setStartBefore(el);
                    frag = range.createContextualFragment(html);
                    el.parentNode.insertBefore(frag, el);
                    return el.previousSibling;
               case "afterbegin":
                    if (el.firstChild) {
                         range.setStartBefore(el.firstChild);
                         frag = range.createContextualFragment(html);
                         el.insertBefore(frag, el.firstChild);
                    } else {
                         el.innerHTML = html;
                    }
                    return el.firstChild;
               case "beforeend":
                    if (el.lastChild) {
                         range.setStartAfter(el.lastChild);
                         frag = range.createContextualFragment(html);
                         el.appendChild(frag);
                    } else {
                         el.innerHTML = html;
                    }
                    return el.lastChild;
               case "afterend":
                    range.setStartAfter(el);
                    frag = range.createContextualFragment(html);
                    el.parentNode.insertBefore(frag, el.nextSibling);
                    return el.nextSibling;
          }
     }
}
function btnHandler() {
     var elem = document.getElementById('abc');
    
     insertHTML(elem, 'beforeBegin', '<dd class="color_2">上一个兄弟节点previousSibling</dd>');
     insertHTML(elem, 'beforeEnd', '<dd class="color_3">最后一个节点lastChild</dd>');
     insertHTML(elem, 'afterBegin', '<dd class="color_4">第一个节点firstChild</dd>');
     insertHTML(elem, 'afterEnd', '<dd class="color_5">下一个兄弟节点nextSibling</dd>');
}
</script>
<button onclick="btnHandler();">insertAdjacentHTML</button>
<dl class="color_1" id="abc">
     <dd><a href="#">今天采访出来，天上下雨，那个偏僻的地方根本没出租车的影子</a></dd>
     <dd><a href="#">今天采访出来，天上下雨，那个偏僻的地方根本没出租车的影子</a></dd>
     <dd><a href="#">今天采访出来，天上下雨，那个偏僻的地方根本没出租车的影子</a></dd>
     <dd><a href="#">今天采访出来，天上下雨，那个偏僻的地方根本没出租车的影子</a></dd>
     <dd><a href="#">今天采访出来，天上下雨，那个偏僻的地方根本没出租车的影子</a></dd>    
</dl>
</body>
</html>

2014-06-26

sort方法IE和chrome表现不同.md

var arr = [1,2,3,4,5];
arr.sort(function(a,b){
	console.log(a,b)
});

/*
//chrome 下面
1 2
2 3
3 4
4 5
//IE下面则是相反的
2 1
3 2
4 3
5 4
*/