前端开发

感慨下：做前端开发不少日子了，在前公司也使用过一段时间linux系统，对apache配置比较熟悉，可是对nginx配置还是不熟悉，毕竟自己是做前端开发的，大后端的事情还是比较排斥，以后多练习。前些日子vps到期了，换了空间，没配置好eAccelerator，本来想要朋友全权处理，可是他最近比较忙，只好自己处理了，现在将安装eAccelerator过程记录下，以后留用。

vps是centOS系统，php为nginx+fastcgi，nginx安装目录/usr/local/nginx，php安装目录/usr/local/php，开始在linux安装PHP加速器eAccelerator吧！

预编译安装eAccelerator

安装前准备

安装之前使用需要安装make和phpize，如果安装过，跳过此步骤。运行下面的命令

yum install make php5-dev
//ubuntu下用apt-get

安装eAccelerator

然后开始下载eAccelerator，配置安装编译：

wget http://bart.eaccelerator.net/source/0.9.6.1/eaccelerator-0.9.6.1.tar.bz2
tar xjf eaccelerator-0.9.6.1.tar.bz2
cd eaccelerator-0.9.6.1
/usr/bin/phpize
./configure -enable-eaccelerator=shared -with-php-config=/usr/bin/php-config
make
make install

这时会将eaccelerator安装到php目录中，屏幕会显示eaccelerator.so所在路径，例如：
继续阅读全文……

一直使用apache，新的vps使用的是nginx，于是开始折腾nginx了，今天查到了检查nginx配置是否正确和重启的方法，记录下，高手飘过。我的nginx安装在/usr/local/nginx，系统为ubuntu

几个常用的nginx命令

Nginx 安装后只有一个程序文件，本身并不提供各种管理程序，它是使用参数和系统信号机制对 Nginx 进程本身进行控制的。 Nginx 的参数包括有如下几个：

可以这样使用

/usr/local/nginx/sbin/nginx -参数

-c ：使用指定的配置文件而不是 conf 目录下的 nginx.conf 。

-t：测试配置文件是否正确，在运行时需要重新加载配置的时候，此命令非常重要，用来检测所修改的配置文件是否有语法错误。

-s reload 重载

-s stop 停止

nginx启动/重启/停止

这个很简单，就是运行命令：

sudo /etc/init.d/nginx {start|restart|stop}

继续阅读全文……

javascript的作用域是一个重要的知识点，javascript作用域（scope）是通过javascript的作用域链（scope chain）来实现的。

javascript作用域

javascript作用域(scope)：简单的说，就是创建一个函数时在什么环境下创建的，它控制了javascript代码运行时变量和函数的访问范围。在JavaScript中，变量的作用域有全局作用域和局部作用域两种。

全局作用域（Global Scope）

在代码中任何地方都能访问到的对象拥有全局作用域，注意：全局变量是魔鬼！因为它效率低（后面讲到），污染全局环境！一般有一下三种方式获取全局作用域。

代码最外层定义的函数和变量拥有全局作用域

在代码的最外层，定义的函数、变量，都是拥有全局作用域的。

var a = 1;
function b(){
    var a = 2;
}
b();
alert(a);//1

函数内部不使用var定义的拥有全局作用域

在函数内部，不使用var定义的变量拥有全局作用域，这是个坑！要注意，很多前端开发工程师不习惯写var，其实这时候你已经污染了全局作用域！

var a = 1;
function b(){
    a = 2;
    c = 3;
}
b();
alert(a);//2
alert(c);//3

继续阅读全文……

javascript有this关键字，this跟javascript的执行上下文密切相关，很多前端开发工程师至今对this关键字还是模棱两可，本文将结合代码讲解下javascript的this关键字。

this和对象的关系

首先来看下面的代码：

var person = {
	name:'Theo Wong',
	gender:'male',
	getName:function(){
		console.log(person.name);
	}
};
person.getName();

定义了一个person对象，对象中包含了name、gender属性，还包括了一个getName的方法，其作用是输出person对象的name。在这种情况下，我们可以使用this来在person对象中代替person对象本身，所以上面的代码跟下面的直接结果是一样的：

