详解js中class的多种函数封装方法

本文实例讲解了js中class的多种函数封装方法，分享给大家供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于class的多种函数封装</title>
<style>
body{
  margin: 0;
}
li{
  height: 20px;
}
</style>
</head>
<body>
<div class="box" id="box">
  <ul class="list">
    <li class="in abc ab "></li>
    <li class="in ac b "></li>
    <li class="in a "></li>
    <li class="in acb "></li>
    <li class="in ba "></li>
    <li class="abc"></li>
  </ul>
</div>
<script>
//数组的indexOf方法封装
function indexOf(arr,value,start){
  //如果不设置start,则默认start为0
  if(arguments.length == 2){
    start = 0;
  }
  //如果数组中存在indexOf方法，则用原生的indexOf方法
  if(arr.indexOf){
    return arr.indexOf(value,start);
  }
  for( var i = 0; i < arr.length; i++){
    if(arr[i] === value){
      return i;
    }
  }
  return -1;
}
//数组去重方法封装
function noRepeat(arr){
  var result = [];
  for( var i = 0; i < arr.length; i++){
    if(indexOf(result,arr[i]) == -1){
      result.push(arr[i]);
    }
  }
  return result;
}
//inArray方法封装
function inArray(arr,value){
  for(var i = 0; i < arr.length; i++){
    if(arr[i] === value){
      return true;
    }
  }
  return false;
}
//去除首尾空格函数封装
function trim(arr){
  var result = arr.replace(/^\s+|\s+$/g,'');
  return result;
}
//getElementsByClassName函数封装
function getElementsByClassName(parentObj,classStr){
  var result = [];
  var objs = parentObj.getElementsByTagName('*');

  //如果classStr用空格分隔，则表示class必须同时满足才有效
  var targetArr1 = noRepeat(trim(classStr).split(/\s+/));
  //如果classStr用逗号分隔，则表示class只要有一个满足就有效
  var targetArr2 = noRepeat(trim(classStr).split(/\s*,\s*/));

  if(classStr.indexOf(',') == -1 ){
    //用空格分隔或者只有一个class
    label: for(var i = 0; i < objs.length; i++){
      var arr = noRepeat(trim(objs[i].className).split(/\s+/));
      for( var j = 0; j < targetArr1.length; j++){
        if(!inArray(arr,targetArr1[j])){
          continue label;
        }
      }
      result.push(objs[i]);
    }
    return result;
  }else{
    //用逗号分隔
    label: for(var i = 0; i < objs.length; i++){
        var arr = noRepeat(trim(objs[i].className).split(/\s+/));
        for( var j = 0; j < targetArr2.length; j++){
          if(inArray(arr,targetArr2[j])){
            result.push(objs[i]);
            continue label;
          }
        }

      }
      return result;
    }
}

//addclass函数封装
function addClass(obj,classStr){
  var array = noRepeat(trim(obj.className).split('\s+'));
  if(!inArray(array,classStr)){
    array.push(classStr);
  }
  obj.className = array.join(' ');
  return obj;
}
//removeclass函数封装
function removeClass(obj,classStr){
  var array = noRepeat(trim(obj.className).split('\s+'));
  var index = indexOf(array,classStr);
  if(index != -1){
    classStr.splice(index,1);
    obj.className = classStr.join(' ');
  }
  return obj;
}
//toggleClass函数封装
function toggleClass(obj,classStr){
  var array = noRepeat(trim(obj.className).split('\s+'));
  if(inArray(array,classStr)){
    removeClass(obj,classStr);
  }else{
    addClass(obj,classStr);
  }
}
</script>
</body>
</html>

希望本文所述对大家学习javascript程序设计有所帮助。

赞 (0)

