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. 有趣的python库-pillow

    pillow-图像处理 安装时不再是PIL,是pillow哦! 烟花 pillow + tkinter实现 import tkinter as tk from PIL import Image, Im ...

  2. .net 下SSE使用demo

    所谓SSE,就是浏览器向服务器发送一个HTTP请求,然后服务器不断单向地向浏览器推送"信息"(message).这种信息在格式上很简单,就是"信息"加上前缀&q ...

  3. GeoServer在Linux上源码安装、启动、发布地图服务

    1. 环境准备 笔者此次使用的Linux系统是CentOS 8 ,没错,目前已经停止维护,但就操作而言,和其他Linux发行版大同小异 目前的GeoServer版本是2.21 1.1 Git环境 yu ...

  4. Python Socket 基础多用户编程

    简介   写下这篇小记的原因是想记录一下自己学习Python Socket编程的心路历程.之前在中专的时间学过一些基础的Socket编程,知道了一些比较基础的内容比如基础的socket.bind()类 ...

  5. go并发实战(读书笔记1)

    go并发实战,第一天 大部分本书第一章节是来介绍go语言基础的,其实如果你不是大师,只是一个才起飞的菜鸟,建议不要跳过喔! 为什么不要跳过?因为每个人对语言的认知是不一样的,看看别人是怎么理解一个新事 ...

  6. LeetCode-23 合并K个升序链表

    来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/merge-k-sorted-lists 题目描述 给你一个链表数组,每个链表都已经按升序排列. ...

  7. Linux操作命令(九)1.comm命令 2.diff命令 3.patch命令

    1.comm 命令 比较文本文件的内容 comm 命令将逐行比较已经排序的两个文件.显示结果包括 3 列:第 1 列为只在第一个文件中找到的行,第 2 列为只在第二个文件中找到的行,第 3 列为两个文 ...

  8. js类型以及存储方式

    一.js内置类型 基础类型:String, number, null, undefine, boolean, symbol, bigint 引用类型:Object(包含普通对象Object,数组对象A ...

  9. 不用PyScript,网页端运行的Python编辑器

    原文:https://lwebapp.com/zh/python-online 需求 有小伙伴可能听说过 PyScript,知道了Python可以通过打包成wasm运行在浏览器端了,这样做一些需要Py ...

  10. Spring随意总结

    Spring框架的优点 1.使用Spring的IOC容器,将对象之间的依赖关系交给Spring,降低组件之间的耦合性,让我们更专注于应用逻辑 2.可以提供众多服务,事务管理,WS等. 3.AOP的很好 ...