<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[imapig_的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/imapig_</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; imapig_]]></copyright><item><title><![CDATA[Vue+bpmn.js自定义流程图之contextPad（四）]]></title><link>https://blog.youkuaiyun.com/imapig_/article/details/122679791</link><guid>https://blog.youkuaiyun.com/imapig_/article/details/122679791</guid><author>imapig_</author><pubDate>Tue, 25 Jan 2022 11:15:57 +0800</pubDate><description><![CDATA[bpmn.js自定义样式之contextPad部分,和最后在vue中的使用]]></description><category></category></item><item><title><![CDATA[Vue+bpmn.js自定义流程图之render（三）]]></title><link>https://blog.youkuaiyun.com/imapig_/article/details/122664194</link><guid>https://blog.youkuaiyun.com/imapig_/article/details/122664194</guid><author>imapig_</author><pubDate>Mon, 24 Jan 2022 13:55:21 +0800</pubDate><description><![CDATA[bpmn自定义流程图之render]]></description><category></category></item><item><title><![CDATA[Vue+bpmn.js自定义流程图之palette（二）]]></title><link>https://blog.youkuaiyun.com/imapig_/article/details/122574565</link><guid>https://blog.youkuaiyun.com/imapig_/article/details/122574565</guid><author>imapig_</author><pubDate>Wed, 19 Jan 2022 11:37:18 +0800</pubDate><description><![CDATA[bpmn.js自定义样式之palette]]></description><category></category></item><item><title><![CDATA[Vue+bpmn.js自定义流程图（一）]]></title><link>https://blog.youkuaiyun.com/imapig_/article/details/122468456</link><guid>https://blog.youkuaiyun.com/imapig_/article/details/122468456</guid><author>imapig_</author><pubDate>Thu, 13 Jan 2022 18:07:59 +0800</pubDate><description><![CDATA[bpmn.js自定义流程图样式]]></description><category></category></item><item><title><![CDATA[Vue+element-ui上传文件到七牛云组件]]></title><link>https://blog.youkuaiyun.com/imapig_/article/details/120261575</link><guid>https://blog.youkuaiyun.com/imapig_/article/details/120261575</guid><author>imapig_</author><pubDate>Mon, 13 Sep 2021 11:36:47 +0800</pubDate><description><![CDATA[Vue+element-ui上传文件和分片上传到七牛云一、实现效果二、上传到七牛云的过程三、实现组件代码1.上传组件代码2.引入组件3.提示
公司可能会将图片文件等存储到七牛云、阿里云等服务器方便管理。我这里将文件上传到七牛云，通过七牛云的api来实现上传和分片上传。使用element-ui的el-upload组件改造来完成。
一、实现效果
点击添加附件弹出dialog操作框

选取文件后添加文件到待上传列表，点击上传后同时上传文件，超过一定大小（自己设置）的文件会采用分片上传。

上传后的添加附件变为查看]]></description><category></category></item><item><title><![CDATA[vue2.0源码之数据双向绑定原理和实现]]></title><link>https://blog.youkuaiyun.com/imapig_/article/details/119600987</link><guid>https://blog.youkuaiyun.com/imapig_/article/details/119600987</guid><author>imapig_</author><pubDate>Thu, 12 Aug 2021 17:37:02 +0800</pubDate><description><![CDATA[vue源码之数据双向绑定原理一.双向绑定的原理介绍二.代码简单实现
这里什么说是vue2.0的双向绑定原理是因为和vue3.0的实现方式是有区别的。
一.双向绑定的原理介绍

vue的双向绑定是数据和视图的同步变化，即当数据发生变化的时候，相关的视图会发生改变；视图发生改变的时候，数据也会随之变化。它是通过 数据劫持 结合 发布订阅模式的方式来实现的。

下图是一个vue数据双向绑定的过程：

将vue中的data里的所有属性通过实现Observer来完成数据劫持
Dep是一个容器来存放所有的订阅者Watc]]></description><category></category></item><item><title><![CDATA[Vue2.0源码之虚拟dom和diff算法的原理]]></title><link>https://blog.youkuaiyun.com/imapig_/article/details/119454214</link><guid>https://blog.youkuaiyun.com/imapig_/article/details/119454214</guid><author>imapig_</author><pubDate>Mon, 09 Aug 2021 10:36:41 +0800</pubDate><description><![CDATA[Vue2.0源码之虚拟dom和diff算法的原理一.虚拟dom介绍二.diff算法
一.虚拟dom介绍


