kun的记事本 - js&html&css&php » 2011

JSHint简介

作者：kun10 发布时间：May 15, 2011 分类：JavaScript

JSHint介绍

翻译自www.jshint.com
JSHint(注意不是jslint：）)是一个由javascript社区驱动开发的用于检查javascript代码错误和问题的工具，有了他，可以使你保持一个良好的编码风格。你可以很简单的配置它以适应你目前的一个编码风格。
目前JSHint的源码可以在github上面找到。

JSHint文档

如何使用JSHint

JSHint是一个全局的函数，他接受两个参数，

JSHint(source,options);

一个是代码source，另一个是options（选项）
第一个参数可以是一个字符串或者是一个字符串数组。如果是字符串，则他会被\n和\r分割，如果传入的参数是数组，就要保证数组的每一项是一行代码。
因此源码参数可以是javascript代码或者是一个json形式。如果所有的检测都ok，JSHint会返回true，否则就返回false。
当返回false的时候，你可以用JSHint.errors来获取错误信息或者用JSHint.data()来获取lint的信息。
如果要了解更多，参见源代码。
使用JSHint，你可以在js文件的开始设定选项，例如

/*jshint evil:true, boss:true */

而设定global参数可以告诉JSHint，全局的变量配置。
例如

/*global DISQUS: true, jQuery: false */

以上的这个例子是告诉JSHint,DISQUS是你自己声明的全局变量，而jQuery是你引入的全局变量

JSHint和JSLint有什么区别？

JSHint是JSLint的一个分支（fork），他比JSLint更加的便捷。用来约束你的代码质量和编码风格。
每个人都有不一样的编码习惯和风格，JSHint通过配置可以适应于各种情况。

JSHint的适用环境

浏览器环境（browsers）
Node.js
jQuery
ES5
CouchDB
Prototype.js
Mootools.js

JSHint的选项配置

asi

bitwise

boss

curly

debug

debugger

eqeqeq

eqnull

evil

forin

immed

(function(){
//
}());

而不是

(function(){
//bla bla
})();

laxbreak

maxerr

newcap

noarg

noempty

JSLint

new JsUIWindow();
//注意这个调用是没有把构造器的结果赋值给变量的

因此，我们需要使用构造器的时候可以禁用这个选项。

nomen

onevar

passfail

plusplus

regexp

undef

sub

strict

一篇关于严格模式的blog

white

转载请注明出处～

javascript的Array-like对象

作者：kun10 发布时间：May 3, 2011 分类：JavaScript

什么是javascript里面的ArrayLike对象？
一切都是源于看YUI的Array部分，Y.Array()方法本身就能把对象转化为数组的方法，接受一个叫arraylike的参数。
其实arraylike我们经常会遇到，函数的arguments对象就是一个最常见的arraylike对象。
我们可以在firebug里面console.log一个函数的arguments对象，会发现他是一个对象，不是会发现他带有一个length属性。
但是我们却不能用普通的数组的方法来操作arguments对象
比如：

arguments.pop();//arguments.pop is not a function

很奇特吧？其实arraylike的对象还不只arguments对象一个
document.getElementsByTagName(), document.images, document.childNodes这几个货都是arraylike的对象。
既然这些对象是arraylike的，我们自然很渴望使用array的方法来操作他们。
方法很早就有人写了。

var newArray = Array.prototype.slice.call(arguments);

原理：
Array.prototype.slice: The original slice method that is given to all arrays via the prototype chain. We can’t call it directly though, because when it runs internally, it looks at the this keyword, and calling it here would make this point to Array, not our arguments variable.
Array.prototype.slice.call(): call() and apply() are prototype methods of the Function object, meaning that they can be called on every function in javascript. These allow you to change what the this variable points to inside a given function.
中文注解：
Array.prototype.slice是Array原型上面的slice方法，因为Arraylike对象不是array，所以直接使用slice是无效的，因此我们要把我们的arguments对象作为this，传入slice方法中。如何传入slice方法，我们使用call方式来把arguments作为this传给slice做处理。call和apply是Function构造函数对象的原型方法，因此我们可以对任意的函数使用。this最终被函数处理成一个数组。

这在非IE的情况下面好使,因为在IE下面domnodelist不被认为是对象，对于IE我们只能使用慢一点的方法了。

var newArray = [];
for(var i = 0;i< arguments.length;i++){
    arr.push(arguments[i]);
}
return newArray;

此时newArray就是一个数组对象。
我们可以对他pop(),push()等等等等。。。
参考：
http://nfriedly.com/techblog/2009/06/advanced-javascript-objects-arrays-and-array-like-objects/(这篇更靠谱点。。。)
http://shifteleven.com/articles/2007/06/28/array-like-objects-in-javascript

