谈谈javascript插件的写法
插件顾名思义就是能在一个页面多处使用, 各自按自己的参数配置运行, 并且相互不会冲突.
会写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插件的写法的更多相关文章
- 如何开发原生的 JavaScript 插件(知识点+写法)
一.前言 通过 "WWW" 原则我们来了解 JavaScript 插件这个东西 第一个 W "What" -- 是什么?什么是插件,我就不照搬书本上的抽象概念了 ...
- 开源原生JavaScript插件-CJPCD(省市区联动)
一.前言 上两篇博客笔者对 JavaScript Module 模式,闭包等知识点做了简单介绍之后,我们今天开始正式开发一款属于自己的 JavaScript 插件.由于最近项目刚好用到地区选择这一块的 ...
- 初学者--bootstrap(五)JavaScript插件(上)----在路上(6)
jQuery 插件为 Bootstrap 的组件赋予了“生命”.可以简单地一次性引入所有插件,或者逐个引入到你的页面中. 一:首先要确认的是,单个还是全部引入: JavaScript 插件可以单个引入 ...
- JavaScript插件化开发
大熊君JavaScript插件化开发 一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得昨天的那篇文章吗------这个系列的开篇(第一季).主要讲述了以“jQuery的方式如何开发插件”, 那 ...
- 谈谈javascript中的prototype与继承
谈谈javascript中的prototype与继承 今天想谈谈javascript中的prototype. 通常来说,javascript中的对象就是一个指向prototype的指针和一个自身的属性 ...
- Bootstrap JavaScript插件
在bs3.X中,提供了12种JavaScript插件,分别是:动画过渡(Transition).模态弹窗(Modal).下拉菜单(Dropdown).滚动侦测(Scrollspy).选项卡(Tab ...
- 推荐13款优秀的Twitter Bootstrap JavaScript插件
Bootstrap是基于HTML,CSS和JavaScript的简洁灵活的流行前端框架及交互组件集,由微博先驱Twitter在2011年8月开源的整套前端解决解决方案,拥有非常完备和详尽的开发文档,有 ...
- ASP.NET MVC使用Bootstrap系列(4)——使用JavaScript插件
阅读目录 序言 Data属性 VS 编程API 下拉菜单(dropdown.js) 模态框(modal.js) 标签页(tab.js) 工具提示(tooltip.js) 弹出框(popover.js) ...
- Bootstrap3.0学习教程十七:JavaScript插件模态框
这篇文章中我们主要来学习一下JavaScipt插件模态框.在学习模态框之前,我们先来了解一下JavaScript插件吧. JavaScript插件概览 插件可以单个引入(使用Bootstrap提供的单 ...
随机推荐
- bootstrap响应式网页设计的9条基本原则!
bootstrap响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难.没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手. 为了desktop和mobile单 ...
- 浏览器的visibilitychange 事件ie10以下不兼容
方法1, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- 《疯狂的android讲义第3版》读书笔记
第一章.开始启程,你的第一行android代码 1.android系统架构: 1)linux内核层:为底层硬件提供驱动,如显示驱动.音频驱动.照相机驱动.蓝牙驱动.Wifi驱动.电源管理等 2)系统运 ...
- Perl中的正则表达
前几天用到了Perl语言,主要看了一下Perl中的正则表达式,在各种网页语言中,正则表达式在处理字符串的时候十分有用,所以这里就简单说一下在Perl中正则表达式的应用. 先上代码 #!/usr/bin ...
- ARM-Linux S5PV210 UART驱动(1)----用户手册中的硬件知识
一.概述 The Universal Asynchronous Receiver and Transmitter (UART) in S5PV210 provide four independent ...
- 退出telnet
telnet时,很多时候通过ctrl+c依然无法退出.可以采取下面的方式进行退出: ctrl+],然后进入 telnet>,然后输入q或quit即可.
- EXTJS 资料 Ext.Ajax.request 获取返回数据
下面是一个登陆页面调用的EXTJS login function,通过 url: '/UI/HttpHandlerData/Login/Login.ashx',获取返回登陆账户和密码! Ext.onR ...
- 彻底卸载网易UU网游加速器的方法
昨天跟朋友一起玩游戏,网速感觉不怎么好就下了一个免费的网易UU加速器来给对战平台加速,结果加速了以后网速更差,我晕,于是想卸载,可这个加速器口只有一个exe文件,不用安装,但在第一次加速时记得安装了一 ...
- 【BZOJ 3172】 [Tjoi2013]单词
Description 某人读论文,一篇论文是由许多单词组成.但他发现一个单词会在论文中出现很多次,现在想知道每个单词分别在论文中出现多少次. Input 第一个一个整数N,表示有多少个单词,接下来N ...
- JVM内存区域模型
一:Java技术体系模块图 二:JVM内存区域模型 1.方法区 也称"永久代” .“非堆” ,"perm", 它用于存储虚拟机加载的类信息.常量.静态变量.是各个线程共 ...