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. 三天吃透Java虚拟机面试八股文

    本文已经收录到Github仓库,该仓库包含计算机基础.Java基础.多线程.JVM.数据库.Redis.Spring.Mybatis.SpringMVC.SpringBoot.分布式.微服务.设计模式 ...

  2. 【译】.NET 7 中的性能改进(六)

    原文 | Stephen Toub 翻译 | 郑子铭 矢量化 (Vectorization) SIMD,即单指令多数据 (Single Instruction Multiple Data),是一种处理 ...

  3. JSTL 报错 TagLibraryValidator

    今天想要在 JSP 页面上用 JSTL 简化操作,发现导入 jstl.standard 包报错了.我是按照菜鸟上的教程来的.我的 Tomcat 版本是 10.0,之后发现 10.0 版本的 Tomca ...

  4. PostgreSQL维护年龄的处理

    1.错误信息 WARNING: database "postgres" must be vacuumed within 3330803 transactions 最常见的方法是通过 ...

  5. C#/VB.NET 如何在 Word 文档中添加页眉和页脚

    页眉位于文档中每个页面的顶部区域,常用于显示文档的附加信息,可以插入时间.图形.公司微标.文档标题.文件名或作者姓名等:页脚位于文档中每个页面的底部的区域,常用于显示文档的附加信息,可以在页脚中插入文 ...

  6. mfc拷贝到我的电脑出现的问题

    拿到工程解压打开,霍,挺好 往下面翻了翻看到了这个 再怎么错误,怎么会没有string呢?看了看头文件,包含的有,所以 我去找了一下string.h的位置 项目->属性->VC++目录-& ...

  7. pdf中添加二维码无法扫描解决方案

    正常行驶的bitmap类型的二维码格式,加载到PDF中,将会导致二维码失真,无法扫描. 矢量图可根据尺寸大小进行调节,不会出现失真模糊情况 所用依赖 <PackageReference Incl ...

  8. 用到的jar包作用随笔,吼吼

    名称 版本 说明 spring spring.jar(2.5) spring基础包                   公司基础包 isskill-pro0.7.1.2.jar(0.7.1.2) 包含 ...

  9. vue element 日期范围选择器限制:只能选今天之前的时间 || 只能选今天之后的时间 || 选取今天往后三天内

    举例:只能选今天或者今天之后的时间(如下图) <el-date-picker clearable v-model="form.limitTime" type="da ...

  10. Spring的AOP源码解析(二)

    Spring AOP 源码解析 目录 Spring AOP 源码解析 前言 本文使用的调试代码 IOC 容器管理 AOP 实例 ProxyFactory 详解 基于注解的 Spring AOP 源码分 ...