var person = {
	name:'Theo Wong',
	gender:'male',
	getName:function(){
		console.log(this.name);
	}
};
person.getName();

请记住一点：this永远指向的是函数对象的所有者！上面的例子中getName的所有者是person对象，所以this指代的是person。

this和全局对象

我们再来看看再全局对象中，this指代的是什么，我们知道javascript是脚本语言，所以javascript的执行需要有一个宿主环境，在浏览器中这个宿主环境就是window对象，所以在全局函数中，this指代的是window对象（除非使用new，call，apply方法来改变this的指代关系）。懂得了这个关键点，下面的代码就好理解了：

var a = 1;
console.log(a);//1
console.log(this.a);//1
console.log(window.a);//1

很多前端开发工程师经常使用在函数名字之前添加个window来调用函数，这是因为在浏览器中全局对象就是window，所有的函数变量都是在window对象之中，所以下面的代码中的this指代window对象就好理解了：

var a = 1;
function foo(){
	var b = 2;
	console.log(this.a+b);//3
}
foo();

所以说，只要记住：this永远指向的是函数对象的所有者，即this的值是由激活执行上下文代码的调用者决定的，就好理解this的指代关系了。
继续阅读全文……

今天的文章来说说chrome扩展开发的最后一步，代码调试和打包上线。

chrome扩展应用开发教程系列：《开发chrome应用基础》《天气预报应用开发》《调试和打包上线》

chrome应用代码调试

跟前端开发一样，chrome应用开发过程中也是需要代码调试的，用的调试工具自然是chrome的开发者工具，所以前端开发工程师应该很快就可以上手！

代码调试需要调出来chrome的扩展程序页面，有三种方式调出来chrome的扩展程序页面

1. chrome右上角“扳手图标”→工具→扩展程序
2. 新开个chrome选项卡，然后在地址栏输入：chrome://extensions/回车
3. 右键点击某个扩展，选择管理扩展程序

这样就会看到如下的扩展程序界面：

chrome扩展程序界面

点击右上角的“开发者模式”，就会出现三个按钮，选择“载入正在开发中的扩展程序…”，在新开的窗口中找到自己开发的程序的路径，然后打开就可以导入开发中的chrome应用了。点击活动视窗，就可以打开chrome的开发中工具，前端开发工程师就可以进行调试了，跟调试前端页面一样哦。
继续阅读全文……

上一篇讲到了chrome应用开发的基础知识，这一篇通过周末天气预报插件的开发来讲解下chrome扩展应用的开发过程。熟悉前端开发的童靴，知道了chrome应用开发的基本配置，应该很快就可以开发一个chrome应用，因为chrome插件就是纯粹的javascript和html！

chrome扩展应用开发教程系列：《开发chrome应用基础》《天气预报应用开发》《调试和打包上线》

开发前的准备

在开发之前需要统筹下，chrome天气预报插件的基本功能和界面，本插件，会这chrome顶部添加一个带有当前天气icon的应用，点击应用打开弹窗页面，天气的数据来自weather.com.cn的接口，所以我们需要跨域授权应用可以请求weather.com.cn的数据。于是chrome天气预报插件的manifest.json部分代码就出来了：

{ 
  "name": "Chrome Weather", //name
  "version": "0.1.0", //version
  "description": "weather.", //description
  "background_page": "background.html",//背景页面，应用请求数据，处理icon显示实时气温
  "browser_action": { 
    "default_icon": "icon.png" ,//默认的icon
    "default_title": "Weather",//默认鼠标overtitle
    "default_popup": "popup.html"//弹窗页面
  },
	"permissions": [ "tabs", "http://*.weather.com.cn/" ]//跨域请求授权
}

先来个最终效果截图：

chrome天气预报应用最终效果截图

通过背景页面来请求天气数据

chrome天气插件用到了weather.com.cn的三个接口：

1. 根据ip获取当前用户所在城市天气编号：http://61.4.185.48:81/g/
2. 根据城市天气编号获取五天内天气：http://m.weather.com.cn/data/’+id+’.html
3. 根据城市天气编号获取实时天气：http://www.weather.com.cn/data/sk/’+id+’.html

