前端开发什么叫封装jQuery插件

前端开发什么叫封装|前端插件开发 思路|前端 插件化开发

其实,封装jquery插件很简单。
先看看,封装模板是什么?看下这个light-weight模式:
javascript 代码

//第一个”;”是为了防止别人写的插件其最后没有”;”,信得过,可以不写
//函数自执行,提供作用域
//传进来参数有window和document,如果插件用不上,可以不写。目的是为了快速查找window和document。也便于代码压缩
//例如window可能给压缩成w,你代码就报错了
//undefined,是为了防止别人把undefined定义成别的。注意最后传参数没有传第四个参数,正保证undefined是原生的。
;
(function ($, window, document, undefined) {
//需要设置为直接的名字
varpluginName=”defaultPluginName”;
//默认配置项
vardefaults={
propertyName: “value”
}
//插件类
functionPlugin(element,options){
//拿到dom元素,获得对应jq对象,要$(element)
this.element=element;
//覆盖默认配置项
this.options =$.extend({},defaults,options);
//缓存配置项
this._defaults=defaults;
//缓存插件名字(并没神马用)
this._name=pluginName;
//调用初始函数
this.init();
}
Plugin.prototype.init=function(){
//做你想做的事情
}
//fn就是prototype
$.fn[pluginName] =function(options){
//each表示对多个元素调用,用return 是为了返回this,进行链式调用
returnthis.each(function(){
//判断有没有插件名字 如果你不愿意加if 直接new就好了
if (!$.data(this,’plugin_’+pluginName)) {
//生成插件类实例。
$.data(this,’plugin_’+pluginName,newPlugin(this,options));
}
});
}
})(jquery, window, document); //注意没有传第四个参数。

第一步,先写出简单demo,这里不写了,直接找一个吧。这里以一个tab选项卡为例
http://www.cnblogs.com/web-xiaobai/archive/2012/09/17/2689067.html
运行效果如下:
代码片段

<!Doctype html>
<head>
<metahttp-equiv=”Content-Type” content=”text/html;charset=utf-8″ />
<title>web前端开发工具常用插件</title>
<script type=”text/javascript” src=”http://libs.baidu.com/jquery/1.9.1/jquery.min.js”></script>
<script type=”text/javascript”>
//http://www.cnblogs.com/web-xiaobai/archive/2012/09/17/2689067.html
$(function(){
$(document).ready(function(){
$(“.tab li”).click(function(){
$(“.tab li”).eq($(this).index()).addClass(“cur”).siblings().removeClass(
‘cur’);
$(“div”).hide().eq($(this).index()).show();
//另一种方法: $(“div”).eq($(“.tab li”).index(this)).addClass(“on”).siblings().removeClass(‘on’);
});
});
});
</script>
<style>
div{
margin:0;
padding:0;
width:184px;
height:200px;
border:1pxsolid#ccc;
display:none;
}
.tab{
margin:0;
padding:0;
list-style:none;
width:200px;
overflow:hidden;
}
.tabli{
float:left;
width:60px;
height:30px;
background:#ccc;
color:#fff;
border:1pxsolidred;
text-align:center;
line-height:30px;
cursor:pointer;
}
.on{
display:block;
}
.tabli.cur{
background:blue;
}
</style>
</head>
<body>
<ulclass=”tab”>
<li>最新</li>
<liclass=”cur”>热门</li>
<li>新闻</li>
</ul>
<div>11</div>
<divclass=”on”>22</div>
<div>33</div>
</body>
</html>

假设是自己写的,先看看核心逻辑是什么?
javascript 代码

$(document).ready(function () {
$(“.tab li”).click(function(){
$(“.tab li”).eq($(this).index()).addClass(“cur”).siblings().removeClass(‘cur’);
$(“div”).hide().eq($(this).index()).show();
//另一种方法: $(“div”).eq($(“.tab li”).index(this)).addClass(“on”).siblings().removeClass(‘on’);
});
});

很简单,不做过多说明了。
第二步,改写代码为封装插件做准备,原文中的是index为顺序的,我想不要这种顺序,改用data属性来指明那个tab对应那个div。
先给内容区域,总体用div包装一下,同样要改变样式。
tab页和内容区域做关联,改用data属性关联。
javascript 代码

