基于jquery插件编写

对于Jquery插件的使用，已经司空见惯：如下： 

<html>

<body>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script> 
<script type="text/javascript">
    $(function() {
    //1. 初始化
    $("#name").write({
        color: "white",
        "background-color": "blue"
    });
    //2. 设置属性
    $("#name").write('setColor', 'red');
    //获取属性
    alert($("#name").write("color"));
}); 
<body>
<label id="name">required</label>
</html>

这个简单的插件主要是设置控件的样式，做演示效果，那如何去编写这样的插件呢？ 

(function($) {
    var Writer = function(element, options) {
        this.$element = $(element);
        this.options = $.extend({},
        $.fn.write.defaults, options); //合并参数
        this.init();
    };

    Writer.prototype = {
        constructor: Writer,
        init: function() {
            this.$element.css(this.options);
        },
        setColor: function(args) {

            this.$element.css("color", args);
            this.options.color = args;
        },
    }

    $.fn.write = function(options) {
        options = options || {}
        var args = arguments;
        var value;
        var chain = this.each(function() {
            data = $(this).data("write");
            if (!data) {
                if (options && typeof options == 'object') { //初始化
                    return $(this).data("write", data = new Writer(this, options));
                }
            } else {
                if (typeof options == 'string') {
                    if (data[options] instanceof Function) { //调用方法
                        var property = options; [].shift.apply(args);
                        value = data[property].apply(data, args);
                    } else { //获取属性
                        return value = data.options[options];
                    }
                }
            }

        });

        if (value !== undefined) {
            return value;
        } else {
            return chain;
        }

    };

    $.fn.write.defaults = { //设置默认属性 color:"yellow",
        "background-color": "yellow"
    };
})(jQuery);

在编写插件之前需要弄清楚几个javascript常见的几个难点：

1. this

2. prototype

3. apply

4. 内置对象arguments

http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html

http://www.cnblogs.com/dolphinX/p/3286177.html

http://www.zhihu.com/question/20289071