- 博客(57)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 如何在前端开发时优雅的使用pipe
前言pipe其实是一种设计思想，经常被用于架构设计，也能体现‘函数式编程’ 思想 — 通过组合一系列的函数来完成一个既定的功能。而在前端开发中，本身强调 组合大于继承，所以掌握这种思想是十分重要的。实例pipe大概像如下那样使用// 假设有个三个方法，分别实现+1， 求与2的乘积，-1 这三个功能let add = n => n + 3;let multiple = n => n * 2;let minus = n => n - 1;// 假设现在有个pipe方法con
2020-12-30 12:45:17
1041
2
原创 惰性单例的应用
单例模式是比较常见的一种设计模式，基于此可以延伸出一个惰性单例的使用方法，以登录框为例// version 1 缺点是初始化时就会执行登录框的实例化，但是有时候这个动作不一定会触发const loginDialog = (function(){ const dialog = document.createElement('div') dialog.innerHTML = '登录' // 设置样式 dialog.style.display = 'none' dialog.style.xxxx =
2020-12-16 10:26:45
477
原创 如何在Vue中更好的复用组件
前言大多数前端框架都提供了组件化的能力，在日常开发中，我们经常会用组件去封装自己的业务逻辑，那么如何去写一个复用率高的组件就变成了一个重的技巧。这里总结一下，在使用Vue时，几种复用组件的方式。场景表单验证是一个经常碰到的场景，表单内的不同组件常常需要有相同的验证逻辑，比如验证值非空，这里就按照这个场景来举几个例子。使用MixinVue提供了 “混入” 这个方案来达到一个复用的效果，所以...
2020-05-11 14:09:58
2338
原创 JavaScript 设计模式 --- 迭代器模式
前言迭代器模式应该算是比较 “低调” 的设计模式了，因为这种模式在日常工作中经常遇到，但由于本身这种模式的思想十分简单，所以一般不会特别的去关注他。迭代器模式注重的是如何去迭代集合中每一个元素，大部分语言都内置了实现迭代器接口的数据结构，并且暴露出对应的方法供我们使用。JavaScript中的迭代器模式体现常用的数组就是一个可以迭代的对象，它提供了一个forEach方法可以让我们快速使用...
2020-04-26 19:19:06
202
原创 JavaScript算法系列 --- LRU 缓存机制
原题来自力扣，这里用到了JS中的Map这个数据结构。利用散列表和双向链表实现。力扣LRU原题var LinkNode = function(key,value){ this.key = key; this.value = value; this.next = null; this.pre = null;}var DoubleLinkedList = func...
2020-04-09 15:44:55
694
原创 JavaScript 设计模式 --- 发布订阅模式
前言对于前端同学而言，发布-订阅模式应该是最熟悉的设计模式了。平常写的最多的事件监听就是一个最好的例子。var dom = document.querySelector('xxx');dom.addEventListener('click', () => { //do something });dom.click();这里开发同学订阅这个dom对象的click事件，并且传入了一个...
2020-03-25 15:49:31
157
原创 JavaScript异步编程：Promise篇
前言异步编程作为JavaScript 中的核心内容，是必须要掌握的一个基础。在日常开发过程中，会有很多异步的场景。比如定时器，网络请求，事件监听等等… 而异步编程中让人诟病较多的一个点就是 callback hell...
2020-03-24 16:08:46
323
原创 JavaScript 设计模式 --- 策略模式
前言在我们编写业务代码时，分支结构应该是我们最常用到的结构了。下面先模拟一个简单的业务场景：要根据当前用户登录的身份（达人/机构/卖家）和对应的角色等级来展示用户的logo// 假设有这么一个基于React的logo组件<logo role={role} level={level} />// 假如内部的实现是这样子的render(){ const { role, le...
2020-03-18 18:17:49
167
原创 谈谈JavaScript的闭包
前言闭包（closure）这个概念总是那么晦涩难懂，这篇文章希望结合自己的经验来说说这个概念。作用域在谈闭包之前，作用域这个概念是一定绕不开的。但是这里并不准备展开来详细说明他。简单总结几点。JavaScript中函数能形成一个作用域。在使用某个变量时，会在当前作用域查找；如果没有找到，则向外层作用域查找，直到全局作用域。也就是说，变量的搜索是从内到外，而不是从外到内。变量的生存周...
2020-03-17 16:19:23
279
原创 函数防抖和函数节流
前言函数防抖和节流是前端经常会用到的两个技巧。在处理用户交互时，我们可以通过这俩技巧来限制事件或者网络请求的触发频率。1. 防抖前端和服务端交互场景中，经常会有一个输入关键字查找结果的需求，如果不做处理，可能会导致大量的请求到达服务端，并且大部分请求是没有意义的。这个时候我们就可以使用防抖来优化一下。我们希望的是在某个时间间隔内，假如事件一直被触发，则不执行相关动作，直到某一个事件的触发间...
2020-03-17 13:24:21
177
原创 JavaScript 继承实现的几种方式
前言继承，作为复用代码的一种有效手段，在面向对象编程中有着重要意义。但是这门脚本语言的确不像某些静态语言那样提供了真正意义上的基于类实现的继承方式，而是采用了一种基于原型的继承。这里将说说在ES5时，使用JavaScript来实现继承的几种方式。在具体讲这些方式之前，先预先说清楚几个概念。函数:在JavaScript中，通常每一个函数上都会有一个prototype对象，假如我们通过new这个...
2020-03-16 14:42:15
249
原创 bootstrap-select 使用踩坑
动态改变 bootstrap-select 数据源维护一个历史项目时，需要动态改变一个下拉框的options选项，这里使用了bootstrap-select 这个组件，开始再尝试了很多方法之后，都不能达到效果，这里直接给出解决方法，希望给看到的人少走弯路。<!-- HTML --><select class="form-control" id="contentTypeN...
2020-01-21 19:43:54
1296
原创 JavaScript算法系列-求一个数组的中心索引
给定一个整数类型的数组 nums，请编写一个能够返回数组“中心索引”的方法。我们是这样定义数组中心索引的：数组中心索引的左侧所有元素相加的和等于右侧所有元素相加的和。如果数组不存在中心索引，那么我们应该返回 -1。如果数组有多个中心索引，那么我们应该返回最靠近左边的那一个。思路：假如存在该中心索引i，那么此时记数组nums[]所有元素的和为sum，该中心索引左边的数列之和为left sum，...
2019-12-24 13:21:29
257
原创 JavaScript 算法系列---动态规划
很久之前接触过这样一道题目，总共有十层阶梯，从1层开始往上爬，每次可以上1层或者2层，问到10层总共有多少种方法?思路：这个问题就是动态规划的一个经典例子，所谓动态规划，就是把复杂的问题进行拆解，拆解成一个个子问题，而这类问题最后非常适合使用递归来解决。诸如这道题目，可以记到某层阶梯的走法为F(n)，那么到10层阶梯就是F(10)。 那么F(10)等于什么呢，这里进行假设，如果只差最后一次就可以...
2019-12-24 11:11:30
326
原创 写一个简单的generator执行器
对generator不熟悉的可以先看下相关的基础资料https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Generator在早些时候，generator + promise 可以比较优雅的解决JS中较为头痛的回调嵌套问题，并且为了解决让 generator 能够自动执行的问题，出现了诸...
2019-12-16 13:15:43
317
原创 git 设置不同平台行尾符号的问题
起因平常自己使用MAC来开发项目，但是有一天电脑罢工，无奈暂时使用了window电脑，在开发完成后想提交代码时，git就发出了一个警告：fatal: CRLF would be replaced by LF …一眼就明白了，想起来不同操作系统的行尾符号不同，windows下是CRLF，而MAC则是LF分析先去搜索了一些资料，了解到git可以设置如下配置项：# 拒绝提交包含混合换行符的文件...
2019-06-17 17:28:11
3059
原创 JavaScript中的宏任务和微任务
先来个例子如果能很快知道执行的顺序结果，那么说明你对这块的内容理解非常深刻。<div class="parent" data-spm="2.2.2.2"> <div class="child">123</div></div><script> var parent = document.g
2019-03-12 22:30:33
1498
原创 利用History来实现前端路由
之前写过利用Hash来实现前端路由的文章，这一篇是关于如何使用H5的history来实现一个前端路由Hash实现和History实现比较hash实现方式是通过锚点来改变浏览器的URL，体现在URL后面会加上#，并且可以通过window.onhashChange来监听这一变化，从而我们可以建立好hash值和对应回调函数的映射关系，然后可以通过点击a标签，实现在不刷新页面情况下，通过...
2019-02-16 19:29:18
1437
原创 JavaScript算法系列--- 找出数组中俩个整数，使得他们的和等于给定的另一个数
给定一个整数数组以及一个整数，从这个数组中找到俩个数，使得他们的和等于这个整数，最后返回这俩个数在数组中的索引举个例子array = [1,2,3,4];sum = 7;getIndexArr(array,sum);// [2,3]数组里面3和4的和刚好是7，所以返回他们在数组中的位置2和3接下来来做一个简单的实现。方法一：function getIndexArr(array,...
2019-02-15 23:00:02
1544
原创 关于跨域的几种解决方案
在前后端交互的过程当中，跨域是一个老生常谈的问题了，说说自己的一些理解。什么时候会发生跨域现象？跨域的产生，是由于同源策略的限制，xhr或者fetch这样的API都遵循这个策略，所以当我们在某个域的页面,比如 http://kasol.com,他通过xhr发起一个请求，指向http://aenvgiell.com，那么这个时候就会产生跨域现象，得不到想要的内容。需要注意的是，其实对于服务端来说...
2019-02-14 00:02:36
724
原创 基于webpack搭建一个React项目
最近接到需求使用React来搭建一个较为复杂的页面，所以先基于webpack来搭建了一个简易的初始结构。项目地址：https://github.com/Kasol/React4Webpack.git可以clone下来直接npm start运行。由于想从目录结构开始入手，所以没有使用React的脚手架来搭建。下面记录下探索过程的一些小坑。babel-loaderwebpack的关键配置就是...
2019-01-31 22:45:14
454
原创 git本地项目关联远程仓库
首先先初始化本地git仓库git init接着添加当前改动到commitgit add --allgit commit -m 'init'增加远程仓库的地址信息git remote add origin <Your remote URL>拉取远程master分支git pull origin master --allow-unrelated-his...
2019-01-30 16:47:35
183
原创 Node中关于如何热更新一个模块
最近做了一些基于Egg的web项目，在开发阶段，一般会在本地安装nodemon这样的工具，从而当我们改变一个文件时，他可以监听到这个改动，然后重新启动进程，将数据从硬盘里重新加载到内存中，所以我们新的改动可以应用到应用程序中去。这里不免想到一个问题，如果不重新启动的话，我修改了一个文件，怎么去应用最近的改动呢？首先先简单介绍一下require这个属性，当我们编写完Node.js代码后，被解释器...
2019-01-27 22:57:45
2248
原创 静态资源部署问题的一些思考
对访问静态资源的一些思考当我还是一个初入门的小前端时，对静态资源的引用方式就是理解为在HTML代码里面，通过一个link或者script标签，写一个相对或者绝对路径，去拿到对应的静态资源。比如下面这样：<link href="/static/kasol.css" />没有什么毛病，一切都是那么美好，打开浏览器查看network，发现状态码是200。但是问题在于，用户在访问...
2018-11-05 20:17:37
1258
1
原创 Vue中的filter和methods
Vue的filter与method有时候，我们会想在Vue中的filter通过this去访问这个Vue实例上的属性或者方法，但是这样是做不到的，因为此时这个this指的全局对象window。但是反过来，我们可以在methods去访问到过滤器的方法。由于过滤器分为全局的过滤器和局部的过滤器，所以分为俩种情况。全局过滤器比如我申明了如下一个过滤器Vue.filter('filterSta...
2018-10-09 19:53:30
8741
原创 Vue使用watch监听一个对象中的属性
问题描述Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动，触发相应的方法，比如 queryData: { name: '', creator: '', selectedStatus: '', time: [], },现在我需要监听这个queryData，我可以这样做：watch: { queryData: { ...
2018-10-05 10:52:54
97220
8
原创 ElementUI使用采坑之多个Popover
问题描述使用ElementUI的Popover，当存在多个Popover时，点击确定或者取消该over不消失的问题如下图： <el-popover placement="top" width="160" v-model="tipVisibles[index]" > <p>确定删除吗</p> &
2018-10-05 10:21:35
27873
8
转载 ESLint的规则说明
"no-alert": 0,//禁止使用alert confirm prompt"no-array-constructor": 2,//禁止使用数组构造器"no-bitwise": 0,//禁止使用按位运算符"no-caller": 1,//禁止使用arguments.caller或arguments.callee"no-catch-shadow": 2,//禁止catch子句参数与外部作...
2018-09-12 20:22:08
323
原创 页面编辑超时的处理
最近实现了一个小需求，有一个填写页面数据的功能，要求假如用户超过20分钟还没有操作的话，就要踢出该用户（不是重新登录），让他重新刷新页面或者重新打开一次，这么做的目的是：由于一个页面可能同时被多个人所编辑，所以为了避免多人保存数据时旧数据把新数据覆盖掉，一个页面同时被多人打开时，只有最先进来的人可以保存，其他人得排队等待，但是如果这个人一直不操作，也不能一直锁着页面，那么就应该踢出，重新排队。...
2018-08-22 20:49:31
1057
原创 基于node.js实现简单的单点登录功能
单点登录的简单介绍登录应该说是很常见的功能了，用户输入账号和密码，通过验证之后就可以正常访问到自己想要的资源。但是在某一些场景，比如一个大型的应用被拆分成若干个小应用部署在若干机器上，并且每一个应用都有需要被保护的资源，那么为每个应用都定制一个登录功能就显得较为繁琐了，而且对用户而言，每一次访问一个应用都要去登录，肯定体验是非常差的。要是登录过一次，就可以在访问所有互相信任的应用的资源就好了。...
2018-06-15 16:13:17
7196
2
原创 CSS中的布局
布局那些事两栏布局 很多情况下，要用到诸如左边固定，右边自适应这种情况，此时可以利用浮动来解决这个问题。 <div class="wrapper "> <div class="left"></div> <div class="right"></div>
2018-05-03 12:22:17
110
原创 css垂直水平居中小总结
水平居中 行内元素居中： 可以给它的父级元素指定：text-align：center，这样该子元素就会在水平方向上居中了。需要注意的是，会受该属性影响的只有inline／inline-block／inline-flex等拥有行内元素那样特性的元素。块级元素居中： 对于一个有固定宽度的块级元素，可以通过设置margin：0 auto；这样来实现,注意，这里的宽度不能少。使用定位来居中：
2018-04-27 14:19:33
129
原创 RBAC权限设计记录
权限设计小记（下）上次的权限设计说了一些大概的信息，这次我来说一些权限设计里面的小细节。关于菜单的状态控制 上篇说到过，关于菜单，有4种不同的状态，那么这四种状态是怎么样附加到菜单上的呢？这里我用的方法是：菜单先用同步的方式渲染出来，然后再通过JS脚本的方式，异步的去把菜单的状态数据请求过来，然后按菜单顺序把对应的状态附加到每一个菜单上。这里有一点要值得注意，因为菜单的顺序是可以被改...
2018-04-18 21:04:45
148
原创 RBAC权限设计记录
权限设计小记(上)最近的一个项目中由于业务拓展，不再接入使用集团内部的权限管理平台，而是自己实现了一套基于RBAC的权限设计系统。其中有一些经验很值得记录，这里分享一下自己的一些见解。场景 首先，自己接手的功能是提供了一个后台管理系统，能够针对目前这个平台现有的服务有一个统一管理的功能，其中也包括了服务本身的创建。而在建立起众多服务之后，也可以开放给用户来创建一个“应用“从而接入到...
2018-04-12 21:24:32
337
原创 关于node中的this，module，exports
接触到node后对于node中可以自由使用module和exports感到很神奇，再加上自己碰到的一些问题，做了一些总结，先抛出自己的一些问题： 场景1：const redis=require("redis");var client=redis.createClient("6379","127.0.0.1");client.on("error", (error)=>{ console.l
2017-11-21 16:26:24
1485
1
原创 元素的宽与高
今天想到了window和document的区别，window是指可视窗口，而document是指文档，在没有滚动条的情况下，获取window和document的高度应该是一样的$(window).height() === $(document).height()但是有滚动条的话，doucment的高度应该大于window的高度，并且这个差值一般情况下应该等于滚动条拉到最底部的scrollTop值，
2017-11-16 13:34:00
174
原创 Django中的forloop使用
在使用Django的过程中，有时候for循环里面需要写一些既定格式的文本，比如1,2,3这样的形式，但是最后一个文本可能不需要逗号，此时就可以使用forloop这个属性 {% trans value %}{% if not forloop.last %}，{% endif %}这样一来，最后一个循环出来的值，后面就不会带有逗号了
2017-08-04 16:41:02
743
转载 用css使图片垂直居中技巧
使用css使图片垂直居中技巧.box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:center; /* 针对IE的Hack */ *display: bl
2017-07-25 10:27:53
205
原创 字体图标的使用
先上代码： html文件<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><link href="font.css" rel="stylesheet" type="text/css"/><body> <header class="my-font icon-
2017-07-12 12:51:44
2058
原创 关于Linux配置django环境
由于工作需要，在测试环境下（linux）上配置Django，和同事捣鼓半天，现在自己记录一下备忘首先需要申请各种权限，略过~启动的时候要用admin下的Python解释器，这一点非常重要，我很懒就不上图了还有就是别忘了在相应目录存放logs/error.log文件，这个好了就大致OK了最后输入自己的ssh连接+/home/admin/ams/target/ams/env/python/bin
2017-06-30 16:25:58
231
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人