Lightweight Start 模式
1.什麼是Lightweight模式
這種模式適合於插件開發新手或者是隻是想實現簡單的功能，Lightweight start使用了以下內容：
- 常見最佳實踐
- window、document和undefined作爲參數傳入
- 基本的默認對象
- 簡單的插件構造函數，用於與初始化創建相關的邏輯，以及用於所使用元素的賦值
- 擴展有默認值的選項
- 構造函數週圍的lightweight包裝器，避免出現多實例
// 函數調用之前的分號是爲了安全的目的，防止前面的其他插件沒有正常關閉。
;(function($, window, document, undefined) {
"use strict";
// 這裏使用的undefined是ECMAScript3裏的全局變量undefined，是可以修改的。
// undefined沒有真正傳進來，以便可以確保該值是真正的undefined。ECMAScript5裏，undefined是不可修改的。
// window和document傳遞進來作爲局部變量存在，而非全局變量,
// 因爲這可以加快解析流程以及影響最小化（尤其是同事應用一個插件的時候）。
// 創建默認值
var pluginName = "defaultPluginName";
var defaults = {
propertyName: "value"
};
// 插件真正的構造函數
function Plugin(element, options) {
this.element = element;
// jQuery extend方法用於將兩個或多個對象合併在一起，在第一個對象裏進行排序。
// 第一個對象通常爲空，因爲我們不想爲插件的新實例影響默認的option選項。
this.options = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}
$.extend(Plugin.prototype, {
init: function() {
// 這裏處理初始化邏輯
// 已經可以訪問DOM，並且通過實例訪問options，例如this.element, this.options.
// 可以添加更多的方法，調用方式如下所示
this.yourOtherFunction("jQuery Boilerplate");
},
yourOtherFunction: function(text) {
// 邏輯代碼
$(this.element).text(text);
}
});
// 真正的插件包裝，防止出現多實例
$.fn[pluginName] = function(options) {
return this.each(function() {
if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" + pluginName, new Plugin(this, options));
}
});
}
})(jQuery, window, document);2.用法
$("#elem").defaultPluginName({
propertyName: "a custom value"
});3.實戰
基於checkbox實現開關按鈕
1.html code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flipswitch</title>
<style type="text/css">
.flipswitch {
width: 48px;
height: 28px;
border-radius: 14px;
cursor: pointer;
background-color: #ccc;
display: inline-block;
text-align: left;
position: relative;
overflow: hidden;
}
.flipswitch > input[type=checkbox] {
width: 100%;
height: 100%;
position: absolute;
top: -10%;
left: -5%;
opacity: 0.01;
cursor: pointer;
}
.flipswitch.active {
text-align: right;
background-color: #5cb85c;
}
.flipswitch span {
width: 24px;
height: 24px;
margin: 2px;
border-radius: 13px;
display: inline-block;
background: #fff;
}
</style>
<script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.flipswitch.js"></script>
<script type="text/javascript">
(function($, window, document) {
$(function() {
$(".flipswitch").flipswitch(function(status) {
console.log(status);
});
})
})(jQuery, window, document);
</script>
</head>
<body>
<div style="width: 800px; margin: 20px auto;">
<input type="checkbox" class="flipswitch" checked />
</div>
</body>
</html>
2.jquery.flipswitch.js
;(function ($, window, document, undefined) {
"use strict";
var pluginName = "flipswitch";
function Plugin(element, statusChanged) {
this.element = element;
this.statusChanged = statusChanged;
this._name = pluginName;
this.init();
}
$.extend(Plugin.prototype, {
init: function () {
var base = this;
var statusChanged = base.statusChanged;
var $elem = $(base.element);
$elem.wrap('<div class="' + $elem.attr("class") + '"></div>');
$("<span></span>").insertBefore($elem);
var $parent = $elem.parent();
if($elem.prop("checked")) {
$parent.addClass("active");
}
$elem.on("change", function() {
$parent.toggleClass("active");
if($.isFunction(statusChanged)) {
statusChanged($elem.prop("checked"));
}
})
}
});
$.fn[pluginName] = function (statusChanged) {
return this.each(function () {
if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" +
pluginName, new Plugin(this, statusChanged));
}
});
};
})(jQuery, window, document);3.效果圖