$(document).ready(function () {
$(“.tab li”).click(function(){
var$this=$(this);
varc=$this.data(“tab”);
alert(c)
$this.addClass(“cur”).siblings().removeClass(‘cur’);
$(“.tabContent”).find(‘>[data-tab=’+c+’]’).addClass(“on”).siblings().removeClass(‘on’);
});
});

代码片段

<!Doctype html>
<head>
<metahttp-equiv=”Content-Type” content=”text/html;charset=utf-8″ />
<title>前端开发插件大全</title>
<script type=”text/javascript” src=”http://libs.baidu.com/jquery/1.9.1/jquery.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“.tab li”).click(function(){
var$this=$(this);
varc=$this.data(“tab”);
$this.addClass(“cur”).siblings().removeClass(‘cur’);
$(“.tabContent”).find(‘>[data-tab=’+c+’]’).addClass(“on”).siblings().removeClass(
‘on’);
});
});
</script>
<style>
.tabContentdiv{
margin:0;
padding:0;
width:184px;
height:200px;
border:1pxsolid#ccc;
display:none;
}
.tab{
margin:0;
padding:0;
list-style:none;
width:200px;
overflow:hidden;
}
.tabli{
float:left;
width:60px;
height:30px;
background:#ccc;
color:#fff;
border:1pxsolidred;
text-align:center;
line-height:30px;
cursor:pointer;
}
.tabli.cur{
background:blue;
}
div.on{
display:block;
}
</style>
</head>
<body>
<ulid=”tab” class=”tab”>
<lidata-tab=”tab1″>最新</li>
<lidata-tab=”tab2″ class=”cur”>热门</li>
<lidata-tab=”tab3″>新闻</li>
</ul>
<divid=”tabContent” class=”tabContent”>
<divdata-tab=”tab1″>11</div>
<divdata-tab=”tab2″ class=”on”>22</div>
<divdata-tab=”tab3″>33</div>
</div>
</body>
</html>

第三步,用模板来封装插件,套用就行了,我做一个可以支持默认激活某一项的配置。
javascript 代码

(function ($, window, document, undefined) {
varpluginName=”myTab”;
vardefaults={
contentWrapper: ”,
activeTabName: null
}
functionPlugin(element,options){
this.element=element;
this.options =$.extend({},defaults,options);
this._defaults=defaults;
this._name=pluginName;
this.init();
}
Plugin.prototype.init=function(){
varself=this;
$(this.element).find(‘li’).click(function(){
var$this=$(this);
varname=$this.data(“tab”);
$this.addClass(“cur”).siblings().removeClass(‘cur’);
$(self.options.contentWrapper).find(‘>[data-tab=’+name+’]’).addClass(“on”).siblings().removeClass(‘on’);
});
varactiveName=this.options.activeTabName;
alert(activeName);
if (activeName==null) {
$(this.element).find(‘li’).eq(0).click();
}else{
$(this.element).find(‘>[data-tab=’+activeName+’]’).click();
}
}
$.fn[pluginName] =function(options){
returnthis.each(function(){
if (!$.data(this,’plugin_’+pluginName)) {
$.data(this,’plugin_’+pluginName,newPlugin(this,options));
}
});
}
})(jquery, window, document);

使用方式:
javascript 代码

$(‘#tab’).myTab({
contentWrapper: ‘#tabContent’,
activeTabName: ‘tab2’
});

第四步,代码优化,每个li都有click,太浪费了。改用委托(原先用的delegate,经网友提醒,包括bind,我全改成on了)。
javascript 代码