现在使用的Vue和React，都有虚拟dom这个说法，既然是虚拟dom，肯定和真实dom有区别但又有关联。所以虚拟dom是什么呢？


虚拟dom就是真实dom的所映射的一个JS对象。简单来说就是把页面的dom节点树通过JS对象的形式来表示出来。


为什么要用虚拟dom的方式来设计Vue框架呢？因为不管在原生JS或者是JQuery时，我们会在开发中操作大量的dom节点，dom的大量操作会让页面的性能]]></description><category></category></item><item><title><![CDATA[vue-baidu-map百度地图设置标记点及信息窗口]]></title><link>https://blog.youkuaiyun.com/imapig_/article/details/119326592</link><guid>https://blog.youkuaiyun.com/imapig_/article/details/119326592</guid><author>imapig_</author><pubDate>Mon, 02 Aug 2021 16:42:29 +0800</pubDate><description><![CDATA[vue-baidu-map自定义设置标记点及信息窗口一.项目需求二.实现后的效果三.代码实现四.小结
一.项目需求
首先项目的功能需求是在指定服务区域内选择详细地址（保修地点），然后显示这个地址周围的工程师到地图上面。并且可以查看指定工程师的信息。从而达到派单的目的。
二.实现后的效果
左侧是选择地址，范围等条件。右侧是地图，显示的是当前保修地点和周围的工程师，点击地图工程师头像弹出详细信息（我这里是自定义信息窗口的样式）。

三.代码实现
因为我这里的代码涉及到项目的其他功能并且具有关联性，所以我的实际代]]></description><category></category></item><item><title><![CDATA[el-cascader级联实现已有区域省、市、区选择并保存区域id]]></title><link>https://blog.youkuaiyun.com/imapig_/article/details/118762253</link><guid>https://blog.youkuaiyun.com/imapig_/article/details/118762253</guid><author>imapig_</author><pubDate>Fri, 16 Jul 2021 10:27:49 +0800</pubDate><description><![CDATA[el-cascader级联实现已有区域省、市、区选择并保存区域id一.需求分析二.实现效果三.代码实现
一.需求分析
前几天公司有一个需求，多选已配置好的区域（包括省、市、区/县）,并返回区域的id。这听起来好像很正常，但我的数据是这样的：
1.这是所有区域的json文件格式:

city下的每一项：country_code表示当前城市属于的国家； province_code表示当前城市属于的省份；code为当前城市的code。

country下的每一项：code为当前国家的code。

district]]></description><category></category></item><item><title><![CDATA[Vue可拖动未读消息组件]]></title><link>https://blog.youkuaiyun.com/imapig_/article/details/118517074</link><guid>https://blog.youkuaiyun.com/imapig_/article/details/118517074</guid><author>imapig_</author><pubDate>Tue, 06 Jul 2021 12:00:23 +0800</pubDate><description><![CDATA[分享一个Vue的可拖动未读消息提示的小组件一.效果图二.在Vue中实现自定义指令三.在项目中使用
此组件使用Vue自定义指令实现一个全局显示可拖动的未读消息提示。思路就是通过自定义指令来实现一个组件在页面中的拖动。
一.效果图
在项目中的效果（按住鼠标左键可以拖拽）

