项目中有一处源码需要用变量存储html标签,包含类名和其他一些属性,再动态地将其渲染到页面上。

看下普通的存储方式:

initHtml: function () {
var me = this;
// var _html = ['<div class="mykb-box" id="mykeyboard' + me.count + '">', '<ul class="num-key clearfix">', '<li class="num">1</li>', '<li class="num">2</li>', '<li class="num">3</li>', '<li class="func exit">退出</li>', '<li class="num">4</li>', '<li class="num">5</li>', '<li class="num">6</li>', '<li class="func del">退格</li>', '<li class="num">7</li>', '<li class="num">8</li>', '<li class="num">9</li>', '<li class="func clearall">清除</li>', '<li class="num">0</li>', '<li class="num">.</li>', '<li class="func sure">确定</li>', '</ul>', '</div>', ].join("");
// $("body").append(_html);
// me.setPosition();
}

也许是用了某个插件对代码进行了压缩,最终的.min.js文件时用这样的方式存储的。

initHtml: function() {
var a = ['\x3cdiv class\x3d"mykb-box" id\x3d"mykeyboard' + this.count + '"\x3e', '\x3cul class\x3d"num-key clearfix"\x3e\x3cli class\x3d"num"\x3e1\x3c/li\x3e\x3cli class\x3d"num"\x3e2\x3c/li\x3e\x3cli class\x3d"num"\x3e3\x3c/li\x3e\x3cli class\x3d"func exit"\x3e\u9000\u51fa\x3c/li\x3e\x3cli class\x3d"num"\x3e4\x3c/li\x3e\x3cli class\x3d"num"\x3e5\x3c/li\x3e\x3cli class\x3d"num"\x3e6\x3c/li\x3e\x3cli class\x3d"func del"\x3e\u9000\u683c\x3c/li\x3e\x3cli class\x3d"num"\x3e7\x3c/li\x3e\x3cli class\x3d"num"\x3e8\x3c/li\x3e\x3cli class\x3d"num"\x3e9\x3c/li\x3e\x3cli class\x3d"func clearall"\x3e\u6e05\u9664\x3c/li\x3e\x3cli class\x3d"num"\x3e0\x3c/li\x3e\x3cli class\x3d"num"\x3eX\x3c/li\x3e\x3cli class\x3d"func sure"\x3e\u786e\u5b9a\x3c/li\x3e\x3c/ul\x3e\x3c/div\x3e'].join("");
b("body").append(a);
this.setPosition()
}

' \x ' 是16进制的转义字符,十六进制中,数字是按'0 1 2 … 9 a b c d e f 11 12 … 19 1a 1b …'排列的,f表示十进制的16,11表示十进制的17。

由此可知 ' 3c ' 中的 3 代表 十位数,值是 3*16, c 是12 ,总60,在ASCII 编码表中,60代表' < ' ,61代表' = ' ,62代表' > ' ,在编码套在a变量

