今日前端

 

【今日前端-2022.04.28】vue在el-dialog中this.$refs值为undefined问题？

vue中元素上加上ref属性取值，相当于取整个元素的，和$("#id")类似。但是要用此属性需要了解加载的时间，从官网上可以看到

关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

一般用法就是在mounted方法中加入this.$nextTick

具体例子<el-input ref="childShow" />

mounted() {
    this.$nextTick(() => {
      if (this.$refs.childShow !== undefined) {
        this.$refs.childShow.setTree('0000', '', '')
      }
    })
}

*但是如果$refs在el-dialog中用上述方法还是会undefined。解决的方法就是在el-dialog中加入回调函数@open，然后在回调函数方法中用this.$nextTick。

【今日前端-2022.04.25】minemap如何处理地图数据10000条以上会卡顿问题？

方案：在可视范围内的数据渲染出来，同时监听放大、移动事件。

【今日前端-2022.04.15】vuex中 this.$store.dispatch() 与 this.$store.commit()方法的区别？

参考： https://blog.csdn.net/qq_44317018/article/details/105784086

【今日前端-2022.04.01】拒绝js阻塞—defer、async作用和区别?

参考：https://segmentfault.com/a/1190000017257370

【今日前端-2022.03.24】Cookie中的httponly的属性和作用?

1.什么是HttpOnly?

如果cookie中设置了HttpOnly属性，那么通过js脚本将无法读取到cookie信息，这样能有效的防止XSS攻击，窃取cookie内容，这样就增加了cookie的安全性，即便是这样，也不要将重要信息存入cookie。XSS全称Cross SiteScript，跨站脚本攻击，是Web程序中常见的漏洞，XSS属于被动式且用于客户端的攻击方式，所以容易被忽略其危害性。其原理是攻击者向有XSS漏洞的网站中输入(传入)恶意的HTML代码，当其它用户浏览该网站时，这段HTML代码会自动执行，从而达到攻击的目的。如，盗取用户Cookie、破坏页面结构、重定向到其它网站等。

2.HttpOnly的设置样例

response.setHeader( "Set-Cookie" , "cookiename=httponlyTest;Path=/;Domain=domainvalue;Max-Age=seconds;HTTPOnly");

  例如：

//设置cookie

response.addHeader("Set-Cookie", "uid=112; Path=/; HttpOnly")

//设置多个cookie

response.addHeader("Set-Cookie", "uid=112; Path=/; HttpOnly");

response.addHeader("Set-Cookie", "timeout=30; Path=/test; HttpOnly");

//设置https的cookie

response.addHeader("Set-Cookie", "uid=112; Path=/; Secure; HttpOnly");

具体参数的含义再次不做阐述，设置完毕后通过js脚本是读不到该cookie的，但使用如下方式可以读取。

Cookie cookies[]=request.getCookies(); 

【今日前端-2022.03.22】如何网站性能优化？

1.Nginx 开启gzip压缩,减轻服务器压力

2.js异步加载

3.路由懒加载

4.把样式拆分，采用cdn方式引入

5.依赖按需引入 6.图片（1、图片进行压缩https://tinypng.com  2、单色icon 使用iconfont，访问 http://www.iconfont.cn/ 上传和使用iconfont 3、制作雪碧图 4、webpack打包、小图直接转base64）

【今日前端-2022.03.22】常用的Content-Type几种 ？

参看：https://blog.csdn.net/ws9029/article/details/112326479

// 3、multipart/form-data

let url = process.env.VUE_APP_BASE_API + '/system/auth/verifyAuthCode';
            let newFormData = new FormData();
            newFormData.append('authCode', this.authorForm.secretKey)          
            axios.post(url, newFormData, {
              headers: {
                'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime()
              }
            }).then(res => {
              if(res.data.code == 200){
                this.dialogVisible = false;
                this.$message({
                  message: '授权成功',
                  type: 'success'
                });
              }
            });

　

【今日前端-2022.03.21】qiankun如何做到css隔离？

【今日前端-2022.03.18】回流/重绘原理、举例？

回流(reflow)

当 Render Tree 中部分或全部, 因元素的尺寸、布局、隐藏等改变而需要重新构建，浏览器重新渲染的过程称为 回流。

会导致回流的操作：

• 页面首次渲染。
• 浏览器窗口大小发生改变。
• 元素尺寸或者位置发生改变。
• 元素内容变化(文字数量或者图片大小发生改变)。
• 元素字体大小的改变。
• 添加或者删除可见的 DOM 元素。
• 激活 CSS 伪类 (eg: :hover)。
• 查询某些属性或调用某些方法。

一些常用且会导致回流的属性和方法。

• clientWidth、clientHeight、clientTop、clientLeft
• offsetWidth、offsetHeight、offsetTop、offsetLeft
• scrollWidth、scrollHeight、scrollTop、scrollLeft
• scrollIntoView()、scrollIntoViewIfNeeded()
• getComputedStyle()
• getBoundingClientRect()
• scrollTo()

重绘(repaint)

当页面中元素样式的改变并不影响b布局时（eg：color、background-color等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。

一句话： 回流必将引起重绘，重绘不一定会引起回流。

性能影响

有时即使仅仅回流一个单一的元素，它的父元素以及任何跟随它的元素也会产生回流。

现代浏览器会对频繁的回流或重绘操作进行优化：

