插件顾名思义就是能在一个页面多处使用, 各自按自己的参数配置运行, 并且相互不会冲突.
会写javascript插件是进阶js高级的必经之路, 也是自己所学知识的一个典型的综合运用. 如果你还没头绪, 无从下手的话, 不用着急, 今天我们就一起来探讨一下插件的一般写法.

所需技能:
    1.面向对象用法
    2.闭包的理解
    3.变量作用域的理解

以一个tab选项卡的为例:

第一步:

      我们需要写html结构, 假设结构如下:

html结构:

<ul id="tab_nav">
<li class="current">新闻</li>
<li>生活</li>
<li>体育</li>
<li>抽奖</li>
</ul>
<div id="tabs">
<div class="tab_items">
新闻
</div>
<div class="tab_items off">
生活
</div>
<div class="tab_items off">
体育
</div>
<div class="tab_items off">
抽奖
</div>
</div>

第二步:

     写css代码, 这个在这里就省去了, 具体大家自己可以去写下, 简单. 具体看截图.

  

  

第三步:

     写js代码了.

大概就分为这三步, 其中第三步是核心. 当然前两步也是很重要的, 结构的好坏会直接影响你的js实现方式.

主结构:

            //构造函数, 以后每一个tab选项卡的实例都是由他来实例化的.
function Tab(){
//some code
}
//对象原型, 这里主要是一些功能方法.
Tab.prototype = {
//some code } 用法:
new Tab('tab_nav', 'tabs', {可选参数}); //实例一个选项卡, 传入一些参数, 实现一些效果
new Tab('tab_nav2', 'tabs2', {可选参数}); //实例第二个选项卡, 传入一些参数, 实现一些效果
...

以上就是tab选项卡插件的主结构, 下面我们来具体实现.

 js代码:

    function Tab(){
this.init.apply(this, arguments); //用init函数初始化对象属性
} Tab.prototype = {
init: function(ela, elb, paramObj){
//默认参数设置, triggerClass:当前选项的class名字, type:鼠标事件, delay:这个主要针对mouseover快速划过去的一个延时处理
this.defaultOptions = {
triggerClass : 'current',
type : 'mouseover',
delay : 150
}; this.options = this.extend(this.defaultOptions, paramObj || {});
this.oa = document.getElementById(ela);
this.ob = document.getElementById(elb);
this.triggerItem = this.oa.children;
this.listItem = this.ob.children;
this.tLen = this.triggerItem.length;
this.arr = [];
this.timer = null;
this.isIE = !-[1,]; //判断IE浏览器
var self = this;
this.options.delay = this.options.type === 'click' ? 0 : this.options.delay; //当type为click时, 就无延时, 反之则延时
//ie下过滤注释节点
if(this.isIE){
for(var i = 0, len = this.listItem.length; i < len; i++){
if(this.listItem[i].nodeType === 1){
this.arr.push(this.listItem[i]);
}
}
}
for(var i = 0; i < this.tLen; i++){
this.triggerItem[i]['on' + this.options.type] = this.change(i); //绑定事件
this.triggerItem[i].onmouseout = function(){clearTimeout(self.timer); self.timer = null;}; //绑定事件
}
},
extend: function(source, target){ //属性合并处理
for(var p in target){
if(target.hasOwnProperty(p)){
source[p] = target[p];
}
}
return source;
},
trim: function(str){
return str.replace(/^\s+/g, "").replace(/\s+$/g, "");
},
addClass: function(el, name){ //定义添加class函数, addClass(元素对象, class名字)
var arr = [],
str = el.className,
arr = str.split(/\s+/),
len = arr.length,
name = this.trim(name);
for(var i = 0; i < len; i++){
if(arr[i] === name){
return;
}
}
arr.splice(len, 1, name);
el.className = this.trim(arr.join(' '));
el = null;
},
removeClass: function(el, name){ //定义移除class函数, removeClass(元素对象, class名字)
var arr = [],
str = el.className,
arr = str.split(/\s+/),
len = arr.length,
name = this.trim(name);
for(var i = 0; i < len; i++){
if(arr[i] === name){
arr.splice(i,1);
el.className=arr.join(' ');
return;
}
}
},
change: function(d){ //选项卡实现
var self = this;
return function(){
self.timer = setTimeout(function(){
for(var i = 0; i < self.tLen; i++){
if(i === d){
self.addClass(self.triggerItem[d], self.options.triggerClass);
self.isIE ? self.arr[d].style.display = 'block' : self.listItem[d].style.display = 'block';
}
else{
self.removeClass(self.triggerItem[i], self.options.triggerClass);
self.isIE ? self.arr[i].style.display = 'none' : self.listItem[i].style.display = 'none';
}
}
}, self.options.delay);
}
}
}
用法:
new Tab('tab_nav', 'tabs', {type:'click'});
new Tab('tab_nav2', 'tabs2', {triggerClass:'trigger'});
new Tab('tab_nav3', 'tabs3', {type:'mouseover', delay:200});

怎么样,很简单吧,只要思路打开了,就很容易实现了。还有很多其他的方式,有兴趣的大家自己研究研究。

谈谈javascript插件的写法的更多相关文章

  1. 如何开发原生的 JavaScript 插件(知识点+写法)

    一.前言 通过 "WWW" 原则我们来了解 JavaScript 插件这个东西 第一个 W "What" -- 是什么?什么是插件,我就不照搬书本上的抽象概念了 ...

  2. 开源原生JavaScript插件-CJPCD(省市区联动)

    一.前言 上两篇博客笔者对 JavaScript Module 模式,闭包等知识点做了简单介绍之后,我们今天开始正式开发一款属于自己的 JavaScript 插件.由于最近项目刚好用到地区选择这一块的 ...

  3. 初学者--bootstrap(五)JavaScript插件(上)----在路上(6)

    jQuery 插件为 Bootstrap 的组件赋予了“生命”.可以简单地一次性引入所有插件,或者逐个引入到你的页面中. 一:首先要确认的是,单个还是全部引入: JavaScript 插件可以单个引入 ...

  4. JavaScript插件化开发

    大熊君JavaScript插件化开发 一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得昨天的那篇文章吗------这个系列的开篇(第一季).主要讲述了以“jQuery的方式如何开发插件”, 那 ...

  5. 谈谈javascript中的prototype与继承

    谈谈javascript中的prototype与继承 今天想谈谈javascript中的prototype. 通常来说,javascript中的对象就是一个指向prototype的指针和一个自身的属性 ...

  6. Bootstrap JavaScript插件

      在bs3.X中,提供了12种JavaScript插件,分别是:动画过渡(Transition).模态弹窗(Modal).下拉菜单(Dropdown).滚动侦测(Scrollspy).选项卡(Tab ...

  7. 推荐13款优秀的Twitter Bootstrap JavaScript插件

    Bootstrap是基于HTML,CSS和JavaScript的简洁灵活的流行前端框架及交互组件集,由微博先驱Twitter在2011年8月开源的整套前端解决解决方案,拥有非常完备和详尽的开发文档,有 ...

  8. ASP.NET MVC使用Bootstrap系列(4)——使用JavaScript插件

    阅读目录 序言 Data属性 VS 编程API 下拉菜单(dropdown.js) 模态框(modal.js) 标签页(tab.js) 工具提示(tooltip.js) 弹出框(popover.js) ...

  9. Bootstrap3.0学习教程十七:JavaScript插件模态框

    这篇文章中我们主要来学习一下JavaScipt插件模态框.在学习模态框之前,我们先来了解一下JavaScript插件吧. JavaScript插件概览 插件可以单个引入(使用Bootstrap提供的单 ...

随机推荐

  1. C#,PHP对应加密函数

    require_once "JunDes.php"; $jDes=new JunDes(); echo $jDes->encode('98765'); //echo $jDe ...

  2. oracle中的dual表详解

    oracle中的dual表详解 1.DUAL表的用途 Dual 是 Oracle中的一个实际存在的表,任何用户均可读取,常用在没有目标表的Select语句块中 --查看当前连接用户 SQL> s ...

  3. 解决未能从程序集xxx中加载类型System.ServiceModel.Activation.HttpModule的问题

    在IIS中运行网站时,出现错误: 未能从程序集“System.ServiceModel, Version=3.0.0.0, Culture=neutral, PublicKeyToken=b77a5c ...

  4. python多进程中的队列数据共享问题

    0x00 起 今天在写一个小东西的时候,需要控制并发量,但又不能直接调用python multiprocessing(问题会在文后提到).于是尝试用Queue来实现. 最一开始的思路是这样的: fro ...

  5. ajaxfileupload踩过的坑

    首先ajaxfileupload-jQuery.handleError is not a function这个错误,百度之后发现解决办法就是把 handleError: function( s, xh ...

  6. 简单3d RPG游戏 之 002 生命条(二)

    在游戏中,游戏人物的血条可能会因为受伤或吃血瓶而长度变化,所以需要将血条的长度单独提出来作为一个变量,方便直接修改数值. public float healthBarLength; 改变生命值函数如下 ...

  7. poj 3249 Test for Job (记忆化深搜)

    http://poj.org/problem?id=3249 Test for Job Time Limit: 5000MS   Memory Limit: 65536K Total Submissi ...

  8. 2002: [Hnoi2010]Bounce 弹飞绵羊 - BZOJ

    Description 某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆,他邀请小绵羊一起玩个游戏.游戏一开始,Lostmonkey在地上沿着一条直线摆上n个装置,每个装置 ...

  9. replace()替换文字

    var test = text.innerHTML; b = test.replace(/任晓强/g,"你好"); console.log(b); html: <div id ...

  10. asp 文件上传(无组件上传)

    文件1.上传界面文件 upload.htm<html><head><meta http-equiv="Content-Language" conten ...