Fly Jquery ( you might not need

作者: 南航 | 来源:发表于2016-12-03 23:49 被阅读35次

jQuery 作为一款优秀的JavaScript框架，使用 JQuery能够让你写出更加简洁易懂的代码，提高开发效率。

但是，在真正的开发过程中我们需要考虑是否真正的需要使用一个 80+kb(压缩版 30+kb) 的代码库来作为自己的项目依赖。或者你正在开发自己的前端框架，那就更需要注意这一点了，

或许你只是需要使用几行实用的代码来方便和简化自己的书写。如此，我们何不使用简单的封装将我们仅仅需要的工具代码进行包装，或者干脆就是用原生的JavaScript，毕竟随着 ES6,ES7 的出现，JavaScript提供了更多的语法糖。新增了更多实用的方法。

Fly JQuery 使用javascript 生产单个的工具方法，需要使用时只需要简单拼装即可上手应用，每个工具方法后有详细的 JavaScript 实现。

使用方法 (使用方法基本和JQuery类似，可以进行连缀操作)

将 $$ 和 Base 方法复制到自己的项目中 这两个方法是实现 fly jquery 的基础
根据需要将其余的原型方法复制到自己的项目中(例如: addClass 方法)
使用 $$('CssSelector') 创建一个对象, 然后像使用 jquery一样使用这个工具吧! ( 例如: $$('#idName').addClass('flyJquery') )

小技巧: ( 使用 command + f 或者 ctrl + f 本网页右上角搜索 addClass, id 等任何关键字，)

aa.png

base

使用 $$('CssSelector') 创建一个对象，支持传递基本的 css选择器构造对象，
返回一个包含 Element List 的对象Base ( 下文一律使用 this 代替 )
可进行连缀操作

// 构造了 $$ 函数 用于初始化 fly jquery 对象
// Base 用于实现 fly jquery 的基本功能

var $$ = function (ele) {
    return new Base(ele);
}

function Base(ele) {
    //创建一个数组，来保存获取的节点和节点数组
   this.elements = [];
   if (typeof(ele) == 'string') {
       if (/^#/.test(ele)) {
           this.elements.push(document.querySelector(ele));
       } else if (/^\./.test(ele) || /^\w/.test(ele)) {
            var domList = document.querySelectorAll(ele);
            for (var domIndex = 0; domIndex < domList.length; domIndex ++) {
                this.elements.push(domList[domIndex]);
            }
       }
    } else if (typeof ele === 'object' && ele instanceof Element  && ele.nodeType === 1) {
          // 判断元素 一定为 DOM 对象
          this.elements.push(ele);
    }
}

addClass(className)

 Base.prototype.addClass = function (className) {
    for (var i = 0; i < this.elements.length; i ++) {
        if (this.elements[i].classList)
            this.elements[i].classList.add(className);
        else
            this.elements[i].className += ' ' + className;
    }
    return this;
}

addClass(class)
返回一个包含有该元素的对象（可进行进一步连缀操作）

使用案例

 $$('#selector').addClass('flyJquery');    // (div#selector.flyJquery) 返回 Base object

javascript 实现

  if (el.classList) 
     el.classList.add(className);
  else 
    el.className += ' ' + className;

removeClass(className)

 Base.prototype.removeClass = function (className) {
    for (var i = 0; i < this.elements.length; i ++) {
        if (this.elements[i].classList)
            this.elements[i].classList.remove(className);
        else
            this.elements[i].className = this.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
    }
    return this;
}

removeClass(class)
删除选择器中的相应的 class, 返回对象

使用案例

$$('#selector').removeClass(className);

javascript 实现

  if (el.classList) 
     el.classList.remove(className);
  else 
     el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');

hasClass( className )

Base.prototype.hasClass = function (className) {
    if (this.elements[0].classList)
       return this.elements[0].classList.contains(className);
    else
       return new RegExp('(^| )' + className + '( |$)', 'gi').test(this.elements[0].className);
}

hasClass(class)

选择器匹配多于一个的元素，那么只会判断第一个选择器是否存在这个class
返回 boolean 值，不可进行连缀操作

使用案例

 $$('#selector').hasClass(className)    // true / false

javascript 实现

  if (el.classList) 
     el.classList.contains(className);
  else 
     new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);

attr( name | Object(key,value) | key, value )

