<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[this_is_a_rogue的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/this_is_a_rogue</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; this_is_a_rogue]]></copyright><item><title><![CDATA[将图片转换为base64]]></title><link>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/124020877</link><guid>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/124020877</guid><author>this_is_a_rogue</author><pubDate>Thu, 07 Apr 2022 16:53:33 +0800</pubDate><description><![CDATA[使用canvas



新建个canvas标签然后用css隐藏。之后获取此canvas元素，使用toDataURL方法转换。




var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d');

var base64=canvas.toDataURL('image/jpeg',licenseUrl);

使用 FileReader

使用FileReader的readAsDataURL方法，...]]></description><category></category></item><item><title><![CDATA[遍历的性能（执行速度的角度）比较]]></title><link>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/123438918</link><guid>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/123438918</guid><author>this_is_a_rogue</author><pubDate>Sat, 12 Mar 2022 11:37:10 +0800</pubDate><description><![CDATA[1,js中有很多遍历方法：

for（arr.length）;

for... of... ;

for...in...;

数组的Array

forEach;

Map;filter;

some;every;

Map和Set

for...of...

迭代器模式
iteration成为迭代器，又叫遍历器。它的作用是给不同的数据结构(

Array
	Map
	Set
	String
	TypedArray
	函数的 arguments 对象
	NodeList 对象
)提供统一的遍历访问机制，这种]]></description><category></category></item><item><title><![CDATA[行内元素和块级元素的区别]]></title><link>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/123001905</link><guid>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/123001905</guid><author>this_is_a_rogue</author><pubDate>Fri, 18 Feb 2022 13:57:40 +0800</pubDate><description><![CDATA[块级元素？

总是在新行上开始；
	高度，外边距和内边距都可控制；
	宽度缺省是它的容器的100%，除非设定一个宽度。
	它可以容纳内联元素和其他块元素
行内元素？

和其他元素都在一行上；
	高，外边距和内边距不可改变；
	宽度就是它的文字或图片的宽度，不可改变
	内联元素只能容纳文本或者其他内联元素
对行内元素，需要注意如下：

设置宽度width 无效。
	设置高度height 无效，可以通过line-height来设置。
	设置margin 只有左右margin有效，上下无效。
	设置padding]]></description><category></category></item><item><title><![CDATA[vue组件渲染过程]]></title><link>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/122999752</link><guid>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/122999752</guid><author>this_is_a_rogue</author><pubDate>Fri, 18 Feb 2022 13:36:03 +0800</pubDate><description><![CDATA[1，生成render 函数，生成vnode ,将虚拟节点patch(vnode)到绑定元素上。

2，什么是虚拟done?

虚拟DOM也就是我们常说的虚拟节点，他是通过JS的Object对象模拟DOM中的节点，然后在通过特定的render方法将其渲染成真实的DOM节点。

为什么要使用虚拟节点？

频繁的DOM操作会导致大量页面元素的重绘和回流，处于性能优化的考虑我们应该减少重绘和回流的操作。而对虚拟节点的DOM操作，并不会触发重绘和回流，把处理后的虚拟节点映射到真是DOM上，只需要进行一次重绘和回流，提]]></description><category></category></item><item><title><![CDATA[vue指令v-for和v-if为什么不能同时使用]]></title><link>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/122999308</link><guid>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/122999308</guid><author>this_is_a_rogue</author><pubDate>Fri, 18 Feb 2022 11:17:07 +0800</pubDate><description><![CDATA[指令v-for和v-if不建议同时使用在vue2.x中，v-for优先级是高于v-if的，如果在同一个元素中使用了v-for和v-if，那么在渲染时，v-for的每一项都要重复运行v-if，这会降低渲染的效率

解决方式
可以将v-if的功能替换为 在一个计算属性上面遍历后使用


computed: {
 activeUsers: function () {
  return this.users.filter(function (user) {
   return user.isActive...]]></description><category></category></item><item><title><![CDATA[文件上传系统]]></title><link>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/121101333</link><guid>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/121101333</guid><author>this_is_a_rogue</author><pubDate>Mon, 07 Feb 2022 13:47:03 +0800</pubDate><description><![CDATA[原理概述

原理很简单，就是根据 http 协议的规范和定义，完成请求消息体的封装和消息体的解析，然后将二进制内容保存到文件。

我们都知道如果要上传一个文件，需要把 form 标签的enctype设置为multipart/form-data,同时method必须为post方法。

那么multipart/form-data表示什么呢？


multipart互联网上的混合资源，就是资源由多种元素组成，form-data表示可以使用HTML Forms 和 POST 方法上传文件，具体的定义可以参考RFC ]]></description><category></category></item><item><title><![CDATA[类声明，继承]]></title><link>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/122013574</link><guid>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/122013574</guid><author>this_is_a_rogue</author><pubDate>Mon, 07 Feb 2022 00:24:18 +0800</pubDate><description><![CDATA[1，大概分为四步：

    （1）新建个对象

        eg: var obj = {}

    （2）将构造函数的作用域赋这个对象上。

        eg:

    （3）在这个对象上调用这个构造函数

    （4）返回这个对象
...]]></description><category></category></item><item><title><![CDATA[使用element的表格实现点击编辑表格内元素。]]></title><link>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/122493010</link><guid>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/122493010</guid><author>this_is_a_rogue</author><pubDate>Fri, 14 Jan 2022 15:35:14 +0800</pubDate><description><![CDATA[功能：使用element的表格实现点击编辑表格内元素。

分析：element使用的是插槽template的形式比iview UI更加具有html话，不是是使用renden函数自定义html,感觉更清明些。

实现思路：v-if v-else 直接替换template。

实现坑点：1，scope添加row.isEdit判断，结果不能实现，不能触发vue的重新渲染。

解决：必须在data里改值会生效。

2，由于在el-table-column下绑定的事件，所以我们只要判断是否在这一行。

最终实现：

]]></description><category></category></item><item><title><![CDATA[数据的编码]]></title><link>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/121078751</link><guid>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/121078751</guid><author>this_is_a_rogue</author><pubDate>Mon, 01 Nov 2021 13:55:46 +0800</pubDate><description><![CDATA[1，base64编码：

    1.1由来：网络上传输的字符并不全是可打印的字符，比如二进制文件、图片等。它是基于64个可打印的字符来表示二进制的数据的一种方法。

电子邮件刚问世的时候，只能传输英文，但后来随着用户的增加，中文、日文等文字的用户也有需求，但这些字符并不能被服务器或网关有效处理，因此Base64就登场了。随之，Base64在URL、Cookie、网页传输少量二进制文件中也有相应的使用。

    1.2编码演示



    1.3结论：

...]]></description><category></category></item><item><title><![CDATA[左边树，右边为视频窗口]]></title><link>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/121001270</link><guid>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/121001270</guid><author>this_is_a_rogue</author><pubDate>Wed, 27 Oct 2021 20:30:38 +0800</pubDate><description><![CDATA[1，问题一：左边树一次只能点击一个设备，右边为单状态的四窗口的视屏窗

2，问题二：左边树一次只能点击一个设备，右边为多状态的1,4,16,36窗口。

3，问题三：左边树一次可以点击多个设备，右边为单状态的四窗口的视屏窗

4，问题四：左边树一次可以点击多个设备，右边为多状态的1,4,16,36窗口。
...]]></description><category></category></item><item><title><![CDATA[关于调试过程遇到的问题]]></title><link>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/121000445</link><guid>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/121000445</guid><author>this_is_a_rogue</author><pubDate>Wed, 27 Oct 2021 20:19:46 +0800</pubDate><description><![CDATA[1，打包到服务上去检视页面效果：

如果像jsp的没有经过编译的可以直接在source里面修改，有效果。

如果是普通的vue项目，编译后放到服务上，看到的source也只是反编译的效果，修改源文件没有效果。并且编译后的debugger;没有效果。此时还是得console.log("")了。

2，部署过程中，模块加载不出来，或者功能异常。

可能性：一：代码拉取的版本不对，

        前端分支不对，导致页面的有些模块加载不出来。

        不分离的项目，版本...]]></description><category></category></item><item><title><![CDATA[js模块化]]></title><link>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/120858337</link><guid>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/120858337</guid><author>this_is_a_rogue</author><pubDate>Wed, 20 Oct 2021 03:55:37 +0800</pubDate><description><![CDATA[掘金https://juejin.cn/post/6844903744518389768
]]></description><category></category></item><item><title><![CDATA[前端页面html,css,js文件从加载到执行的过程]]></title><link>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/120642893</link><guid>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/120642893</guid><author>this_is_a_rogue</author><pubDate>Fri, 08 Oct 2021 14:58:47 +0800</pubDate><description><![CDATA[js的加载内部加载，外部应用，inport的导入，和require的导入

window.onload

window.onready


]]></description><category></category></item><item><title><![CDATA[关于页面在web端可以显示，在客户端不可以显示bug]]></title><link>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/120561193</link><guid>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/120561193</guid><author>this_is_a_rogue</author><pubDate>Thu, 30 Sep 2021 10:28:17 +0800</pubDate><description><![CDATA[问题描述：

写好的jsp文件部署到环境上，可以正常显示，当使用客户端嵌入web端页面的时候html和css可以展示却没有数据。

问题排查，

（1）看看客户端的控制台，其实是有办法的，但由于客户端版本的问题不行。

（2）找客户端大佬看日志是不是客户端拉取或者请求的问题。像这个项目在一个项目里加一俩个页面是只有当前页面出不来，一般不是这个情况。

（3）看js执行了没，使用在首行js,alert弹出下无效,有可能是客户端不支持这个方法（实际是客户端支持这个方法），换一个隐藏元素的方法。结果：无效。

（]]></description><category></category></item><item><title><![CDATA[nginx部署项目？]]></title><link>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/120560170</link><guid>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/120560170</guid><author>this_is_a_rogue</author><pubDate>Thu, 30 Sep 2021 09:05:31 +0800</pubDate><description><![CDATA[1，什么是部署项目？

在开发环境中，我们


]]></description><category></category></item><item><title><![CDATA[事件委托的实现]]></title><link>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/120464184</link><guid>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/120464184</guid><author>this_is_a_rogue</author><pubDate>Sat, 25 Sep 2021 19:25:33 +0800</pubDate><description><![CDATA[1，为啥要事件委托？

答：监听父元素，对于子元素的增加于减少，对于整体事件流程没有影响。否者将在每个子元素产生的时候添加事件不仅麻烦且不可预知。

2，实现原理：

答：事件冒泡：

3，我的实现：


&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport"
          content="width=device-w]]></description><category></category></item><item><title><![CDATA[面试题_打印红绿灯问题]]></title><link>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/120277238</link><guid>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/120277238</guid><author>this_is_a_rogue</author><pubDate>Mon, 13 Sep 2021 23:24:53 +0800</pubDate><description><![CDATA[1，使用callback实现循环打印，间隔一秒打印红色，间隔俩秒打印绿色，间隔三秒打印黄色。


var logLight = function(){
    setTimeout(()=&gt;{
        console.log("now is 红灯");
        setTimeout(()=&gt;{
        console.log("now is 绿灯");
        setTimeout(()=&gt;{
        console.log("now is ...]]></description><category></category></item><item><title><![CDATA[教你如何写初/高级前端简历]]></title><link>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/120257219</link><guid>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/120257219</guid><author>this_is_a_rogue</author><pubDate>Sun, 12 Sep 2021 22:22:45 +0800</pubDate><description><![CDATA[进击的web前端开发

前端企鹅圈：784783012 分享学习方法和需要注意的细节

110 人赞同了该文章

1. 前言

本文仅是针对初高级技术岗位哈。

参与了部门的实习生招聘工作，收到了很多同学的简历。发现有一些同学的简历写得不是很好看。 但是，仔细聊了聊之后发现，这些同学其实技术是很厉害的，只是不知道该如何写在简历上，不知道如何“包装”自己。

在这过程中，也给一些同学的简历提了一些建议，结合自己写简历的经验，在这里写一篇文章聊一聊，如有不足之处还望指出和补充。

本文的主要内容：

为...]]></description><category></category></item><item><title><![CDATA[对象数组排序]]></title><link>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/117637843</link><guid>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/117637843</guid><author>this_is_a_rogue</author><pubDate>Sun, 06 Jun 2021 22:21:43 +0800</pubDate><description><![CDATA[var arr = [
    {name:'zopp',age:0},
    {name:'gpp',age:18},
    {name:'yjj',age:8}
];

function compare(property){
    return function(a,b){
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
    }
}
cons.]]></description><category></category></item><item><title><![CDATA[跨域问题总结]]></title><link>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/117636079</link><guid>https://blog.youkuaiyun.com/this_is_a_rogue/article/details/117636079</guid><author>this_is_a_rogue</author><pubDate>Sun, 06 Jun 2021 20:46:44 +0800</pubDate><description><![CDATA[目标问题：vue-cil和express前后端分离的跨域问题。

什么是跨域：同源策略对浏览器的请求行为的限制。

解决方案：

修改浏览器设置


]]></description><category></category></item></channel></rss>