资讯专栏INFORMATION COLUMN

谈谈javascript插件的写法

lakeside / 858人阅读

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

1.面向对象用法
2.闭包的理解
3.变量作用域的理解

以一个tab选项卡的为例:

第一步:

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

  • 新闻
  • 生活
  • 体育
  • 抽奖
新闻
生活
体育
抽奖

第二步:

 写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});

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82048.html

相关文章

  • 谈谈ES6前后异步编程

    摘要:回调函数这是异步编程最基本的方法。对象对象是工作组提出的一种规范,目的是为异步编程提供统一接口。诞生后,出现了函数,它将异步编程带入了一个全新的阶段。 更多详情点击http://blog.zhangbing.club/Ja... Javascript 语言的执行环境是单线程的,如果没有异步编程,根本没法用,非卡死不可。 为了解决这个问题,Javascript语言将任务的执行模式分成两种...

    fizz 评论0 收藏0
  • 了解Webpack吗?

    摘要:你了解吗核心概念的核心概念大致分为四个入口出口插件,是一个打包模块化的工具,专注构建模块化项目。优点只更新变更内容,以节省宝贵的开发时间。在构建过程中,将引用的静态资源路径修改为上对应的路径。可以通过在启动时追加参数来实现提取公共代码。 你了解Webpack吗? 核心概念 Webpack的核心概念大致分为四个:入口、出口、loader、插件,是一个打包模块化js的工具,专注构建模块化项...

    Cympros 评论0 收藏0
  • 谈谈PostCSS

    摘要:它们有个统一的名字预处理器。面对以上问题,预处理器给出了非常可行的解决方案变量就像其他编程语言一样,免于多处修改。回到话题中,之所以会出现向预处理器这样子的解决方案,归根结底还是标准发展的滞后性导致的。 前言 现在的前端,javascript的发展有目共睹,框架林立。同时,html也是齐头并进,推出了HTML5标准,并且得到了普及。这样的发展却唯独少了一个角色? CSS,就是这个看似不...

    高胜山 评论0 收藏0
  • 谈谈PostCSS

    摘要:它们有个统一的名字预处理器。面对以上问题,预处理器给出了非常可行的解决方案变量就像其他编程语言一样,免于多处修改。回到话题中,之所以会出现向预处理器这样子的解决方案,归根结底还是标准发展的滞后性导致的。 前言 现在的前端,javascript的发展有目共睹,框架林立。同时,html也是齐头并进,推出了HTML5标准,并且得到了普及。这样的发展却唯独少了一个角色? CSS,就是这个看似不...

    leap_frog 评论0 收藏0
  • 谈谈javascript语法里一些难点问题(一)

    摘要:引子前不久我建立的技术群里一位问了一个这样的问题,她贴出的代码如下所示执行结果如下所示第一个第二个这是一个令人诧异的结果,为什么第一个弹出框显示的是,而不是呢这种疑惑的原理我描述如下一个页面里直接定义在标签下的变量是全局变量即属于对象的变量 1) 引子 前不久我建立的技术群里一位MM问了一个这样的问题,她贴出的代码如下所示: var a = 1; function hehe...

    huaixiaoz 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<