标签为 "javascript" 的文章

正确理解javascript的this关键字

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的指代关系了。
继续阅读全文……

javascript嵌套函数的效率问题

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的sessionStorage和localStorage

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的浏览器支持情况

浏览器的支持除了IE7及以下不支持外,其他标准浏览器都完全支持(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");

继续阅读全文……

基于express+socket.io的nodejs聊天室

前几天晚上边看水浒边写的nodejs的聊天室,前面说了,放假之前要把近日学习nodejs的所有心得整理下,今天就是30号鸟~撒欢~,最后放这个聊天室出来给大家作为学习nodejs的参考示例,希望对大家有用。

感谢:cnodejs群里的老雷,及其微博上的基友们!顺祝大家长假快乐,顺祝自己明天动车不出轨,顺祝明年不再过节,感慨多了……

特点

聊天室主要功能及其特点:

  1. 采用nodejs(屁话)
  2. express框架,jade做模板
  3. socket.io做前后端的websocket通信
  4. 支持session
  5. 支持@私信功能

废话不多说了,注意点,基本前面的文章都提到了,下面罗列下:
配置nodejs.exe的windows目录结构
安装express及配置app.js文件
使用socket.io和node.js搭建websocket应用
在Express和Socket.IO中使用session

nodejs聊天室下载地址

基于express+socket.io的聊天室

聊天室服务器端js代码

继续阅读全文……

在Express和Socket.IO中使用session

在nodejs项目中对于一些认证需要用到session,例如我写的nodejs 聊天室的demo,就是通过session实现的认证。当存在session,直接进入聊天室,而不会重新登录。

在网上也找到不少关于Express框架中的session调用方法,可是发现真正能用的不是很多,今天根据聊天室的制作过程,整理下Express和socket.IO中使用session的具体方法。

Express的session是通过cookie实现的,用到了connect中的两个module:parseCookie和MemoryStore,前者是用来解析cookie,后者用来存储sesion。

引入所需module

Express框架中使用session必须先引入上面的两个模块,例如下面的代码:

var parseCookie = require('connect').utils.parseCookie,
	MemoryStore = require('connect/middleware/session/memory');
//建立一个memory store的实例
var storeMemory = new MemoryStore({
		reapInterval: 60000 * 10
	});

Express中app的配置

在app需要添加如下的配置:

app.configure(function(){
	app.use(express.bodyParser());//解析post
	app.use(express.cookieParser());//解析cookie
	//设置session
	app.use(express.session({
		secret: 'wyq',
		store:storeMemory 
	}));
});

在请求中使用session

在请求中我们可以使用request.session来调用session,例如下面的代码:

app.get('/',function(req,res){
	//使用request.session来判断是否登录	
	if( req.session.name && req.session.name!==''){
		//需要判断下是否已经登录
		res.redirect('/chat');
	}else{
		//读取登录页面,要求登录
		var realpath = __dirname + '/views/' + url.parse('login.html').pathname;
		var txt = fs.readFileSync(realpath);
		res.end(txt);
	}
});

websocket通信中使用session

在nodejs项目中,我们常常使用websockt来实现通信,所以websocket中也需要通过session来认证用户。本例使用socket.io来举例实现nodejs中websocket通信session的认证。关于socket.io的使用参考文章《使用socket.io和node.js搭建websocket应用

上面代码中引入了解析cookie的parseCookie,所以session是通过cookie来解析的。首先我们建立了socket的监听之后需要对监听到的头文件处理,解析出来cookie中的session。例如下面的代码:

var io = sio.listen(app);
//设置session
io.set('authorization', function(handshakeData, callback){
	// 通过客户端的cookie字符串来获取其session数据
	handshakeData.cookie = parseCookie(handshakeData.headers.cookie)
	var connect_sid = handshakeData.cookie['connect.sid'];
	if (connect_sid) {
		storeMemory.get(connect_sid, function(error, session){
			if (error) {
				// if we cannot grab a session, turn down the connection
				callback(error.message, false);
			}
			else {
				// save the session data and accept the connection
				handshakeData.session = session;
				callback(null, true);
			}
		});
	}
	else {
		callback('nosession');
	}
});

继续阅读全文……

使用socket.io和node.js搭建websocket应用

websocket是HTML5的一种新的通信协议,它是实现了浏览器与服务器的双向通讯。在 WebSocket API 中,浏览器和服务器只需要要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
关于websocket的更多信息,请移步维基百科

使用WebSocket

在客户端使用websocket需要创建WebSocket对象,通过提供的open、send、message、close等方法实现创建、发送、监听信息、关闭连接。例如下面的代码:

if('WebSocket' in window){
	// 创建websocket实例
	var socket = new WebSocket('ws://localhost:8080');
	//打开
	socket.onopen = function(event) {
	  // 发送
	  socket.send('I am the client and I\'m listening!');
	  // 监听
	  socket.onmessage = function(event) {
		console.log('Client received a message',event);
	  };
	  // 关闭监听
	  socket.onclose = function(event) {
		console.log('Client notified socket has closed',event);
	  };
	  // 关闭
	  //socket.close()
	};
}else{
	alert('本浏览器不支持WebSocket哦~');
}

现在chrome、firefox等浏览器都已经支持了websocket,而IE却没有。下面我们来简单说说服务器端对websocket的支持。

服务器端支持websocket的语言不少,而且都有相关的开源项目,例如php的phpwebsockets:http://code.google.com/p/phpwebsockets/,java的jWebsocket:http://jwebsocket.org/
更多的信息可以浏览这篇文章:Start Using HTML5 WebSockets Today

socket.io

socket.IO是一个websocket库,包括了客户端的js和服务器端的nodejs。官方地址:http://socket.io

客户端使用socket.io

去github clone socket.io的最新版本,或者直接饮用使用socket.io的CDN服务:

<script src="http://cdn.socket.io/stable/socket.io.js"></script>

下面可以创建使用socket.io库来创建客户端js代码了:

var socket = io.connect('http://localhost');
socket.on('news', function (data) {
	console.log(data);
	socket.emit('my other event', { my: 'data' });
});

socket.on是监听,收到服务器端发来的news的内容,则运行function,其中data就是请求回来的数据,socket.emit是发送消息给服务器端的方法。

使用socket.io和nodejs搭建websocket服务器端

socket.io不仅可以搭建客户端的websocket服务,而且支持nodejs服务器端的websocket。

nodejs安装socket.io

使用node插件管理包,运行下面的命令就可以安装成功socket.io

npm install socket.io

没有npm的或者windows用户可以使用github下载socket.io并且放入到node_modules文件夹中,具体配置可以参考文章:《nodejs教程:配置nodejs.exe的windows目录结构

nodejs建立socket.io服务

通过nodejs的http模块就可以方便的搭建websocket服务器环境,例如下面的代码:

// 引入需要的模块:http和socket.io
var http = require('http'), io = require('socket.io');
//创建server
var server = http.createServer(function(req, res){ 
  // Send HTML headers and message
  res.writeHead(200,{ 'Content-Type': 'text/html' }); 
  res.end('<h1>Hello Socket Lover!</h1>');
});
//端口8000
server.listen(8080);
//创建socket
var socket = io.listen(server);
//添加连接监听
socket.on('connection', function(client){   
	//连接成功则执行下面的监听
	client.on('message',function(event){ 
		console.log('Received message from client!',event);
	});
	//断开连接callback
	client.on('disconnect',function(){
		console.log('Server has disconnected');
	});
});

继续阅读全文……

nodejs教程:安装express及配置app.js文件

express.js是nodejs的一个MVC开发框架,并且支持jade等多种模板。下面简单来说说express的安装和app.js文件的配置,然后在今后的教程中一步一步使用express.js搭建个聊天室。

安装express.js

如果你安装了npm,安装变得很简单,只需要在终端中运行下面的代码即可:

npm install express -gd

-g代表安装到NODE_PATH的lib里面,而-d代表把相依性套件也一起安装。如果沒有-g的话会安装目前所在的目录(会建立一个node_modules的文件夹),你可以透过以下指令来比较两者的不同:

npm list -g
npm list

如果没有npm,那么我可以使用github来git下来最新的express。
好了,现在你可以通过express testapp来建立express实例。以下是示例:

cd ~
express testapp
cd testapp
node app.js

这样就建立了一个testapp的nodejs应用,而app.js是默认的应用主js。下面来详细的说说app.js中的各项配置。

引入模块

var express = require('express');
 var app = module.exports = express.createServer();

require()是node.js提供的函数,可以让你引入其他模块以调用模块的函数和变量,默认下node.js会在$NODE_PATH和目前js所在目录下的node_modules文件夹下去寻找模块。require也可以用来载入自己写的模块哦~这样涉及到node.js的模块机制,后面有机会就在介绍。

第二行的express.createServer()就是在建立server,而中间的module.exports也是涉及到node.js的模块机制,以后再说。

express的app.js的详细配置说明

express.js继承自connect模块,所以如果你的node_modules文件夹下没有connect模块也是不行的。

设置views路径和模板

我们再来看下面两行:

app.set('views', __dirname + '/views');
app.set('view engine', 'jade');

继续阅读全文……

nodejs教程:配置nodejs.exe的windows目录结构

上篇说了nodejs在cygwin下面的配置,可是用起来真的不爽,很多人在微博也说有nodejs.exe文件,于是试着配置下,发现nodejs.exe+github做插件管理,是在windows下面搭建nodejs服务器的不错选择。下面结合自身实践,简单说说。

nodejs.exe path配置

首先去官方下载最新版的nodejs.exe。下载后随便找个地方放,例如D:\\node。
有两种方法配置PATH,
1、直接把nodejs.exe复制到windows文件夹下,这样就不用在环境变量里面配置PATH了
2、配置PATH,在我的电脑属性里面找到环境变量,然后在系统变量中更改Path的属性添加;D:\\node,即放置nodejs.exe的目录地址,注意前面的”;”不能少

nodejs插件在windows下的管理

nodejs的有自己的插件管理包npm,可是在windows系统下不能使用,不过鉴于大多数的nodejs的插件都是通过github管理的,所以我们只要安装个github客户端就可以了,如果有必要还可以安装TortoiseGit,作为图形化Git管理。
nodejs的插件都是放在node_modules的文件夹下,所以我们在node文件夹下建立node_modules的文件夹,将下载的nodejs的插件都放在这个文件夹下,或者直接在node_modules文件夹中直接git clone出来最新版的插件即可。

nodejs的插件引用方法

继续阅读全文……

第2页 / 共9页 123456789
返回顶部