zoukankan      html  css  js  c++  java
  • jQuery方法实现

    children

    原生JavaScript中,如果希望找到某个元素的子元素,只能通过Node类型上的children方法一步一步获取。如

    let li = document.querySelector('ul').children[0].
    let anchor = li.children[0]
    ...
    

    这种方法很不好,因为js和html并未解耦,当html结构发生改变时,js也需要发生相应的变化。

    jQuery有一个children方法,可以传入一个参数,此时会返回需要查找到的那个元素。具体用法children用法

    下面是我实现的类children的方法,实现原理是:递归回调children函数,当两个DOM节点相等时,就返回该节点。否则返回null,表示找不到。

    childrens (ele, selector) {
      let [target, child, isChild, isChildList, i] = []
      target = ele instanceof Object ? ele : document.querySelector(ele)
      child = target.querySelector(selector)
      isChildList = target.children
      for (i = 0; i < isChildList.length; i++) {
        isChild = isChildList[i]
        if (isChild === child) {
          return isChild
        }
        if (isChild.children.length >= 1) {
          // 递归回调children函数,递归的原因是某个子节点可能还存在一个或多个子节点。
          isChild = this.childrens(isChild, selector)
          return isChild
        }
      }
      return null
    }
    

    $.extend()实现深浅复制

    function copyObject () {
        let i = 1,
            target = arguments[0] || {},
            deep = false,
            length = arguments.length,
            name, options, src, copy,
            copyIsArray, clone;
    
        // 如果第一个参数的数据类型是Boolean类型
        // target往后取第二个参数
        if (typeof target === 'boolean') {
            deep = target;
            // 使用||运算符,排除隐式强制类型转换为false的数据类型
            // 如'', 0, undefined, null, false等
            // 如果target为以上的值,则设置target = {}
            target = arguments[1] || {};
            i++;
        }
    
        // 如果target不是一个对象或数组或函数
        if (typeof target !== 'object' && !(typeof target === 'function')) {
            target = {};
        }
    
        // 如果arguments.length === 1 或
        // typeof arguments[0] === 'boolean',
        // 且存在arguments[1],则直接返回target对象
        if (i === length) {
            return target;
        }
    
        // 循环每个源对象
        for (; i < length; i++) {
            // 如果传入的源对象是null或undefined
            // 则循环下一个源对象
            if (typeof (options = arguments[i]) != null) {
                // 遍历所有[[emuerable]] === true的源对象
                // 包括Object, Array, String
                // 如果遇到源对象的数据类型为Boolean, Number
                // for in循环会被跳过,不执行for in循环
                for (name in options) {
                    // src用于判断target对象是否存在name属性
                    src = target[name];
                    // copy用于复制
                    copy = options[name];
                    // 判断copy是否是数组
                    copyIsArray = Array.isArray(copy);
                    if (deep && copy && (typeof copy === 'object' || copyIsArray)) {
                        if (copyIsArray) {
                            copyIsArray = false;
                            // 如果目标对象存在name属性且是一个数组
                            // 则使用目标对象的name属性,否则重新创建一个数组,用于复制
                            clone = src && Array.isArray(src) ? src : [];
                        } else {
                            // 如果目标对象存在name属性且是一个对象
                            // 则使用目标对象的name属性,否则重新创建一个对象,用于复制
                            clone = src && typeof src === 'object' ? src : {};
                        }
                        // 深复制,所以递归调用copyObject函数
                        // 返回值为target对象,即clone对象
                        // copy是一个源对象
                        target[name] = copyObject(deep, clone, copy);
                    } else if (copy !== undefined){
                        // 浅复制,直接复制到target对象上
                        target[name] = copy;
                    }
                }
            }
        }
        // 返回目标对象
        return target;
    }
    

    期待噢:)

    持续更新中...

  • 相关阅读:
    C/C++程序员必备的15个编辑器和集成开发环境
    天猫浏览型应用的CDN静态化架构演变
    实用技巧:如何用 CSS 做到完全垂直居中
    JavaScript 字符串操作:substring, substr, slice
    Hybrid App 开发初探:使用 WebView 装载页面
    引领潮流!最顶尖的24个获奖网页作品
    HTML5编程之旅系列一:HTML5 Geolocation 初探
    JavaScript 秘密花园——对象的使用和属性操作
    提高效率!15款最好的 Bug 跟踪应用程序
    最常用的8款 PHP 调试工具,你用过吗?
  • 原文地址:https://www.cnblogs.com/unclekeith/p/7275049.html
Copyright © 2011-2022 走看看