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 ...
随机推荐
- CF335F Buy One, Get One Free
\(\text{Solution}\) 其实不想写(因为不好写... 所以贴贴 \(\text{Solution}\) 然而就关于这题而言讲得也不太清楚 可撤销贪心就是维护当前状态的最优解,同时考虑以 ...
- [SWPUCTF 2021 新生赛]jicao
CTF web安全 阅读代码可知当传入一个post型的参数id与wllmNB相等并且传入一个get型的参数json: 但是这里有一个函数json_decode,上网搜索可知json_decode这个函 ...
- DrCush_082020_血清阴性RA确诊延迟
转自Dr Jack Cush的Twitter (2020-08-20) 梅奥诊所:血清阴性RA的诊断存在延迟-血清阴性的首次关节肿胀距RA确诊为187天,而血清阳性者则为11天(P <.001) ...
- Tensorflow 1.X 在windows上的安装
参考:https://blog.csdn.net/weixin_42326479/article/details/105539110 pip install -i https://pypi.douba ...
- ASP和jq实现url传递参数乱码的escape编码和unescape解码
<% Function vbsEscape(str) dim i,s,c,a s="" For i=1 to Len(str) c=Mid(s ...
- 【2】java之object类
一.Object 类的基本定义 Object 类是所有类的父类,最大的一个好处就是:利用 Object 类可以接收所有类的对象(向上自动转型).如果不确定参数类型,使用 Object 类型是最好的 ...
- CF1137F Matches Are Not a Child's Play 题解
以最后被删去的点为根,这样子不会存在从父亲然后删掉某个点,儿子的删除顺序一定比父亲前. 记每个点子树中的最大值为 \(f_x\),那么一个点的排名,首先就需要加上 \(<f_x\) 的所有值,记 ...
- null和undefine的区别
null和undefine都是基本数据类型,两种类型都只有一个值. 区别: 1.undefined表示已经声明未定义,null表示的是一个空对象(null并不是空对象,js的typeof会将null判 ...
- 第一天 python环境变量安装(2.7)
一.什么是python Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言. Python 的设计简单,易学,免费,开源,面向对象,可拓展性 Python 是一种解释型语言: ...
- NSIS 制作漂亮的安装界面(仿QQ音乐,网易云音乐)
废话少说,先上图: 注:下面的录制的安装过程使用的安装包,均为制作的安装包,而非官方源包. QQ音乐的安装过程: