前端开发者前端开发什么叫封装|前端插件开发 思路|前端 插件化开发
其实，封装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>
<html>
<head>
<metahttp-equiv=”Content-Type” content=”text/html;charset=utf-8″ />
<title>web前端开发工具常用插件</title>
<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>
<html>
<head>
<metahttp-equiv=”Content-Type” content=”text/html;charset=utf-8″ />
<title>前端开发插件大全</title>
<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前端开发
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册