var a = ['<div class="mykb-box" id="mykeyboard"' + this.count + '">'………………

这才想起JS本就不只是能做到数据处理和交互的语言,就离谱

分享一个jquery动态渲染的数字小键盘插件:模拟数字键盘插件 mynumkb.js

- END -

JS012. 变量存储含class、id等其他属性的标签元素(动态渲染DOM结点)的更多相关文章

  1. mysql用变量存储插入的id

    INSERT into a(value) values ('test');#set @last_id = LAST_INSERT_ID();set @last_id = (select max(id) ...

  2. python变量存储

    变量的存储 在高级语言中,变量是对内存及其地址的抽象. 对于python而言,python的一切变量都是对象,变量的存储,采用了引用语义的方式,存储的只是一个变量的值所在的内存地址,而不是这个变量的只 ...

  3. python 基础之变量存储缓存机制与数据驻留小数据池

    一:变量存储的缓存机制 在同一文件(模块)里,变量存储的缓存机制 (仅对python3.x版本负责),那么 --对于Number (int bool float complex) 1.对于整型而言,- ...

  4. 变量存储缓存机制 Number (int bool float complex)

    # ###变量存储的缓存机制(为了节省空间) #Number (int bool float complex) # (1) int -5~正无穷范围内 var1 = 18 var2 = 18 var1 ...

  5. python变量存储和深浅拷贝

    python的变量及其存储 在高级语言中,变量是对内存及其地址的抽象.对于python而言,python的一切变量都是对象,变量的存储,采用了引用语义的方式,存储的只是一个变量的值所在的内存地址,而不 ...

  6. Slickflow.NET 开源工作流引擎高级开发(一) -- 流程外部事件的调用和变量存储实现

    前言:流程实现基本流转功能外,通常也需要调用外部事件,用于和业务系统的交互,同时存储一些流程变量,用于追踪和记录业务数据变化对流程流转的影响. 1. 流程事件 流程执行过程中,伴随各种事件的发生,而且 ...

  7. Java内存分配及变量存储位置实例讲解

    Java内存分配与管理是Java的核心技术之一,之前我们曾介绍过Java的内存管理与内存泄露以及Java垃圾回收方面的知识,今天我们再次深入Java核心,详细介绍一下Java在内存分配方面的知识.一般 ...

  8. C语言基础--变量存储细节

      1.变量为什么要有类型? 每种类型占用的内存空间不一样 int 4, char 1 double 8 2.只要定义变量, 系统就会开辟一块存储空间给我们的变量存储数据, 内存寻址是从大到小 3.越 ...

  9. java+内存分配及变量存储位置的区别[转]

    原文来自:http://blog.csdn.net/rj042/article/details/6871030#comments Java内存分配与管理是Java的核心技术之一,之前我们曾介绍过Jav ...

随机推荐

  1. 来看看是什么原因导致生产服上的系统CPU高的?

    我们可能会遇到生产服务器CPU很高的问题,有时候能确定是哪个进程,但是不知道这个进程都在干什么,所以也无从下手,无法解决问题.只能不断的重启,重启等. 最近也看了[一线码农]的一些教程,觉得都很不错, ...

  2. 聊聊 PC 端自动化最佳方案 - WinAppDriver

    1. 前言 大家好,我是安果! 一提到自动化,可能大家想到的是 App 端的 Appium.Airtest.AutoJS,亦或是 Selenium.Puppeteer.Cypress 等 Web 端的 ...

  3. 通读BadCode

    简介 就是旋哥的BadCode系列,这次好好通读下,然后我在旋哥的注释上又加了一些,函数原型等. 项目地址:https://github.com/Rvn0xsy/BadCode 第一课 主要介绍了下c ...

  4. Python语言系列-05-模块和包

    自定义模块 #!/usr/bin/env python3 # author:Alnk(李成果) # 为什么要有模块?(内置函数不够用) # 和操作系统打交道 # 和python解释器打交道 # 和时间 ...

  5. Element Vue 开箱即用框架如何使用-测试开发【提测平台】阶段小结(二)

    微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 上一篇总结了后端服务接口的开发,这篇我们主要来总结下前后端分离开发中的前端部分,主要是开箱即用的框架介绍和之前章节组件的梳理和部分的扩展内 ...

  6. mysql使用 分区表使用,常用sql

    mysql使用 分区表使用,常用sql 前言 本文的原文连接是: https://blog.csdn.net/freewebsys/article/details/84839478未经博主允许不得转载 ...

  7. Xilinx约束学习笔记(二)—— 定义时钟

    2. 定义时钟 2.1 关于时钟 为了获得最佳精度路径覆盖信息,必须正确定义时钟. 时钟要定义在时钟树的根 pin 或 port 上,称为 source point. 时钟的边缘应该由周期和波形进行组 ...

  8. CMD下编译运行Java程序

    准备1:JDK下好了 准备2:环境变量配置好了 准备3:本次测试用的是JDK8,用JDK10的在Eclipse里面好像用不了 满足上面三个条件,那可以继续看下去了 Test_1:带包编译运行 代码: ...

  9. 利用maven构建一个spring mvc的helloworld实例

    刚开始学习maven和spring mvc,学的云里雾里的 这里提供一个hello world实例,记录自己的学习之路 首先看maven官网的介绍 Apache Maven is a software ...

  10. BootStrap Table超好用的表格组件基础入门

    右侧导航条有目录哟,看着更方便 快速入门 表格构建 API简单介绍 主要研究功能介绍 快速入门 最好的资源官方文档 官方文档地址****https://bootstrap-table.com/docs ...