每日3+3
HTML
使用a标签的download属性下载文件会有跨域问题吗
有用到fetch,补充：fetch
因为a标签的 download 属性只对同源文件有效，所以我们这里先把图片 url 转为 blob 格式，然后再下载
通过fetch将图片资源转为bolb，然后通过createObjectURL转为blobUrl赋值给a标签，控制点击下载
const downloadRes = async (url, name) => {
let response = await fetch(url)
// 内容转变成blob地址
let blob = await response.blob()
// 创建隐藏的可下载链接
let objectUrl = window.URL.createObjectURL(blob)
let a = document.createElement('a')
//地址
a.href = objectUrl
//修改文件名
a.download = name
// 触发点击
document.body.appendChild(a)
a.click()
//移除
setTimeout(() => document.body.removeChild(a), 1000)
}
下载一张图片，可以把这张图片转换成base64格式，然后下载
const downloadImg = async (url, name) => {
let canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function() {
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL('image/png');
let a = document.createElement('a');
a.href = dataURL;
a.download = name;
document.body.appendChild(a);
a.click();
setTimeout(() => {
document.body.removeChild(a);
canvas = null;
}, 1000);
};
img.src = url;
};
Css
1.行内元素可以设置padding和margin吗
只能设置左右的padding和margin。
2.使用css3画个旋转的立方体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box {
margin: 200px auto;
width: 300px;
height: 300px;
position: relative;
transform-style: preserve-3d;
transform: rotateX(-45deg) rotateY(-45deg);
}
.box>div {
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
}
.one {
background: red;
opacity: .5;
}
.two {
transform: translateZ(-100px);
background: green;
opacity: .5;
}
.three {
transform: translateX(50px) translateZ(-50px) rotateY(90deg);
background: yellow;
opacity: .5;
}
.four {
transform: translateX(-50px) translateZ(-50px) rotateY(90deg);
background: blue;
opacity: .5;
}
.five {
transform: translateY(50px) translateZ(-50px) rotateX(90deg);
background: purple;
opacity: .5;
}
.six {
transform: translateY(-50px) translateZ(-50px) rotateX(90deg);
background: pink;
opacity: .5;
}
</style>
</head>
<body>
<div class="box">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
<div class="six">6</div>
</div>
</body>
</html>
Javascript
实现一个商品的sku
商品的sku就是商品的规格，库存量啥的
var a = ['黄', '绿']
var b = ['s', 'l']
var c = ['大', '小']
function sku(...arr) {
return arr.reduce((accumulator,CurrentItem,index)=>{
if(index===0){
for(let i=0;i<CurrentItem.length;i++){
accumulator.push(CurrentItem[i])
}
return accumulator
}else{
let arr = []
for(let i=0;i<accumulator.length;i++){
for(let j=0;j<CurrentItem.length;j++){
arr.push([...accumulator[i],CurrentItem[j]])
}
}
return arr
}
},[])
}
console.log(sku(a, b, c))
优化版，不使用用reduce的第二参：
使用reduce的迭代方法，accumulator是累计的值，CurrentItem是当前的值
如果不传reduce的第二参的时候，accumulator一开始是指向数组的0下标，CurrentItem指向数组的1下标，return arr要return出去否则下一次迭代的accumulator会变成undefined，还有push的结构accumulator的值因为到第二次迭代的话accumulator里面可能就是二维数组了而不是一维数组
var a = ['黄', '绿']
var b = ['s', 'l']
var c = ['大', '小']
function sku(...arr) {
return arr.reduce((accumulator, CurrentItem) => {
let arr = []
for (let i = 0; i < accumulator.length; i++) {
for (let j = 0; j < CurrentItem.length; j++) {
arr.push([...accumulator[i], CurrentItem[j]])
}
}
return arr
})
}
console.log(sku(a, b, c))
Vue
为什么vue的data必须是个函数?
直接上码
// 创建一个组件
var Component= function() {
}
Component.prototype.data = {
a: 1,
b: 2
}
// 使用组件
var component1 = new Component()
var component2 = new Component()
component1.data.b = 3
component2.data.b // 3
你会发现如果data用对象的话那么，他们的data数据就共享了，修改组件1的data就会同时修改到组件2的data，因为他们是引用状态的
正解:
var Component= function() {
}
Component.prototype.data = function() {
return {
a: 1,
b: 2
}
}
// 使用组件
var component1 = new Component()
var component2 = new Component()
component1.data.b = 3
component2.data.b // 2
网络
补上次的tcp的优点，并解释
tcp的主要优点： 是一种面向连接的、可靠的、基于字节流的传输层通信协议
面向连接就 三次握手，四次挥手
可靠性：
包括
1）数据分片：在发送端对用户数据进行分片，在接收端进行重组
2）确认到达：当TCP发出一个段后，它启动一个定时器，等待目的端确认收到这个报文段。如果不能及时收到一个确认，将重发这个报文段。当TCP收到发自TCP连接另一端的数据，它将发送一个确认。TCP有延迟确认的功能，在此功能没有打开，则是立即确认。功能打开，则由定时器触发确认时间点。
3）超时重发：TCP将保持它首部和数据的检验和。这是一个端到端的检验和，目的是检测数据在传输过程中的任何变化。如果收到段的检验和有差错，TCP将丢弃这个报文段和不确认收到此报文段（希望发端超时并重发）。
4）滑动窗口：TCP连接每一方的接收缓冲空间大小都固定，接收端只允许另一端发送接收端缓冲区所能接纳的数据，TCP在滑动窗口的基础上提供流量控制，防止较快主机致使较慢主机的缓冲区溢出；
5）失序处理：既然TCP报文段作为IP数据报来传输，而IP数据报的到达可能会失序，因此TCP报文段的到达也可能会失序。如果必要，TCP将对收到的数据进行重新排序，将收到的数据以正确的顺序交给应用层。
6）重复处理：既然IP数据报会发生重复，TCP的接收端必须丢弃重复的数据。
7）数据校验：TCP将保持它首部和数据的检验和，这是一个端到端的检验和，目的是检测数据在传输过程中的任何变化。如果收到分片的检验和有差错，TCP将丢弃这个分片，并不确认收到此报文段导致对端超时并重发。
重传策略
窗口确认
nodejs
1.如果发现node_modules中有个模块代码有bug，你该怎么办？
删除包，重新依赖库
2.npm提供了哪些钩子？各有什么作用？
npm是Nodejs的包管理，同Java中maven类似，干的活是一样的。
npm提供了两种钩子，pre和post，分别代表操作前和操作后。比如
比如:
当执行npm run build的时候，会按序执行npm run prebuild && npm run build && npmrun postbuild。
当执行npm run install的时候，会按序执行npm run preinstall&& npm run install&& npmrun postinstall。
可以自己配置脚本
package.json
"scripts": {
...
"prebuild": "cp -rf /home/node_modules/* node_modules",
"postbuild": "cp -rf dist/* /httpd/static/"
}
// build前，将依赖包拷贝至当前项目下，build后，将生成的静态文件拷贝至apache服务下。
374
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
