分类目录归档:前端开发

Javascript 匿名函数与封装

迷惑了一会儿不同JS库的封装后,终于有了点头绪。大致就是:

创建一个自调用匿名函数,设计参数window,并传入window对象。

而这个过和的目的则是,

使得自身的代码不会被其他代码污染,同时也可以不污染其他代码。

jQuery 封装

于是找了个早期版本的jQuery,版本号是1.7.1里面的封装代码大致是下面这样的

(function( window, undefined ) {
var jQuery = (function() {console.log('hello');});
window.jQuery = window.$ = jQuery;
if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
    define( "jquery", [], function () { return jQuery; } );
}
})( window );

其中的

console.log('hello');

是用以验证是否按开头说的这样工作,于是我们就可以在window中调用jQuery

window.$

或者是

window.jQuery

于是我们就可以创建一个类似的封装

(function(window, undefined) {
    var PH = function() {

    }
})(window)

相比于上面只是少了两步

  • 定义jQuery的符号及全局调用
  • 异步支持

于是找了下更早期的jQuery的封装,方法上大致是一样的, 除了。。

if (typeof window.jQuery == "undefined") {
    var jQuery = function() {};
    if (typeof $ != "undefined")
        jQuery._$ = $;

    var $ = jQuery;
};

很神奇的判断方法,以致于我们没有办法重写上一步的jQuery。于是只好看看最新的jQuery的封装是怎样的。于是就打开了2.1.1,发现除了加了很多功能以外,基本上思想还是不变的

(function(global, factory) {

    if (typeof module === "object" && typeof module.exports === "object") {
        module.exports = global.document ?
            factory(global, true) :
            function(w) {
                if (!w.document) {
                    throw new Error("jQuery requires a window with a document");
                }
                return factory(w);
        };
    } else {
        factory(global);
    }

}(typeof window !== "undefined" ? window : this, function(window, noGlobal) {
    var jQuery = function() {
        console.log('jQuery');
    };
    if (typeof define === "function" && define.amd) {
        define("jquery", [], function() {
            return jQuery;
        });
    };
    strundefined = typeof undefined;
    if (typeof noGlobal === strundefined) {
        window.jQuery = window.$ = jQuery;
    };
    return jQuery;
}));

在使用浏览器的情况下

typeof module ="undefined"

所以上面的情况是针对于使用Node.js等的情况下判断的,这也表明jQuery正在变得臃肿。

Backbone 封装

打开了Backbone看了一下

(function(root, factory) {

    if (typeof define === 'function' && define.amd) {
        define(['underscore', 'jquery', 'exports'], function(_, $, exports) {
            root.Backbone = factory(root, exports, _, $);
        });

    } else if (typeof exports !== 'undefined') {
        var _ = require('underscore');
        factory(root, exports, _);

    } else {
        root.Backbone = factory(root, {}, root._, (root.jQuery || root.Zepto || root.ender || root.$));
    }

}(this, function(root, Backbone, _, $) {
    Backbone.$ = $;
    return Backbone;

}));

除了异步支持,也体现了其对于jQuery和underscore的依赖,百

        define(['underscore', 'jquery', 'exports'], function(_, $, exports) {
            root.Backbone = factory(root, exports, _, $);
        });

表明backbone是原生支持requirejs的。

Underscore 封装

于是,又看了看Underscore,发现这个库又占领了一个符号 _

(function() {
    var root = this;
    var _ = function(obj) {
        if (obj instanceof _) return obj;
        if (!(this instanceof _)) return new _(obj);
        this._wrapped = obj;
    };

    if (typeof exports !== 'undefined') {
        if (typeof module !== 'undefined' && module.exports) {
            exports = module.exports = _;
        }
        exports._ = _;
    } else {
        root._ = _;
    }

    if (typeof define === 'function' && define.amd) {
        define('underscore', [], function() {
            return _;
        });
    }
}.call(this));

总体上也和差不多都是匿名函数,除了最后用的是call()方法。

http://www.phodal.com/blog/javascript-anonymous-function-encapsulation/

10个用来处理键盘事件的JQuery插件和JS类库

http://www.gbtags.com/gb/share/2612.htm

10个用来处理键盘事件的JQuery插件和JS类库

申请达人,去除赞助商链接

通常在web应用或者网站中,我们使用鼠标来控制元素或者执行导航,相对于桌面应用来说,使用web应用的快捷键次数可能会相对比较少,但是对于熟练的专业人员来说,使用键盘可能更加容易并且更加快速,在今天这篇文章中,我们收集了10个jQuery的插件,帮助你创建各种基于键盘事件的web应用,相信大家会喜欢的!

1. Mousetrap

Mousetrap是一个超简单的处理键盘快捷键的类库,压缩有只有1.6kb大小,并且不依赖任何的外部类库。你使用的主要就是绑定方法。它会帮助你绑定指定的键盘命令到一个callback方法中。并且拥有第三个参数来制定监听的事件类型。 可以是keypress,keydown或者keyup。任何被空格分隔的key会被认为是连续的。如果你你连续的输入key,最后一个输入key会触发callback。

支持浏览器:

  • IE6+
  • Safari
  • Firefox
  • Chrome

2. Jwerty

jwerty是一个JS类库帮助你针对元素和事件来绑定,触发和声明输入键组合。它将难于使用的标准api生成更加清晰并且容易使用的格式。所有的jwerty事件都要求jwertycode。jwertycode可以以字符串或者数组传递,使用字符串可能是最简单的方式来生成组合。这个类库非常小,压缩后1.5kb,gzipped大概3kb。不依赖任何类库。兼容jQuery,zepto或者Ender。

3. Keypress

Keypress是一个输入捕捉类库,拥有一些特殊的特性。非常容易上手和使用,大概9kb,不依赖任何类库。可以开发非常简单或者高级的应用。这个类库针对keyup和keydown拥有一些回调函数。并且拥有选项来捕捉单次输入或者其它。

4. KeyboardJS

keyboardjs是一个标准的JS类库,处理键盘输入帮助我们理解按键输入并且生成行为。这个类库支持简单的组合按键并且支持不同LOCALE。针对press和release事件拥有回调函数

5. Keymaster.js

Keymaster是一个简单的迷你类库,用来定义和生成web应用中的键盘快捷键。不依赖任何类库。和其它类库同时使用不会有任何冲突。

6. Kibo

Kibo是一个简单的JS类库,用来处理键盘事件。没有任何依赖。Kibo的构建器拥有一个可选选项,一个用来定义事件句柄的HTML元素。

7. Keymage