;(function($,window,document,undefined){
varpluginName=”myTab”;
vardefaults={
contentWrapper : ”,
activeTabName : null
}
functionPlugin(element,options){
this.element=element;
this.options =$.extend({},defaults,options);
this._defaults=defaults;
this._name=pluginName;
this.init();
}
Plugin.prototype.init=function(){
varself=this;
var$element=$(this.element);
$element.on(‘click’,’li’,function(){
var$this=$(this);
varc=$this.data(“tab”);
$element.trigger(‘tab/change’,c);
});
$element.on(‘tab/change’,function(e,tabName){
$element.find(‘li’).removeClass(‘cur’);
$element.find(‘>[data-tab=’+tabName+’]’).addClass(“cur”);
});
var$contentWrapper=$(this.options.contentWrapper);
$element.on(‘tab/change’,function(e,tabName){
$contentWrapper.find(‘>[data-tab]’).removeClass(‘on’);
$contentWrapper.find(‘>[data-tab=’+tabName+’]’).addClass(“on”);
});
varactiveName=this.options.activeTabName;
if(activeName==null){
$element.find(‘li’).eq(0).click();
}else{
$element.trigger(‘tab/change’,this.options.activeTabName);
}
}
$.fn[pluginName] =function(options){
returnthis.each(function(){
if(!$.data(this,’plugin_’+pluginName)){
$.data(this,’plugin_’+pluginName,newPlugin(this,options));
}
});
}
})(jQuery,window,document);

完整案例
代码片段

<!Doctype html>
<html>
<head>
<metahttp-equiv=”Content-Type” content=”text/html;charset=utf-8″ />
<title>jq 前端组件化开发框架</title>
<script type=”text/javascript” src=”http://libs.baidu.com/jquery/1.9.1/jquery.min.js”></script>
<script type=”text/javascript”>
(function ($, window, document, undefined) {
varpluginName=”myTab”;
vardefaults={
contentWrapper: ”,
activeTabName: null
}
functionPlugin(element,options){
this.element=element;
this.options =$.extend({},defaults,options);
this._defaults=defaults;
this._name=pluginName;
this.init();
}
Plugin.prototype.init=function(){
varself=this;
var$element=$(this.element);
$element.on(‘click’,’li’,function(){
var$this=$(this);
varc=$this.data(“tab”);
$element.trigger(‘tab/change’,c);
});
$element.on(‘tab/change’,function(e,tabName){
$element.find(‘li’).removeClass(‘cur’);
$element.find(‘>[data-tab=’+tabName+’]’).addClass(“cur”);
});
var$contentWrapper=$(this.options.contentWrapper);
$element.on(‘tab/change’,function(e,tabName){
$contentWrapper.find(‘>[data-tab]’).removeClass(‘on’);
$contentWrapper.find(‘>[data-tab=’+tabName+’]’).addClass(“on”);
});
varactiveName=this.options.activeTabName;
if (activeName==null) {
$element.find(‘li’).eq(0).click();
}else{
$element.trigger(‘tab/change’,this.options.activeTabName);
}
}
$.fn[pluginName] =function(options){
returnthis.each(function(){
if (!$.data(this,’plugin_’+pluginName)) {
$.data(this,’plugin_’+pluginName,newPlugin(this,options));
}
});
}
})(jQuery, window, document);
</script>
<script type=”text/javascript”>
$(function(){
$(‘#tab’).myTab({
contentWrapper: ‘#tabContent’,
activeTabName: ‘tab2’
});
})
</script>
<style>
.tabContentdiv{
margin:0;
padding:0;
width:184px;
height:200px;
border:1pxsolid#ccc;
display:none;
}
.tab{
margin:0;
padding:0;
list-style:none;
width:200px;
overflow:hidden;
}
.tabli{
float:left;
width:60px;
height:30px;
background:#ccc;
color:#fff;
border:1pxsolidred;
text-align:center;
line-height:30px;
cursor:pointer;
}
.tabli.cur{
background:blue;
}
div.on{
display:block;
}
</style>
</head>
<body>
<ulid=”tab” class=”tab”>
<lidata-tab=”tab1″>最新</li>
<lidata-tab=”tab2″>热门</li>
<lidata-tab=”tab3″>新闻</li>
</ul>
<divid=”tabContent” class=”tabContent”>
<divdata-tab=”tab1″>11</div>
<divdata-tab=”tab2″>22</div>
<divdata-tab=”tab3″>33</div>
</div>
</body>
</html>

如你所料,封装插件过程很简单,难的还是业务逻辑。
一般插件还要支持传入字符串当方法调用的,这里面没写,以后可能会补充进去。
比如有方法支持让第几个激活。还有,还要支持AMD的,这里只是一个简单例子;

jquery前端开发工程师 会的|javascript jquery 交互式web前端开发

» 本文来自:前端开发者 » 《前端开发什么叫封装jQuery插件》
» 本文链接地址:https://www.rokub.com/3463.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!