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.效果图