浏览器会维护一个队列，把所有引起回流和重绘的操作放入队列中，如果队列中的任务数量或者时间间隔达到一个阈值的，浏览器就会将队列清空，进行一次批处理，这样可以把多次回流和重绘变成一次。

当你访问以下属性或方法时，浏览器会立刻清空队列：

• clientWidth、clientHeight、clientTop、clientLeft
• offsetWidth、offsetHeight、offsetTop、offsetLeft
• scrollWidth、scrollHeight、scrollTop、scrollLeft
• scrollIntoView()、scrollIntoViewIfNeeded()
• getComputedStyle()
• getBoundingClientRect()
• scrollTo()

因为队列中可能会有影响到这些属性或方法返回值的操作，即使你希望获取的信息与队列中操作引发的改变无关，浏览器也会强行清空队列，确保你拿到的值是最精确的。

优化重绘回流

• 减少对 render tree 的操作 【合并多次多DOM和样式的修改】
• 减少对一些style信息的请求，尽量利用好浏览器的优化策

【今日前端-2022.03.16】为什么说 Vue 是渐进式前端开发框架？

https://juejin.cn/post/7067415540792295454

【今日前端-2022.03.16】如何做到发布到不同的网站，只需要打包一次，无需分三次打包

 

1.公共配置文件.env放在和dist文件同级位置，script引入.env文件（目前能实现的方案）
2.配置文件里面的公共变量加唯一标志（只限是路径的变量），nginx反代理。每台服务器第一次部署需要配置多个反代理（支支持公共变量是http://）
3.jenkins部署优化 做到界面段点击按钮自动拉取代码部署（部署优化）

4、通过脚本批量进行编译打包：项目根目录build.sh打包脚本

## 1、当前脚本文件所在路径
current_path=$(cd $(dirname $0); pwd)
version='V0.1.0.0012'

## 打印当前目录
echo $current_path

# 打印当前目录文件列表
# echo $a*

#-----------------------------1、需要拉取的项目路径------------------

## 项目仓库本地文件路径
base_url ='/e/work/aehyok/github/vue-qiankun'

## 开始pull拉取项目
project_path=${base_url}
cd $project_path
git pull
echo -e "\033[32m拉取项目：${project_path} 成功\033[0m";

#-------------------------2、设置需要编译的项目路径----------------------
npmbuild_pathArr=(
"/e/work/aehyok/github/vue-qiankun/main-vite-app-ts" #主应用
"/e/work/aehyok/github/vue-qiankun/webpack-app" # webpack-app 子应用
"/e/work/aehyok/github/vue-qiankun/map-app" #map-app 子应用
)

#-------------------------3、 开始 build 项目--------------------------
for ((i=0;i<${#npmbuild_pathArr[*]};i++))
do
project_path=${npmbuild_pathArr[i]}
cd $project_path
yarn build
echo -e "\033[32m编译项目：${npmbuild_pathArr[i]} 成功\033[0m";
done

#-------------------------4、 开始拷贝文件到服务器----------------------
# /e/work/aehyok/github/qiankun 是我本地打包后的文件夹
scp -r /e/work/aehyok/github/qiankun/main root@139.186.205.7:/usr/local/qiankun/main/

######、拷贝完之后进行git 的提交
cd /e/work/aehyok/github/qiankun
## git add .
## git status
## sleep 1s
## message="chore：build.sh 脚本打包 commit-version:${version}"
## git commit -m $message .
## git push origin

echo "5秒后将自动退出本脚本："
for i in $(seq 5 -1 1)
do
echo -e $i;sleep 1
done
exit

## 执行脚本 sh build.sh

【今日前端-2022-03-15】router的history模式和hash模式有什么区别？

https://blog.csdn.net/wangningjing87/article/details/100982120

【今日前端-2022-03-14】前端知识图谱?

参考 https://github.com/costaq/fe-knowledge

【今日前端-2022-03-14】vue中$router和$route的区别?

$route对象
$route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。

1.$route.path    字符串，对应当前路由的路径，总是解析为绝对路径，如"/foo/bar"。
2.$route.params  一个 key/value 对象，包含了 动态片段 和 全匹配片段，      如果没有路由参数，就是一个空对象。
3.$route.query   一个 key/value 对象，表示 URL 查询参数。      例如，对于路径 /foo?user=1，则有$route.query.user == 1，      如果没有查询参数，则是个空对象。
4.$route.hash    当前路由的hash值 (不带#) ，如果没有 hash 值，则为空字符串。锚点*
5.$route.fullPath 完成解析后的 URL，包含查询参数和hash的完整路径。
6.$route.matched  数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
7.$route.name  当前路径名字
8.$route.meta  路由元信息

导航钩子的参数：
router.beforeEach((to,from, next)=>{//to 和from都是 路由信息对象,后面使用路由的钩子函数就容易理解了})
$router对象
$router对象是全局路由的实例，是router构造方法的实例。

路由实例方法：
1.字符串this.$router.push('home')
2. 对象this.$router.push({path:'home'})
3. 命名的路由this.$router.push({name:'user',params:{userId:123}})
4.带查询参数，变成 /register?plan=123this.$router.push({path:'register',query:{plan:'123'}})，push方法其实和<router-link :to="...">是等同的。
注意：push方法的跳转会向 history 栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。

【今日前端-2022-03-11】promise和async await区别？分别用在何种情况？

参考 https://blog.csdn.net/weixin_43841308/article/details/123467275 
http://www.shouhuola.com/q-33290.html

Cookie中的httponly的属性和作用