分类目录归档：jquery

jQuery.Deferred对象

2014年9月7日 chen

一、什么是deferred对象？

开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。其中，既有异步的操作（比如ajax读取服务器数据），也有同步的操作（比如遍历一个大型数组），它们都不是立即能得到结果的。
通常的做法是，为它们指定回调函数（callback）。即事先规定，一旦它们运行结束，应该调用哪些函数。
但是，在回调函数方面，jQuery的功能非常弱。为了改变这一点，jQuery开发团队就设计了deferred对象。

1、生成Deferred对象

var dfd = $.Deferred();

1	var dfd = $.Deferred();

2、deferred对象状态以及改变状态

pending: 表示还没有完成
resolved: 表示操作成功
rejected: 表示操作失败

可以通过state方法来获取状态

    $.Deferred().state();    // pending
    $.Deferred().resolve().state();  // resolved
    $.Deferred().reject().state();    // rejected

$.Deferred().state(); // pending

$.Deferred().resolve().state(); // resolved

$.Deferred().reject().state(); // rejected

3、绑定回调方法

resolve方法对应着done方法，reject方法对于着fail方法。

var dfd = $.Deferred().done(f1).fail(f2).always();
dfd.resolve();   // 会执行done方法
dfd.reject();    // 会执行fail方法
// always方法，不论结果怎么样都会执行。

另外还有notify方法对于这progress方法。不同于resolve和reject只能执行一次，notify可以执行多次。
可以用于通知和进度条等方面。

var dfd = $.Deferred();
dfd.progress( function( str ) {
    console.log( str );
} );
// do someting...
dfd.notify( '准备完毕,开始执行' );
// do someting...
dfd.notify( '执行了50%' );
// do someting...
dfd.notify( '执行成功' );

var dfd = $.Deferred().done(f1).fail(f2).always();

dfd.resolve(); // 会执行done方法

dfd.reject(); // 会执行fail方法

// always方法，不论结果怎么样都会执行。

另外还有notify方法对于这progress方法。不同于resolve和reject只能执行一次，notify可以执行多次。

可以用于通知和进度条等方面。

var dfd = $.Deferred();

dfd.progress( function( str ) {

console.log( str );

} );

// do someting...

dfd.notify( '准备完毕,开始执行' );

// do someting...

dfd.notify( '执行了50%' );

// do someting...

dfd.notify( '执行成功' );

4、then方法

then方法的作用也是设置回调方法。他可以接受三个参数。按顺序为 done, fail, progress 这3个方法。
自jQuery1.8后，then方法有一个返回值就是promise对象。而done()返回的是原有的deferred对象。如果then()指定的回调函数有返回值，该返回值会作为参数，传入后面的回调函数。