YUI发布YUI Test1.0.0 beta2版本

作者：kun10 发布时间：May 1, 2011 分类：JavaScript

原文地址：here
译者:qiaofu
去年我们发布了YUI test 的1.0beta1版本，之后我们便进行了反馈的收集，bug的修补以及补充新特性。今天我很高兴的宣布我们的beta2版本也发布了，这将是我们在通用版本前的最后一个版本。新的beta2版本的发布拥有一些新的核心功能，例如对Node.js的初步支持。所有的这一切都是为了创建一个更完整的测试解决方案，方便你在任何地方进行javascript的测试。

核心的变化

基于来自YUI社区的反馈，我们对YUI Test的核心做了一些补充。首先是加入了测试用例对象的初始化（init()）和销毁的方法（destroy()），而在此之前，我们一直用setUp和tearDown来做数据的初始化和销毁。在传统的xUnit形式的测试框架中，setUp用来在每一个测试前运行，而tearDown则是运行于每一个之后。init和destroy则是分别运行于测试用例对象中所有setUp()方法之前和tearDown方法之后，并都只运行一次。这两个方法有利于管理整个贯穿于整个用例对象的数据。例如：

var testCase = new YUITest.TestCase({
     name: "TestCase Name",     
     //---------------------------------------------                                              
     // init and destroy     
     //---------------------------------------------
     init : function () {
         this.data = { 
             name : "Nicholas",
             age : 28
         };     
     },     
     destroy : function () {
         delete this.data;
     },
     //---------------------------------------------     
     // Tests     
     //---------------------------------------------
     testName: function () {
          YUITest.Assert.areEqual("Nicholas", this.data.name, "Name should be 'Nicholas'");
     },
     testAge: function () {
          YUITest.Assert.areEqual(28, this.data.age, "Age should be 28");
     }
});

另一个变化是“上下文数据”（context data）特性的引入。当一个测试（testRunner）开始，他会创建一个对象，这个对象会被传递到每一个init方法、setUp方法、destroy方法以及tearDown方法和test方法里面，默认情况这个对象是空的。你可以利用他在多个测试用例对象和方法之间共享一些数据。例如：

var testSuite = new YUITest.TestSuite({
     name: "Test Suite Name",
     setUp: function(data){
         data.topLevel = 1;
     }
}); 
testSuite.add(new YUITest.TestCase({
     name: "First Test Case",
     init: function(data){
          data.foo = "bar";
     },
     testValueOfFoo : function (data) {
          YUITest.Assert.areEqual("bar", data.foo);
          //数据来自init
     },
     testValueOfTopLevel: function(data){
          YUITest.Assert.areEqual(1, data.topLevel);
          //数据来自测试套件
     }
});
testSuite.add(new YUITest.TestCase({
     name: "Second Test Case",
     testValueOfFoo : function (data) {
         YUITest.Assert.areEqual("bar", data.foo);
         //数据来自第一个测试用例的init
     },
     testValueOfTopLevel: function(data){
         YUITest.Assert.areEqual(1, data.topLevel);
         //数据来自测试套件
     }
});

当然最关键的一点，如何使用好上下文数据取决于你自己，即便不用它你也可以很好的完成测试的工作。

针对Node.js的YUI Test

在YUI test beta2里面，我们增加了对Node.js的支持，你可以利用如下命令安装

~:npm install yuitest

一旦安装完成，你就可以传入测试文件和被测试文件的路径，进行测试。

~:yuitest testfile.js path/to/test

在浏览器中写javascript测试和在Node.js里面写javascript测试的区别在于，浏览器端的js测试，你需要在测试页面中引入yui test文件，Nodejs中你需要require引入YUItest。而利用一下的形式你可以在浏览器端和Node.js端用同一套脚本

(function(){
     //define local version of YUITest based on what's available.
     var YUITest = this.YUITest || require("yuitest");//引入YUITest，这句是关键
     var testCase = new YUITest.TestCase({
         //test case details
     });
     YUITest.TestRunner.add(testCase);
})();

如果是浏览器端引入yuitest文件，那么this.YUITest应该会指向window对象下面的YUITest，否则就是用NodeJs的require方式来引入yuitest。
不过有一点要注意的是，Node.js环境里面并没有Dom，因此dom部分很可能在node.js下面抛出异常（译者YY：这一点或许安装了Node.js的jsdom会解决问题）

展望通用版本

要达到GA版本我们还有很多要做，还有很多的bug要修复，定制更好的说明文档以及跟进社区里面提及的重要点。blablabla...

kun的记事本 - js&html&css&php