donggua_123的博客

最近部门开始完善分享机制了，每周不定时分享一些知识，不限于前端方面。下面是我这周的知识分享，既是一个总结，也是一个很好的内化过程，只当抛砖引玉了。...

前端中对于：文字超出tooltip展示，鼠标滑过气泡展示所有内容，这样的需求是很常见的，element-ui也有专门的组件el-popover要实现这样的效果，使用el-popover组件即可。<el-table-column prop="date" label="原始popover" width="180"> <template slot-scope="{row}"> <el-popover placement="top" trigger=

前端项目中很多时候会遇到这样的业务需求：所有的客户都有共同的一些业务需求，即基础需求 基础需求需要根据业务发展进行升级 在共同需求的基础上，每个客户又有不同的需求（客制化）如果只是一两个客户还好，在基础版本上分两份前端文件，分别维护。但是客户达到一定数量级后，比如5个、8个甚至更多，这时候这种机械的本办法就费时耗力了，如果再考虑到基础功能的版本升级需求，那这种方法就完全不行了（升级一个基础功能就要分别复制到每个客户的项目中，同步代码）。以上情况就是我司的实际情况，下面介绍一下我司用的方法，不一

现在的前端项目中对于element-ui的使用几乎已经是一个常规动作了，但是组件库中的ui组件不一定都能满足实际场景的需求，比如今天要讲的select下拉框选择组件。我们公司是做证券行业基础设施的，股票和证券的数量动不动就是上千，当使用select渲染的时候就会很有压力，我司大致3000条数据，全部渲染出来大致需要4s左右，并且多选模式时，选中和反选时会明显感觉卡顿，这在体验上是觉得不能接受的...

需求：运行监控图模块，模块之间用虚线或者实线连接，且带有箭头实现方法：1、canvas绘制2、echarts专业的表格软件（画带箭头的虚线有难度）3、svg方法4、leader-line插件5、背景图刚开始项目比较紧急，也没时间研究怎么划线比较好，就用了最笨的方法：背景图。就是让ui出一张背景图，只留下线条和背景色，其它元素的位置通过配置数据来动态渲染 ...

