• javascript(html)

js中的不同的数据类型之间的比较转换规则如下： 1. 对象和布尔值比较 对象和布尔值进行比较时，对象先转换为字符串，然后再转换为数字，布尔值直接转换为数字 [] == true; //false []转换为字符串’’,然后转换为数字0,true转换为数字1，所以为false 2. 对象和字符串比较 对象和字符串进行比较时，对象转换为字符串，然后两者进行比较。 [1,2,3] == ‘1,2,3’ // true [1,2,3]转化为’1,2,3’，然后和’1,2,3’， so结果为true; 3. 对象和数字比较 对象和数字进行比较时，对象先转换为字符串，然后转换为数字，再和数字进行比较。 [1] == 1; // true 对象先转换为字符串再转换为数字，二者再比较 [1] => ‘1’ => 1 所以结果为true 4. 字符串和数字比较 字符串和数字进行比较时，字符串转换成数字，二者再比较。 ‘1’ == 1 // true 5. 字符串和布尔值比较 字符串和布尔值进行比较时，二者全部转换成数值再比较。 ‘1’ == true; // true 6. 布尔值和数字比较 布尔值和数字进行比较时，布尔转换为数字，二者比较。 true == 1 // true 许多刚接触js的童鞋看到这么多的转换规则就懵圈了，其实规律很简单，大家可以记下边这…

