Category Archives: ria之家–RIA三部曲:jquery、ext、flex

Geolocation和Web Sockets基于NodeJs的实战(END)

前面三篇教程: Geolocation和Web Sockets基于NodeJs的实战(1) Geolocation和Web Sockets基于NodeJs的实战(2) Geolocation和Web Sockets基于NodeJs的实战(3) 明河将原理部分全部讲完了,在第二篇教程,我们已经实现一个可以定位了地图,不支持多用户的地理信息都标记在地图的功能,这篇的教程将继续实现这部分功能。 在第一篇教程中,明河有简单演示了sockets.io的用法,主要是服务器端上的,接下来我们来看下客户端的调用(API基本和服务器端保持一致)。 以下代码在application.js的positionSuccess函数(获取地理信息成功后触发)内。 建立sockets.io连接 var socket = io.connect(‘/’); 当页面处于用户操作下时发送请求 var doc = $(document); //用户使用应用时候推送消息 doc.on(‘mousemove’, function() { }); } 如果页面中鼠标发生了移动,我们判定为用户激活的客户端页面,这时候推送消息,所以我们监听mousemove事件发送请求,mousemove事件触发频率非常高,而我们的实时应用, 并不需要如此频繁的推送消息,所以需要设置下时间间隔,30毫秒就好。 var doc = $(document); var emit = $.now(); doc.on(‘mousemove’, function() { if … Continue reading

© 2013 . All rights reserved.

Chrome开发者工具之结构与样式

web前端开发工程师必须要掌握浏览器的开发者工具。这里介绍chrome自带的开发者工具,首先从页面的结构和样式来介绍。 开发者注意:本文的目的是介绍chrome开发者工具的基础用法。或许你用别的工具,如firebug或IE的开发者工具,但本文介绍的功能,其他对应工具上应该也有相应的功能,可以帮助你了解对比。 简介 浏览器开发者工具功能: 查看元素的html结构 概览页面的css,以及某一元素的样式 实时编辑css来调样式 查看http请求 页面中运行js 检测页面性能瓶颈,做性能评估 查看页面在本地存储的数据 浏览器开发者工具 在开始讲解chrome的开发者工具前,先简单列举一下目前主流浏览器提供的开发者工具。 chrome浏览器开发者工具 Chrome、chrome canary和chromium都带有该工具。 下载地址:google.com/chrome 打开快捷键:ctrl + shift + i 参考文档:developers.google.com/chrome-developer-tools 注意:也可以在页面想要查看的元素上,右键点击->查看元素 打开。 safari浏览器开发者工具 safari是采用Web Inspector库。它的更新没有chrome频繁。 下载地址:apple.com/safari/ 打开方式,快捷键:ctrl + alt + i,或者选择菜单“工具”->“显示web检查器” 参考文档:developer.apple.com/library/safari/documentation 注意:也可以在页面想要查看的元素上,右键点击->查看元素 打开 firefox浏览器开发者工具 Firefox现在也自带了开发者工具,它的元素定位效果很好。firebug,任然可以以插件的形式安装。 下载地址:mozilla.org/en-US/firefox … Continue reading