chrome天气插件使用了jQuery开发，所以我们需要在html的头部添加jquery库：

<script type="text/javascript" src="js/jquery.min.js"></script>

根据ip获取当前用户所在城市

当用户第一次运行chrome时候，需要请求背景页面，即background.html，这时，我们需要请求接口来获取当前用户所在的城市信息，以根据cityid获取天气情况。代码如下：

$.getScript('http://61.4.185.48:81/g/',function(){
	window.localStorage.cityid = id;//保存cityid到localStorage
	getWeather(id);//获取天气信息
});

根据cityid获取天气信息

上一步，涉及到了一个函数getWeather，这个函数的作用就是做一个xmlHttpRequest请求，获取当前cityid的天气信息，包括实时天气。getWeather中运用了send函数来做xmlHttpRequest请求。

function getWeather(id){
	var url = 'http://m.weather.com.cn/data/'+id+'.html';
	var url2 = 'http://www.weather.com.cn/data/sk/'+id+'.html';
	send(url,function(json){
		json0 = json;
		window.localStorage.json0 = JSON.stringify(json);
		doit++;
		deal();//处理json0
	}).call(this,url2,function(json){
		json1 = json;
		window.localStorage.json1 = JSON.stringify(json);
		doit++;
		deal();//处理json1
	});
 
}
function send(url,cb){
	var xhr = new XMLHttpRequest();
	xhr.open("GET", url, true);
	xhr.onreadystatechange = function() {
	  if (xhr.readyState == 4) {
		var json = JSON.parse(xhr.responseText);//解析json，保证安全性
		typeof cb==='function' && json.weatherinfo && cb(json.weatherinfo);
		xhr = null;
	  }
	}
	xhr.send();
	return arguments.callee;
}

继续阅读全文……

不得不说chrome做的真的不错，听了貘大大关于chrome插件机制的讲座，就有亲手做个chrome应用的冲动，这个周末终于抽时间做了一个简单的天气预报插件，原理还是很简单的，采用了weather.com.cn的数据，因为比较熟悉这个weather.com.cn的接口，所以很快就搞定一个简单的chrome天气预报应用了。废话不多说了，开始正文。

本教程会step by step的讲解我周末的做天气预报插件，教程包括三篇文章《开发chrome应用基础》《天气预报应用开发》《调试和打包上线》，通过实例讲解，希望对大家开发chrome插件有所帮助。本文只是介绍了chrome应用开发的冰山一角，更多的chrome应用开发技巧还是要自己动手查看下google的文档。

chrome应用开发基础知识

chrome扩展应用是由html、css和javascript组成的，所以chrome应用的门槛比较低，对于一个前端开发者，只要读懂了chrome的开发文档，就可以很快的上手一个chrome应用。

每个chrome扩展都应该包含下面的文件：

一个包括一个manifest.json文件，是个配置文件，json格式，通过manifest.json可以设置应用的icon，指定默认的background.html或者popup.html……
一个或多个html文件（除非这个应用是一个皮肤）
可选的一个或多个javascript文件
可选的任何需要的其他文件，例如图片

在开发应用（扩展）时，需要把这些文件都放到同一个目录下。发布应用（扩展）时，这个目录全部打包到一个应用（扩展）名是.crx的压缩文件中。如果使用Chrome Developer Dashboard，上传应用（扩展），可以自动生成.crx文件。

下图是我天气预报插件的文件列表：

chrome天气预报插件目录结构

chrome应用界面控制

chrome应用会以browser action或page action的形式在chrome浏览器界面上展现出来。每个应用扩展最多可以有一个browser action或page action。当应用（扩展）的图标是否显示出来是取决于单个的页面时，应当选择page action；当其它情况时可以选择browser action。

例如gmail提醒应用使用了browser action，它在工具栏上增加一个图标：

gmail应用使用browser action提示

news使用的是popup的方式

另外chrome还包括了桌面提醒（gmail新邮件提醒），主题（chrome皮肤），应用设置页面（应用设置页面），选项卡页面（新选项卡页面）等多种界面形式，本文示例使用的是browser action和popup页面来做一个简单的应用。