Keyimage是一个简单的类库,用来处理键盘绑定。书写这个类库的目的是没有其它类库支持整合所有的特性,并且方便大家书写一个新的类库。

8. Keycode.js

这个类库标准化JS键盘码以便支持浏览器兼容。这个类库支持key对象,这些对象是js对象,用来记录键盘码是否被其它操作修改。使用hot_key()接受类似的对象,并且返回一个适合jQuery hotkey插件或者Binny VA’s short.js类库

9. Open JS

OpenJS允许你添加Keyboard快捷键到你的JS应用中

10. JavaScript Shortcuts Library

一个帮助你快速创建快捷键的类库

via codegeekz.

超实用的JavaScript技巧及最佳实践(上)

http://www.csdn.net/article/2013-12-27/2817938-45-Useful-JavaScript-Tips

摘要:JavaScript是一门非常流行的编程语言,许多开发者都会把JavaScript选为入门语言,本文向大家分享JavaScript开发的小技巧、最佳实践等非常实用的内容。

众所周知,JavaScript是一门非常流行的编程语言,开发者用它不仅可以开发出炫丽的Web程序,还可以用它来开发一些移动应用程序(如PhoneGap或Appcelerator),它还有一些服务端实现,比如NodeJS、Wakanda以及其它实现。此外,许多开发者都会把JavaScript选为入门语言,使用它来做一些弹出窗口等小东西。

在这篇文章中,作者将会向大家分享JavaScript开发的小技巧、最佳实践等非常实用的内容,不管你是前端开发者还是服务端开发者,都应该来看看这些小技巧,它们绝对会让你受益的。

文中所提供的代码片段都已经过最新版的Chrome 30测试,该浏览器使用V8 JavaScript引擎(V8 3.20.17.15)。

1.第一次给变量赋值时,别忘记var关键字

给一个未声明的变量赋值,该变量会被自动创建为全局变量,在JS开发中,应该避免使用全局变量。

2.使用===替换==

并且永远不要使用=或!=。

 

  1. [10] === 10    // is false
  2. [10]  == 10    // is true
  3. ’10’ == 10     // is true
  4. ’10’ === 10    // is false
  5.  []   == 0     // is true
  6.  [] ===  0     // is false
  7.  ” == false   // is true but true == “a” is false
  8.  ” ===   false // is false

3.使用分号来作为行终止字符

在行终止的地方使用分号是一个很好的习惯,即使开发人员忘记加分号,编译器也不会有任何提示,因为在大多数情况下,JavaScript解析器会自动加上。

4.创建构造函数

 

  1. function Person(firstName, lastName){
  2.     this.firstName =  firstName;
  3.     this.lastName = lastName;
  4. }
  5. var Saad = new Person(“Saad”, “Mousliki”);

5.应当小心使用typeof、instanceof和constructor

 

  1. var arr = [“a”, “b”, “c”];
  2. typeof arr;   // return “object”
  3. arr  instanceof Array // true
  4. arr.constructor();  //[]

6.创建一个Self-calling函数

这通常会被称为自我调用的匿名函数或立即调用函数表达式(LLFE)。当函数被创建的时候就会自动执行,好比下面这个:

 

  1. (function(){
  2.     // some private code that will be executed automatically
  3. })();
  4. (function(a,b){
  5.     var result = a+b;
  6.     return result;
  7. })(10,20)

7.给数组创建一个随机项

  1. var items = [12, 548 , ‘a’ , 2 , 5478 , ‘foo’ , 8852, , ‘Doe’ , 2145 , 119];
  2. var  randomItem = items[Math.floor(Math.random() * items.length)];

8.在特定范围里获得一个随机数

下面这段代码非常通用,当你需要生成一个假的数据用来测试时,比如在最低工资和最高之前获取一个随机值。

 

  1. var x = Math.floor(Math.random() * (max – min + 1)) + min;

9.在数字0和最大数之间生成一组随机数

  1. var numbersArray = [] , max = 100;
  2. for( var i=1; numbersArray.push(i++) < max;);  // numbers = [0,1,2,3 … 100]

10.生成一组随机的字母数字字符

 

  1. function generateRandomAlphaNum(len) {
  2.     var rdmstring = “”;
  3.     for( ; rdmString.length < len; rdmString  += Math.random().toString(36).substr(2));
  4.     return  rdmString.substr(0, len);
  5. }

11.打乱数字数组

 

  1. var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
  2. numbers = numbers.sort(function(){ return Math.random() – 0.5});
  3. /* the array numbers will be equal for example to [120, 5, 228, -215, 400, 458, -85411, 122205]  */

12.字符串tim函数

trim函数可以删除字符串两端的空白字符,可以用在Java、C#、PHP等多门语言里。

 

 

  1. String.prototype.trim = function(){return this.replace(/^\s+|\s+$/g, “”);};

13.数组追加

 

  1. var array1 = [12 , “foo” , {name “Joe”} , -2458];
  2. var array2 = [“Doe” , 555 , 100];
  3. Array.prototype.push.apply(array1, array2);
  4. /* array1 will be equal to  [12 , “foo” , {name “Joe”} , -2458 , “Doe” , 555 , 100] */

14.将参数对象转换为数组 
 

  1. var argArray = Array.prototype.slice.call(arguments);

15.验证一个给定参数是否为数字

 

 

 

 

 

  1. function isNumber(n){
  2.     return !isNaN(parseFloat(n)) && isFinite(n);
  3. }

16.验证一个给定的参数为数组

 

  1. function isArray(obj){
  2.     return Object.prototype.toString.call(obj) === ‘[object Array]’ ;
  3. }

注意,如果toString()方法被重写了,你将不会得到预期结果。

 

或者你可以这样写:

 

  1. Array.isArray(obj); // its a new Array method

同样,如果你使用多个frames,你可以使用instancesof,如果内容太多,结果同样会出错。
 

  1. var myFrame = document.createElement(‘iframe’);
  2. document.body.appendChild(myFrame);
  3. var myArray = window.frames[window.frames.length-1].Array;
  4. var arr = new myArray(a,b,10); // [a,b,10]
  5. // instanceof will not work correctly, myArray loses his constructor
  6. // constructor is not shared between frames
  7. arr instanceof Array; // false

 

17.从数字数组中获得最大值和最小值

 

  1. var  numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
  2. var maxInNumbers = Math.max.apply(Math, numbers);
  3. var minInNumbers = Math.min.apply(Math, numbers);

18.清空数组

 

  1. var myArray = [12 , 222 , 1000 ];
  2. myArray.length = 0; // myArray will be equal to [].

19.不要用delete从数组中删除项目

