JavaScript 中内置的工具和常用代码片段

1. 数组相关

makeArray

类数组对象转化为真正的 JavaScript 数组

// Native
Array.prototype.slice.call(arrayLike);

// ES6 的新方法
Array.from(arrayLike);

2. DOM 相关

包含

检测 DOM 元素是不是其他 DOM 元素的后代.

// jQuery
$.contains(el, child);

// Native
el !== child && el.contains(child);

解析 parseHTML

解析字符串为 DOM 节点数组.

// jQuery
$.parseHTML(htmlString);

// Native
function 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);

// Native
JSON.parse(str);

3. 其它

extend

合并多个对象的内容到第一个对象。 object.assign 是 ES6 API 。

// Native
Object.assign({}, defaultOpts, opts);

trim

移除字符串头尾空白。

// Native
string.trim();

type

检测对象的 JavaScript [Class] 内部类型。

// Native
function type(item) {
  const reTypeOf = /(?:^\[object\s(.*?)\]$)/;
  return Object.prototype.toString.call(item)
    .replace(reTypeOf, '$1')
     .toLowerCase();
}

now

返回当前时间的数字呈现。

// Native
Date.now();

4. JS 中构建一个 Form

// JavaScript 构建一个 form
function make_form() {
    // 创建一个 form
    const form1 = document.createElement("form");
    form1.id = "form1";
    form1.name = "form1";
    form1.style = "display:none;";
    // form1.style.display = "none";
    form1.method = "POST";
    form1.action = "/servlet/info";

    // 创建一个输入
    const input = document.createElement("input");
    input.type = "text";
    input.name = "value1";
    input.value = "1234567";
    // 将该输入框插入到 form 中
    form1.appendChild(input);

    // 添加 form 到 body，提交，删除 form
    document.body.appendChild(form1);
    form1.submit();
    document.body.removeChild(form1);
}