var dfd = $.Deferred();
dfd.then( function() { // done }, function() { // fail }, function() { // progress } );

var dfd = $.Deferred();

dfd.then( function() { // done }, function() { // fail }, function() { // progress } );

5、pipe方法

大致的作用是将resolve、reject、notify传入的参数再做一下处理。

var dfd = $.Deferred();
dfd.pipe( function(e) { return e * 2; // resolve  }, function(e) { return e * 3; // reject },  function( e ) { return e * 4; // notify } ).done( function(e) { console.log( e ) } );

dfd.resolve( 2 ); // 4

var dfd = $.Deferred();

dfd.pipe( function(e) { return e * 2; // resolve }, function(e) { return e * 3; // reject }, function( e ) { return e * 4; // notify } ).done( function(e) { console.log( e ) } );

dfd.resolve( 2 ); // 4

6、promise对象

简单说，promise对象就是不能改变状态的deferred对象，也就是deferred的只读版。或者更通俗地理解成，promise是一个对将要完成的任务的承诺，排除了其他人破坏这个承诺的可能性，只能等待承诺方给出结果。

你可以通过promise对象，为原始的deferred对象添加回调函数，查询它的状态，但是无法改变它的状态，也就是说promise对象不允许你调用resolve和reject方法。

var dfd = $.Deferred();
console.log( dfd&amp;amp;#39; );
/*
Object {resolve: function, resolveWith: function, reject: function, rejectWith: function, notify: function…}
always: function () {
done: function () {
fail: function () {
notify: function () {
notifyWith: function ( context, args ) {
pipe: function ( /* fnDone, fnFail, fnProgress */ ) {
progress: function () {
promise: function ( obj ) {
reject: function () {
rejectWith: function ( context, args ) {
resolve: function () {
resolveWith: function ( context, args ) {
state: function () {
then: function ( /* fnDone, fnFail, fnProgress */ ) {
__proto__: Object
*/
var p = dfd.promise();
console.log( p );
/*
Object {state: function, always: function, then: function, promise: function, pipe: function…}
always: function () {
done: function () {
fail: function () {
pipe: function ( /* fnDone, fnFail, fnProgress */ ) {
progress: function () {
promise: function ( obj ) {
state: function () {
then: function ( /* fnDone, fnFail, fnProgress */ ) {
__proto__: Object
*/

var dfd = $.Deferred();

console.log( dfd&amp;#39; );

Object {resolve: function, resolveWith: function, reject: function, rejectWith: function, notify: function…}

always: function () {

done: function () {

fail: function () {

notify: function () {

notifyWith: function ( context, args ) {

pipe: function ( /* fnDone, fnFail, fnProgress */ ) {

progress: function () {

promise: function ( obj ) {

reject: function () {

rejectWith: function ( context, args ) {

resolve: function () {

resolveWith: function ( context, args ) {

state: function () {

then: function ( /* fnDone, fnFail, fnProgress */ ) {

__proto__: Object

var p = dfd.promise();

console.log( p );

Object {state: function, always: function, then: function, promise: function, pipe: function…}

always: function () {

done: function () {

fail: function () {

pipe: function ( /* fnDone, fnFail, fnProgress */ ) {

progress: function () {

promise: function ( obj ) {

state: function () {

then: function ( /* fnDone, fnFail, fnProgress */ ) {

__proto__: Object

7、$.when方法

$.when()接受多个deferred对象作为参数，当它们全部运行成功后，才调用resolved状态的回调函数，但只要其中有一个失败，就调用rejected状态的回调函数。它相当于将多个非同步操作，合并成一个。实质上，when方法为多个deferred对象，返回一个单一的promise对象。

$.when(
    $.ajax( '/main.php' ),
    $.ajax( '/modules.php' ),
    $.ajax( '/lists.php' )
).then(successFunc, failureFunc);

$.when(
    $.ajax( &quot;/main.php&quot; ),
    $.ajax( &quot;/modules.php&quot; ),
    $.ajax( &quot;/lists.php&quot; )
).then(function (resp1, resp2, resp3){
    console.log(resp1);
    console.log(resp2);
    console.log(resp3);
});

$.when(

$.ajax( '/main.php' ),

$.ajax( '/modules.php' ),

$.ajax( '/lists.php' )

).then(successFunc, failureFunc);

$.when(

$.ajax( "/main.php" ),

$.ajax( "/modules.php" ),

$.ajax( "/lists.php" )

).then(function (resp1, resp2, resp3){

console.log(resp1);

console.log(resp2);

console.log(resp3);

});

参考链接：
http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html
http://www.web-tinker.com/article/20154.html
http://javascript.ruanyifeng.com/jquery/deferred.html

javascript、jquery

三级（多级）联动自动赋值

2014年9月6日 chen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三级联动</title>
</head>
<body>
    <select name="one" id="one">
    </select>
    <select name="two" id="two">
    </select>
    <select name="three" id="three">
    </select>
    <script src="./jquery-1.11.1.js"></script>
    <script>

        function clear( obj ) {
            obj.length = 0;
        }

        function make( obj, data ) {
            for( var i in data ) {
                obj.options.add( new Option( data[i], i ) );
            }
        }

        function ajax( url, obj, val ) {
            var dfd = $.Deferred();
            obj = $('#'+obj).get(0);
            $.ajax(url,{cache:false}).done(function(rss) {
                clear( obj );
                make( obj, rss );
                obj.value = val;
                dfd.resolve();
            });
            return dfd.promise();
        }

        var arr = [
                    {"url":"data_1.json","obj":"one","val":"021"},
                    {"url":"data_2.json","obj":"two","val":"2"},
                    {"url":"data_3.json","obj":"three","val":"3"}
                ];

        function r( arr ) {
            var a = arr.shift();
            ajax( a.url, a.obj, a.val ).done(function() {
                if( arr.length ) r( arr );
            });
        }

        r(arr);

        // 方法二
        var onv = '021', twv = '2', thv = '3';
        // $.ajax( "data_1.json" ).then(function( rss ) {
        //     clear( one );
        //     make( one, rss );
        //     one.value = onv;
        //     return $.ajax( "data_2.json" );
        // }).then(function( rss ) {
        //     clear( two );
        //     make( two, rss );
        //     two.value = twv;
        //     return $.ajax( "data_3.json" );
        // }).then(function( rss ) {
        //     clear( three );
        //     make( three, rss );
        //     three.value = thv;
        // });

        // 方法三
        // $.when( 
        //     $.ajax( "data_1.json" ),
        //     $.ajax( "data_2.json" ),
        //     $.ajax( "data_3.json" )
        // ).then( function( a, b, c ) {
        //     clear( one ); clear( two ); clear( three );
        //     make( one, a[0] ); make( two, b[0] ); make( three, c[0] );
        //     one.value = onv; two.value = twv; three.value = thv;
        // } );

    </script>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</select>

</select>

</select>

function clear( obj ) {

obj.length = 0;

}

function make( obj, data ) {

for( var i in data ) {

obj.options.add( new Option( data[i], i ) );

}

function ajax( url, obj, val ) {

var dfd = $.Deferred();

obj = $('#'+obj).get(0);

$.ajax(url,{cache:false}).done(function(rss) {

clear( obj );

make( obj, rss );

obj.value = val;

dfd.resolve();

});

return dfd.promise();

}

var arr = [

{"url":"data_1.json","obj":"one","val":"021"},

{"url":"data_2.json","obj":"two","val":"2"},

{"url":"data_3.json","obj":"three","val":"3"}

];

function r( arr ) {

var a = arr.shift();

ajax( a.url, a.obj, a.val ).done(function() {

if( arr.length ) r( arr );

});

}

r(arr);

// 方法二

var onv = '021', twv = '2', thv = '3';

// $.ajax( "data_1.json" ).then(function( rss ) {

// clear( one );

// make( one, rss );

// one.value = onv;

// return $.ajax( "data_2.json" );

// }).then(function( rss ) {

// clear( two );

// make( two, rss );

// two.value = twv;

// return $.ajax( "data_3.json" );

// }).then(function( rss ) {

// clear( three );

// make( three, rss );

// three.value = thv;

// });

// 方法三

// $.when(

// $.ajax( "data_1.json" ),

// $.ajax( "data_2.json" ),

// $.ajax( "data_3.json" )

// ).then( function( a, b, c ) {

// clear( one ); clear( two ); clear( three );

// make( one, a[0] ); make( two, b[0] ); make( three, c[0] );

// one.value = onv; two.value = twv; three.value = thv;

// } );

</script>

</body>

</html>

测试连接

参考：

http://api.jquery.com/jQuery.ajax/

http://api.jquery.com/jQuery.Deferred/

jquery

总结项目，重新封装uploadify插件，省去大量重复代码！

2014年2月5日 chen

<!doctype html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <title>cc-plugin-uploadify</title>
    <link rel="stylesheet" type="text/css" href="js/uploadify/uploadify.css">
</head>
<body>
    <form>
        <div id="queue"></div>
        <input data-toggle="uploadify" data-multi='true' type="file" >
        <input data-toggle="uploadify" data-multi='true' type="file" >
        <input data-toggle="uploadify" data-multi='true' type="file" >
    </form>
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="js/uploadify/jquery.uploadify.js"></script>
    <script>
        +function ($) {
            'use strict';
            var defaultParam = ['auto','buttonClass','buttonCursor','buttonImage','buttonText','checkExisting','debug','fileObjName','fileSizeLimit','fileTypeDesc','fileTypeExts',
                'height','itemTemplate','method','multi','formData','preventCaching','progressData','queueID','queueSizeLimit','removeCompleted','removeTimeout','requeueErrors',
                'successTimeout','uploadLimit','width'],
                MyUploadify = function( element, options ) {
                this.$element  = $( element );
                if( !this.$element.attr( 'id' ) ) {
                    this.$id = 'MyUploadify_' + new Date().getTime() + '_' + Math.ceil( Math.random() * 100000 );
                    this.$element.attr( 'id', this.$id );
                }
                if( !options ) {
                    for( var i in defaultParam ) {
                        if( typeof this.$element.data( defaultParam[i] ) != 'undefined'  ) {
                            options = options || {};
                            options[defaultParam[i]] = this.$element.data( defaultParam[i] );
                        }
                    }
                    if( !options.formData ) {
                        options.formData = {};
                    }
                    options.formData.id = options.formData.id || this.$id;
                }
                this.options   = $.extend( {}, MyUploadify.DEFAULTS, options );
            };

            MyUploadify.DEFAULTS = {
                swf      : 'js/uploadify/uploadify.swf',
                uploader : 'uploadify.php',
                auto: true,
                multi: false,
                fileTypeExts: '*.jpg;*.png;*.gif',
                buttonText: '上传',
                uploadLimit: 999,
                queueSizeLimit: 1,
                onUploadSuccess: function( file, data, response ) {
                    // data = eval( '(' + data + ')' );
                    console.log( data );
                }
            };

            MyUploadify.prototype.init = function() {
                $( '#'+this.$id ).uploadify( this.options );
            }

            var old = $.fn.myUploadify;

            $.fn.myUploadify = function (option) {
                return this.each(function () {
                    var $this   = $(this);
                    var data    = $this.data('cc.myUploadify');
                    var options = typeof option == 'object' && option

                    if (!data) $this.data('cc.myUploadify', (data = new MyUploadify(this, options)))

                    data.init();
                })
            }

            $.fn.myUploadify.Constructor = MyUploadify

            $.fn.myUploadify.noConflict = function () {
                $.fn.myUploadify = old;
                return this;
            }

            $( function() {
                $( 'input[type=file][data-toggle=uploadify]' ).myUploadify();
            } );

        }(jQuery);

    </script>
</body>
</html>

<!doctype html>

<head>

<title>cc-plugin-uploadify</title>

</head>

<body>

<form>

</form>

+function ($) {

'use strict';

var defaultParam = ['auto','buttonClass','buttonCursor','buttonImage','buttonText','checkExisting','debug','fileObjName','fileSizeLimit','fileTypeDesc','fileTypeExts',

'height','itemTemplate','method','multi','formData','preventCaching','progressData','queueID','queueSizeLimit','removeCompleted','removeTimeout','requeueErrors',

'successTimeout','uploadLimit','width'],

MyUploadify = function( element, options ) {

this.$element = $( element );

if( !this.$element.attr( 'id' ) ) {

this.$id = 'MyUploadify_' + new Date().getTime() + '_' + Math.ceil( Math.random() * 100000 );

this.$element.attr( 'id', this.$id );

}

if( !options ) {

for( var i in defaultParam ) {

if( typeof this.$element.data( defaultParam[i] ) != 'undefined' ) {

options = options || {};

options[defaultParam[i]] = this.$element.data( defaultParam[i] );

}

if( !options.formData ) {

options.formData = {};

}

options.formData.id = options.formData.id || this.$id;

}

this.options = $.extend( {}, MyUploadify.DEFAULTS, options );

};

MyUploadify.DEFAULTS = {

swf : 'js/uploadify/uploadify.swf',

uploader : 'uploadify.php',

auto: true,

multi: false,

fileTypeExts: '*.jpg;*.png;*.gif',

buttonText: '上传',

uploadLimit: 999,

queueSizeLimit: 1,

onUploadSuccess: function( file, data, response ) {

// data = eval( '(' + data + ')' );

console.log( data );

}

};

MyUploadify.prototype.init = function() {

$( '#'+this.$id ).uploadify( this.options );

}

var old = $.fn.myUploadify;

$.fn.myUploadify = function (option) {

return this.each(function () {

var $this = $(this);

var data = $this.data('cc.myUploadify');

var options = typeof option == 'object' && option

if (!data) $this.data('cc.myUploadify', (data = new MyUploadify(this, options)))

data.init();

})

}

$.fn.myUploadify.Constructor = MyUploadify

$.fn.myUploadify.noConflict = function () {

$.fn.myUploadify = old;

return this;

}

$( function() {

$( 'input[type=file][data-toggle=uploadify]' ).myUploadify();

} );

}(jQuery);

</script>

</body>

</html>

<?php

if ( !empty( $_FILES ) ) {
    $tempFile = $_FILES['Filedata']['tmp_name'];

    // 判断验证是否为图片
    $imageinfo = getimagesize( $tempFile ); 
    if( !$imageinfo || 0 !== strpos( $imageinfo['mime'], 'image' ) ) {
        exit( json_encode( array( 0, '文件类型不符合' ) ) );
    }

    if( filesize( $tempFile ) > 2 * 1024 * 1024 ) {
        exit( json_encode( array( 0, '文件大小不符合' ) ) );
    }

    $targetFolder = '/uploads';
    $targetPath = __DIR__ . $targetFolder . '/' . $_POST['id'];
    $targetFile = rtrim( $targetPath, '/' ) . '/' . $_FILES['Filedata']['name'];
    mkdir( dirname( $targetFile ) );
    if( move_uploaded_file( $tempFile, $targetFile ) ) {
        exit( json_encode( array( 1, '上传成功', $_POST['id'] ) ) );
    } else {
        exit( json_encode( array( 0, '上传失败' ) ) );
    }

}

?>

<?php

if ( !empty( $_FILES ) ) {

$tempFile = $_FILES['Filedata']['tmp_name'];

// 判断验证是否为图片

$imageinfo = getimagesize( $tempFile );

if( !$imageinfo || 0 !== strpos( $imageinfo['mime'], 'image' ) ) {

exit( json_encode( array( 0, '文件类型不符合' ) ) );

}

if( filesize( $tempFile ) > 2 * 1024 * 1024 ) {

exit( json_encode( array( 0, '文件大小不符合' ) ) );

}

$targetFolder = '/uploads';

$targetPath = __DIR__ . $targetFolder . '/' . $_POST['id'];

$targetFile = rtrim( $targetPath, '/' ) . '/' . $_FILES['Filedata']['name'];

mkdir( dirname( $targetFile ) );

if( move_uploaded_file( $tempFile, $targetFile ) ) {

exit( json_encode( array( 1, '上传成功', $_POST['id'] ) ) );

} else {

exit( json_encode( array( 0, '上传失败' ) ) );

}

javascript、jquery

模仿bootstrap开发基于jquery的插件

2014年2月4日 chen

春节期间闲来无事，想学习一下如何开发基于jquery的插件。所以网上查了些资料，然后模仿bootstrap写了一个没什么用的插件。废话不多说，上代码。

<!doctype html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <title>jquery_plugin</title>
    <style>
        .move-div {
            /*border: 1px solid #000;*/
            background: #658971;
            width: 200px;
            height: 200px;
            float: left;
            position: absolute;
            overflow: hidden;
        }
        .move-div-inner {
            background: #125896;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="move-div" data-toggle="randomchange">
        <div class="move-div-inner"></div>
    </div>
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="./js/jquery-color.js"></script>
    <script>
        +function ($) {
            'use strict';

            var Randomchange = function( element, options ) {
                this.$element  = $( element );
                this.options   = $.extend( {}, Randomchange.DEFAULTS, options );
            }

            Randomchange.DEFAULTS = {};

            Randomchange.prototype.toChange = function() {
                var width = this.options.width || ( Math.random() * ( $(window).width() - 100 ) + 100 ),
                    height = this.options.width || ( Math.random() * ( $(window).height() - 100 ) + 100 ),
                    r = this.options.r || ( parseInt( Math.random() * 255 ).toString( 16 ) ),
                    g = this.options.g || ( parseInt( Math.random() * 255 ).toString( 16 ) ),
                    b = this.options.b || ( parseInt( Math.random() * 255 ).toString( 16 ) ),
                    color = this.options.color || '#' + r + g + b,
                    bdrs = Math.random() * ( width > height ? height/2 : width/2 ), //
                    top = Math.random() * ( $(window).height() - height ),
                    left = Math.random() * ( $(window).width() - width ),
                    time = Math.random() * ( 5000 - 1000 ) + 1000;

                this.$element.animate({
                    width: width,
                    height: height,
                    backgroundColor: color,
                    borderRadius: bdrs,
                    top: top,
                    left: left
                }, time );
            }

            var old = $.fn.randomchange;

            $.fn.randomchange = function (option) {
                return this.each(function () {
                    var $this   = $(this);
                    var data    = $this.data('cc.randomchange');
                    var options = typeof option == 'object' && option

                    if (!data) $this.data('cc.randomchange', (data = new Randomchange(this, options)))

                    if (option == 'toChange') data.toChange();
                })
            }

            $.fn.randomchange.Constructor = Randomchange

            $.fn.randomchange.noConflict = function () {
                $.fn.randomchange = old;
                return this;
            }

            $(document).on('click.cc', '[data-toggle^=randomchange]', function (e) {
                var $rc = $( e.target );
                if ( $rc.data('toggle') != 'randomchange' ) {
                    $rc = $rc.closest('[data-toggle=randomchange]');
                }
                $rc.randomchange( 'toChange' );
                e.preventDefault();
            })
        }(jQuery);

    </script>
</body>
</html>

<!doctype html>

<head>

<title>jquery_plugin</title>

<style>

.move-div {

/*border: 1px solid #000;*/

background: #658971;

width: 200px;

height: 200px;

float: left;

position: absolute;

overflow: hidden;

}

.move-div-inner {

background: #125896;

width: 100px;

height: 100px;

}

</style>

</head>

<body>

</div>

+function ($) {

'use strict';

var Randomchange = function( element, options ) {

this.$element = $( element );

this.options = $.extend( {}, Randomchange.DEFAULTS, options );

}

Randomchange.DEFAULTS = {};

Randomchange.prototype.toChange = function() {

var width = this.options.width || ( Math.random() * ( $(window).width() - 100 ) + 100 ),

height = this.options.width || ( Math.random() * ( $(window).height() - 100 ) + 100 ),

r = this.options.r || ( parseInt( Math.random() * 255 ).toString( 16 ) ),

g = this.options.g || ( parseInt( Math.random() * 255 ).toString( 16 ) ),

b = this.options.b || ( parseInt( Math.random() * 255 ).toString( 16 ) ),

color = this.options.color || '#' + r + g + b,

bdrs = Math.random() * ( width > height ? height/2 : width/2 ), //

top = Math.random() * ( $(window).height() - height ),

left = Math.random() * ( $(window).width() - width ),

time = Math.random() * ( 5000 - 1000 ) + 1000;

this.$element.animate({

width: width,

height: height,

backgroundColor: color,

borderRadius: bdrs,

top: top,

left: left

}, time );

}

var old = $.fn.randomchange;

$.fn.randomchange = function (option) {

return this.each(function () {

var $this = $(this);

var data = $this.data('cc.randomchange');

var options = typeof option == 'object' && option

if (!data) $this.data('cc.randomchange', (data = new Randomchange(this, options)))

if (option == 'toChange') data.toChange();

})

}

$.fn.randomchange.Constructor = Randomchange

$.fn.randomchange.noConflict = function () {

$.fn.randomchange = old;

return this;

}

$(document).on('click.cc', '[data-toggle^=randomchange]', function (e) {

var $rc = $( e.target );

if ( $rc.data('toggle') != 'randomchange' ) {

$rc = $rc.closest('[data-toggle=randomchange]');

}

$rc.randomchange( 'toChange' );

e.preventDefault();

})

}(jQuery);

</script>

</body>

</html>

有些代码虽然知道是干嘛的，但是无法用语言准确的表达出来，以后还会不断的更新。

一、自执行匿名函数

//
// 自执行匿名函数
+function ($) {
    // code
    // do something
}(jQuery);

// 其实最常见的自执行匿名函数应该是这种
(function ($) {
    // code
    // do something
})(jQuery);

// 在不考虑返回值的时候还是可以使用
-function ($) {
    // code
    // do something
}(jQuery);

!function ($) {
    // code
    // do something
}(jQuery);

//等等。

//其实上面的代码可以理解为
var sth = function($) {
    // code
    // do something
};
sth( jQuery );

// 那么就可以很容易理解了。
// 首先定义了一个函数，然后把jQuery作为参数传入其中，立即执行函数。
// $ 为 函数的形参
// jQuery 为 函数的实参

// 这样写的好处是在一个相对封闭的空间中防止变量被污染。等～～～

// 自执行匿名函数

+function ($) {

// code

// do something

}(jQuery);

// 其实最常见的自执行匿名函数应该是这种

(function ($) {

// code

// do something

})(jQuery);

// 在不考虑返回值的时候还是可以使用

-function ($) {

// code

// do something

}(jQuery);

!function ($) {

// code

// do something

}(jQuery);

//等等。

//其实上面的代码可以理解为

var sth = function($) {

// code

// do something

};

sth( jQuery );

// 那么就可以很容易理解了。

// 首先定义了一个函数，然后把jQuery作为参数传入其中，立即执行函数。

// $ 为函数的形参

// jQuery 为函数的实参

// 这样写的好处是在一个相对封闭的空间中防止变量被污染。等～～～

参考：自执行函数

二、’use strict’

使用严格模式，一直以来，Javascript 松散灵活的语法饱受争议。于是，ECMAScript 5.0 定义中引入了strict mode，使Javascript解释器可以用”严格”的语法来解析代码，以帮助开发人员发现错误。IE 10 开始支持strict mode。

如果你使用了 use strict，但是浏览器不支持怎么办？

没关系，浏览器会自动忽略。

参考： http://qianduan-notes.diandian.com/post/2012-06-02/40027620460

三、构造函数与原型

// 构造函数
var Randomchange = function( element, options ) {
    this.$element  = $( element );
    // 将默认值与传入的参数合并
    // 传入的参数将覆盖默认值
    this.options   = $.extend( {}, Randomchange.DEFAULTS, options );
}
// 默认值
Randomchange.DEFAULTS = {};
// 原型 添加方法
Randomchange.prototype.toChange = function() {
    var width = this.options.width || ( Math.random() * ( $(window).width() - 100 ) + 100 ),
        height = this.options.width || ( Math.random() * ( $(window).height() - 100 ) + 100 ),
        r = this.options.r || ( parseInt( Math.random() * 255 ).toString( 16 ) ),
        g = this.options.g || ( parseInt( Math.random() * 255 ).toString( 16 ) ),
        b = this.options.b || ( parseInt( Math.random() * 255 ).toString( 16 ) ),
        color = this.options.color || '#' + r + g + b,
        bdrs = Math.random() * ( width > height ? height/2 : width/2 ),
        top = Math.random() * ( $(window).height() - height ),
        left = Math.random() * ( $(window).width() - width ),
        time = Math.random() * ( 5000 - 1000 ) + 1000;

    this.$element.animate({
        width: width,
        height: height,
        backgroundColor: color,
        borderRadius: bdrs,
        top: top,
        left: left
    }, time );
}

// 构造函数

var Randomchange = function( element, options ) {

this.$element = $( element );

// 将默认值与传入的参数合并

// 传入的参数将覆盖默认值

this.options = $.extend( {}, Randomchange.DEFAULTS, options );

}

// 默认值

Randomchange.DEFAULTS = {};

// 原型添加方法

Randomchange.prototype.toChange = function() {

var width = this.options.width || ( Math.random() * ( $(window).width() - 100 ) + 100 ),

height = this.options.width || ( Math.random() * ( $(window).height() - 100 ) + 100 ),

r = this.options.r || ( parseInt( Math.random() * 255 ).toString( 16 ) ),

g = this.options.g || ( parseInt( Math.random() * 255 ).toString( 16 ) ),

b = this.options.b || ( parseInt( Math.random() * 255 ).toString( 16 ) ),

color = this.options.color || '#' + r + g + b,

bdrs = Math.random() * ( width > height ? height/2 : width/2 ),

top = Math.random() * ( $(window).height() - height ),

left = Math.random() * ( $(window).width() - width ),

time = Math.random() * ( 5000 - 1000 ) + 1000;

this.$element.animate({

width: width,

height: height,

backgroundColor: color,

borderRadius: bdrs,

top: top,

left: left

}, time );

}

参考：$.extend、构造函数与原型

四、与jQuery挂钩

// 
// 防止与其他插件命名冲突，将其他插件保存与old变量中
// 与下文的noConflict方法配置使用
var old = $.fn.randomchange;

// 为jquery添加randomchage的方法
$.fn.randomchange = function (option) {
    // 把自身（即jquery自己）返回，可以链式调用
    return this.each(function () {
        var $this   = $(this);
        // bootstrap 喜欢将对象出入本身的data对象中
        var data    = $this.data('cc.randomchange');
        var options = typeof option == 'object' && option
        // 判断是否已经存在，
        // 如果不存在就，实例化一个对象，并却存入本身的data对象中
        // 下次进来是可以不用重复创建
        if (!data) $this.data('cc.randomchange', (data = new Randomchange(this, options)))
        // 如果option为对象时则当作参数传入构造函数中
        // 当option非对象时，且为相应条件时执行，相应的方法。
        if (option == 'toChange') data.toChange();
    })
}
// 重新整理原型链
$.fn.randomchange.Constructor = Randomchange
// 与其他插件冲突时可以使用改函数重新命名
$.fn.randomchange.noConflict = function () {
    $.fn.randomchange = old;
    return this;
}

// 防止与其他插件命名冲突，将其他插件保存与old变量中

// 与下文的noConflict方法配置使用

var old = $.fn.randomchange;

// 为jquery添加randomchage的方法

$.fn.randomchange = function (option) {

// 把自身（即jquery自己）返回，可以链式调用

return this.each(function () {

var $this = $(this);

// bootstrap 喜欢将对象出入本身的data对象中

var data = $this.data('cc.randomchange');

var options = typeof option == 'object' && option

// 判断是否已经存在，

// 如果不存在就，实例化一个对象，并却存入本身的data对象中

// 下次进来是可以不用重复创建

if (!data) $this.data('cc.randomchange', (data = new Randomchange(this, options)))

// 如果option为对象时则当作参数传入构造函数中

// 当option非对象时，且为相应条件时执行，相应的方法。

if (option == 'toChange') data.toChange();

})

}

// 重新整理原型链

$.fn.randomchange.Constructor = Randomchange

// 与其他插件冲突时可以使用改函数重新命名

$.fn.randomchange.noConflict = function () {

$.fn.randomchange = old;

return this;

}

$.fn可以简单的理解为jQuery的原型

jQuery源码第119行

// 
jQuery.fn = jQuery.prototype = {
    // some code
}

jQuery.fn = jQuery.prototype = {

// some code

}

参考：链式调用、原型链、$.data

五、为符合规则的标签添加事件

//

$(document).on('click.cc', '[data-toggle^=randomchange]', function (e) {
    var $rc = $( e.target );
    if ( $rc.data('toggle') != 'randomchange' ) {
        $rc = $rc.closest('[data-toggle=randomchange]');
    }
    $rc.randomchange( 'toChange' );
    e.preventDefault();
})

// 为什么不写成下面这种呢？
$('[data-toggle^=randomchange]').on( 'click', function() {
   // some code
} )

// 因为写成这样后，用js生成相应规则的标签就不会被添加事件了。
// 那为什么不用 live,delegate,bind,click等等绑定事件呢？
// 因为on的效率最快，而却上面所说的方法不是被淘汰了就是底层用on来实现的(后者不确定，没有请自确认过，网上看到的)

// 为什么在click后面加.cc？
// .cc可以简单的理解为命名空间
// 当你想禁用所有命名空间为cc下的事件时可以使用如下方法来禁用
$( document ).off( ".cc" );

$(document).on('click.cc', '[data-toggle^=randomchange]', function (e) {

var $rc = $( e.target );

if ( $rc.data('toggle') != 'randomchange' ) {

$rc = $rc.closest('[data-toggle=randomchange]');

}

$rc.randomchange( 'toChange' );

e.preventDefault();

})

// 为什么不写成下面这种呢？

$('[data-toggle^=randomchange]').on( 'click', function() {

// some code

} )

// 因为写成这样后，用js生成相应规则的标签就不会被添加事件了。

// 那为什么不用 live,delegate,bind,click等等绑定事件呢？

// 因为on的效率最快，而却上面所说的方法不是被淘汰了就是底层用on来实现的(后者不确定，没有请自确认过，网上看到的)

// 为什么在click后面加.cc？

// .cc可以简单的理解为命名空间

// 当你想禁用所有命名空间为cc下的事件时可以使用如下方法来禁用

$( document ).off( ".cc" );

参考：$.on、$.off

以上大致初步的一个简单插件完成。

测试连接

老陈是一个普通的文艺二逼青年

分类目录归档：jquery

jQuery.Deferred对象

一、什么是deferred对象？

1、生成Deferred对象

2、deferred对象状态以及改变状态

3、绑定回调方法

4、then方法

5、pipe方法

6、promise对象

7、$.when方法

三级（多级）联动自动赋值

总结项目，重新封装uploadify插件，省去大量重复代码！

模仿bootstrap开发基于jquery的插件

For The Dream

一、什么是deferred对象？

1、生成Deferred对象

2、deferred对象状态 以及 改变状态

3、绑定回调方法

4、then方法

5、pipe方法

6、promise对象

7、$.when方法

For The Dream

2、deferred对象状态以及改变状态