开发者可以使用split来代替使用delete来删除数组项。与其删除数组中未定义项目,还不如使用delete来替代。

 

  1. var items = [12, 548 ,’a’ , 2 , 5478 , ‘foo’ , 8852, , ‘Doe’ ,2154 , 119 ];
  2. items.length; // return 11
  3. delete items[3]; // return true
  4. items.length; // return 11
  5. /* items will be equal to [12, 548, “a”, undefined × 1, 5478, “foo”, 8852, undefined × 1, “Doe”, 2154,       119]   */

也可以……

 

  1. var items = [12, 548 ,’a’ , 2 , 5478 , ‘foo’ , 8852, , ‘Doe’ ,2154 , 119 ];
  2. items.length; // return 11
  3. items.splice(3,1) ;
  4. items.length; // return 10
  5. /* items will be equal to [12, 548, “a”, 5478, “foo”, 8852, undefined × 1, “Doe”, 2154,       119]   */

delete方法应该删除一个对象属性。

 
20.使用length属性缩短数组

如上文提到的清空数组,开发者还可以使用length属性缩短数组。

 

  1. var myArray = [12 , 222 , 1000 , 124 , 98 , 10 ];
  2. myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124].

如果你所定义的数组长度值过高,那么数组的长度将会改变,并且会填充一些未定义的值到数组里,数组的length属性不是只读的。
 

  1. myArray.length = 10; // the new array length is 10
  2. myArray[myArray.length – 1] ; // undefined

 

来自: flippinawesome

超实用的JavaScript技巧及最佳实践(下)

http://www.csdn.net/article/2014-01-06/2818025-Useful-JavaScript-Tips-Best-Practices

摘要:JavaScript是一门非常流行的编程语言,许多开发者都会把JavaScript选为入门语言,本文向大家分享JavaScript开发的小技巧、最佳实践等非常实用的内容。

在前段时间,CSDN研发频道发表了超实用的JavaScript技巧及最佳实践(上),很多开发者都觉得里面所提到的技巧非常实用,基于此,我们再向大家推荐超实用的JavaScript技巧及最佳实践(下),希望对大家有所帮助。

文中所提供的代码片段都已经过最新版的Chrome 30测试,该浏览器使用V8 JavaScript引擎(V8 3.20.17.15)。

1.使用逻辑符号&&或者||进行条件判断

 

  1. var foo = 10;
  2. foo == 10 && doSomething(); // is the same thing as if (foo == 10) doSomething();
  3. foo == 5 || doSomething(); // is the same thing as if (foo != 5) doSomething();

||也可以用来设置函数参数的默认值

  1. Function doSomething(arg1){
  2.     Arg1 = arg1 || 10; // arg1 will have 10 as a default value if it’s not already set
  3. }

2.使用map()方法来遍历数组 

 

  1. var squares = [1,2,3,4].map(function (val) {
  2.     return val * val;
  3. });
  4. // squares will be equal to [1, 4, 9, 16]

3.舍入小数位数 

 

  1. var num =2.443242342;
  2. num = num.toFixed(4);  // num will be equal to 2.4432

4.浮点数问题 

 

  1. 0.1 + 0.2 === 0.3 // is false
  2. 9007199254740992 + 1 // is equal to 9007199254740992
  3. 9007199254740992 + 2 // is equal to 9007199254740994

0.1+0.2等于0.30000000000000004,为什么会发生这种情况?根据IEEE754标准,你需要知道的是所有JavaScript数字在64位二进制内的都表示浮点数。开发者可以使用toFixed()和toPrecision()方法来解决这个问题。

5.使用for-in loop检查遍历对象属性 

下面这段代码主要是为了避免遍历对象属性。

 

  1. for (var name in object) {
  2.     if (object.hasOwnProperty(name)) {
  3.         // do something with name
  4.     }
  5. }

6.逗号操作符 

 

  1. var a = 0;
  2. var b = ( a++, 99 );
  3. console.log(a);  // a will be equal to 1
  4. console.log(b);  // b is equal to 99

7.计算或查询缓存变量 

