如何在vanilla js中使用$ .extend?

时间:2016-08-04 20:57:49

标签: javascript jquery

我一直在使用jQuery,所以在Vanilla JS进行编码时,我有点想知道我们如何使用类似于$的东西。延伸到香草JS。

1 个答案:

答案 0 :(得分:4)

基本上有这三种方法 -

  1. 最简单的方法是使用Object.assign()函数
  2. 语法 - Object.assign(target,... sources)

    所以你可以用以下方式编码 -

    var obj = { a: 1,c:4 }, obj2 = {a:2,b:3};
    var copy = Object.assign(obj, obj2);
    console.log(copy); // { a: 1 }
    

    即使深度克隆也可以参考Mozilla Doc.

    1. 否则,如果要在代码中使用extend。一种描述扩展如下 - 摘自这篇文章Vanilla JavaScript version of jQuery.extend()

      /* Pass in the objects to merge as arguments.
         For a deep extend, set the first argument to `true`.*/
      
      
      var extend = function () {
      
      // Variables
      var extended = {};
      var deep = false;
      var i = 0;
      var length = arguments.length;
      
      // Check if a deep merge
      if ( Object.prototype.toString.call( arguments[0] ) === '[object Boolean]' ) {
          deep = arguments[0];
          i++;
      }
      
      // Merge the object into the extended object
      var merge = function (obj) {
          for ( var prop in obj ) {
              if ( Object.prototype.hasOwnProperty.call( obj, prop ) ) {
                  // If deep merge and property is an object, merge properties
                  if ( deep && Object.prototype.toString.call(obj[prop]) === '[object Object]' ) {
                      extended[prop] = extend( true, extended[prop], obj[prop] );
                  } else {
                      extended[prop] = obj[prop];
                  }
              }
          }
      };
      
      // Loop through each object and conduct a merge
      for ( ; i < length; i++ ) {
          var obj = arguments[i];
          merge(obj);
       }
             return extended;
      };
      
    2. 在代码中使用此定义,extend()函数可用于扩展对象,如下所述 -

      var newObjectShallow = extend(object1, object2, object3);
      
      1. 如果对象很简单(不需要深度克隆),可以使用以下方法 - 更多细节提到here

        var extend = function ( defaults, options ) {
        var extended = {};
        var prop;
        for (prop in defaults) {
            if (Object.prototype.hasOwnProperty.call(defaults, prop)) {
                extended[prop] = defaults[prop];
            }
        }
        for (prop in options) {
            if (Object.prototype.hasOwnProperty.call(options, prop)) {
                extended[prop] = options[prop];
            }
        }
        return extended;
        };
        
      2. 希望这有助于任何人在本地js中搜索$ .extend实现