年少不知愁滋味佛南，為賦新詞常說愁酿秸。
年少不聽李宗盛灭翔，聽懂已是不惑年。
本期編輯 小蟲巨蟹辣苏。
jQuery 插件寫法
最簡(jiǎn)單的寫法如下：
$.fn.myPluginName = function() {
// your plugin logic
}
如下寫法不會(huì)和別的庫(kù)沖突肝箱，推薦：
(function( $ ){
$.fn.myPluginName = function() {
// your plugin logic
};
})( jQuery );
插件參數(shù)和自定義參數(shù)的合并，用 $.extend 稀蟋，也可以用 Object.assign煌张。
;( function( $ ){
$.fn.extend( {
pluginname: function( options ) {
this.defaults = {};
// 插件參數(shù)和自定義參數(shù)的合并
var settings = $.extend( {}, this.defaults, options );
return this.each( function() {
var $this = $( this );
});
}
});
})( jQuery );
寫 jQuery 插件的模板如下：
;(function ( $, window, document, undefined ) {
var pluginName = 'defaultPluginName',
defaults = {
propertyName: "value"
};
function Plugin( element, options ) {
this.element = element;
this.options = $.extend( {}, defaults, options) ;
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype.init = function () {
// 初始化代碼
};
$.fn[pluginName] = function ( options ) {
return this.each(function () {
if (!$.data(this, 'plugin_' + pluginName)) {
$.data(this, 'plugin_' + pluginName,
new Plugin( this, options ));
}
});
}
})( jQuery, window, document );
組件之間通信，用自定義事件的方式退客，可以做到很好的代碼解耦：
;(function ( $, window, document, undefined ) {
$.widget("ao.eventStatus", {
options: {
},
_create : function() {
var self = this;
//self.element.addClass( "my-widget" );
//subscribe to 'myEventStart'
self.element.bind( "myEventStart", function( e ) {
console.log("event start");
});
//subscribe to 'myEventEnd'
self.element.bind( "myEventEnd", function( e ) {
console.log("event end");
});
//unsubscribe to 'myEventStart'
//self.element.unbind( "myEventStart", function(e){
///console.log("unsubscribed to this event");
//});
},
destroy: function(){
$.Widget.prototype.destroy.apply( this, arguments );
},
});
})( jQuery, window , document );
讓寫的 jQuery 的插件既支持 AMD 又支持 CommonJS 的方式見這里骏融。
文章推薦
《基于 Node、WebSocket 的手機(jī)控制電腦實(shí)例》
背景
如果不關(guān)注底層協(xié)議細(xì)節(jié)萌狂，WebSocket 基板上一句話就可以說清楚：WebSocket 是建立在傳輸層 TCP 之上档玻，并且依賴于 HTTP 的應(yīng)用層協(xié)議，它的出現(xiàn)主要是為了彌補(bǔ) HTTP 協(xié)議中粥脚，服務(wù)器端無法主動(dòng)推送消息到客戶端的缺陷窃肠。但是這樣對(duì)初學(xué)者的幫助遠(yuǎn)遠(yuǎn)不夠，不如直接有實(shí)例來的直觀刷允。
概要
- 實(shí)例介紹冤留、效果預(yù)覽
- 實(shí)現(xiàn)思路
- 代碼實(shí)現(xiàn)
