dom-utils
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> = {
'<': '<',
'>': '>',
'&': '&',
'"': '"'
};
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的更多相关文章
- DOM based XSS Prevention Cheat Sheet(DOM Based XSS防御检查单)
本文为翻译版本,原文请查看 https://www.owasp.org/index.php/DOM_based_XSS_Prevention_Cheat_Sheet 介绍 谈到XSS攻击,有三种公认的 ...
- 框架操作DOM和原生js操作DOM比较
问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...
- dom paser
dom paser /** * */ package ec.utils; import java.io.BufferedInputStream; import java.io.ByteArrayInp ...
- phaser源码解析(三) Phaser.Utils类下isPlainObject方法
/** * #这是一个对jQuery.isPlainObject(obj)稍加修改的方法. 一个 普通对象 obj.toString() => "[object Object]&quo ...
- DOM操作和样式操作库的封装
一.DOM常用方法和属性复习 以下粗略的罗列一下DOM的常用方法和属性,由于不是介绍DOM的基础内容,所以就不一一详细说明各个方法和属性了(学习DOM的封装的,一般都对基础DOM比较熟悉了). 1.1 ...
- 如何实现一个 Virtual DOM 及源码分析
如何实现一个 Virtual DOM 及源码分析 Virtual DOM算法 web页面有一个对应的DOM树,在传统开发页面时,每次页面需要被更新时,都需要手动操作DOM来进行更新,但是我们知道DOM ...
- android解析xml文件方法之一-----DOM
Hello.xml文件 <dict num="219" id="219" name="219"> <key>hell ...
- 你不需要 jQuery,但你需要一个 DOM 库
写这篇文章的目的,一方面是介绍一下自己编写的模块化 DOM 库 domq.js,另一方面是希望大家对 jQuery 有一个正确的认识,即使 jQuery 已经逐渐退出历史舞台,但是它的 API 将会以 ...
- 微信小程序----没有 DOM 对象,一切基于组件化 ---- mpvue
封装好用的 类库 和 组件,复用且灵活度高 抽取相同的部分放在函数内部(组件内部) 抽取不同的部分放在形参(组件 props 传参,或者插槽) new Promise 运行时 初始化实例对象的状态为 ...
- casperjs get开头的几个dom操作使用
getCurrentUrl() Signature: getCurrentUrl() Retrieves current page URL. Note that the url will be url ...
随机推荐
- Python:Excel自动化实践入门篇 甲【留言点赞领图书门票】
*以下内容为本人的学习笔记,如需要转载,请声明原文链接微信公众号「englyf」https://mp.weixin.qq.com/s?__biz=MzUxMTgxMzExNQ==&mid=22 ...
- 英国学者在真实世界早期RA队列研究中发现较高比例的临床缓解患者仍存在能量多普勒超声活性
标签: 类风湿关节炎; 目标治疗策略; 能量多普勒活性; 预测因子 英国学者在真实世界早期RA队列研究中发现较高比例的临床缓解患者仍存在能量多普勒超声活性 电邮发布日期:2016年4月6日 本研究的重 ...
- el-input只能输入数字和小数
1.oninput ="value=value.replace(/[^\d]/g,'')" //只能输入数字 2.oninput ="value=value.replac ...
- 通过反射机制简化 JDBC ResultSet 实体类的注入
提出问题 查询完某个表之后,一般都是把结果的每一个字段注入到一个实体类中.比如,数据库 users 表,查询出来的结果注入到 User 实体类中. 通过 while 遍历 ResultSet,把字段对 ...
- PostGIS之空间投影
1. 概述 PostGIS 是PostgreSQL数据库一个空间数据库扩展,它添加了对地理对象的支持,允许在 SQL 中运行空间查询 PostGIS官网:About PostGIS | PostGIS ...
- WebGPU 01之Hello Triangle
1. 引言 WebGPU是什么? WebGPU 到底是什么? - Orillusion的回答 - 知乎 WebGPU与WebGL的对比? WebGL 与 WebGPU 比对 前奏 - 四季留歌 - 博 ...
- Docker 安装mysql8
1.获取镜像 docker pull mysql:8 2.创建数据卷 必须创建数据卷,不然容器挂了数据就丢了 docker volume create mysql-data #创建docker vol ...
- Landsat数据在USGS中无法下载Surface Reflectance产品的解决方法
本文介绍在USGS官网下载Landsat遥感影像数据时,出现报错信息,无法下载地表反射率产品(Surface Reflectance)的解决办法. 最近,利用这篇文章批量下载Landsat遥感 ...
- Kubernetes 网络模型基础指南
Kubernetes 是为运行分布式集群而建立的,分布式系统的本质使得网络成为 Kubernetes 的核心和必要组成部分,了解 Kubernetes 网络模型可以使你能够正确运行.监控和排查应用程序 ...
- Windows 隐藏 远程桌面(连接栏)
当我们在使用远程桌面控制的时候,远程桌面工具栏遮挡视线很烦人.这时候就很有必要隐藏了! 1.全屏时显示连接栏 勾选去掉 这样子远程桌面上方的连接栏就消失了. 那么我们怎么打开呢?所以就要写下来记住了. ...