chrome应用基本架构

绝大多数chrome应用会包含一个背景页面(background page)，用来执行chrome应用扩展的主要功能。该背景页面时再manifest.json中设置的：

"background_page": "bg.html",//默认背景页面

chrome通过background.html来实现主要功能

上图显示了安装了应用扩展的chrome。黄色图标代表的browser action和蓝色图标代表的page action。在background.html文件里定义了browser action和javascript代码。在两个窗口里browser action都可以工作。

背景页面并不是chrome应用中唯一的页面。例如，本例天气预报插件中还包括了一个弹窗页面(popup.html)，此页面也是又html页面实现的。在应用内部还可以使用chrome.tabs.create()或者window.open()来显示内部的HTML文件。

chrome应用的弹窗界面也是可以在manifest.json中设置的：

"browser_action": { 
    "default_icon": "icon.png" ,
    "default_title": "Weather",
    "default_popup": "popup.html"
  },

值得一提的是chrome应用里面的HTML页面可以互相访问各自DOM树中的全部元素，或者互相调用其中的函数。

下图显示了一个chrome应用的弹窗的架构。弹窗的内容是由HTML文件（popup.html）定义的web页面。它不必复制背景页面(background.html)里的代码，因为它可以直接调用背景页面中的函数！

chrome应用的弹窗界面

应用文件的引用

任何需要的文件都可以放到应用（扩展）中，但是怎么使用它们呢？一般的说，可以像在普通的HTML文件中那样使用相对地址来引用一个文件。下面的例子演示了如何引用images子目录下的文件myimage.png

<img src="img/myimage.png"/>

继续阅读全文……

javascript自诞生以来就是一门受争议的编程语言，很多人也对javascript的语法表示不解，例如javascript嵌套函数。本文来自Nettuts+的一篇教程，详细的介绍了javascript中嵌套函数效率问题，从小处说起，一直说到匿名函数、继承，感觉不错。

嵌套函数效率

很多jser喜欢在javascript代码中使用嵌套函数，例如下面的例子就是一个典型的嵌套函数：

function foo(a, b) {  
    function bar() {  
        return a + b;  
    }  
 
    return bar();  
}  
 
foo(1, 2);

上面的代码中foo()中嵌入了bar()，当foo()运行的时候，就会调用bar()。javascript引擎不会创建bar()函数，直到外部引用了foo()，随着foo()的运行结束，bar()也会销毁。

当多次运行foo的时候，javascript引擎就要在每次的运行foo时创建bar函数，而每次foo结束就要销毁bar函数，这是一个很费劲的工作。

那么为什么我们不把bar函数拿出来，做为一个独立的函数，它在foo外部只被创建一次，而不是多次，这样就大大的提高了代码效率。例如下面的代码：

function foo(a, b) {  
    return bar(a, b);  
}  
 
function bar(a, b) {  
    return a + b;  
}  
 
foo(1, 2);

当然这样做可能随着程序的复杂性，可能存在命名冲突的危险，所以jser需要在这方面权衡，或者采用命名空间来解决这个方式。下面是在jsperf中做的关于上面两个函数大量运行的速度测试http://jsperf.com/nested-named-functions。不同的浏览器测试的结果不同，但是总体来看，两个独立的函数要比相互嵌套的javascript函数效率提高10%~90%。
继续阅读全文……

html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

web storage和cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生（来自@otakustay 的纠正）

html5 web storage的浏览器支持情况

浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。

要判断浏览器是否支持localStorage可以使用下面的代码：

if(window.localStorage){
    alert("浏览支持localStorage")
}else{
   alert("浏览暂不支持localStorage")
}
//或者
if(typeof window.localStorage == 'undefined'){
	alert("浏览暂不支持localStorage")
}

localStorage和sessionStorage操作

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

localStorage和sessionStorage的方法

setItem存储value

用途：将value存储到key字段
用法：.setItem( key, value)
代码示例：

	sessionStorage.setItem("key", "value");
	localStorage.setItem("site", "js8.in");

继续阅读全文……