function isNil(obj:any): boolean {
return typeof obj === "undefined" || obj === null;
}

function fixCls(clsStr: string): string {
if (!clsStr) {
return "";
}

let clsArray = clsStr.split(" ");
clsArray = clsArray.filter((cls) => {
return cls.length > 0;
});
if (clsArray.length === 0) {
return "";
}

clsArray = clsArray.map((cls) => {
if (cls.startsWith("next")) {
return cls;
}
return `SOME_PREFIX_${cls}`;
})

return clsArray.join(" ");
}

const html2EscapeEnums: Record<string, string> = {
'<': '&lt;',
'>': '&gt;',
'&': '&amp;',
'"': '&quot;'
};

function html2Escape(sHtml: string) {
return sHtml.replace(/[<>&"]/g, function (c) {
return html2EscapeEnums[c] || c;
});
}

function appendChild(element: HTMLElement, child: any) {
if (isNil(child)) {
return;
} else if (typeof child === "string") {
const txt = html2Escape(child);
const oTxt = document.createTextNode(txt);
element.appendChild(oTxt);
return;
} else if (child instanceof HTMLElement) {
element.appendChild(child);
return;
} else {
const oTxt = document.createTextNode('' + child);
element.appendChild(oTxt);
}
}

function createElement(tagName: string, clazz: string, children?: any) {
const element = document.createElement(tagName);
element.className = fixCls(clazz);
if (!isNil(children)) {
if (Array.isArray(children)) {
for (let i = 0; i < children.length; i++) {
const child = children[i];
appendChild(element, child);
}
} else {
appendChild(element, children);
}
}
return element;
}

function div(clazz: string, children?: any): HTMLElement {
return createElement('div', clazz, children);
}

function span(clazz: string, children?: any): HTMLElement {
return createElement('span', clazz, children);
}

function img(clazz: string, src: string): HTMLElement {
const img = createElement('img', clazz);
img.setAttribute('src', src);
return img;
}

function ifElse(c: boolean, arr: HTMLElement[]): HTMLElement | null {
const a = isNil(arr[0]) ? null : arr[0];
const b = isNil(arr[1]) ? null : arr[1];
return c ? a : b;
}

export {
span,
div,
img,
ifElse
}

dom-utils的更多相关文章

  1. DOM based XSS Prevention Cheat Sheet(DOM Based XSS防御检查单)

    本文为翻译版本,原文请查看 https://www.owasp.org/index.php/DOM_based_XSS_Prevention_Cheat_Sheet 介绍 谈到XSS攻击,有三种公认的 ...

  2. 框架操作DOM和原生js操作DOM比较

    问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...

  3. dom paser

    dom paser /** * */ package ec.utils; import java.io.BufferedInputStream; import java.io.ByteArrayInp ...

  4. phaser源码解析(三) Phaser.Utils类下isPlainObject方法

    /** * #这是一个对jQuery.isPlainObject(obj)稍加修改的方法. 一个 普通对象 obj.toString() => "[object Object]&quo ...

  5. DOM操作和样式操作库的封装

    一.DOM常用方法和属性复习 以下粗略的罗列一下DOM的常用方法和属性,由于不是介绍DOM的基础内容,所以就不一一详细说明各个方法和属性了(学习DOM的封装的,一般都对基础DOM比较熟悉了). 1.1 ...

  6. 如何实现一个 Virtual DOM 及源码分析

    如何实现一个 Virtual DOM 及源码分析 Virtual DOM算法 web页面有一个对应的DOM树,在传统开发页面时,每次页面需要被更新时,都需要手动操作DOM来进行更新,但是我们知道DOM ...

  7. android解析xml文件方法之一-----DOM

    Hello.xml文件 <dict num="219" id="219" name="219"> <key>hell ...

  8. 你不需要 jQuery,但你需要一个 DOM 库

    写这篇文章的目的,一方面是介绍一下自己编写的模块化 DOM 库 domq.js,另一方面是希望大家对 jQuery 有一个正确的认识,即使 jQuery 已经逐渐退出历史舞台,但是它的 API 将会以 ...

  9. 微信小程序----没有 DOM 对象,一切基于组件化 ---- mpvue

    封装好用的 类库 和 组件,复用且灵活度高 抽取相同的部分放在函数内部(组件内部) 抽取不同的部分放在形参(组件 props 传参,或者插槽) new Promise 运行时 初始化实例对象的状态为 ...

  10. casperjs get开头的几个dom操作使用

    getCurrentUrl() Signature: getCurrentUrl() Retrieves current page URL. Note that the url will be url ...

随机推荐

  1. [COCI2010-2011#6] STEP

    题目大意 维护一个 \(01\) 序列最长的连续相邻两个数不同的子序列的长度 解析 很裸的线段树题... 要维护的信息很多 区间长度 区间最左端点 区间最右端点 区间最长前缀 区间最长后缀 区间最终的 ...

  2. vue学习笔记:Vue生命周期

    概念 一个Vue 实例从开始创建.初始化数据.编译模板.挂载 DOM.渲染→更新→渲染.卸载等一系列过程,这就是 Vue 的生命周期.同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不 ...

  3. html音乐播放器

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. 41.Sentinel

    Feign 整合 Sentinel 依赖 <!--Feign--> <dependency> <groupId>org.springframework.cloud& ...

  5. mybatis:自定义映射关系resultMap

    创建表t_emp 定义实体类 package org.example.entity; public class Emp { private Integer empId; private String ...

  6. MySQL8.0 存储引擎(InnoDB )buffer pool的实现原理

      数据库为了高效读取和存储物理数据,通常都会采用缓存的方式来弥补磁盘IO与CPU运算速度差.InnoDB 作为一个具有高可靠性和高性能的通用存储引擎也不例外,Buffer Pool就是其用来在内存中 ...

  7. 使用python和adb来学习(学习通)

    在某一天赶课比较着急,奈何找不到人可以帮我,于是自己动手写了一个简单的脚本来学习 准备工作: 1.需要一个你不用的手机,打开手机的adb,因为需要用到adb来操作手机 2.进入百度智能云,申请一个 通 ...

  8. 记录一次Python环境安装出现的问题(已安装java)

    之前是在其他电脑上安装python环境,没有问题. 换了一台电脑开始安装(注:已配置java环境) 安装包准备好 ( 这里使用的是python 3.6.5(64位) ,下载地址选择官网) 教程百度都有 ...

  9. Python中的__new__()方法

    1.__new__()至少要有一个参数cls,代表当前类,此参数在实例时由python解释器自动识别, 2.__new__()必须要有返回值,返回实例化出来的实例,这点在自己实现__new__时要特别 ...

  10. DiskGenius磁盘扩容教程

    DiskGenius磁盘扩容教程 知识就是不用就会忘记,笔记就是忘记了可以再次查找知识. 百度一篇教程,链接如下: https://jingyan.baidu.com/article/e4511cf3 ...