1、第几个元素 li:nth-child(1) { background: #ff0000; border-bottom: 1px; } li:nth-child(2) { background: #ff0000; border-bottom: 1px; } 2、奇数、偶数 li:nth-child(odd) { background:#ff0000; } li:nth-child(even) { background:#0000ff; } 3、倍数 li:nth-child(2n) { background: #ff0000; border-bottom: 1px; } 4、公式：隔选择子元素，选择1,4,7,10 li:nth-child(3n+1) { background: #ff0000; border-bottom: 1px; } 5、正方向范围，选中从第6个开始的子元素 li:nth-child(n+6) { background: #ff0000; border-bottom: 1px; } 6、负方向范围，选中从第1个到第9个子元素。使用 :nth-child(-n+9) ，就相当让你选中第9个和其之前的所有子元素 li:nth-child(-n+9) { background: #ff0000; border-bottom…

npm install –global shuji shuji file.js.map -o folder 链接：https://www.npmjs.com/package/shuji

指定语言；不然可能引起一些不必要的bug。 # 记得指定为对应的语言； moment.locale(‘zh-cn’); 获取时间戳 # 精确到毫秒 moment().valueOf() ## 1584182611042 ；返回值为数值类型 moment().format(‘x’) ## 返回值为字符串类型 # 精确到秒 moment().unix() ## 1584182618 精确到秒 返回值为数值类型 moment().format(‘X’) ## 返回值为字符串类型 生成指定时间的moment moment("1995-12-25"); # 带格式 # 解析器会忽略非字母和数字的字符，因此以下两个都将会返回相同的东西。 moment("12-25-1995", "MM-DD-YYYY"); moment("12/25/1995", "MM-DD-YYYY"); 获取对象 moment().toObject(); # 返回一个包括：年、月、日、时、分、秒、毫秒的对象 # { years: 2020 months: 2 date: 14 hours: 18 minutes: 47 seconds: 56 milliseconds: 526 }…

可能有信息敏感的同学已经了解到：Lodash 库爆出严重安全漏洞，波及 400万+ 项目。这个漏洞使得 lodash “连夜”发版以解决潜在问题，并强烈建议开发者升级版本。 我们在忙着“看热闹”或者“”升级版本”的同时，静下心来想：真的有理解这个漏洞产生的原因，明白漏洞修复背后的原理了吗？ 这篇短文将从原理层面分析这一事件，相信“小白”读者会有所收获。 漏洞原因 其实漏洞很简单，举一个例子：lodash 中 defaultsDeep 方法， _.defaultsDeep({ ‘a’: { ‘b’: 2 } }, { ‘a’: { ‘b’: 1, ‘c’: 3 } }) 输出： { ‘a’: { ‘b’: 2, ‘c’: 3 } } 如上例，该方法： 分配来源对象（该方法的第二个参数）的可枚举属性到目标对象（该方法的第一个参数）所有解析为 undefined 的属性上 这样的操作存在的隐患： const payload = ‘{"constructor": {"prototype": {"toString": true}}}’ _.defaultsDeep({}, JSON.parse(payload)) 如此一来，就触发了原型污染。原型污染是指： 攻击者通过某种手段修改 JavaSc…

主要介绍微信开发者工具如何编译小程序代码，如何实现小程序模拟器以及如何调试小程序。 1 简介 虽然在开发语言层面小程序与传统的网页差别不大：是使用JavaScript 脚本语言编写逻辑代码、使用类似于HTML的WXML来描述页面的结构、使用类似于CSS的WXSS来描述节点的样式，但是由于小程序渲染和逻辑分离的运行机制与传统的网页存在差异，所以无法使用传统的网页的开发调试工具，因此我们使用小程序开发生态一站式IDE——微信开发者工具。开发者可以借助微信开发者工具完成小程序的代码开发、编译运行、界面和逻辑调试、真机预览和提交发布版本等功能。 微信开发者工具 微信开发者工具是一个基于nw.js ，使用node.js、chromium以及系统API来实现底层模块，使用React、Redux等前端技术框架来搭建用户交互层，实现同一套代码跨Mac和Windows 平台使用。 微信开发者工具底层框架 2 代码编译 微信开发者工具和微信客户端都无法直接运行小程序的源码，因此我们需要对小程序的源码进行编译。代码编译过程包括本地预处理、本地编译和服务器编译。为了快速预览，微信开发者工具模拟器运行的代码只经过本地预处理、本地编译，没有服务器编译过程，而微信客户端运行的代码是额外经过服务器编译的。 1 编译WXML WXML（WeiXin Markup Langua…

目录 1、什么是幂等性 2、什么是接口幂等性 3、为什么需要实现幂等性 4、常见场景 5、常见方案 5.1、数据库唯一主键 5.2、数据库乐观锁 5.3、防重 Token 令牌 5.4、分布式锁 6、实战 6.1、思路分析 6.2、核心代码 1、依赖 2、Redis工具类 3、自定义注解CheckIdempotent 4、token创建和检验 5、拦截器的配置 6、启动类 7、yml配置文件 8、Controller编写 9测试 7、总结 8、常见问题 8.1、Redis查看出现乱码 8.2、Jmeter观察结果树 1、什么是幂等性 幂等是一个数学与计算机学概念，在数学中某一元运算为幂等时，其作用在任一元素两次后会和其作用一次的结果相同 在计算机中编程中，一个幂等操作的特点是其任意多次执行所产生的影响均与一次执行的影响相同 幂等函数或幂等方法是指可以使用相同参数重复执行，并能获得相同结果的函数。这些函数不会影响系统状态，也不用担心重复执行会对系统造成改变 2、什么是接口幂等性 在HTTP/1.1中，对幂等性进行了定义。它描述了一次和多次请求某一个资源对于资源本身应该具有同样的结果（网络超时等问题除外），即第一次请求的时候对资源产生了副作用，但是以后的多次请求都不会再对资源产生副作用。 这里的副作用是不会对结果产生破坏或者产生不可预料的结果。 …

1.地址 https://httpbin.org/ 2.接口列表 Endpoint Descirption / This page. /ip Returns Origin IP. /user-agent Returns user-agent. /headers Returns header dict. /get Returns GET data. /post Returns POST data. /patch Returns PATCH data. /put Returns PUT data. /delete Returns DELETE data /gzip Returns gzip-encoded data. /deflate Returns deflate-encoded data. /status/:code Returns given HTTP Status code. /response-headers Returns given response headers. /redirect/:n 302 Redirects n times. /redirect-to?url=foo 302 Redirects to the foo URL. /relative-redirect/:n 302 Relative redirects n …

一、什么是心跳检测 判断对方（设备，进程或其它网元）是否正常动行，一般采用定时发送简单的通讯包，如果在指定时间段内未收到对方响应，则判断对方已经当掉。用于检测TCP的异常断开。 基本原因是服务器端不能有效的判断客户端是否在线也就是说，服务器无法区分客户端是长时间在空闲，还是已经掉线的情况。所谓的心跳包就是客户端定时发送简单的信息给服务器端告诉它我还在而已。 代码就是每隔几分钟发送一个固定信息给服务端，服务端收到后回复一个固定信息。如果服务端几分钟内没有收到客户端信息则视客户端断开。比如有些通信软件长时间不使用，要想知道它的状态是在线还是离线就需要心跳包，定时发包收包。 发包方可以是客户也可以是服务端，看哪边实现方便合理。一般是客户端。服务器也可以定时轮询发心跳下去。 一般来说，出于效率的考虑，是由客户端主动向服务器端发包，而不是相反。 二、业务处理 客户端发送心跳包到服务器端，服务器会返回信息，双方可根据心跳包判断当前连接是否有效。服务器端检测心跳包超时则会断开连接，在socket已连接列表中移除该socket。

1.Request Payload结构 格式：{"username":"abc","password":"123456"} Content-Type: application/json;charset=UTF-8 2.Form Data结构 格式"username=abc&password=123456"， Content-Type: application/x-www-form-urlencoded 3.总结 Request Headers部分的Content-Type会根据提交的参数格式自动匹配， Content-Type可以手动设置，但是并不会改变提交的内容本身

1.问题描述 通过addEventListener添加事件，代码多次触发后会导致重复的click事件累加 2.问题原因 addEventListener对同一个事件是可以多次添加的，多次调用就会重复添加 3.解决方案一，每次添加后通过removeEventListener将其注销 var btn = document.getElementById(‘btn’); // 添加事件绑定 btn.addEventListener(‘click’, btnClick, false); // 按钮点击方法 function btnClick() { console.log(‘hello’); // 删除事件绑定 btn.removeEventListener(‘click’, btnClick, false); } 4.解决方案二，通过onclick的方式添加，这样的事件只会添加一次

1.作用 元素内通过字符串添加节点 2.jquery中使用 $ele.append(‘<div id="two">two</div>’); 3.原生api var d1 = document.getElementById(‘one’); d1.insertAdjacentHTML(‘afterend’, ‘<div id="two">two</div>’); 第一个参数为插入的位置 <!– beforebegin –> <p> <!– afterbegin –> foo <!– beforeend –> </p> <!– afterend –> 4.其它方法appendChild 参数必须为node类型，通过createElement创建，遇到多层嵌套，较为繁琐 5.另一种方法innerHTML拼接 先获取本来的innerHTML和新追加的部分拼接到一起，再重新赋值给innerHTML 6.如何把字符串模板转为node节点 var str='<div><span>aaa</span></div>’; let tempNod…

1.问题描述 在不同的DOM元素之间通过拖拽实现内容交换，此时对正在交互中的元素用一个active类做标记，drag离开后取消active,需求本身很简单，但是实现过程中发现每次从对象元素进入子元素中也会触发dragleave。 dragenter,dragleave的触发类似于mouseover,mouseout而满足当前需求的mouseenter,mouseleave在drap中并没有 2.解决方案，在所操纵dom元素的子元素上添加元素穿透 .dom *{pointer-events: none;} 缺点：导致所有子元素上的事件失效 3.鼠标最终跑出父元素的上一个事件是dragenter,而目标恰好就是父元素自身 var lastenter = null; item.addEventListener(‘dragenter’,function(e){ lastenter = e.target; this.classList.add(‘active’); }); item.addEventListener(‘dragleave’,function(e){ if(lastenter==this){ this.classList.remove(‘active’); } }); 4.相关知识 drag事件 被我们拖的元素（按住鼠标） ondrags…

1.https://mp.weixin.qq.com/s/EYzaQXpOTBtFUJDLfvpu4Q 2.https://ts.xcatliu.com/

1.介绍 GitBook 是一个基于 Node.js 的命令行工具，支持 Markdown 和 AsciiDoc 两种语法格式，可以输出 HTML、PDF、eBook 等格式的电子书。 2.安装及初始化 npm install -g gitbook-cli //全局安装gitbook命令 gitbook init //初始化，会生成README.md和SUMMARY.md两个文件 README.md —— 书籍的介绍写在这个文件里 SUMMARY.md —— 书籍的目录结构在这里配置 3.生成文件目录 编辑SUMMARY.md # 目录 * [前言](README.md) * [第一章](Chapter1/README.md) * [第1节：衣](Chapter1/衣.md) * [第2节：食](Chapter1/食.md) * [第3节：住](Chapter1/住.md) * [第4节：行](Chapter1/行.md) * [第二章](Chapter2/README.md) * [第三章](Chapter3/README.md) * [第四章](Chapter4/README.md) 执行命令gitbook init。 GitBook 会查找 SUMMARY.md 文件中描述的目录和文件，如果没有则会将其创建。 4.预览 gitbook …

setTimeout(function(){console.log(1)},0); new Promise(function(resolve){ console.log(2) for( var i=0 ; i<10000 ; i++ ){ i==9999 && resolve() } console.log(3) }).then(function(){ console.log(4) }); console.log(5); // 答案是 2 3 5 4 1 // 而不是 2 3 5 1 4 event loop 的概念 Javascript是单线程的，所有的同步任务都会在主线程中执行。 当主线程中的任务，都执行完之后，系统会 “依次” 读取任务队列里的事件。与之相对应的异步任务进入主线程，开始执行。 异步任务之间，会存在差异，所以它们执行的优先级也会有区别。大致分为 微任务（micro task，如：Promise、MutaionObserver等）和宏任务（macro task，如：setTimeout、setInterval、I/O等）。 Promise 执行器中的代码会被同步调用，但是回调是基于微任务的。 宏任务的优先级高于微任务 每一个宏任务执行完毕都必须将当前的微任务队列清空 第一个 script 标签的代码是第…

1. Doctype 　　目前，兼容性最好的Doctype是XHTML 1.0 Strict，事实上Gmail和Hotmail会删掉你的Doctype，换上这个Doctype。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> 　<head> 　　<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 　　<title>HTML Email编写指南</title> 　　<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 　</head> </html&gt…

1. function sleep(duration) { return new Promise(function(resolve, reject) { console.log("b"); setTimeout(resolve,duration); }) } console.log("a"); var s = sleep(2000); setTimeout(function(){console.log("wait")},2000); s.then(()=>console.log("c")); 来源：https://blog.csdn.net/nana_9457/article/details/88224472 2. (function test(){ setTimeout(function(){ console.log(4); },0) new Promise(function(resolve){ console.log(1); for(var i=0;i<1000;i++){ i==999&&resolve(); } console.log(2) }).then(function(){ console.log(5) }); conso…

一.什么是对象序列化？ 　　对象序列化是指将对象的状态转换为字符串（来自我这菜鸟的理解，好像有些书上也是这么说的，浅显易懂！）； 　　序列化(Serialization)是将对象的状态信息转换为可以存储或传输的形式的过程（来自“百度百科—序列化“，学术性强，略显高端）； 二.为什么会有对象序列化？ 　　世间万物，都有其存在的原因。为什么会有对象序列化呢？因为程序猿们需要它。既然是对象序列化，那我们就先从一个对象说起： var obj = {x:1, y:2}; 　　当这句代码运行时，对象obj的内容会存储在一块内存中，而obj本身存储的只是这块内存的地址的映射而已。简单的说，对象obj就是我们的程序在电脑通电时在内存中维护的一种东西，如果我们程序停止了或者电脑断电了，对象obj将不复存在。那么如何把对象obj的内容保存在磁盘上呢（也就是说在没电时继续保留着）？这时就需要把对象obj序列化，也就是说把obj的内容转换成一个字符串的形式，然后再保存在磁盘上。另外，我们又怎么通过HTTP协议把对象obj的内容发送到客户端呢？没错，还是需要先把对象obj序列化，然后客户端根据接收到的字符串再反序列化（也就是将字符串还原为对象）解析出相应的对象。这也正是”百度百科—序列化“中描述的两个作用——存储、传输。 三.JavaScript中的对象序列化 　　J…

在 JavaScript 里使用 typeof 来判断数据类型，只能区分基本类型，即 “number”，”string”，”undefined”，”boolean”，”object”，“function”，“symbol” (ES6新增)七种。 对于数组、null、对象来说，其关系错综复杂，使用 typeof 都会统一返回 “object” 字符串。 要想区别对象、数组、函数单纯使用 typeof 是不行的，JavaScript中,通过Object.prototype.toString方法，判断某个对象值属于哪种内置类型。 在介绍Object.prototype.toString方法之前，我们先把toString()方法和Object.prototype.toString.call()方法进行对比。 toString()方法和Object.prototype.toString.call()方法对比 var arr=[1,2]; //直接对一个数组调用toString() arr.toString();// "1,2" //通过call指定arr数组为Object.prototype对象中的toString方法的上下文 Object.prototype.toString.call(arr); //"[object …

1.查看版本 console.log(moment.version); 2. moment().format(‘YYYY-MM-DD’) // 当前日期：2019-10-13 moment().subtract(7, ‘d’).format(‘YYYY-MM-DD’) // 七天前：2019-10-06 moment().add(1, ‘d’).date() // 明天日期：14 moment().format(‘MM月DD日’) // 当前月日：10月13日

1.问题描述 代码调试，在ajax一返回立马打印，发现结果竟然是后续处理过后的 2.伪代码复现 var array = [1,2]; var obj = { a: 1, b: [1,2] } console.log(array); //[1, 2] 误，外部显示的[1, 2]，点开箭头显示的[1,2,3] console.log(obj); //{a:1,b:[1,2,3]} array.push(3); obj.b.push(3); console.log(array); //[1,2,3] console.log(obj); //{a:1,b:[1,2,3]} 更正：打印结果中带三角箭头的地方需要展开查看最终结果，外部显示可能并不一致 3.产生原因 对象保存的是地址，引用同一片内存空间，后面发生改变，也会影响打印出来的值。 但凡是有个箭头出来的，可以认为是一个对象了，所以数值是实时的。三角形点开的时候才会拿着内存地址去取对象的值。 而你查看的时候，对象里的内容已经被改过了。所以这个直接log 对象或者数组的方式，并不能很好的体现内部值的一个实时性。 4.猜想 把push放入setTimeout延时5秒会怎样？ var array = [1,2]; var obj = { a: 1, b: [1,2] } console.log(array…

一、逻辑运算符 &&（短路与） 特点：只要碰到了false或者等价于false的就短路，只要短路了就不会继续往后执行了。如果短路了，得到造成短路的这个值，如果不短路，得到的是第二个值 console.log( true && true ); // true console.log( 123 && ‘中国’); // 中国 console.log( false && true ); // false console.log( true && false); // false console.log(1 && 0); // 0 console.log( undefined && 0); // undefined console.log(null && 1); // null 二、逻辑运算符 || （短路或） 特点：只要碰到了true或者等价于true的就短路，只要短路了就不会继续往后执行了。如果短路了，得到造成短路的这个值，如果不短路，得到的是第二个值 console.log( true || true ); // true console.log( 123 || ‘中国’); // 123 console.log(…

This can be done using CSS transforms 1) For 12 equal slices, each slice angle will be 30 degrees. 2) We need to rotate each slice according to the angle between vertical axis and start of the slice. So the first slice will be rotated by 0deg and the last by 330deg 3) Additionally we need to skew each slice by minus (90deg – slice angle) In this case, it is -(90deg – 30deg) = skewY(-60deg) 4) Regarding the text: a) We need to unskew slice contents with skewY(60deg) b) In order to center the text in the slice we need to rotate it by half the slice angle, hence: r…