- 博客(62)
- 收藏
- 关注
RSS订阅原创 我所理解的proxy
1.基本用法以上的代码为最基本的用法，主要知识点在于new Proxy接受两个参数，一个为目标元素，第二个参数为object，其中该object包含了set和get方法。或许会产生了一下的疑问:1.1 Receiver在get函数内部中我们可以看到 receiver === proxy 是为true的，那么在这个时候，就隐约感觉到它和this上下文有这关系。当我们在get函数中输出了this，此时的this是指向当前的对象(不是proxy对象，而是当前定义的set和get对象)接下来在看个例子：
2022-06-20 01:02:46
820
原创 ResizeObserver理解与用途
ResizeObserverResizeObserver 接口可以监听到 Element 的内容区域或 SVGElement的边界框改变。内容区域则需要减去内边距padding。（有关内容区域、内边距资料见盒子模型 ）换句话来说，ResizeObserver是可以监听到DOM元素，宽高的变化，需要注意的一点就是监听出变化结果是contentBox的宽度和高度。<!DOCTYPE html><html lang="en"> <head> <me
2022-05-09 11:15:11
6393
原创 我在lodash库中学习javascript编码技巧(dropRight)
鲁迅说过：只有阅读过优秀库源码的人，才能配的上是真正的勇士。dropRight创建一个切片数组，去除array尾部的n个元素。（n默认值为1。）_.dropRight([1, 2, 3]);// => [1, 2] _.dropRight([1, 2, 3], 2);// => [1] _.dropRight([1, 2, 3], 5);// => [] _.dropRight([1, 2, 3], 0);// => [1, 2, 3]funct.
2022-04-26 11:33:48
181
原创 我在lodash库中学习javascript编码技巧(flatten)
鲁迅说过：只有阅读过优秀库源码的人，才能配的上是真正的勇士。flatten函数，主要功能在于减少一级array嵌套深度，通俗的来说就是把数组给打平，并且该函数面试的过程中出现频率很高，主要是考察递归的使用。面试做法如下：function flatten(array){ return array.reduce((cur,next)=>{ return cur.concat(Array.isArray(next)?flatten(next):next) }.
2021-11-11 16:21:51
852
原创 在SassMagic中学习SCSS技巧(BEM)
鲁迅说过：只有阅读过优秀库源码的人，才能配的上是真正的勇士。BEMBEM是一种前端命名方法论，主要是针对CSS，意思是块（Block）、元素（Element）、修饰符（Modifier）的简写。这种命名方法让CSS便于统一团队开发规范和方便维护。BEM规定是块和元素之间用—连接，元素和修饰符之间用_连接在SassMagic中mixins下有个_BEM.scss文件，它把BEM拆分成为b,e,m这三个mixins。我们来看下它们是如何进行工作的。@mixins b($block){ .#{.
2021-11-09 17:51:44
827
原创 我在lodash库中学习javascript编码技巧(pull)
鲁迅说过：只有阅读过优秀库源码的人，才能配的上是真正的勇士。pull移除数组array中所有和给定值相等的元素，和_.without 方法不同，这个方法会改变数组。使用_.remove 从一个数组中移除元素。基础用法var array = [1, 2, 3, 1, 2, 3]; _.pull(array, 2, 3);console.log(array);// => [1, 1]其实该方法删除数组中指定的元素。在平时工作中，如果需要删除某个元素，可能会直接用到filter或.
2021-11-05 15:00:17
349
原创 我在lodash库中学习javascript编码技巧(difference)
鲁迅说过：只有阅读过优秀库源码的人，才能配的上是真正的勇士。difference创建一个具有唯一array值的数组，每个值不包含在其他给定的数组中。（注：即创建一个新数组，这个数组中的值，为第一个数字（array 参数）排除了给定数组中的值。）该方法使用SameValueZero做相等比较。结果值的顺序是由第一个数组中的顺序确定。换句话来说这个函数能够对比两个数组，并且以第一个参数数组为目标数组，第二个参数数组为过滤数组，最后返回过滤后的数据。function difference(arra.
2021-10-08 14:31:56
191
原创 阅读lodash源码之旅数组方法篇-compact和concat
鲁迅说过：只有阅读过优秀库源码的人，才能配的上是真正的勇士。compact创建一个新数组，包含原数组中所有的非假值元素。例如false, null,0, “”, undefined, 和 NaN 都是被认为是“假值”。注意以上的描述并不包括[],{}因为在js中，这个两个会进行隐式转换会把这两个值转换成为true。换句话来说该函数并不会去过滤这两个值。官方代码:export function compact(array){ let resIndex = 0; const result.
2021-01-24 11:59:27
184
原创 阅读lodash源码之旅数组方法篇-chunk
作用和用法将数组（array）拆分成多个 size 长度的区块，并将这些区块组成一个新数组。 如果array无法被分割成全部等长的区块，那么最后剩余的元素将组成一个区块。用法：_.chunk(array, [size=1])array (Array): 需要处理的数组[size=1] (number): 每个数组区块的长度demo:_.chunk(['a', 'b', 'c', 'd'], 2);// => [['a', 'b'], ['c', 'd']] _.chunk
2021-01-05 15:54:53
416
原创 vue造轮子之省份区联动下拉组件
业务背景在我业务需求中,需要有个省份区城市联动的组件，并且该组件的开发也是基于elementUi原有的效果上面去。在原有的elementui库中并没有这样的组件，所以也只能自己手写一个，效果如下：需求分析1.需要包含国内的省份，省份下面所对应的城市，城市下方所对应的区，街道不做要求。2.需要配置每个下拉列表是否可以选择状态，这个是需要更加具体场景进行分析，需要对外提高可控制列表是否可以选择。例如：一层选择了广东省后，某些场景广州市不能够被选择到。基础组件选择基础组件还是还是采用el-selec
2021-01-04 11:25:15
299
原创 js中操作树结构的数据
现在前端操作树的数据结构还是挺常见的，我在这里总结一下js树形结构常见的操作方式。我也把它做成了工具类库，github地址。一.遍历树结构的方式假设现在有如下的数据结构，我们需要去找到树结构的中某个对象的数据，常见的操作方式应该是用递归进行遍历查找，我认为这是最基本应该能想到的。let tree = [ { id: '1', title: '节点1', children: [ { id: '1-1', title: '节点1-1'
2020-12-12 23:53:41
4206
2
原创 vue造轮子之虚拟列表
前提:在我负责一个模块中，有一个是日志管理模块，它会输出很多很多的操作的日志，起初与后台对接对接的时候并没有考虑到性能渲染问题，只是简单的用v-for把所有的数据都渲染出来，那么这样导致的后果就是页面卡顿，这个原因是你的模块中渲染出太多的DOM节点导致，为了避免这样的问题我采取了虚拟列表来进行渲染。什么是虚拟列表虚拟列表就是一个按需渲染的过程，简单来说就是渲染你所看到的内容，对于你非可视的内容不进行渲染，达到性能的优化。在图中我们可以看到，你所能看到的就是元素7到元素14的内容，当我们的滚动条进行
2020-10-28 16:19:46
775
原创 vue造轮子之封装选择下拉树
最近公司有个新需求,希望能有一个下拉选择树的功能，大概的功能和样式如下所示:然后我的第一反应就是上elementui上找现成的组件，但是挺遗憾的就是element并没有提供这样的组件，所以只能自己动手造一个了。1. 组件需求(1) 支持单选和多选功能(2) 叶子节点控制是否能选择(3) 数据回显到选择框支持多选和单选显示(4) 支持树节点搜索功能(5) 基本样式应与elementUi样式保持一致2.布局和样式代码编写由于这个地方需要用到弹出下拉框，所以我就借助了el-popover来实
2020-10-22 14:51:39
535
2
原创 比较两个js数组对象是否相等
假设现在有两个以下的数组let arr1 = [1,2,3,4]let arr2 = [1,2,3,5]你现在需要去比较这两个数组是否相等
2020-08-31 11:18:35
1874
原创 vue中使用echart开发可视化功能
vue中实现ehart图表交互和图表展示 简介该模块也是平时工作中所负责的一个模块，目的是为了能够快速生成图表。在实际工作中的项目这是个主要为了绘制大屏所使用，在这里我选择抽了部分的功能与大家一起分享一下,里面的代码或许不是最好的写法，如果你有不同的写法也欢迎分享和提issues在线预览技术栈和插件选择该功能模块技术栈使用了vue,而只要使用到插件则是 echart+vue-drag-resize,echart是一款经典的图形生成库,它内置了许许多多的常见图表，用兴趣的朋友
2020-08-09 14:05:49
1021
2
原创 vue实现一个sku列表
最近接到一个需求类似于商城选购的一个sku列表，大致要实现的效果如下：sku的专业名词解释为:库存保有单位即库存进出计量的单位，可以是以件、盒、托盘等为单位。SKU是物理上不可分割的最小存货单元。在使用时要根据不同业态，不同管理模式来处理但我个人理解则为：当你选择到某一个属性，与这个相关的属性应该会发生相对应的变化，这里的变化指的是这个选项是否是可选。假设我现在的数据结构如下：data: [ // 库存 { id: "1", specs: ["紫色", "套餐一", "64
2020-05-28 11:20:09
3586
原创 vue造轮子之封装可编辑的tab选项卡
最终由于公司业务的需求，有一个新功能操作，就是双击选项卡头部让其变成可编辑的状态，点击其它区域则取消输入框输入，最终效果如下：双击选择：点击其它区域选择时：1.创建文件:在src/components下创建editTab,里面包含着editTabs,Tab.vue,还有index.js2.明确组件需求和编写规则我们要考虑这个组件给其它模块应该怎么使用，那么我这里就约定一下的使用规...
2020-02-28 14:03:38
1032
1
原创 vue造轮子之圆形进度条
在github上看到一个圆形进度条组件，比较适合于我现在的业务需求，然后就拷贝下来放进我的项目。但是cv程序员并不是我想要。所以就研究了一下它的源码，没想到的是源码竟然是如此简单和通俗易懂，先附上原作者的github地址和效果图。https://github.com/cumt-robin/vue-awesome-progress一.canvas基本用法由于该组件是基于canvas完成的，所...
2020-01-07 16:44:53
2833
3
原创 关于js去重的这点小事
关于数组去重的问题，应该是老生常谈了，现在网上也有很多版本是关于数组去重的。我在这里就列举一下常见和我自己的一个数组去重的方法。1.利用indexOf去重let arr = [1, 2, 4, 5, 2, 5, 7, 7];function unique(arr){ let res = arr.filter(function (item, index, array) { ret...
2019-12-29 13:09:33
151
原创 vue实现折叠组件-collapse
相信大家对于下面的列表形式应该不陌生吧，至少我个人在后台OA系统的时候就用到了，那么我来聊下这样形式的列表，应该怎么封装成为一个公共的组件。（代码参考了iview用于个人学习之用）一.列表组件参数设置每一个公共组件都应该约定好参数，定义好回调函数所传递参数。不应该与业务组件和业务逻辑相互耦合。这个组件的约定参数和使用方法如下： <Collapse v-model="value1" @...
2019-11-09 22:57:45
13644
原创 javascript设计模式-代理模式
代理模式是为一个对象提供一个代用品或占位符，以便控制对他的访问。代理模式是一种非常有意义的模式，在生活中可以找到很多代理的场景。比如，明星都有经纪人作为代理，明星不会主动与主办方谈论价格和演出的细节，往往是由他的经纪人出面，把商业细节谈好之后，再把合同交由给明星签名。而我通常使用到代理模式，往往是会在操作一些开销比较大的运算结果提供暂时的存储，在下次运算的时候，如果传递进来的参数与之前一...
2019-09-15 12:01:04
145
原创 javascript设计模式-策略模式
在我最近的一个项目中，有一个模块是关于表单校验的需求，需求大致是验证输入不能空，不能够重复的字符串等等，检验的规则大概有10种，而我的同事为了检验这样的表单功能，则编写大量的if-else代码，伪代码如下:if (value.length ===0) { // todo } else if (value.length < 6) { //todo } ...
2019-08-15 22:54:51
176
原创 javascript设计模式-单例模式
最近在重新修炼js的设计模式，发现平时自己所写的代码，无意中就使用到了某种的设计模式，所以特意记录一下，以便以后自己查看。一.单例模式单例模式指的是：保证一个类仅有一个实例，并提供一个访问它的全局访问点。单例模式，是一种很常见的模式，至少在我现在工作中经常用到。单例模式所强调的就是，有且仅有一个对象，并且这个对象是全局变量。那么，它的使用场景主要集中在登陆弹窗，内容提示框，loading...
2019-08-06 16:02:33
162
原创 关于浅拷贝和深拷贝的理解
在聊深拷贝和浅拷贝之前，我们先来看看以下这几个场景: let obj1 = { a: 1, b: 2 }; let obj2 = obj1; obj2.a = 3; console.log(obj1.a); //3 let a = "ceshi"; let b = a; b = "ceshi1"; console...
2019-07-22 11:02:41
240
原创 关于对Promise的理解
什么是Promise?Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise...
2019-07-07 16:06:51
192
原创 vue实现全局组件----$alert
在element中，有一些全局的组件，类似于this.message(),this.message(),this.message(),this.toast()这种，通过原型的方式挂载在vue的全局上面，以供我们全局使用，平时自己用的多，那么我现在就尝试自己来实现一下。一.普通组件方式我们实现一个普通的提示框(Alert)组件不难，一般都是这样写:<template> <...
2019-06-30 14:18:48
14292
原创 一个树形结构所引发的思考
今天碰到了一个这样的数据结构，如下:var cityData = [{ id: 1, name: '广东省', children: [{ id: 11, name: '深圳', children: [{ id: 111, ...
2019-04-17 10:11:26
244
原创 关于css布局的那些事-双飞翼布局
什么是双飞翼布局呢？简单来说，就是中间自适应宽度，两边有固定宽度。假设:有三个div,中间的div宽度是不固定的,两边的div各有200px宽度。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" cont...
2019-04-12 16:11:49
147
原创 vue项目中如何使用mxgraph进行可视化操作
最近公司需要使用mxgraph，来进行流程图的开发，由于我是第一次接触这个库，所以踩到的坑还是挺多，最坑爹的网上关于这个库的资料实在是太少了，它的文档还是英文文档。所以开发起来还是有点痛苦的。我们来看下以下部分需求：这是PM要我做的流程图，这里我会拿部份的功能和大家分享。包括新建图形，删除节点图形，响应右键菜单事件…由于mxgraph的套路是很固定的，只要你GET到这几个部分再结合文档，就基...
2019-04-11 17:00:45
6204
13
原创 Vue中的Provide/inject
今天做了项目中的登陆功能，按照我之前一贯的套路都是使用vuex这个状态管理插件来处理数据。然后，我就想了想，看下vue有什么其它的方法能够实现父子N多辈的通信。找了下api让我发现了provide和inject这个东西，哇靠，相见恨晚啊。哈哈。Provide/Inject是什么？provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。这对选项需要...
2019-03-12 18:06:57
3083
1
原创 原生js实现封装jquery(1)
虽然目前市面上jquery基本很少有公司使用（旧项目除外），基本上都是在使用MVVM框架，而我本人也是使用vue比较频繁。但是jquery里面实现的原理还是值得去学习和借鉴。那么我现在来记录一下我所封装jquery的一个过程。假设有以下的DOM节点,我先使用对象方法的形式来获取节点 &amp;lt;div id=&quot;box&quot;&amp;gt;box&amp;lt;/div&amp;gt;
2019-02-18 23:54:18
659
原创 node+mongoDb+Vue+elementUI实现资金管理后台系统(六)---前台的注册，登陆与token存储
我们利用elementUi为我们提供的UI组件进行快速编写界面，elementUI文档:http://element-cn.eleme.io/#/zh-CN/component/installationregister.vue 注册界面HTML模板<template> <div class="register"> <div class=...
2019-02-06 20:29:46
675
2
原创 node+mongoDb+Vue+elementUI实现资金管理后台系统(五)---数据增删改查接口
我们用户的所有操作都是要基于token来进行操作，所以我们在profile.js中引入passport模块const passport = require("passport");添加信息接口router.post("/add",passport.authenticate("jwt",{session:false}),(req,res)=>{ const profile...
2019-02-06 10:46:58
539
原创 node+mongoDb+Vue+elementUI实现资金管理后台系统(四)---增加身份字段和配置用户信息接口
增加注册身份字段前台注册的时候，是需要我们选择 不同的身份，然后对后台进行不同的操作，这也是一种权限的处理。在models/User.js下增加identity字段在routes/api/user.js下//@login & registerconst express = require("express");const router = express.Router(...
2019-02-01 12:13:21
693
原创 node+mongoDb+Vue+elementUI实现资金管理后台系统(三)---人物默认头像和登陆接口token设置
获取默认的人物头像我们安装gravatar模块，可以获取到人物的默认头像,官方文档如下https://www.npmjs.com/package/gravatar安装方式:npm install gravatar在routes/api/user.js中使用postman进行测试这个时候就可以获取到了默认的头像。登陆接口编写这里的登录，我们需要第三方jwt模块，实...
2019-01-31 20:53:26
696
原创 node+mongoDb+Vue+elementUI实现资金管理后台系统(二)---node连接数据库和编写注册接口
使用express搭建服务器在D盘下面创建一个文件夹node-app,并在cmd中运行。初始化文件，在cmd中输入npm init，选项直接回车键就可以了。使用的编辑工具是vscode,在cmd中直接输入code .可以快速打开该文件建立server.js和安装express在node-app下新建一个server.js并且通过npm安装expressserver.js...
2019-01-31 13:00:41
961
8
原创 node+mongoDb+Vue+elementUI实现资金管理后台系统(一)----mongoDB的安装与连接
今天和大家分享一下，一个node+mongoDb+Vue实现的一个小型后台管理系统。这个小系统采用的也是前后端分离。后端:node数据库:mongoDb数据库管理工具：robo3T1.2.1数据接口测试：postman前端:vue+vue全家桶+elementUI安装mongodbmongodb是一个开源数据库，可以从它的官网进行下载,https://www.mongodb.co...
2019-01-30 23:34:48
1520
4
原创 ajax的步骤与封装ajax
今天和大家聊下如何ajax的工作原理和如何封装ajax. 1.什么是ajax Ajax技术核心是XMLHttpRequest对象(简称XHR)，这是由微软首先引入的一个特性，其他浏览器提供商后来都提供了相同的实现。在XHR出现之前，Ajax式的通信必须借助一些hack手段来实现，大多数是使用隐藏的框架或内嵌框架。 简单来说，它是一门与服务端进行数据交换的技术。 2.何为同步...
2018-09-02 17:44:47
741
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人