在使用jQuery选择器的情况下,开发者可以缓存DOM元素

 

  1. var navright = document.querySelector(‘#right’);
  2. var navleft = document.querySelector(‘#left’);
  3. var navup = document.querySelector(‘#up’);
  4. var navdown = document.querySelector(‘#down’);

8.在将参数传递到isFinite()之前进行验证 

 

  1. isFinite(0/0) ; // false
  2. isFinite(“foo”); // false
  3. isFinite(“10”); // true
  4. isFinite(10);   // true
  5. isFinite(undifined);  // false
  6. isFinite();   // false
  7. isFinite(null);  // true  !!!

9.在数组中避免负向索引 

 

  1. var numbersArray = [1,2,3,4,5];
  2. var from = numbersArray.indexOf(“foo”) ;  // from is equal to -1
  3. numbersArray.splice(from,2);    // will return [5]

确保参数传递到indexOf()方法里是非负向的。

10.(使用JSON)序列化和反序列化 

 

  1. var person = {name :’Saad’, age : 26, department : {ID : 15, name : “R&D”} };
  2. var stringFromPerson = JSON.stringify(person);
  3. /* stringFromPerson is equal to “{“name”:”Saad”,”age”:26,”department”:{“ID”:15,”name”:”R&D”}}”   */
  4. var personFromString = JSON.parse(stringFromPerson);
  5. /* personFromString is equal to person object  */

11.避免使用eval()或Function构造函数 

eval()和Function构造函数被称为脚本引擎,每次执行它们的时候都必须把源码转换成可执行的代码,这是非常昂贵的操作。

 

  1. var func1 = new Function(functionCode);
  2. var func2 = eval(functionCode);

12.避免使用with()方法 

如果在全局区域里使用with()插入变量,那么,万一有一个变量名字和它名字一样,就很容易混淆和重写。

13.避免在数组里使用for-in loop

而不是这样用:

 

  1. var sum = 0;
  2. for (var i in arrayNumbers) {
  3.     sum += arrayNumbers[i];
  4. }

这样会更好: 

 

  1. var sum = 0;
  2. for (var i = 0, len = arrayNumbers.length; i < len; i++) {
  3.     sum += arrayNumbers[i];
  4. }

因为i和len是循环中的第一个语句,所以每次实例化都会执行一次,这样执行起来就会比下面这个更快:

 

 

  1. for (var i = 0; i < arrayNumbers.length; i++)

为什么?数组长度arraynNumbers在每次loop迭代时都会被重新计算。 

14.不要向setTimeout()和setInterval()方法里传递字符串

如果在这两个方法里传递字符串,那么字符串会像eval那样重新计算,这样速度就会变慢,而不是这样使用:

 

  1. setInterval(‘doSomethingPeriodically()’, 1000);
  2. setTimeOut(‘doSomethingAfterFiveSeconds()’, 5000);

相反,应该这样用: 

 

  1. setInterval(doSomethingPeriodically, 1000);
  2. setTimeOut(doSomethingAfterFiveSeconds, 5000);

15.使用switch/case语句代替较长的if/else语句 

 

如果有超过2个以上的case,那么使用switch/case速度会快很多,而且代码看起来更加优雅。

16.遇到数值范围时,可以选用switch/casne 

 

  1. function getCategory(age) {
  2.     var category = “”;
  3.     switch (true) {
  4.         case isNaN(age):
  5.             category = “not an age”;
  6.             break;
  7.         case (age >= 50):
  8.             category = “Old”;
  9.             break;
  10.         case (age <= 20):
  11.             category = “Baby”;
  12.             break;
  13.         default:
  14.             category = “Young”;
  15.             break;
  16.     };
  17.     return category;
  18. }
  19. getCategory(5);  // will return “Baby”

17.创建一个对象,该对象的属性是一个给定的对象 

可以编写一个这样的函数,创建一个对象,该对象属性是一个给定的对象,好比这样:

 

  1. function clone(object) {
  2.     function OneShotConstructor(){};
  3.     OneShotConstructor.prototype= object;
  4.     return new OneShotConstructor();
  5. }
  6. clone(Array).prototype ;  // []

18.一个HTML escaper函数 

 

  1. function escapeHTML(text) {
  2.     var replacements= {“<“: “<“, “>”: “>”,”&”: “&”, “\””: “””};
  3.     return text.replace(/[<>&”]/g, function(character) {
  4.         return replacements[character];
  5.     });
  6. }

19.在一个loop里避免使用try-catch-finally 

try-catch-finally在当前范围里运行时会创建一个新的变量,在执行catch时,捕获异常对象会赋值给变量。

不要这样使用:

 

  1. var object = [‘foo’, ‘bar’], i;
  2. for (i = 0, len = object.length; i <len; i++) {
  3.     try {
  4.         // do something that throws an exception
  5.     }
  6.     catch (e) {
  7.         // handle exception
  8.     }
  9. }

应该这样使用: 

 

  1. var object = [‘foo’, ‘bar’], i;
  2. try {
  3.     for (i = 0, len = object.length; i <len; i++) {
  4.         // do something that throws an exception
  5.     }
  6. }
  7. catch (e) {
  8.     // handle exception
  9. }

20.给XMLHttpRequests设置timeouts  

如果一个XHR需要花费太长时间,你可以终止链接(例如网络问题),通过给XHR使用setTimeout()解决。

 

  1. var xhr = new XMLHttpRequest ();
  2. xhr.onreadystatechange = function () {
  3.     if (this.readyState == 4) {
  4.         clearTimeout(timeout);
  5.         // do something with response data
  6.     }
  7. }
  8. var timeout = setTimeout( function () {
  9.     xhr.abort(); // call error callback
  10. }, 60*1000 /* timeout after a minute */ );
  11. xhr.open(‘GET’, url, true);
  12. xhr.send();

此外,通常你应该完全避免同步Ajax调用。 

21.处理WebSocket超时

一般来说,当创建一个WebSocket链接时,服务器可能在闲置30秒后链接超时,在闲置一段时间后,防火墙也可能会链接超时。

为了解决这种超时问题,你可以定期地向服务器发送空信息,在代码里添加两个函数:一个函数用来保持链接一直是活的,另一个用来取消链接是活的,使用这种方法,你将控制超时问题。

添加一个timeID……

 

  1. var timerID = 0;
  2. function keepAlive() {
  3.     var timeout = 15000;
  4.     if (webSocket.readyState == webSocket.OPEN) {
  5.         webSocket.send(”);
  6.     }
  7.     timerId = setTimeout(keepAlive, timeout);
  8. }
  9. function cancelKeepAlive() {
  10.     if (timerId) {
  11.         cancelTimeout(timerId);
  12.     }
  13. }

keepAlive()方法应该添加在WebSocket链接方法onOpen()的末端,cancelKeepAlive()方法放在onClose()方法下面。
 

22.记住,最原始的操作要比函数调用快

对于简单的任务,最好使用基本操作方式来实现,而不是使用函数调用实现。

例如

 

  1. var min = Math.min(a,b);
  2. A.push(v);

基本操作方式: 

 

  1. var min = a < b ? a b;
  2. A[A.length] = v;

23.编码时注意代码的美观、可读 

JavaScript是一门非常好的语言,尤其对于前端工程师来说,JavaScript也非常重要,点击 这里可以访问更多优秀的JavaScript资源。

来自: flippinawesome.org

开发者必备:测试网站速度的五个免费在线工具

http://www.csdn.net/article/2013-11-04/2817380-website-speed-testing-tools

摘要:网页性能很大程度上决定了用户体验,最终可以决定网站的成功。虽然大家都知道提高浏览速度的重要性,可很多时候不知道什么元素拖了后腿。本文将介绍测试网站速度的五个免费在线工具,帮你设计出高效的网站。

如果你认为一个网站建成后,工作就已经完成,你就大错特错了。你需要不断监测其可用性和可访问性,一个小问题,可能毁了一切。而网页载入速度对于一个网站来讲至关重要,试想一下,你喜欢进一个需要很长时间才载入完毕的网站吗?而且,搜索引擎对网页载入速度也提出了要求。“The web should be fast。”据悉,网站若没有在4秒内读取出来,大多数的访客就会选择离开,甚至Google也将网页载入速度作为网站排名的众多因素之一,唯有提升网站效能才能让你的网站访客更多、更快乐。

国外开发/设计网站DesignInstruct推荐了5个最具代表性的测试工具,将帮助你确保你的网站正常、高效工作。

1. Pingdom Website Speed Test

Pingdom是一个免费的网站速度测试工作,不仅是看起来非常棒,而且尽可能多的呈现出你的网站的各方面信息。它可测试网站加载速度,对页面和大小进行分析。测试完成后会得到一份非常详细的测试报告,包括图片、CSS等,告诉你哪些地方出现问题。

2. Load Impact

Load Impact是一款在线网站压力测试工具。只需要输入网址进行测试,其便可以统计出加载网站的一些详细载入数据。包括整体加载和站内图片,javascript, CSS等代码载入。测试完成之后,网站还可以存储测试过的统计数据。(注:如果你未注册该网站使用进行测试,那么你的网站性能信息可能会被公开在网上。)

测试有两种方案,虽然免费方案能够测试的虚拟访客比较少(免费仅能够测试10、20、30、40、50人同时在线上),但一般使用已经足够了!如果不够,可以考虑购买Premium Account服务。不过,其功能可能会对网站产生一定的压力,大家可别用它去DoS别人网站哦。

3. Google PageSpeed Insights

相信有接触前端开发的大神们都听说过Google官方的PageSpeed Tools,这个网页载入速度检测工具有在线版本也有一个 Chrome 扩展,叫PageSpeed Insights。

PageSpeed Insights 的Chrome扩展是由谷歌官方开发的一款可以分析页面载入的各个方面,包括资源、网络、DOM以及时间线等等信息的插件,安装以后会附加到Developer Tools(开发者工具)中。所以安装之后,大家只需要在页面上点击右键——审查元素,就可以在最后一个标签中看到PageSpeed了。

PageSpeed的分析基于一个分为五类的最佳实践列表:

  • 优化缓存——让你应用的数据和逻辑完全避免使用网络
  • 减少回应时间——减少一连串请求-响应周期的数量
  • 减小请求大小——减少上传大小
  • 减小有效负荷大小——减小响应、下载和缓存页面的大小
  • 优化浏览器渲染——改善浏览器的页面布局

去谷歌开发者官网看了看,发现PageSpeed 不仅仅只是个在线工具、插件那么简单,还有开发者使用的API、SDK;甚至还有可以安装在Apache或者Nginx服务器上的开源模块!

4. OctaGate SiteTimer

OctaGate SiteTimer 是一个在线的网页读取速度测试工具,效果图基于AJAX技术,而且它是所有工具里面最直观的;如果你就想知道你的网页里面哪个元素拖了后腿,就跑这个工具。它就一张图,告诉你每个网页元素下载需要时间。

5. GTmetrix

有些网站速度测试工具如Baidu仅提供页面元素加载时间;有些工具如Pingdom提供的Start Time、Connect Time、First Byte和Last Byte细分仍无法满足要求。功能更强大的GTmetrix是国外的一个免费评测网页载入速度的服务,可提供详细报告:显示出网页里每个元件载入、开启或存取的时间;而且会保存每一个网站的记录,方便查看一个网站载入速度的历史变化。

如果你想将报告设定为不公开、或是储存报告、定时检查网页评分的话,可以免费注册GTmetrix帐户。

测试的工具有很多,上述五个相对具有代表性,下面再简介三个:

  • Web Page Analyzer——可让用户测试网站速度以提升性能,同时可计算网页大小、 复杂度和下载时间。
  • WebPagetest——原本是由AOL开发内部使用的工具,后来在Google Code上开源,是一款非常优秀的网页前端性能测试工具。

如果你喜欢的测试工具不在上述中,也欢迎你在文章评论中发表自己的看法。(文/钱曙光 责编/魏兵)

响应式导航设计案例解析(多图)

http://www.csdn.net/article/2013-10-10/2817135-responsive-navigation

摘要:导航设计包含多种设计元素,本文收集了响应式设计网站中各种主流的导航设计趋势,如果你想设计出更好的导航设计或者了解新的响应式设计潮流,那么这篇文章不容错过!

响应式导航的设计遵循了响应式Web设计理念,页面的设计往往会根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的调整。通过同比例缩减元素尺寸、调整页面结构布局以及内容的优化调整等方式,使用户在不同的平台上有着独一无二的用户体验。

本文收集了响应式设计网站中各种主流的导航设计趋势,如果你想设计出更好的导航设计或者了解新的响应式设计潮流,那么这篇文章不容错过!

调整尺寸&定位

这是响应式导航设计首个步骤,也被视为最简约的方法。目的在于设计一款永不被隐藏且能优雅的调整窗口大小。设计简短的导航链接,让页面看起来更加简洁、亮丽。

Fiafo就是一款典型的案例。导航链接设计居右侧,当浏览器窗口被压缩后,链接呈现在Logo下方,就如同一个单一的导航栏。当你调整浏览器尺寸后,该页面也会随之而更改,完全不受影响。

这种设计风格非常具有吸引力,因为它不需要隐藏任何链接,无需CSS3或JavaScript,页面上任何条目都能显示出。最大的缺点是,该导航限制了最多链接数量。

Paid to Exist采用了另一种设计趋势,其链接是浮动的。当浏览器的尺寸缩小到最小尺寸时,该链接不会扩大到像100%宽度那样。其采用了区块层级设计元素,导航横向排列不变,由一行变为两行,页面简洁清晰且用户体验一致。

菜单选择样式

菜单选择在响应式导航设计中,被设计师认为一种较为棘手的设计。一起来看下设计案例。

Apache CouchDB的设计案例中可以看出,其设计布局呈现细长型且容易操控,因为它是一款单页面设计。

在移动设备上用户可能不会在意导航设计样式。导航菜单选择并不一定要采用漂亮的解决按干,只要它们能易于操作即可!

随着响应式设计的发展趋势,未来可能会有其他的解决方案来替代菜单选择。如果你需要一个快速的导航,且能够用支持所有的操作系统,那么HTML元素倒是个不错的选择。

覆盖下拉菜单

在响应式设计中,隐藏菜单是一个非常流行的设计趋势。这是因为它能为页面节省更多的空间。

在移动设备上,屏幕的运用是极其宝贵的,因此,你要尽可能地向用户提供更多的空间。采用下单隐藏菜单是个完美的选择,突出高优先级内容的处理方式。

Designmodo便采用了这种布局,通过设定图标点击对菜单进行收缩或展开,列表将显示新的下拉元素。

StickyGram采用了区块级别链接,不会因调整尺寸大小而有所更改,适用于任何设备,以最好的方式呈现在你的面前。


 Tilde Inc采用了模块下拉菜单设计。

下拉菜单的共通点是:默认情况下菜单隐藏,一旦用户需要导航链接,点击图标菜单展开,选中后菜单自动消失隐藏,下一次操作时重复。优点是不会影响其他的页面内容。

多级导航

当你需要多个子链接的导航菜单,那么你不得不规划出一个完美的解决方案。 除了采用区块层级下拉菜单,你还可以选择创建多级导航菜单。

SonySony公司的网站设计为例。用户通过滚动页面找到任何他们想要的内容。

页脚链接

一旦用户点击导航按钮,它会自动跳转到采用哈希元素ID的页脚。用户可以快速访问页脚链接,无需手动滚动。

再来看下Contents Magazine设计风格,只有几个少有的顶部导航链接。调整浏览器,你就会看到一个搜索栏,并且会呈现出一些模块链接。目的是在于保持页面布局均匀,而无需额外的脚本,比如jQuery。

隐藏滑动菜单

这种设计趋势在Apple Store里经常可看到,这也是备受iOS开发者欢迎的设计风格。

虽然在CSS3中可创建这种效果,但请记住,不是所有浏览器都能支持。jQuery倒是个更加稳定的选择,甚至还有一些免费的开源插件可供你选择。

点击查看Sequence的设计风格。

英文出自:Teamtreehouse

近期十大优秀jQuery插件推荐

摘要:当今,设计领域竞争越来越激烈,唯有做出最优秀的产品才能在该领域独树一帜。而jQuery插件为设计和开发提供了强大的支撑力。本文将推荐从jQuery网站的Plugin频道中推选出的近期十款优秀jQuery插件,以便开发者借鉴。

当有限的开发知识限制了设计进展,你无法为自己插上创新的翅膀时,jQuery可以扩展你的视野。本文将推荐从jQuery网站的Plugin频道中推选出的近期十款优秀jQuery插件。

1. jQuery URL Shortener

正如名字所清晰表达的那样,该jQuery插件利用Google URL shortener API可将URL转化成短链接。

 

下载 | 演示

2. Bootstrap Tokenfield

Bootstrap Tokenfield是一款针对输入框的高级标签插件,可获取键盘输入焦点,支持复制—粘贴。

 

下载 演示

3. Retinize

Retinize可将图片质量进行提升,以在Retina显示器上完美显示。在像素艺术中,当你不希望存储高质量版本的图片时,该jQuery插件显得特别有用。

 

下载 | 演示

4. jQuery Scrollbox

它是一款简单、轻量级的jQuery插件。利用它,用户可以像旋转木马、传统的滚动形式那样滚动展示列表。

 

下载 | 演示

5. jQuery Scanner Detection

这是一款小插件。可对用户所使用扫描仪(barcode, QR Code……)进行探测、跟踪,并给出特定的反馈。

 

下载 | 演示

6. jQuery finderSelect

该jQuery插件可激活文件管理器,高亮显示被选择的元素,支持Ctrl+单击、Command+单击、Ctrl+拖动、Command+拖动及Shift+单击操作。

 

下载 演示

7. Yet Another DataTables Column Filter (Yadcf)

利用Yadcf,用户可轻松地针对表格每列添加过滤器组件。该插件基于DataTables jQuery插件开发而成。

 

下载 | 演示

8. jQuery noInput

该插件用来显示输入字段预期值的提示信息,与HTML5的placeholder属性相似。

 

下载 | 演示

9. HeapBox

无论你是Web设计师,还是Web开发工程师,一定了解设置本地HTML表单外观及功能的艰辛。Heapbox现在可代替selectbox,用JavaScript编写,效果很不错。现在它只针对selectbox,还无法处理textbox、checkbox等。Heapbox基于jQuery设计,却改变了大部分人写JavaScript的方式。

 

下载 | 演示

10. QUAIL

该插件用来查找影响页面美观、亲和力的内容。它可查找现页面中的设计问题,如图片缺少替换文字等。

 

下载 | 演示

原文来自:The Design Blitz

http://www.csdn.net/article/2013-08-15/2816585

可以直接拿来用的15个jQuery代码片段

摘要:开发人员利用jQuery代码不仅能给网站带来各种动画、特效,还会提高网站的用户体验。本文总结了开发者经常使用的15个jQuery代码片段,大家可以直接拿来用。

jQuery里提供了许多创建交互式网站的方法,在开发Web项目时,开发人员应该好好利用jQuery代码,它们不仅能给网站带来各种动画、特效,还会提高网站的用户体验。

本文收集了15段非常实用的jQuery代码片段,你可以直接复制黏贴到代码里,但请开发者注意了,要理解代码再使用哦。下面就让我们一起来享受jQuery代码的魅力之处吧。

1.预加载图片

 

1
2
3
4
5
6
7
8
9
10
11
12
(function($) {
  var cache = [];
  // Arguments are image paths relative to the current page.
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }
jQuery.preLoadImages("image1.gif""/path/to/image2.png");

源码 

 

2. 让页面中的每个元素都适合在移动设备上展示

 

 

 

1
2
3
4
5
6
7
8
9
10
11
var scr = document.createElement('script');
document.body.appendChild(scr);
scr.onload = function(){
    $('div').attr('class''').attr('id''').css({
        'margin' : 0,
        'padding' : 0,
        'width''100%',
        'clear':'both'
    });
};

源码 

3.图像等比例缩放

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(window).bind("load"function() {
    // IMAGE RESIZE
    $('#product_cat_list img').each(function() {
        var maxWidth = 120;
        var maxHeight = 120;
        var ratio = 0;
        var width = $(this).width();
        var height = $(this).height();
        if(width > maxWidth){
            ratio = maxWidth / width;
            $(this).css("width", maxWidth);
            $(this).css("height", height * ratio);
            height = height * ratio;
        }
        var width = $(this).width();
        var height = $(this).height();
        if(height > maxHeight){
            ratio = maxHeight / height;
            $(this).css("height", maxHeight);
            $(this).css("width", width * ratio);
            width = width * ratio;
        }
    });
    //$("#contentpage img").show();
    // IMAGE RESIZE
});

源码 

4.返回页面顶部

 

1
2
3
4
5
6
7
8
// Back To Top
$(document).ready(function(){
  $('.top').click(function() { 
     $(document).scrollTo(0,500); 
  });
});
//Create a link defined with the class .top
<a href="#" class="top">Back To Top</a>

源码 

 

5.使用jQuery打造手风琴式的折叠效果

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var accordion = {
     init: function(){
           var $container = $('#accordion');
           $container.find('li:not(:first) .details').hide();
           $container.find('li:first').addClass('active');
           $container.on('click','li a',function(e){
                  e.preventDefault();
                  var $this = $(this).parents('li');
                  if($this.hasClass('active')){
                         if($('.details').is(':visible')) {
                                $this.find('.details').slideUp();
                         else {
                                $this.find('.details').slideDown();
                         }
                  else {
                         $container.find('li.active .details').slideUp();
                         $container.find('li').removeClass('active');
                         $this.addClass('active');
                         $this.find('.details').slideDown();
                  }
           });
     }
};

6.通过预加载图片廊中的上一幅下一幅图片来模仿Facebook的图片展示方式

 

 

1
2
3
4
5
6
7
8
var nextimage = "/images/some-image.jpg";
$(document).ready(function(){
window.setTimeout(function(){
var img = $("").attr("src", nextimage).load(function(){
//all done
});
}, 100);
});

源码

7.使用jQuery和Ajax自动填充选择框 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
$(function(){
$("select#ctlJob").change(function(){
$.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){
var options = '';
for (var i = 0; i < j.length; i++) {
options += '
' + j[i].optionDisplay + '
';
}
$("select#ctlPerson").html(options);
})
})
})

源码 

8.自动替换丢失的图片

 

 

1
2
3
4
5
6
7
8
// Safe Snippet
$("img").error(function () {
    $(this).unbind("error").attr("src""missing_image.gif");
});
// Persistent Snipper
$("img").error(function () {
    $(this).attr("src""missing_image.gif");
});

源码

9.在鼠标悬停时显示淡入/淡出特效

 

 

1
2
3
4
5
6
7
8
$(document).ready(function(){
    $(".thumbs img").fadeTo("slow", 0.6);// This sets the opacity of the thumbs to fade down to 60% when the page loads
    $(".thumbs img").hover(function(){
        $(this).fadeTo("slow", 1.0);// This should set the opacity to 100% on hover
    },function(){
        $(this).fadeTo("slow", 0.6);// This should set the opacity back to 60% on mouseout
    });
});

源码 

10.清空表单数据

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function clearForm(form) {
  // iterate over all of the inputs for the form
  // element that was passed in
  $(':input', form).each(function() {
    var type = this.type;
    var tag = this.tagName.toLowerCase();// normalize case
    // it's ok to reset the value attr of text inputs,
    // password inputs, and textareas
    if (type == 'text' || type == 'password' || tag == 'textarea')
      this.value = "";
    // checkboxes and radios need to have their checked state cleared
    // but should *not* have their 'value' changed
    else if (type == 'checkbox' || type == 'radio')
      this.checked = false;
    // select elements need to have their 'selectedIndex' property set to -1
    // (this works for both single and multiple select elements)
    else if (tag == 'select')
      this.selectedIndex = -1;
  });
};

源码 

11.预防对表单进行多次提交

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function() {
  $('form').submit(function() {
    if(typeof jQuery.data(this"disabledOnSubmit") == 'undefined') {
      jQuery.data(this"disabledOnSubmit", { submited: true });
      $('input[type=submit], input[type=button]'this).each(function() {
        $(this).attr("disabled""disabled");
      });
      return true;
    }
    else
    {
      return false;
    }
  });
});

源码 

12.动态添加表单元素

 

1
2
3
4
5
//change event on password1 field to prompt new input
$('#password1').change(function() {
        //dynamically create new input and insert after password1
        $("#password1").append("");
});

源码 

13.让整个Div可点击

 

1
2
blah blah blah. link
The following lines of jQuery will make the entire div clickable: $(".myBox").click(function(){ window.location=$(this).find("a").attr("href"); return false; });

源码 

14.平衡高度或Div元素

 

1
2
3
4
5
var maxHeight = 0;
$("div").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$("div").height(maxHeight);

源码 

 

15. 在窗口滚动时自动加载内容

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var loading = false;
$(window).scroll(function(){
    if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
        if(loading == false){
            loading = true;
            $('#loadingbar').css("display","block");
            $.get("load.php?start="+$('#loaded_max').val(), function(loaded){
                $('body').append(loaded);
                $('#loaded_max').val(parseInt($('#loaded_max').val())+50);
                $('#loadingbar').css("display","none");
                loading = false;
            });
        }
    }
});
$(document).ready(function() {
    $('#loaded_max').val(50);
});

来自: codegeekz

几道容易出错的JavaScript题目

下面这几道JavaScript题目大多来自于周五的一个小分享。都是很小的题目,但是很容易犯错。有一些是语言特性使然,有一些则是语言本身没有设计好而留下的陷阱。结果就是,遇到的人很容易陷进去骂娘,这些东西是略有些反直觉,感兴趣的不妨看看,平时我们还是尽量少些这样似是而非的代码。

1.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function Container( properties ) {
    var objthis = this;
    for ( var i in properties ) {
        (function(){
                var t = properties[i];
                objthis[ "get" + i ] = function() {return t;};
                objthis[ "set" + i ] = function(val) {t = val;};
        })();
    }
}
var prop = {Name : "Jim", Age : 13};
var con = new Container(prop);
console.log(con.getName());
con.setName("Lucy");
console.log(con.getName());
console.log(prop.Name);

这段代码会输出什么?前面两行分别是“Jim”和“Lucy”,这不会有问题;但是第三行应该输出的是“Jim”,但是有的人会误认为prop对象已被修改,故输出“Lucy”。其实在匿名函数中,properties[i]的值已经赋给了临时变量t,之后闭包对于外部变量的引用完全由t这个媒介来完成,因此prop传入以后并未发生任何属性的更改。

2.

1
2
3
4
5
function a (x) {
    return x * 2;
}
var a;
console.log(a);

这段代码中,其实var a并没有任何影响,输出的是a(x)这样的方法签名。

3.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
c = 999;
var c = 888;
console.log(this.c); //①
function b (x, y, c) {
    c = 6;
    arguments[2] = 10;
    console.log(c); //②
    console.log(this.c); //③
    
    var c = 6;
    console.log(c); //④
    console.log(this.c); //⑤
}
b(1, 2, 3, 4);

这道题是比较变态的。

  • 第①处,this指的是window,在window下,c、this.c、var c在这里指的是同一个东西,看透这一点就好办了。打印的是888。
  • 第②处,方法体中,参数c和arguments[2]指的是同一个地址,所以把后者赋为10的时候,打印的是10,不是6。
  • 第③处,this指的是window,打印的是888。
  • 第④处,打印的是6。
  • 第⑤处,打印的是888。

4.

1
2
3
4
5
6
7
8
9
var start = new Date();
setTimeout(
    function(){
        var end = new Date();
        console.log(end - start);
    },
    1000
);
while(new Date() - start < 2000);

JavaScript因为是单线程工作的,因此虽然回调函数设置了1000毫秒后执行,事实上在1000毫秒的时候根本得不到执行,等待到while循环执行完毕后(因此已经是2000毫秒以后了),才去执行,因此输出应该是一个大于2000的数字。

5.

1
2
3
(function(){
    console.log(typeof arguments);
})();

很多人会说打印的是array,其实,typeof根本不会打印array的啊,打印的是object。

6.

1
2
function a(){return a;}
console.log(new a() instanceof a);

应该打印的是false,其实原因很简单,new a()的时候,因为return语句,得到的不是a的实例,而是a本身,a instanceof a当然是false啦。

最后,还有一个小题目是关于Function Invocation Pattern的,我在这篇文章里有写到,就不单独贴出来了。

文章系本人原创,转载请保持完整性并注明出自《四火的唠叨》

http://www.raychase.net/1485

用来简化开发任务的20个JavaScript类库

摘要:所谓JS库就是预先写好的JS程序库,用于简化以JS为基础的开发程序,尤其是对AJAX和其他以Web为中心技术的JS代码集。文章搜集了20个JS库,帮你处理与开发相关的问题,让你的网站在竞争中领先一步。

所谓JS库就是预先写好的JS程序库,用于简化以JS为基础的开发程序,尤其是对AJAX和其他以Web为中心技术的JS代码集。JS的首要用途是将编写的功能内嵌在HTML页面,并与页面的对象模型(DOM)进行互动。

很多JS库很容易和其他Web开发技术进行整合,例如CSS、 PHP、Ruby、和Java。许多程序库可以检测运行环境之间的差异,删除一些应用程序,以满足整合需求。文章搜集了20个JS库,帮你处理与开发相关的问题,让你的网站在竞争中领先一步。

1. Tracking.js

Tracking.js是一个独立的JS库,可以跟踪照相机实时收到的数据。跟踪对象既可以是色彩也可以是人物,当检测到某个特定的颜色时或人物/脸庞/身体出现移动的时候,我们可以触发JS事件。

2. Aristochart

Aristochart是一个不依赖于其它库的JS库,它能够使用Canvas创建静态的2D线形图表。这个库专注于打造客户化设计,提供多种选项用于更改设计、标签等等。

3. Hitch

Hitch是一个轻量级的JS库,能够向CSS文件添加表现能力。同时具备CSS预处理程序能力,比如添加前缀或变量,还有一些其他的功能。这个程序库有多个随时可用的表达方式,如“any of,all of,has…”,并允许我们定义任何一种方式(称为hitches)。

4. Cesium

Cesium是基于WebGL的JS绘图库,支持3种不同的视图:3D globe、2D map、2.5D Columbus View,相互转换只要一行代码而已!绘画各种形状,突出显示特定区域以及使用鼠标或触摸板与地图进行互动是非常简单的。Cesium作为一个独立的JS文件可以在所有主流浏览器上运行,包括手机上。

5. Two.js

它是一个2D的绘图API,一个优秀的JS库,用于较新的Web浏览器,可基于不同上下文绘制,包括svg、canvas和webgl。 这个库目前只支持形状(非文本或图片),允许导入SVG数据。当需要一起转变的时候,Two.js可以聚合多个有用的元素。其中还有一个内置动画循环方法来绘制各种图形,还具有使之个性化的多个选项。

6. Sequel.js

Sequel.js是一个轻量级JS库,有助于通过一个面向对象的API来构建SQL查询字符串,既可以在浏览器上运行,也可以在所有标准的SQL查询上运行。

7. Draggabilly

这是一个可以让页面元素可拖动的独立JS库,Draggabilly能够帮你轻松实现网页上各种元素的拖放操作。可以在一个限制的容器范围内拖动页面元素,对于每一个事件(start,move,end)都有回调,可以返回当前元素的位置。它可用于大部分浏览器(IE8+)并内置支持触摸事件。

8. Zebra

此JS库带有一串富用户界面组件,可以创建类似于桌面效果布局。UI元素由HTML5 canvas构建,由CSS着色,预期在所有浏览器中渲染出相同的效果。拥有30多个UI元素,包括grid、tabs、menu、form elements、menu等等。

9. Formula.js

这个JS库为Web开发者带来了大多数公式,公式列举了多重分类——日期/时间,文本,逻辑,金融等等。此外,除了在客户端运行,还在服务端(即将发布)上运行。

10. Chart.js

这是一个给人印象深刻的JS独立图表库,大小不足5kb的程序包,建立在HTML5 canvas之上。目前支持6种图表类型:直线图、条形图、雷达图、饼状图、柱状图和地区区域图。颜色、字体、边框、大小都可以根据用户需求自定义。

11. Flippant.js

这是一个迷你JS和CSS库,允许自动翻转桌面上的东西。不依赖任何其它类库,便于自定义,翻转功能效果好。

12. React

React是一个用来构建用户界面的JS库,可以高效灵活地与你之前使用的类库和框架结合使用。

13. PathFinding.js

PathFinding.js是JS里一个综合路径寻找类库,其目的是提供一个可以方便结合到网络游戏里的路径寻找类库。它可以在服务端运行,也可以在浏览器上运行。提供在线演示算法是怎样执行的。当具体使用路径寻找器时,你可以通过其它的参数来指示该用哪一个策略。

14. Reactor.js

这是一个用于响应式编程的轻量级类库。它提供的反应变量,当它们所依赖的的事物发生改变的时候可以实现自动更新。这和电子数据表的运作方式有点相似,当一个单元格的数值有所变化的时候,与其有联系的其他单元格数值也会变化。

15. Bootbox.js

Bootbox.js是一个很小的JS库,允许使用Twitter的Bootstrap模式创建程序对话窗口,不需要担心创建、管理或删除任何任何需要的DOM元素或JS事件处理程序。

16. Parallel.js

Parallel.js在JS里是一个用于多核处理的微型库,它的创建充分发挥了成熟的Web-workers API,JS的确是很快,但由于它的单线程计算模式,它缺乏了与其对等语言的平行计算功能。

17. SVG.js

SVG.js可以通过SVG进行操作和手动绘画,此库轻便独立,功能丰富,有内置方法可以创建各种形状——三角形、圆形、多边形,或自定义图形。

18. Packery

这是一个使用“装箱算法”的JS布局库,这是“补漏”的体面说法。Packery的布局可以是井然有序的,也可以是错乱无序的。元素可以被固定在相应的位置,也可以随意拖放。

19. FPS Meter

FPS Meter是一个简单的JS库,用来制作迷人的、快速的、可主题化的FPS仪表。他可以测量出每秒的帧数,帧之间的毫秒数,以及使用.tickStart()方法时,渲染一帧所需要的毫秒数。

20. Howler.js

Howler.js一个是JS库,通过默认方式运行在网页音频API上,当浏览器不支持时退回到HTML5音频。为了保证跨浏览器的兼容性,它允许接收多种文件格式。该库能同时缓存和播放多个声音,还有循环播放功能,淡入淡出效果和标准的多媒体控制功能。

原文:CodeGeekz

 

http://www.csdn.net/article/2013-07-09/2816111-javascript-libraries