大部分实用工具都能在 native API 中找到. 其他高级功能可以选用专注于该领域的稳定性和性能都更好的库来代替,推荐 lodash。
- 6.1 基本工具
isArray 检测参数是不是数组。 // jQuery$.isArray(range);// NativeArray.isArray(range);
isWindow 检测参数是不是 window。 // jQuery$.isWindow(obj);// Nativefunction isWindow(obj) { return obj !== null && obj !== undefined && obj === obj.window;}
inArray 在数组中搜索指定值并返回索引 (找不到则返回 -1)。 // jQuery$.inArray(item, array);// Nativearray.indexOf(item) > -1;// ES6-wayarray.includes(item);
isNumeric 检测传入的参数是不是数字。Use typeof to decide the type or the type example for better accuracy. // jQuery$.isNumeric(item);// Nativefunction isNumeric(n) { return !isNaN(parseFloat(n)) && isFinite(n);}
isFunction 检测传入的参数是不是 JavaScript 函数对象。 // jQuery$.isFunction(item);// Nativefunction isFunction(item) { if (typeof item === ‘function’) { return true; } var type = Object.prototype.toString(item); return type === ‘[object Function]’ || type === ‘[object GeneratorFunction]’;}
isEmptyObject 检测对象是否为空 (包括不可枚举属性). // jQuery$.isEmptyObject(obj);// Nativefunction isEmptyObject(obj) { return Object.keys(obj).length === 0;}
isPlainObject 检测是不是扁平对象 (使用 “{}” 或 “new Object” 创建). // jQuery$.isPlainObject(obj);// Nativefunction isPlainObject(obj) { if (typeof (obj) !== ‘object’ || obj.nodeType || obj !== null && obj !== undefined && obj === obj.window) { return false; } if (obj.constructor && !Object.prototype.hasOwnProperty.call(obj.constructor.prototype, ‘isPrototypeOf’)) { return false; } return true;}
extend 合并多个对象的内容到第一个对象。object.assign 是 ES6 API,也可以使用 polyfill。 // jQuery$.extend({}, defaultOpts, opts);// NativeObject.assign({}, defaultOpts, opts);
trim 移除字符串头尾空白。 // jQuery$.trim(string);// Nativestring.trim();
map 将数组或对象转化为包含新内容的数组。 // jQuery$.map(array, (value, index) => {});// Nativearray.map((value, index) => {});
each 轮询函数,可用于平滑的轮询对象和数组。 // jQuery$.each(array, (index, value) => {});// Nativearray.forEach((value, index) => {});
grep 找到数组中符合过滤函数的元素。 // jQuery$.grep(array, (value, index) => {});// Nativearray.filter((value, index) => {});
type 检测对象的 JavaScript [Class] 内部类型。 // jQuery$.type(obj);// Nativefunction type(item) { const reTypeOf = /(?:^[object\s(.*?)]$)/; return Object.prototype.toString.call(item) .replace(reTypeOf, ‘$1’) .toLowerCase();}
merge 合并第二个数组内容到第一个数组。 // jQuery$.merge(array1, array2);// Native// 使用 concat,不能去除重复值function merge(…args) { return [].concat(…args)}// ES6,同样不能去除重复值array1 = […array1, …array2]// 使用 Set,可以去除重复值function merge(…args) { return Array.from(new Set([].concat(…args)))}
now 返回当前时间的数字呈现。 // jQuery$.now();// NativeDate.now();
proxy 传入函数并返回一个新函数,该函数绑定指定上下文。 // jQuery$.proxy(fn, context);// Nativefn.bind(context);
makeArray 类数组对象转化为真正的 JavaScript 数组。 // jQuery$.makeArray(arrayLike);// NativeArray.prototype.slice.call(arrayLike);// ES6-wayArray.from(arrayLike);
- 6.2 包含 检测 DOM 元素是不是其他 DOM 元素的后代. // jQuery$.contains(el, child);// Nativeel !== child && el.contains(child);
- 6.3 Globaleval 全局执行 JavaScript 代码。 // jQuery$.globaleval(code);// Nativefunction Globaleval(code) { const script = document.createElement(‘script’); script.text = code; document.head.appendChild(script).parentNode.removeChild(script);}// Use eval, but context of eval is current, context of $.Globaleval is global.eval(code);
- 6.4 解析
parseHTML 解析字符串为 DOM 节点数组. // jQuery$.parseHTML(htmlString);// Nativefunction parseHTML(string) { const context = document.implementation.createHTMLDocument(); // Set the base href for the created document so any parsed elements with URLs // are based on the document’s URL const base = context.createElement(‘base’); base.href = document.location.href; context.head.appendChild(base); context.body.innerHTML = string; return context.body.children;}
parseJSON 传入格式正确的 JSON 字符串并返回 JavaScript 值. // jQuery$.parseJSON(str);// NativeJSON.parse(str);