相关推荐

  • Javascript封装id、class与元素选择器方法示例

    由于各个浏览器都支持的选择方法只有如下三种: 1.document.getElementById() 2.document.getElementsByName() 3.document.getElementsByTagName() 所以在封装选择器的时候要考虑浏览器的兼容性. 示例代码如下: <script>//封装id选择器 function $(selector){ var c=selector.substring(0,1);//获取第一个字符 if(c=="#"){

  • Javascript 面向对象（二）封装代码

    Javascript 面向对象（二）封装代码

    写个小例子: 第一步:做一个"手机的类" 复制代码 代码如下: var MobilePhone = (function(){ ---- })() 第二步:考虑这个类,里需要那些类的私有属性,这里我想定义的是实例出来手机的数量 复制代码 代码如下: var MobilePhone = (function(){ //私有属性 var count = 0; //代表手机的数量 })() 第三步:创建一个构造函数,即实例时候,对产生的新象的一个初始化,例如属性,方法的初始化;在这个例子中,每一

  • javascript面向对象包装类Class封装类库剖析

    javascript是个入门门槛很低的语言,甚至一个从来没有接触过javascript的技术人员,几小时内就可以写出一个简单有用的程序代码. 但是如果因此你就下结论:javascript是门简单的语言.那你就大错特错了.想写出高性能的代码,同样需要具备一个高级程序员的基本素养. 一个java或者c++程序员,不一定能写出高性能的javascript代码,但更容易写出高性能的javascript代码. javascript的简单是基于它"胸襟广阔"的包容性.它声明时,不需要指定类型,甚至

  • Node.js中对通用模块的封装方法

    在Node.js中对模块载入和执行进行了包装,使得模块文件中的变量在一个闭包中,不会污染全局变量,和他人冲突. 前端模块通常是我们开发人员为了避免和他人冲突才把模块代码放置在一个闭包中. 如何封装Node.js和前端通用的模块,我们可以参考Underscore.js 实现,他就是一个Node.js和前端通用的功能函数模块,查看代码: 复制代码 代码如下: // Create a safe reference to the Underscore object for use below.  var

  • JS类的封装及实现代码

    1. 定义js类 js并不是一种面向对向的语言, 没有提供对类的支持, 因此我们不能像在传统的语言里那样 用class来定义类, 但我们可以利用js的闭包封装机制来实现js类, 我们来封装一个简的Shape类. 复制代码 代码如下: function ShapeBase() { this.show = function() { alert("ShapeBase show"); }; this.init = function(){ alert("ShapeBase init&q

  • JS封装通过className获取元素的函数示例

    本文实例讲述了JS封装通过className获取元素的函数.分享给大家供大家参考,具体如下: <div id="box"> <div class="star"></div> <div class="star"></div> <div class="app"></div> <p class="star"></

  • 详解js中class的多种函数封装方法

    本文实例讲解了js中class的多种函数封装方法,分享给大家供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>关于class的多种函数封装</title> <style> body{ margin: 0; } li{ height: 20px; } </style

  • 详解JS中的立即执行函数

    1.匿名函数不能单独定义,必须进行赋值操作或者立即执行,否则会被JS引擎定义为语法错误 function(){alert(dada);} VM229:1 Uncaught SyntaxError: Unexpected token 2.在函数体后面加括号就能立即调用,这个函数形式必须是函数表达式,不能是函数声明 function(){alert(123);}(); VM265:1 Uncaught SyntaxError: Unexpected token 3.可以在函数前面加符号,或者用括号将

  • 详解JS中的compose函数和pipe函数用法

    compose函数 compose函数可以将需要嵌套执行的函数平铺,嵌套执行就是一个函数的返回值将作为另一个函数的参数.我们考虑一个简单的需求:这个需求很简单,直接一个计算函数就行: const calculate = x => (x + 10) * 10; let res = calculate(10); console.log(res); // 200 但是根据我们之前讲的函数式编程,我们可以将复杂的几个步骤拆成几个简单的可复用的简单步骤,于是我们拆出了一个加法函数和一个乘法函数: cons

  • 详解js中的几种常用设计模式

    工厂模式 function createPerson(name, age){ var o = new Object(); // 创建一个对象 o.name = name; o.age = age; o.sayName = function(){ console.log(this.name) } return o; // 返回这个对象 } var person1 = createPerson('ccc', 18) var person2 = createPerson('www', 18) 工厂函数

  • 详解js中的原型，原型对象，原型链

    详解js中的原型，原型对象，原型链

    理解原型 我们创建的每一个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法.看如下例子: function Person(){ } Person.prototype.name = 'ccc' Person.prototype.age = 18 Person.prototype.sayName = function (){ console.log(this.name); } var person1 = ne

  • 详解JS中的对象字面量

    前言 在 ES6 之前,js中的对象字面量(也称为对象初始化器)是非常基础的.可以定义两种类型的属性: 键值对{name1: value1} 获取器{ get name(){..} }和 设置器{ set name(val){..}}的计算属性值 var myObject = { myString: 'value 1', get myNumber() { return this._myNumber; }, set myNumber(value) { this._myNumber = Number

  • 详解JS中的reduce fold unfold用法

    fold(reduce) 说说reduce吧, 很喜欢这个函数,节省了不少代码量,而且有一些声明式的雏形了,一些常见的工具函数,flatten,deepCopy,mergeDeep等用reduce实现的很优雅简洁.reduce也称为fold,本质上就是一个折叠数组的过程,把数组中的多个值经过运算变成一个值,每次运算都会有一个函数处理,这个函数就是reduce的核心元素,称之为reducer,reducer函数是个2元函数,返回1个单值,常见的add函数就是reducer const addRed

  • 一文详解JS中的事件循环机制

    目录 前言 1.JavaScript是单线程的 2.同步和异步 3.事件循环 前言 我们知道JavaScript 是单线程的编程语言,只能同一时间内做一件事,按顺序来处理事件,但是在遇到异步事件的时候,js线程并没有阻塞,还会继续执行,这又是为什么呢?本文来总结一下js 的事件循环机制. 1.JavaScript是单线程的 JavaScript 是一种单线程的编程语言,只有一个调用栈,决定了它在同一时间只能做一件事.在代码执行的时候,通过将不同函数的执行上下文压入执行栈中来保证代码的有序执行.在

  • 实例详解JS中的事件循环机制

    实例详解JS中的事件循环机制

    目录 一.前言 二.宏.微任务 三.Tick 执行顺序 四.案例详解 1.掺杂setTimeout 2.掺杂微任务,此处主要是Promise.then 3.掺杂async/await 一.前言 之前我们把react相关钩子函数大致介绍了一遍,这一系列完结之后我莫名感到空虚,不知道接下来应该更新有关哪方面的文章.最近想了想,打算先回归一遍JS基础,把一些比较重要的基础知识点回顾一下,然后继续撸框架(可能是源码.也可能补全下全家桶).不积跬步无以至千里,万丈高楼咱们先从JS的事件循环机制开始吧,废话

  • 详解JS中异常与错误处理的正确方法

    目录 简介 1 面向错误编程 1.1 墨菲定律 1.2 先判否 2. js 内置的错误处理 2.1 Error 类 2.2 throw 2.3 try catch 2.4 Promise.catch 3. 错误处理只有一次 总结 简介 首先,这篇文章一定会引起争议,因为对于错误处理从来就没有真正的标准答案,每个人都会有自己的主观意见. 我的理解毕竟也是片面,提出的想法主要是基于个人的经验总结,如果有异议,欢迎交流讨论. 为了能够尽量保持客观,我会将处理思想尽量前置,再围绕处理思想展开. 这样大家

随机推荐