二.在Vue中实现自定义指令
首先定义一个自定义指令  @/assets/utils/darg.js文件
import Vue from 'vue';
//使用Vue.directive()定义一个全局指令
//1.参数一：指令的名称，定义时]]></description><category></category></item><item><title><![CDATA[TypeScript之泛型（六）]]></title><link>https://blog.youkuaiyun.com/imapig_/article/details/118338151</link><guid>https://blog.youkuaiyun.com/imapig_/article/details/118338151</guid><author>imapig_</author><pubDate>Tue, 29 Jun 2021 17:47:01 +0800</pubDate><description><![CDATA[TypeScript之泛型的理解和使用一.什么是泛型二.泛型的使用三.接口泛型四.泛型类
上一篇：TypeScript之interface接口（五）
一.什么是泛型
什么是泛型？我们可以理解为是在编译期间不确定方法的类型，在方法调用时再指定类型的一种特性。这句话又怎么理解呢？在TS中，定义变量最重要的就是对类型的约束，但是当需要定义一个参数类型 返回 值类型不确定的函数时，这时就可能会使用泛型。
这时有人会说为什么不使用any类型来定义呢？还要弄一个泛型出来？这对于写高复用性的第三方库和第三方源码的时候，泛]]></description><category></category></item><item><title><![CDATA[TypeScript之interface接口（五）]]></title><link>https://blog.youkuaiyun.com/imapig_/article/details/118219247</link><guid>https://blog.youkuaiyun.com/imapig_/article/details/118219247</guid><author>imapig_</author><pubDate>Fri, 25 Jun 2021 15:46:49 +0800</pubDate><description><![CDATA[TypeScript之接口的定义和使用一.接口的定义二.接口初识三.包含函数的接口四.接口对类的约束五.接口的继承
上一篇：TypeScript之类，抽象类，继承，多态（四）
在前面创建数据类型我们简单提到了接口，使用接口在约束一组数据结构来定义指定的对象。这里来详细介绍一下TS中的接口。
一.接口的定义
在各种开发语言里基本都有interface接口的定义，这个接口与开发中的API接口不是一个概念。
interface接口定义了某一批类所需要遵守的规范，时一中数据格式的约束。接口不关心内部属性的数据，也不]]></description><category></category></item><item><title><![CDATA[TypeScript之类，抽象类，继承，多态（四）]]></title><link>https://blog.youkuaiyun.com/imapig_/article/details/118144252</link><guid>https://blog.youkuaiyun.com/imapig_/article/details/118144252</guid><author>imapig_</author><pubDate>Wed, 23 Jun 2021 11:56:21 +0800</pubDate><description><![CDATA[TS中关于类的理解一.类的定义二.类的继承三.类的修饰符四.静态属性和方法五.抽象类六.多态
在es6之前，要想实现JS的服用方法或组件，需要使用函数，原型和原型链等方法来实现。在es6中引入了JS类的概念，我们使用JS也能基于面向对象的方式使用和构建类。在TS中也允许使用es6的类的写法，最终编译为JS代码允许在浏览器。
一.类的定义
和其他面向对象语言的语法一样，使用class关键字定义一个类。类中this表示此当前对象本身，如下的this.name就表示当前类的name属性。
//定义一个'人'的类 ]]></description><category></category></item><item><title><![CDATA[TypeScript之函数定义（三）]]></title><link>https://blog.youkuaiyun.com/imapig_/article/details/118085146</link><guid>https://blog.youkuaiyun.com/imapig_/article/details/118085146</guid><author>imapig_</author><pubDate>Mon, 21 Jun 2021 14:40:03 +0800</pubDate><description><![CDATA[TypeScript中函数的定义和规范一.函数的定义二.可选参数三.默认参数四.剩余参数五.函数重载
TS中的函数语法和JS（es5和es6的函数）的语法类似，多了TS的类型特性和规范，通过类型判断实现函数重载。
一.函数的定义
//1 函数的定义
 
//es6函数声明
f1(){
  console.log("hello world");
}
f1();//调用函数
 
