工具

htmldomapi.ts

这个文件,主要是提供一些操作 DOM 的工具方法,这些都比较简单,就稍微说下就好了

// 创建元素
function createElement(tagName: any): HTMLElement {
  return document.createElement(tagName);
}

// 创建具有命名空间的元素
function createElementNS(namespaceURI: string, qualifiedName: string): Element {
  return document.createElementNS(namespaceURI, qualifiedName);
}

// 创建文本节点
function createTextNode(text: string): Text {
  return document.createTextNode(text);
}

// 创建注释元素
function createComment(text: string): Comment {
  return document.createComment(text);
}

// 插入节点到新的节点前面
function insertBefore(parentNode: Node, newNode: Node, referenceNode: Node | null): void {
  parentNode.insertBefore(newNode, referenceNode);
}

// 删除子节点
function removeChild(node: Node, child: Node): void {
  node.removeChild(child);
}

// 追加子节点
function appendChild(node: Node, child: Node): void {
  node.appendChild(child);
}

// 获取父级节点
function parentNode(node: Node): Node | null {
  return node.parentNode;
}

//获取相邻节点
function nextSibling(node: Node): Node | null {
  return node.nextSibling;
}

// 获取标签名字
function tagName(elm: Element): string {
  return elm.tagName;
}

// 设置文本内容
function setTextContent(node: Node, text: string | null): void {
  node.textContent = text;
}

// 获取文本内容
function getTextContent(node: Node): string | null {
  return node.textContent;
}

// 是否是元素类型
function isElement(node: Node): node is Element {
  return node.nodeType === 1;
}

// 是否是文本类型
function isText(node: Node): node is Text {
  return node.nodeType === 3;
}

// 是否是注释内容
function isComment(node: Node): node is Comment {
  return node.nodeType === 8;
}

export const htmlDomApi = {
  createElement,
  createElementNS,
  createTextNode,
  createComment,
  insertBefore,
  removeChild,
  appendChild,
  parentNode,
  nextSibling,
  tagName,
  setTextContent,
  getTextContent,
  isElement,
  isText,
  isComment,
} as DOMAPI;

export default htmlDomApi;

is.ts

这里主要包含两个判断类型的方法

// 判断是否是数组
export const array = Array.isArray;

// 是否是基本类型
export function primitive(s: any): s is (string | number) {
  return typeof s === 'string' || typeof s === 'number';
}

这里使用的时候, 先 import 进来, 然后 is.array(xxx) 这样子使用,语义较为清晰

上次更新: 12/25/2018, 8:51:44 PM