软技能：前端数据回显
数据回显就是当用户数据提交失败时，自动填充好已经输入的数据。
对于简单数据类型，如：Integer、String、Float等
使用Model将传入的参数再放到request域实现显示。
@RequestMapping(value="/editItems",method={RequestMethod.GET})
public String editItems(Model model,Integer id)throws Exception{
//传入的id重新放到request域
model.addAttribute("id", id);
}
js：inneHTML和outerHTML区别？
其实很简单，简单来说就是内部元素和全部元素。
一、区别：
1）innerHTML:
从对象的起始位置到终止位置的全部内容,不包括Html标签。
2）outerHTML:
除了包含innerHTML的全部内容外, 还包含对象标签本身。
例子1：
<div id="test">
<span style="color:red">test1</span> test2
</div>
1）innerHTML的值是“<span style="color:red">test1</span> test2 ”
2）outerHTML的值是<div id="test"><span style="color:red">test1</span> test2</div>
例子2:
<body>
<div>aa</div>
</body>
通过document.body.innerHTML获取到的内容是:<div>aa</div>
通过document.body.outerHTML获取到的内容是:<body><div>aa</div></body>
但是需要注意的是outerHTML属性只有IE浏览器才有，其它浏览器是不支持的。
js：哪些场景会用到闭包？
在Javascript语言中，只有函数内部的子函数才能读取局部变量，闭包就是能够读取其他函数内部变量的函数。所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
function f1() {
var n = 999;
function f2() {
console.log(n);
}
return f2;
}
var result = f1();
result();//999
函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1就是不可见的。
这就是Javascript语言特有的"链式作用域"结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。
既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，就可以在f1外部读取它的内部变量了。
之后就是使用场景：
闭包的使用场景
1.setTimeout
原生的setTimeout传递的第一个函数不能带参数，通过闭包可以实现传参效果。
function f1(a) {
function f2() {
console.log(a);
}
return f2;
}
var fun = f1(1);
setTimeout(fun,1000);//一秒之后打印出1
2.回调
定义行为，然后把它关联到某个用户事件上（点击或者按键）。代码通常会作为一个回调（事件触发时调用的函数）绑定到事件。
比如下面这段代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<a href="#" id="size-12">12</a>
<a href="#" id="size-20">20</a>
<a href="#" id="size-30">30</a>
<script type="text/javascript">
function changeSize(size){
return function(){
document.body.style.fontSize = size + 'px';
};
}
var size12 = changeSize(12);
var size14 = changeSize(20);
var size16 = changeSize(30);
document.getElementById('size-12').onclick = size12;
document.getElementById('size-20').onclick = size14;
document.getElementById('size-30').onclick = size16;
</script>
</body>
</html>
当点击数字时，字体也会变成相应的大小。
3.函数防抖
在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
实现的关键就在于setTimeOut这个函数，由于还需要一个变量来保存计时，考虑维护全局纯净，可以借助闭包来实现。
如下代码所示：
/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒，防抖期限值
*/
function debounce(fn,delay){
let timer = null
//借助闭包
return function() {
if(timer){
clearTimeout(timer) //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
timer = setTimeOut(fn,delay)
}else{
timer = setTimeOut(fn,delay) // 进入该分支说明当前并没有在计时，那么就开始一个计时
}
}
}
4.封装私有变量
如下面代码：用js创建一个计数器
方法1:
function f1() {
var sum = 0;
var obj = {
inc:function () {
sum++;
return sum;
}
};
return obj;
}
let result = f1();
console.log(result.inc());//1
console.log(result.inc());//2
console.log(result.inc());//3
在返回的对象中，实现了一个闭包，该闭包携带了局部变量x，并且，从外部代码根本无法访问到变量x。
方法2:
function f1() {
var sum = 0;
function f2() {
sum++;
return f2;
}
f2.valueOf = function () {
return sum;
};
f2.toString = function () {
return sum+'';
};
return f2;
}
//执行函数f1，返回的是函数f2
console.log(+f1());//0
console.log(+f1()())//1
console.log(+f1()()())//2
所有js数据类型都拥有valueOf和toString这两个方法，null除外
valueOf()方法：返回指定对象的原始值。
toString()方法：返回对象的字符串表示。
在数值运算中，优先调用了valueOf，字符串运算中，优先调用toString
sum+’ '是一个字符串类型的数据。
js：如何实现一个全屏的功能
var $fullScreen = document.getElementById("js-fullScreen");//按钮
if ($fullScreen) {
$fullScreen.addEventListener("click", function () {
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
}, false);
}
vue:渲染模板怎么保留html注释
在组件中将comments选项设置为true
<template comments>
...
</template>
comments
类型：boolean
默认值：false
限制：这个选项只在完整构建版本中的浏览器内编译时可用。
详细：
当设为 true 时，将会保留且渲染模板中的 HTML 注释。默认行为是舍弃它们。
js：有一个宏任务，一个微任务，微任务里有一个宏任务和微任务，执行顺序
js主线程先执行同步代码（同步代码就是上文说的script,其实也是一个宏任务）
执行过程中，遇到宏任务，放入宏任务队列，遇到微任务，放入微任务队列
同步代码执行完后，从微任务队列中获取微任务放入主线程执行
期间如果遇到微任务，将其放入微任务队列，再从微任务队列中获取任务执行
当前为任务队列为空后，才从宏任务队列中获取任务执行 执行宏任务
重复以上步骤，就完成了eventloop，也就是常说的事件循环。
nodejs：简单构建一个生产者消费者模型
其实是消息中间件RabbiMQ的使用。
生产者步骤
创建链接工厂
通过链接工厂创建链接
通过链接创建通道（channel）
通过 channel 发送数据
关闭链接
消费者步骤
创建链接工厂
通过链接工厂创建链接
通过链接创建通道（channel）
声明一个队列
创建消费者
设置 channel
Github: https://github.com/squaremo/amqp.node
$ npm install amqplib
构建生产者
生产者发消息的时候必须要指定一个 exchange，若不指定 exchange（为空）会默认指向 AMQP default 交换机，AMQP default 路由规则是根据 routingKey 和 mq 上有没有相同名字的队列进行匹配路由。
const amqp = require('amqplib');
async function producer() {
// 1. 创建链接对象
const connection = await amqp.connect('amqp://localhost:5672');
// 2. 获取通道
const channel = await connection.createChannel();
// 3. 声明参数
const routingKey = 'helloworldQueue';
const msg = 'hello world';
for (let i=0; i<5; i++) {
// 4. 发送消息
await channel.publish('', routingKey, Buffer.from(`${msg} 第${i}条消息`));
}
// 5. 关闭链接
await channel.close();
}
producer();
构建消费者
const amqp = require('amqplib');
async function consumer() {
// 1. 创建链接对象
const connection = await amqp.connect('amqp://localhost:5672');
// 2. 获取通道
const channel = await connection.createChannel();
// 3. 声明参数
const queueName = 'helloworldQueue';
// 4. 声明队列，交换机默认为 AMQP default
await channel.assertQueue(queueName);
// 5. 消费
await channel.consume(queueName, msg => {
console.log('Consumer：', msg.content.toString());
channel.ack(msg);
});
}
consumer();
css： :past 选择器的作用
状态选择器past，是已经浏览的节点。
1477
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