//ts中定义函数  函数名(参数1:类型1,参数2:类型2,...) :返回值类型
//定义一个没有参数没有返回值的函数
f2():]]></description><category></category></item><item><title><![CDATA[TypeScript之interface定义对象（二）]]></title><link>https://blog.youkuaiyun.com/imapig_/article/details/117997593</link><guid>https://blog.youkuaiyun.com/imapig_/article/details/117997593</guid><author>imapig_</author><pubDate>Thu, 17 Jun 2021 18:34:02 +0800</pubDate><description><![CDATA[TypeScript语法的对象定义和使用一.JS中的对象二.TS中定义对象三.任意属性四.可有可无的属性五.只读属性
前面我们说到了基本数据类型，还有数组，枚举等类型，那么在typescript中是如何定义像JavaScript中的对象的呢？
一.JS中的对象
我们先来看一下在JavaScript中的定义对象的方式，定义方式如下：
//定义
let student = {
  name: '狗蛋',
  age: 18,
  eat: function () {
    console.log(this.n]]></description><category></category></item><item><title><![CDATA[TypeScript之数据类型（一）]]></title><link>https://blog.youkuaiyun.com/imapig_/article/details/117423136</link><guid>https://blog.youkuaiyun.com/imapig_/article/details/117423136</guid><author>imapig_</author><pubDate>Tue, 01 Jun 2021 12:01:03 +0800</pubDate><description><![CDATA[TypeScript基本语法一.数据类型的定义1.布尔类型（boolean）2.数值类型（number）3.字符串类型（string）4.undefined 和 null类型4.数组类型（array）5.枚举类型（enum）6.任意类型(any)和类型推断7.联合类型（多种类型）6.
没有废话，不讲背景，不讲定义。直接说语法。
一.数据类型的定义
Typescript中基本数据类型：布尔类型（boolean）、数值类型（number）、字符串类型（string）、undefined、null等。

定义的基]]></description><category></category></item><item><title><![CDATA[golang简单快速搞懂接口类型]]></title><link>https://blog.youkuaiyun.com/imapig_/article/details/117321273</link><guid>https://blog.youkuaiyun.com/imapig_/article/details/117321273</guid><author>imapig_</author><pubDate>Thu, 27 May 2021 11:24:33 +0800</pubDate><description><![CDATA[golang简单快速搞懂接口类型一.接口是什么二.接口的格式三.接口的实现四.实现后的使用五.接口嵌套六.空接口1.空接口存储任意类型的值2.空接口作为函数的参数3.空接口作为map的值4.空接口作为slice的值七.注意
一.接口是什么
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;接口(interface)是一种类型,一种抽象类型。它是一组方法的签名，是一组仅包含方法名、参数、返回值的未具体实现的方法的集合。当不同的父类具有相同的行为的时候，单一继承无法]]></description><category></category></item><item><title><![CDATA[简单vue父子iframe页面跨域通信传值postMessage()]]></title><link>https://blog.youkuaiyun.com/imapig_/article/details/117251112</link><guid>https://blog.youkuaiyun.com/imapig_/article/details/117251112</guid><author>imapig_</author><pubDate>Tue, 25 May 2021 11:18:42 +0800</pubDate><description><![CDATA[vue不同域名父子iframe间相互传值1.子页面向父页面传值2.父页面向子页面传值
1.子页面向父页面传值
a.vue 父页面    b.vue子页面

//b.vue 子级给父级发送数据
methods:{
	sendMessage(){
		window.parent.postMessage(data, "*");  //data传递的数据，“*”跨域的域名  *代表所有
	}
}


//a.vue 父级页面接受数据
mounted(){
//父页面监听发送过来的消息
	window.addEven]]></description><category></category></item><item><title><![CDATA[golang函数和方法的区别]]></title><link>https://blog.youkuaiyun.com/imapig_/article/details/117034238</link><guid>https://blog.youkuaiyun.com/imapig_/article/details/117034238</guid><author>imapig_</author><pubDate>Wed, 19 May 2021 17:36:45 +0800</pubDate><description><![CDATA[golang函数和方法的使用和区别一.函数二.方法
go语言的函数和方法的定义和使用都有一定的区别，但方法不过是一种特殊的函数。
一.函数
函数声明包含一个函数名，参数列表， 返回值列表和函数体。如果函数没有返回值，则返回列表可以省略。函数从第一条语句开始执行，直到执行return语句或者执行函数的最后一条语句。
// 类型相同的相邻参数，参数类型可合并。多返回值必须用括号。
//(func 声明函数  test函数名  第一个括号里:传入参数  第二个括号:返回参数 )
func test(x int, ]]></description><category></category></item><item><title><![CDATA[前端vue，js封装常用的各种方法，处理数组，对象，深拷贝，随机数，判断等等]]></title><link>https://blog.youkuaiyun.com/imapig_/article/details/116528656</link><guid>https://blog.youkuaiyun.com/imapig_/article/details/116528656</guid><author>imapig_</author><pubDate>Sat, 08 May 2021 15:34:26 +0800</pubDate><description><![CDATA[前端js在项目中封装各种常用的方法关于使用1.存取sessionStorage2.存取localStorage3.生成随机数和字母4.数组和对象深拷贝5.菜单数据组织6.阿拉伯数字转中文7.数字补0占位8.时间戳转化为 YY-MM-DD HH:mm:ss9.ajax错误处理10.文件大小换算11.下载文件12.图片、文件url对http的处理13.列表转树状14.数组去重15.数组对象去重16.数组按某一属性分组17.html实体字符转标签18.过滤掉html的图片和其他标签19.获取对象key并返回数组2]]></description><category></category></item></channel></rss>