分类目录归档:JavaScript

JS判断委派的事件源

事件委派有利于性能提升,其中各浏览器兼容的获取事件源的可以如下写:

/* 获得事件源dom对象 */
function getTarget(e) {
    e = e || window.event;
    var el = e.target || e.srcElement;
    return el;
};

/* 判断事件源是某个标签 */
function isTag(el, tagName) {
    return el.parentNode.tagName.toLowerCase() == tagName;
};

在stack overflow看到一个解释,关于ie下的事件:

The problem is that in IE, the event object is not sent as an argument of the handler, it is just a global property (window.event)

在ie下有个问题,event对象不会作为参数传递,而是全局window对象下的属性。

地址:http://stackoverflow.com/questions/2642095/access-event-target-in-ie8-unobstrusive-javascript

这才是真正的网站可用性

一直到现在,都认为一个网站的真正可用性,应该是开发之时就不考虑js应用,完全纯静态页面+后端程序打造一个网站,最后才去添加js应用,这个比较针对ajax部分,同一个url对应的后端方法至少需要两个,一个是对ajax请求响应,返回部分数据,一个是对普通get请求响应,返回整个页面。

js(比如jQuery)的事件绑定机制,可以让你轻松暴露真实的链接地址,但是点击了该链接,通过return false阻止浏览器默认行为,就可以走ajax途径,做到良好的页面效果。当js被禁用,该链接可以依然有效。

js(比如jQuery) 可以让你做到,对搜索引擎是纯静态的内容,而对用户却是由ajax动态载入和更新的内容。既不影响用户体验,也不会影响搜索引擎搜录 。

以上都是附属,非正题,而且说起来容易,想做好却是工作量巨大。回归正题,今天在浏览资讯,无意关联到了一个网站,发现其首页的幻灯切换真正体现了什么叫 网站可用性

看图,这是在禁用js的情况下截图:

这样的外观很常见,应该很容易想到js效果是怎样的。

而该幻灯效果在禁用了js的情况下, 外观没有很大改变,仅仅是右侧出现了一个滑动条,可以拖动以浏览幻灯的不同内容,而左下角的数字标识则是以锚点的方法依然起作用,点击数字可以跳到锚点对应的图片幻灯内容。

话说,之前从未想过如此去做一个幻灯效果,怎么样,有木有启示?!

该网站地址为:http://www.mymodernmet.com/

Node.js使用的场景

工欲善其事必先利其器, 利其器前也要选好这个“器”。Nodejs好像很好,但是也不是什么场景都好用,以下可以做些参考。

来源于:http://cnodejs.org/topic/4f97d5b8407edba2146030dd

原文地址在这里:http://nodeguide.com/convincingtheboss.html 英文版,题目的意思是说服老板的指南,文章中就Node.js应用场景这一重要话题说了一些看法,我摘取其中比较重要的段落,翻译在这里:

Continue reading Node.js使用的场景

Express.js中文入门指引手册

来源于:http://www.csser.com/board/4f77e6f996ca600f78000936

Express 是基于 Node.js,高性能、一流的web开发框架。

本手册由一回于 2011-4-24 首次翻译,如今已经过去接近一年,express 最新的版本已经与当时翻译有些脱节,为了方便内容更新,将使用 csser 开发的贴板功能进行维护,也方便大家针对细节进行讨论,并请指出翻译不当之处。

express 的安装

$ npm install express

或者

$ npm install -g express

创建服务器

要创建 express.HTTPServer 的实例,只需简单的调用 createServer() 方法即可。通过 HTTPServer 实例 app 我们可以定义基于 HTTP 动作(HTTP verbs)的路由(routes),本例中为 app.get()

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

app.get('/', function(req, res){
  res.send('hello world from csser.com!');
});

app.listen(3000);

Continue reading Express.js中文入门指引手册

NodeJS入门

来源于: http://www.nodebeginner.org/index-zh-cn.html

关于

本书致力于教会你如何用Node.js来开发应用,过程中会传授你所有所需的“高级”JavaScript知识。本书绝不是一本“Hello World”的教程。

状态

你正在阅读的已经是本书的最终版。因此,只有当进行错误更正以及针对新版本Node.js的改动进行对应的修正时,才会进行更新。

本书中的代码案例都在Node.js 0.6.11版本中测试过,可以正确工作。

读者对象

本书最适合与我有相似技术背景的读者: 至少对一门诸如Ruby、Python、PHP或者Java这样面向对象的语言有一定的经验;对JavaScript处于初学阶段,并且完全是一个Node.js的新手。

这里指的适合对其他编程语言有一定经验的开发者,意思是说,本书不会对诸如数据类型、变量、控制结构等等之类非常基础的概念作介绍。要读懂本书,这些基础的概念我都默认你已经会了。

然而,本书还是会对JavaScript中的函数和对象作详细介绍,因为它们与其他同类编程语言中的函数和对象有很大的不同。

本书结构

读完本书之后,你将完成一个完整的web应用,该应用允许用户浏览页面以及上传文件。

当然了,应用本身并没有什么了不起的,相比为了实现该功能书写的代码本身,我们更关注的是如何创建一个框架来对我们应用的不同模块进行干净地剥离。 是不是很玄乎?稍后你就明白了。

本书先从介绍在Node.js环境中进行JavaScript开发和在浏览器环境中进行JavaScript开发的差异开始。

紧接着,会带领大家完成一个最传统的“Hello World”应用,这也是最基础的Node.js应用。

最后,会和大家讨论如何设计一个“真正”完整的应用,剖析要完成该应用需要实现的不同模块,并一步一步介绍如何来实现这些模块。

可以确保的是,在这过程中,大家会学到JavaScript中一些高级的概念、如何使用它们以及为什么使用这些概念就可以实现而其他编程语言中同类的概念就无法实现。

该应用所有的源代码都可以通过
本书Github代码仓库.

Continue reading NodeJS入门

了解JavaScript单元测试 – 自动化JavaScript代码跨浏览器测试

来源:高效 JavaScript 单元测试 http://www.ibm.com/developerworks/cn/opensource/os-jstesting/index.html

一个损坏的 JavaScript 代码示例

Web 应用程序面临的一个最大挑战是支持不同版本的 Web 浏览器。能在 Safari 上运行的 JavaScript 代码不一定能在 Windows® Internet Explorer (IE)、Firefox 或 Google Chrome 上运行。这个挑战的根源是呈现层中的 JavaScript 代码从一开始就没有进行测试。如果没有对代码进行单元测试,那么在升级或支持新浏览器后,组织可能需要花钱反复测试 Web 应用程序。本文将展示如何通过高效的 JavaScript 代码单元测试降低测试成本。

Continue reading 了解JavaScript单元测试 – 自动化JavaScript代码跨浏览器测试