这还要从一道面试题说起，请问下面两种情况分别打印什么：let arr = [1,2,3,4,5]for(let i in arr) { console.log(i) // 0,1,2,3,4} for(let i of arr) { console.log(i) // 1,2,3,4,5}可以看到，for in遍历的是数组索引，也是数组的键，for of遍历的...

现在vue项目基本上都是使用axios进行请求操作，但是axios有时候并不能完全满足业务的需求，因为官方axios只支持一些比较规则的请求参数和方式，比如body类型的post，params类型的get。而实际业务中后台给的接口可不会那么如你所愿的规范，当后台同事肆意挥洒，尽情装逼，完全是即兴发挥，不考虑前端感受的时候，往往给出来的api接口是很变态的：get方法的url后面拼接参数...

1、条件判断Array.includes()这是业务中最常见的情景之一看代码：function isOk(color) { if(color=== 'red' || color === 'yellow') { return true; }else { return false; }}一个简单的条件判断，如果判断条件较少时，...

前段时间遇到一个需求，需要在H5页面中增加下载文件按钮，下载一个压缩文件，第一个想到的当然是最普遍和常用的方法：动态生成a标签，把链接地址给到href属性，触发一个click事件，完美下载。于是撸起袖子就开干。由于文件数据是通过接口请求回来的数据流,application/octet-stream类型，需要转换一下来使用： download() { ...

最近遇到一个需求：前端定制化生成合同模板，生成时可以在指定位置拖放指定的控件，可动态编辑指定控件的属性和位置，最后将控件的位置等属性传给后台，后续使用模板签署合同时，乙方可在模板上指定位置签署。点击左边控件列表=》添加控件到文件上=》点击文件上的控件激活该控件=》编辑该控件的相关字段=》提交数据控件类型有多种，支持多个控件同时添加，文本类型支持长宽拉伸设置刚好有一个很好用的v...

1、文字只能放在text里面，包括字体图标&lt;text class="main-icon icon"&gt;&amp;#xe7b8;&lt;/text&gt;2、cell不支持任何样式，高度随内部子元素样式撑开，margin登也在内部样式设置3、css样式不支持嵌套写法： .icon-big .icon{ font-family: iconfont; ...

在vue中，v-model是用来进行数据双向绑定的一个语法糖，比如说用在input上，输入框数据变化，v-model绑定的对应的值也会跟着变化，无需单独获取。其实v-model还可以在自定义组件中使用，可以被拆解为props:value和event：input，也就是说组件必须接收一个value值以及名为input的自定义事件，就可以在自定义组件上使用v-model了。新建一个组件Inpu...

在pc端，页面超过可视区高度后便会有滚动条，那么回到顶部的功能就必不可少了。现在我面临的情况：1、点击回到顶部，默认隐藏，滚动超过一定距离才显示回到顶部icon2、部分页面不需要回到顶部功能，比如登录、修改密码等模块；3、滚动效果的实现使用的是element-ui的scrollbar组件，看了下源码，并没有向外派发任何事件，仅仅实现了滚动效果，不提供诸如下拉刷新、回到顶部、返回滚动...

现在越来越多的开源工具使得开发效率大大提高，让开发者从繁琐的样式编写等工作中抽离出来，专注于前端逻辑的编写，很多时候只需要找到不同的工具、零件，按照自己的业务需求拼装在一起就是一辆很棒的车。只是不同的工具，组件也好、插件也好，都是由不同的人员开发维护的，属于独立的项目，但当我们要造车的时候，拿过来的零配件可能就有些地方无法相互兼容，比如多了个凹槽，导致两个零件无法很好的组装，这就需要手动去抹平这些...

在面向对象的编程中，最常用到的就是this关键词。this是在执行函数时绑定的，而不是在声明的时候绑定的，他的上下文取决于函数调用时的各种条件，和声明的位置没有关系，只和调用的位置有关。this有四种绑定方式：第一种：默认绑定var a = 9;function abc() { console.log(this.a)}abc() // 9在这段代码中，this....

小组刚完成一个小程序项目，第一版正式发布了，过程中也遇到了很多问题，这里记录一下我负责的模块中的购物车功能的实现过程。后期再把其他小伙伴的模块也一并贴上来分析一下，自己也学习一下他们的独门技能！效果图如下：在这里，计数器、购物篮做成组件用于复用，由于左右联动的功能在另一个模块也有用到，所以就把这个功能也做成了一个组件，传入不通的数据即可，左右联动的实现方法在之前一片博客有写到htt...

今天做一个需求的时候发现一个问题，原型需要做出这样的布局效果首先想到的肯定是flex布局display: flex;justify-content: space-between;flex-wrap: wrap;嗯，确实达到了效果，完美！！但是当数据不是4的倍数的时候，就出现问题了可以看到最后一排依然遵循均匀铺开在父级宽度里面，但这显然不是我们想要的效果如果...

有时候后我们会需要在一个新窗口打开页面，而我们都知道，vue是单页面的应用，通过router在内部跳转的。但是依然有办法实现这个需求。刚开始在网上找了一下，有两种方式，一种是给outer-link标签添加tag=a跳转打开新窗口,亲测有效。&lt;router-link tag="a" target="_blank" :to="{name:'detail',query:{goodsId:'...

用axios请求后台数据的时候，默认的头部配置是Content-Type： application/x-www-form-urlencoded;charset=UTF-8这样的话，data的配置格式和传递的格式就是一样的，都是是json键值对data：{"token":"eff6cd7f98a447daf14441c994913e46","ShopId":"2002094561039...

vue项目中，组件间的通信是最常用到的，也是面试必问的问题之一。组件通信可以分为几种类型：1、父子通信 1.1 父传子 1.2 子传父2、跨级传递 2.1祖父传孙 3.1孙传祖父3、同级组件间通信首先说一下通用的方式，即不管哪种场景都在功能上可以实现，撇开具体场景的适合程度，其实也就是全局的通信方式。一、vue bus 以vue实例为总线，...

一说到javascript里的闭包，大部分人都好像有所耳闻，但又说不太清楚到底是个什么东西。那么闭包到底是何方神圣呢？闭包是javascript中非常常见，但是又非常神秘的一个概念，有多少人像我一样，看了好多关于闭包的技术文章，却始终没能彻底搞懂闭包的深层次原理，经常是面试前突击一下闭包相关的文章，似懂非懂，过段时间后又几乎全忘了，只留下些残破的似是而非的记忆。今天我尝试着来总结一下我自己...

问题的出现：1、冲突      在我们编程的时候，随着项目越来越庞大，越来越复杂，参与的人员越来越多的时候，对于函数的命名就非常容易产生冲突。      比如领导交给我们一个任务，去开发一个组件库，可以拿来公用的库类型。那么A同事可能就去写一个外部的common.js,里面构造一些函数，如：function a(){}function b(){}function c(){}

前端工作中对于权限的需求是难免的，最近项目中就有这样的需求了。后台管理员可以新增前台成员，不通的成员具有不同的权限，有权限的人员可以看到一些操作按钮或者数据列表，反之则看不到。那么也就是说，前端需要根据登录用户的权限来渲染指定的dom。1、components文件下新建authorized文件夹，文件夹下新建auth.js校验权限const checkAuth = (authNa...

extend()是一个全局构造器，生成的是一个还没挂载到页面元素上的组件实例。在全局挂载插件的形式全局注册，就需要用到vue.use（）方法，官方文档：所以插件必须是一个对象，并且提供install方法，注册的时候自动调用该方法。所以组件的写作步骤就清晰了一些了，实践出真知，现在就来练习一下写一个简约版的全局alert弹框1、在components文件夹下新建alert文件夹，...

项目中使用element-ui时，message弹框功能是必须使用的，有时会在点击按钮时提示无权限，或者请求报错时给出适当提示：但是重复点击按钮或者同一个页面多个请求同时报错时，就不美观了可以看到，element-ui是动态往页面根节点插入message元素来实现弹框效果的，都拥有el-message属性那么我们就可以通过判断页面中message的个数来决定要不要弹出第...

1、文字下划线的实现可以使用原生api：text-decoration:underline.words{ font-size: 22px; text-decoration: underline;}但是没法调整下划线和文字的间距，太贴文字了也不好看2、于是就有了第二种方法：边框法，就是利用元素的下边框实现下划线的效果，还可以通过line-height调节距离...

工作当中时常会遇到对文件的一些处理，比如下载表格、下载图片、下载文件等，这里说一种下载压缩包的方法。其实也很简单，需要用到一款插件jszip，官方用法都是有的：https://www.npmjs.com/package/jszip可以直接引入脚本：<script src='./jszip.js'></script>也可以在vue项目中直接安装，运行：...

项目中难免会遇到预览文件或者下载文件的场景，如果后台返回的是base64或者图片格式还好说，文件信息直接放在返回body里，作为对象属性给到前端，很直观，也方便取用。但后台给到的是文件流就要麻烦一些了，一般来说文件流会直接凡在res.data里处理这种特殊返回值时需要设置axios的responseType为blob，防止axios内部默认处理返回值，导致无法解析：axios.g...

vue项目中我们很多时候需要刷新页面，比如本地用户信息更新后，或者需要重新加载当前页面的数据时，使用window.location.reload()或者window.history.go(0)方法都是整个窗口的刷新，和h5快捷键一样，会有短暂空白出现，体验很不好，这里说两种在vue项目里使用的无感知刷新页面方法：一、provide/inject方法父组件中provide提供的属性可以在任何...

问题：h5页面，在ios系统中，拖动顶部固定元素（红色区域）时，会默认拖动整个浏览器，导致出现白色背景，影响到自定义的滚动事件（橙色区域），因为自定义滚动是用了ui框架的，会导致其短暂的无法滚动，必须要等整个页面停稳了才能滚动橙色区域，影响到体验。这应该是ios系统自带的缓动效果，当用户拖动页面元素时给了一个回弹吸顶的效果，显得更加柔和，但有时候我们是不需要的。想要的效果：到顶后继续向下滑...

在做一个实战项目时，首页是一个商品列表页，引入better-scroll实现滚动效果 import BScroll from 'better-scroll';mounted() { this._initScroll(); },methods: { _initScroll() { this.$nextTick(() =&gt; { ...

vue开发的时候，我们经常会有这样的需求：开发一个详细页面来展示商品的详细信息，根据列表页传入的id进行请求，拿到对应的数据进行渲染。但是一般在路由上都会加上keep-alive保持数据的状态，除非强制无缓存刷新，这就导致第一次进入详情页面时，可以在created中拿到id，但是返回后，再点击进入，就不会再走相应的生命周期了，无法拿到新的id这时候可以使用vue的$destroy()方法这是vue...

最近公司要开发小程序，趁着ui还没出来，先把一些功能实现一下。其中有一个功能，需要左边的导航栏和右边的内容对应联动，其实就想饿了么外卖的选单界面，但是在小程序里实现又有点不同了。最终效果如图（丑是丑了点，关注功能就好）右边内容容器是可以滚动的，可以使用小程序提供的scroll-view组件，要强调的是，必须给节点设置高度滚动的问题好解决，那么联动呢？我们需要的联动必须是左右相互的，即点击导航栏，内...

当我们写了这样一个结构的时候&lt;div class="box"&gt; &lt;p&gt; 拉开了就开始的放假老实交代方会计师 拉开了就开始的放假老实交代方会计师 拉开了就开始的放假老实交代方会计师 拉开了就开始的放假老实交代方会计师 拉开了就开始的放假老实交代方会计师 拉开了就开始的...

今天在做一个移动端的H5页面时，在chrome浏览器上模拟时，在手机qq浏览器以及其它手机端浏览器布局都没啥问题：但是当我在qq里面用其内嵌的浏览器打开的时候确是这样的：没有按我的预期居中排布，偏右了。我的宽度和定位都是用的rem，猜测应该是内置浏览器对于rem的定义不同，但也不对啊，rem是根据屏幕宽度计算出来的啊： (function ()

keywords,description(经常用到的两个)页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开meta name="keywords" content="HTML,CSS,JAVASCRIPT,PHP">meta name="description" content="html meta标签大全,整理一下加强记忆">123123Conte

最近同事做的一个项目用到了window.open来打开新窗口，但是客户说有打不开网页的情况出现，我便帮他搜罗了一下window.open的资料，转载于此，对比与a标签的href链接跳转，后者没有那么多问题，最好还是用a标签吧。window.open() 的作用是创建一个新的浏览器窗口用来打开相关的资源，这是一个原生的 Javascript API 接口。有关 window.op

3.2 缓存的实现原理3.2.1什么是Web缓存WEB缓存(cache)位于Web服务器和客户端之间。缓存会根据请求保存输出内容的副本，例如html页面，图片，文件，当下一个请求来到的时候：如果是相同的URL，缓存直接使用副本响应访问请求，而不是向源服务器再次发送请求。HTTP协议定义了相关的消息头来使WEB缓存尽可能好的工作。3.2.2缓存的优点减少相应延迟：因为请求从缓

bezierCurveTovar c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.beginPath();ctx.moveTo(20,20);ctx.bezierCurveTo(20,100,200,100,200,20);ctx.stroke();开始点：moveTo(

“假设我是女娲，我准备捏一些人，首先，人应该有哪些基本特征：1.有四肢 2.有大脑 3.有器官 4.有思想 我们就有了第一个模型，这就是抽象。（非常模糊、笼统的一个概念） 其次，我和西方上帝是好友，我想我的这个想法能够提供给他用，但是我不想让他知道里面细节是怎么捏出来的，用的什么材料，他也不用考虑那么多，只要告诉我他要捏什么样的人就可以了。这就是封装。（就像插件或组件一样，不用知道