在jQuery大量使用的环境下，目前网上的众多jQuery插件也能基本满足要求，但是在项目具体需求下，有时候依旧需要自己造轮子，本文介绍了依赖jQuery库进行原生JavsScript插件的编写。
插件需要满足的条件
一个可复用的插件需要满足以下条件：
- 插件自身的作用域与用户当前的作用域相互独立，也就是插件内部的私有变量不能影响使用者的环境变量；
- 插件需具备默认设置参数；
- 插件除了具备已实现的基本功能外，需提供部分API，使用者可以通过该API修改插件+ 功能的默认参数，从而实现用户自定义插件效果；
- 插件支持链式调用。
1，基本插件格式
实现私有作用域，最好的办法就是使用闭包。可以把插件当做一个函数，插件内部的变量及函数的私有变量，为了在调用插件后依旧能使用其功能，闭包的作用就是延长函数(插件)内部变量的生命周期，使得插件函数可以重复调用，而不影响用户自身作用域。
故需将插件的所有功能写在一个立即执行函数中：
(function(window, factory, plug) {
factory(jQuery, plug)
})(this, function(jQuery, plug) {
...
}, "dataResult");
2，插件默认参数
插件的主要功能可以总结至几个关键参数，通过这几个关键参数即可修改插件的主要功能，也是第三步API设置的关键参数。
将默认参数放置在全局函数的最前面，参数变量名为options,通过对象字面量进行赋值：
var options = {
key1: para1,
key2: para2,
key3: para3,
...
keyn: paran
}
//插件默认
var define = {
initEvent: "input",
plugName: "dir"
};
//数据校验
var _RULES_ = {
"regexp": function(data) {
return new RegExp(data).test(this.val());
},
"required": function(data) {
return this.val();
},
"min-length": function(data) {
return this.val().length > data;
},
"confirm": function() {
var passElement = $(":password")[0];
if (passElement.value == "" || this.val() == passElement.value) {
return false;
} else {
return true;
}
}
}
3，插件API、参数设置
因为API指向的是使用者，故需要在用户调用插件时将API暴露给用户，因用户API时是通过插件提供的名字进行使用，故将API设置为Object类型，用户就可以通过调用API的key进行使用，
$.fn[plug] = function(options) {
if (!this.is('form')) { return }
this.find = this.find('input');
$.extend(this, define, options);
this.find.on(this.initEvent, function() {
var _this = $(this);
_this.siblings('p').remove();
$.each(_RULES_, function(key, fn) {
var $fileName = _this.data(define.plugName + "-" + key);
var $message = _this.data(define.plugName + "-" + key + "-message");
if ($fileName) {
var result = fn.call(_this, $fileName);
if (!result) {
_this.after("<p>" + $message + "</p>")
}
}
})
})
}
4，html前台配置调用
html部分
<input type="text" class="form-control" data-dir-min-length="4" data-dir-min-length-message ="小于4位" id="exampleInputEmail1" placeholder="user">
js部分
$('form').dataResult();
5，拓展
js插件部分
$.fn[plug].extendResult = function(options) {
$.extend(_RULES_, options);
} //jQuery.prototype.dataResult
js调用部分
$.fn.dataResult.extendResult({
"max-length":function(data){
console.log(data)
return this.val().length <= data;
}
})
源码使用
html
<!DOCTYPE html>
<html>
<head>
<meta name=“keywords” content="K">
<meta name="description" content="D">
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="index.js"></script>
</head>
<body>
<form>
<div class="form-group">
<label for="exampleInputEmail1">账号</label>
<input type="text" class="form-control" data-dir-max-length="6" data-dir-max-length-message ="大于6位" data-dir-min-length="4" data-dir-min-length-message ="小于4位" id="exampleInputEmail1" placeholder="user">
</div>
<div class="form-group">
<label for="exampleInputEmail1">邮箱</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputPassword1">再次输入密码</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</form>
</body>
<script>
$('form').dataResult();
$.fn.dataResult.extendResult({
"max-length":function(data){
console.log(data)
return this.val().length <= data;
}
})
</script>
</html>
js 插件部分
(function(window, factory, plug) {
factory(jQuery, plug)
})(this, function(jQuery, plug) {
//插件默认
var define = {
initEvent: "input",
plugName: "dir"
};
//数据校验
var _RULES_ = {
"regexp": function(data) {
return new RegExp(data).test(this.val());
},
"required": function(data) {
return this.val();
},
"min-length": function(data) {
return this.val().length > data;
},
"confirm": function() {
var passElement = $(":password")[0];
if (passElement.value == "" || this.val() == passElement.value) {
return false;
} else {
return true;
}
}
}
$.fn[plug] = function(options) {
if (!this.is('form')) { return }
this.find = this.find('input');
$.extend(this, define, options);
this.find.on(this.initEvent, function() {
var _this = $(this);
_this.siblings('p').remove();
$.each(_RULES_, function(key, fn) {
var $fileName = _this.data(define.plugName + "-" + key);
var $message = _this.data(define.plugName + "-" + key + "-message");
if ($fileName) {
var result = fn.call(_this, $fileName);
if (!result) {
_this.after("<p>" + $message + "</p>")
}
}
})
})
}
$.fn[plug].extendResult = function(options) {
$.extend(_RULES_, options);
} //jQuery.prototype.dataResult
}, "dataResult");
网友评论