优大网

分类存档： 前端开发 （ 1 / 2）

office文件所对应的的 Content-type类型

2020年8月19日 / / office文件所对应的的 Content-type类型已关闭评论

摘自：https://www.jianshu.com/p/4b09c260f9b2

Javascript 匿名函数与封装

2014年8月10日 / / 暂无评论

迷惑了一会儿不同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类库

2014年1月20日 / / 暂无评论

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技巧及最佳实践（上）

2014年1月12日 / / 暂无评论

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. }
  6. 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];
  3. 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;
  3. 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);
  6. }

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];
  3. var array2 = [“Doe” , 555 , 100];
  4. Array.prototype.push.apply(array1, array2);
  5. /* 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);
  4. var myArray = window.frames[window.frames.length-1].Array;
  5. var arr = new myArray(a,b,10); // [a,b,10]
  7. // instanceof will not work correctly, myArray loses his constructor
  8. // constructor is not shared between frames
  9. 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技巧及最佳实践（下）

2014年1月12日 / / 暂无评论

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);
  13. 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

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

2013年11月4日 / / 暂无评论

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上开源，是一款非常优秀的网页前端性能测试工具。

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

响应式导航设计案例解析（多图）

2013年10月11日 / / 暂无评论

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插件推荐

2013年8月19日 / / 暂无评论

摘要：当今，设计领域竞争越来越激烈，唯有做出最优秀的产品才能在该领域独树一帜。而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代码片段

2013年7月18日 / / 暂无评论

摘要：开发人员利用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题目

2013年7月14日 / / 暂无评论

下面这几道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

较早的文章

其他操作

近期文章

分类目录

归档

Copyright © 2024 优大网 浙ICP备13002865号

回到顶部 ↑