Base.prototype.attr = function () {
    if (arguments.length == 1 && typeof arguments[0] == 'string') {     // 返回字符串
        return this.elements[0].getAttribute(arguments[0]);
    }

    if (arguments.length == 1 && typeof arguments == 'object') {     // 返回 一个对象
        this.elements.forEach(function (item) {
            for (var obj in this[0]) {
                item.setAttribute(obj, this[0][obj]);
            }
        }, arguments);
    }

    if (arguments.length == 2) {    // 返回 一个对象
        this.elements.forEach(function(item) {
            item.setAttribute(this[0], this[1]);
        }, arguments);

    }
    return this;
}

attr( name | Object(key,value) | key, value )

属性	解释	返回值
name	attr(name) 属性名称	返回字符串
Object(key,value)	attr( {'name': 'flyJquery', 'placeholder': 'descript'} ) 名/值对对象	返回设置属性后的对象
key, value	attr('name', 'flyJquery') 两个参数	返回设置属性后的对象

说明:
选择器匹配 多于一个 的元素时
使用 attr( attrName ) 只能获取第一个 属性的名称
使用 attr( Object(key,value) | key, value) ) 可以 ** 设置多个元素** 的属性

JavaScript 实现

el.getAttribute(attrName);    // 获取

el.setAttribute(attrName, attrValue);    // 设置

css( cssName | Object(key,value) | key, value )

Base.prototype.css = function () {
      if (arguments.length == 1 && typeof arguments[0] == 'string') {
        return this.elements[0].getComputedStyle[arguments[0]];             // 返回一个只读属性的字符串
    }

    if (arguments.length == 1 && typeof arguments[0] == 'object') {
        this.elements.forEach(function(item) {
            for(var obj in this[0]) {
                item.style[obj] = this[0][obj];
            }
        }, arguments);
    }

    if (arguments.length == 2) {
        this.elements.forEach(function(item) {
            item.style[this[0]] = this[1];
        }, arguments);
    }
}

css( cssName | Object(key,value) | key, value )

属性	解释	返回值
cssName	css(cssName) 属性名称	返回字符串
Object(key,value)	css( {'color': 'red', 'width': '20px'} ) 名/值对对象	返回设置属性后的对象
key, value	css('color', 'red') 两个参数	返回设置属性后的对象

说明:
选择器匹配 多于一个 的元素时
使用 css( cssName ) 只能获取第一个 属性的名称
使用 css( Object(key,value) | key, value) ) 可以 ** 设置多个元素** 的属性
拓展

获取属性 getComputedStyle 只读属性返回字符 (获取元素最终显示的样式,包括本身，外链，以及父级 + 组级没有被覆盖的属性)，
设置属性 style.xxx， 可读可写，能屈能伸 只能获取元素style 属性中的样式

** javascript 实现**

getComputedStyle(el)[cssName];    // 获取样式属性

el.style.color = 'red'    // 设置样式属性

html( [htmlContent] )

Base.prototype.html = function () {
    if (arguments.length == 0) {
        return this.elements[0].innerHTML;
    }
    else {
        this.elements.forEach(function(item) {
            item.innerHTML = this[0];
        }, arguments);
    }

    return this;
}

html( [htmlContent] )

属性	解释	返回值
html()	获取一个元素的 html 内容	返回字符串
html(htmlContent)	设置选择器中元素的内容	返回设置html后的对象

说明：
选择器匹配 多于一个 的元素时
使用 html( ) 只能获取第一个元素 的html内容
使用 html(htmlContent) 可以 设置多个元素 的 html 内容

javascript 实现

el.innerHTML    // 获取

el.innerHTML = 'htmlContent';    // 设置

text( [textContent] )

Base.prototype.text = function () {
    if (arguments.length == 0) {
        return this.elements[0].textContent;
    }
    else {
        this.elements.forEach(function(item) {
            item.textContent = this[0];
        }, arguments);
    }

    return this;
}

text( [textContent] )

属性	解释	返回值
text()	获取一个元素的 text 内容	返回字符串
text(textContent)	设置选择器中元素的内容	返回设置text后的对象

说明：
选择器匹配 多于一个 的元素时
使用 text( ) 只能获取第一个元素 的text内容
使用 text(textlContent) 可以 设置多个元素 的 text 内容

...... 持续更新中......

网友评论

本文标题：Fly Jquery ( you might not need

本文链接：https://www.haomeiwen.com/subject/cigcmttx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

Fly Jquery ( you might not need

Fly JQuery 使用javascript 生产单个的工具方法，需要使用时只需要简单拼装即可上手应用，每个工具方法后有详细的 JavaScript 实现。

base

addClass(className)

removeClass(className)

hasClass( className )

attr( name | Object(key,value) | key, value )

css( cssName | Object(key,value) | key, value )

html( [htmlContent] )

text( [textContent] )

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读