自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(92)
  • 资源 (3)
  • 收藏
  • 关注

原创 基于vue-element-ui的一款表格设计器table-making

简介如果你的项目中有很多的表格,即使用elment-ui table插件你也必须每次都必须写一遍代码进行开发,如果你使用过表单设计器,你就会希望能得到一款像form表单设计器一样可以通过拖拽配置快速生成一个表格,table-making就是一款不错的表格设计器。参照form-making的源码,并可以集成进form-making中配合表单或其他可视化工具中使用快速设计出表格,并且可以在vue项目中渲染。该插件包含两个重要组件TableMaking 表格设计器GenerateTable 表格渲染器g

2020-07-05 19:28:20 8742 3

原创 easy-mock本地搭建指南

文章目录前言一.准备工具1.下载node2.下载mongodb3.下载Redis4.下载easy-mock二.安装1.node安装2.mongodb安装1.安装2.配置环境变量3.创建存放数据库数据的文件4.验证4.安装redis1.安装2.配置3.启动服务5.部署easy-mock三.验证使用easy-mock感言前言对于前端来说前后端分离的项目选择一款mock工具非常必要,一直以来easy...

2020-04-15 19:13:24 1370

原创 寒冬降临程序猿们如何过冬

年初一直在追美剧权游,在前几季中出现最多的一句话是:“The winter is coming”,结合当下,整个互联网行业已经是:“Winter has come”,如果正在看这篇博文的你和我一样都是这百万互联网从业人员中的一员,此时此刻你应该或多或少已经感同身受,或者从侧面路径已经了解到这刺骨的寒潮!笔者是名85后没有赶上02年那波寒冬,却经历了近十年的盛夏,从毕业至今可以说有幸见证并参与了这...

2019-12-20 15:24:07 416

原创 docker基础实战之如何从仓库拉取运行镜像做本地修改并上传到仓库

前言前端工程化已经是大势所趋,如何用dokcer快速搭建前端的开发环境,并持续集成是前端人员要学习修炼的必备技能了,本篇博文将分享本人在联系docker时的一个基础案例,通过它使你快速理解docker的本质;使用的官方演示镜像 docker/whalesay目标:如何从仓库拉取运行镜像做本地修改并上传到仓库1.配置镜像加速器此处我们使用阿里云的docker镜像加速器1.申请加速器可在...

2020-03-23 18:40:42 3044

原创 如何用docker快速搭建大型开源项目(tuleap)的开发编译环境

文章目录前言二.mac上安装docker1.下载docker安装包2.配置docker镜像加速器3.检查安、装配置结果二.构建docker基础开发环境node镜像1.编写dockerfile文件2.通过dockerfile文件创建docker镜像三.github上拉取开源项目tuleap源码四. 用本地源码路径挂载基础开发环境 docker 容器五.拉取tuleap docker镜像运行lueap...

2020-03-23 16:20:15 1447

原创 前端进阶所必须具备的知识主干

当你开始跻身架构师工作岗位时,你就深切的体会到程序员进阶的心酸,你要掌握的东西绝非摸一个项目领域知识点的综合掌握程度,虽然原则上来讲没有人能够独自解决所有问题,但是我们更希望找到一个人能够解决更多的问题,即使不能立即解决,凭借自己已有的知识水平判断出可能的问题所在,继而制定调查计划,主导调查方向,得出科学结论;与此同时你要明白,但凡你不是在做全世界顶尖的科研攻关,那么你所遇到的问题90%以上是别人...

2020-03-18 11:40:44 165

原创 vue自定义插件库及NPM集成实例

文章目录一.如何封装vue插件1.为什么要自定义编写插件2.插件和组件的差别3.构建环境4.插件编码1.msg组件2.自定义button按钮组件3.注册组件5.插件使用6.效果二. 上传npm一.如何封装vue插件1.为什么要自定义编写插件相信做过vue开发的人员,肯定有应用别人的插件在自己的项目中,使用中你会发现没有完全100%符合自己项目场景的插件,可能一个小功能你引入了一堆无用的代码无...

2020-03-17 17:53:07 568 1

原创 vue如何利用vue-server-renderer做服务端渲染

本篇博文初步探索使用vue-server-renderer做服务端渲染一个最简单的页面,学会如何用vue做ssr环境准备koa,koa-router,vue,vue-server-renderer cnpm install vue --save cnpm install vue-server-render --save-d cnpm install koa --sava cnpm in...

2020-03-16 17:45:40 2616

原创 利用koa和pug及ejs完成一个简单的ssr页面

服务端渲染已经成为线上系统极力推崇的前端优化方案,比起crs客户端渲染ssr具有天生seo优势,而且首屏加载提升,目前最流行的ejs及nuxt框架都是基于ssr的封装,本篇博文将最原生的服务端渲染方式进行demo演示,以加深对服务段渲染的理解。环境构建koa,koa-router, koa-views,pug,ejscnpm install koa --save-d cnpm instal...

2020-03-16 16:32:29 1129

原创 如何用"状态模式"优化代码

状态模式定义在状态模式(State Pattern)中,类的行为是基于它的状态改变的。这种类型的设计模式属于行为型模式。在状态模式中,我们创建表示各种状态的对象和一个行为随着状态对象改变而改变的 context 对象。使用场景意图:允许对象在内部状态发生改变时改变它的行为,对象看起来好像修改了它的类。主要解决:对象的行为依赖于它的状态(属性),并且可以根据它的状态改变而改变它的相关行为。...

2020-03-12 17:54:26 235

原创 js程序设计中如何保证代码的健壮性

相信已经入门的开发人员,大多数开发人员在写代码的时候基本上一上来就考虑业务逻辑的实现,脑中被业务流程全部占据,如果你基本功不够,没有在业务流程之外的程序健壮性予以考虑,则后期必然会导致很多bug,只有等待测试发现,而很多的测试依然是基于功能的黑盒测试,对于很对异常系问题不能完全测到,一个高素质的程序员无论在写任何业务流程代码,基本的程序健壮性是必不可少的硬实力。而很多基本的健壮性处理是共通的,只要...

2020-03-12 17:23:48 683

原创 贪心算法解决青蛙跳问题

题目描述一只青蛙一次可以跳上1级台阶,也可以跳上2级……它也可以跳上n级。求该青蛙跳上一个n级的台阶总共有多少种跳法。分析1层 只有一种跳法2层 :1,1;2两种3层:1,1,1;1,2;2,1;3;四种4层:3层的没一种跳法 再跳一层与之组合 及发f(3)+f(3)*15层:4层的所有跳法在条一层与之组合f(4)+f(4)*1易知 f(n)=f(n-1)+f(n-2)+……f(1...

2020-03-10 17:22:01 837

原创 递归优化策略

很多程序员都慎用递归,因为少不注意就会造成内存崩溃,其实只要做到递归优化就回尽可能避免经典问题 求斐波那契数列第n项,n从0开始不优化:function Fibonacci(n){ // write code here if(n == 0){ return 0; }else if(n==1){ return 1 }else{...

2020-03-10 15:45:32 188

原创 js如何用两个栈模拟队列

用两个栈来实现一个队列,完成队列的Push和Pop操作。 队列中的元素为int类型。分析队列特性:先进先出栈:先进后出js中我们用数组实现栈,单个数组 压栈push(),出栈pop(),js中同样用数组实现队列,入队 push(),出队shift(),如果用两个栈(数组)则我们只需要将另外一个数组reverse()代码两个数组实现let stackA = [];let sta...

2020-03-10 14:16:50 552

原创 如何通过二叉树的前序和中序遍历生成二叉树

牛客网上的一道练习题:输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树。假设输入的前序遍历和中序遍历的结果中都不含重复的数字。例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7,2,1,5,3,8,6},则重建二叉树并返回。以上就是我们的需求,关于树的相关基础知识请移步本人博客js高级进阶之数据结构“二叉排序树”的es5和es6实现与应用...

2020-03-09 17:28:25 1960

原创 如何使用Node进程管理器PM2

使用node开发web项目如果直接用node框架部署(小项目或者开发测试阶段)如何使部署进程稳定而且多个进程同时运行,使用pm2很方便实现。本篇博文详细介绍pm2的使用技巧。1.pm2简介PM2是一个带有负载均衡功能的Node应用的进程管理器。PM2可以利用服务器上的所有CPU,并保证进程永远都活着,0秒的重载,部署管理多个Node项目。PM2是Node线上部署完美的管理工具。日志管理:...

2020-01-22 14:48:53 324

原创 如何用vscode编写Markdown文件

开始写博客已经有一段时间了,用Markdown也算的心应手了,但是对于一名专业的开发人员,用编辑工具ide写文档是个基本功,虽然项目中各种设计需求文档都是word的但日常开发维护中组内使用最方便的莫过于markdwn了,本篇博文详细介绍如何用vs编写markdown文本。1.安装Markdown插件对于开发人员,相信使用安装使用vscode能力肯定具备,所以本篇就直接掠过vscode的安装步骤...

2020-01-22 14:14:04 6536 2

原创 mac安装node 版本管理器nvm

一直一来都是使用windows系统进行开发,前不久鸟枪换炮买了新的mac做开发用,上来第一步安装node版本管理器竟然非常不顺,记录一下。文章目录1.首先确认你在安装nvm之前是否已经安装过node2.打开终端输入:3.配置 bash_profile文件4.关闭终端,再次打开终端(必须哦)输入 `nvm list`5.nvm 安装node6.nvm 检查一安装的node7. 切换node版本8....

2020-01-22 11:46:56 909 1

原创 js Object 所有知识点汇总

在js中所有对象都是Object,可以说他是js的灵魂+核心,几乎所有js数据类型的问题往上倒三代必然就会面对它,es6新语法也是着重在object上进行了扩展,另外目前流行的vue,react,angular框架基本上都引用到object的新方法,本文就Object灵魂三问:Object是什么?Object有哪些属性方法?Object这些属性方法怎么用?做一个全面的整理总结:文章目录js中Ob...

2020-01-21 16:40:58 1271 1

原创 node基础知识点总结2

常用工具,命令1.0 nvm常用命令nvm项目地址:nvm-github地址查看所有已安装的本地的node版本nvm list切换node版本nvm use 版本号安装指定版本的nodenvm install 版本号 位数卸载已安装的指定版本的nodenvm uninstall 版本号1.1模块的分类模块分为核心模块、文件模块,其中包是一种特殊的文件模块核心模块...

2020-01-20 18:03:10 138

原创 Node.js 事件循环机制

事件循环原理Node.js 是单进程单线程应用程序,但是因为 V8 引擎提供的异步执行回调接口,通过这些接口可以处理大量的并发,所以性能非常高。Node.js 几乎每一个 API 都是支持回调函数的。Node.js 基本上所有的事件机制都是用设计模式中观察者模式实现。单线程类似进入一个while(true)的事件循环,直到没有事件观察者退出,每个异步事件都生成一个事件观察者...

2020-01-20 17:37:28 200

原创 node基础知识点1

Node.js 基础知识点Node.js 是什么JavaScript 运行时既不是语言,也不是框架,它是一个平台Node.js 中的 JavaScript没有 BOM、DOMEcmaScript 基本的 JavaScript 语言部分在 Node 中为 JavaScript 提供了一些服务器级别的 API文件操作的能力http 服务的能力总结Node ...

2020-01-20 17:20:16 116

原创 2020开年最火css效果实现

1.交错动画有时候,我们需要给多个元素添加同一个动画,播放后,不难发现它们会一起运动,一起结束,这样就会显得很平淡无奇。那么如何将动画变得稍微有趣一点呢?很简单,既然它们都是同一时刻开始运动的,那么让它们不在同一时刻运动不就可以了吗。如何让它们不在同一时刻运动呢?注意到CSS动画有延迟(delay)这一属性。举个栗子,比如有十个元素播放十个动画,将第二个元素的动画播放时间设定为比第一个元素晚...

2020-01-20 14:30:25 414

原创 详解es6中set,map,WeakSet,Weakmap的区别和用法

set,map,WeakSet,Weakmap 在js的使用频率越来越高,特备是一些新框架的源码中,本篇博文将其基本用法和区别做一总结,加强记忆。set在js中Set 对象允许存储任何类型的唯一值,无论是原始值或者是对象引用。顶层数据结构不具备key—>value特征,内部会自动加index序列。可以存储不同类型的任何数据。如何理解唯一性:对于原始数据类型(boolean,nu...

2020-01-17 16:51:45 2012

原创 es5和es6面向对象继承的最佳实践,附可以判断继承关系的方法

js实现对象的继承是开发人员迈向高级的重要基础,本文就es5和es6实现对象继承的最佳实践方式做一总结。es5最佳继承模式“寄生组合”关于es5多种继承方式实现的比较不太清除的,请移步“ES5面向对象js实现继承的最优方式”如果对es5与es6定义对象不清楚的可以移步“es5和es6定义对象比较”。我们用es5继承的最佳实践“寄生组合方式”实现Person 和Gcc的继承关系: let ...

2020-01-16 16:17:23 624

原创 为君一日恩,误妾百年身。寄言痴小程序猿,慎勿轻进外包门

年关将至,不久前刚刚遇到我大学时的老乡+同学小猿(化名),笔者家在西北是在帝都上的大学,同专业相同地方来的同学当时就我们两个,记得当年身在他乡倍感零落之际,从军训开始认识他,我们就结下了难忘的友谊,因为当时我们两个的高考成绩竟然一模一样,后来在同专业各类考试中我就不自觉地将他视为我的第一参考对象,有幸当时我们都不曾荒废学业,每次专业排名我们都很靠前,这也就间接诞生一个悲剧,要拿到奖学金我俩就要相爱...

2020-01-15 18:31:34 4295 6

js高级进阶之深浅拷贝详解与es5 es6实现

js中对象的拷贝非常重要,如果理解不深入必将写出致命的bug,本文将总结之前项目开中中用到的所有拷贝方法进行总结。对象拷贝的本质原因由于js创建对象进内存的机制,原始数据类型 Undefined,Null,Boolean,Number、String 五类是直接进栈保存的,因此对这五种类型的数据赋值操作是内存里直接复制结果值保存,而object类型的数据都是引用数据类型,栈内保存的是地址引用,实...

2020-01-15 16:05:15 537

原创 es5和es6定义对象比较

js中定义对象有多种方法再加上es6的新方法,难免使用时让人摸不着头脑,本篇博文对经典的集中对象定义方法做一次总结,最主要是和es6进行比较加强理解。es5定义对象:Object构造函数、对象字面量、工厂模式、构造函数模式、原型模式、组合模式。es6:class定义类。es5定义对象对象字面量使用对象字面量创建对象的写法简单直观,所以定义一个对象的最简单方式就是对象字面量,它是通过在一个...

2020-01-14 16:35:18 658

原创 全网最佳优惠券使用算法

每逢过节网上购物,不论哪个平台都会发放很对优惠券,如何在结账时最合理的使用已有的优惠券平台是不会告诉你的,作为程序员的我们写一套算法得到最优使用方法是一件很有趣的事,关键是目前全网好像没有比较靠谱的答案哦!理想状态下的最优使用券算法首先看下最理想状态下的优惠券使用算法,假设客户手中有[1,2,5,10,50,100]6种优惠券,而且每种优惠券个数无限(银行),此种情况类似银行给客户兑现金,我...

2020-01-13 17:44:22 9199 3

原创 js排序大全

排序是程序员的基本工,本篇博文就js排序算法做一总结。冒泡排序let bubblingSort = function (arry,order){ if(! arry instanceof Array){ return } for(let i=0;i<arry.length;i++){ for(...

2020-01-12 18:00:26 199

原创 js高级进阶之函数防抖、截流

在前端开发实现相关功能时,由于js中部分事件的设计存在一定的问题,对完成业务带来很大的困难,比如js的scrooll ,mouseover ,resize等事件浏览器是实时触发实时相应的,那么如果我们要对其进行监听实现相关业务,那么就会导致业务也被连续多次执行看个例子:<!DOCTYPE html><html lang="en"><head> &...

2020-01-11 23:36:35 876

原创 js高级进阶之函数柯里化

函数柯里化是所有编程语言推崇的函数优化方式,js的函数柯里化是你写出优雅函数的基础。概念在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术。例如:我们求(a+b)*c 如果普通方法实现 f(a,b,c),用柯里化方法:f(a)(b)©这种调用格式获取。实现原理闭包来保存参数...

2020-01-11 22:04:17 652

原创 js高级进阶之缓存函数memozition

如果你阅读过一些常用的js库源码,可能对很多高级的写法就有所了解,本篇博文笔者将之前阅读源码中遇到的相关关于函数的牛逼写法做一总结,最主要是对缓存函数 memozition、函数柯里化Currying、偏函数partial application的详解。缓存函数 memozition1.1概念缓存函数指,函数将上次计算结果缓存起来,当下次调用函数时如果遇到相同的参数则直接将缓存结果返回,节省...

2020-01-11 21:06:33 779 1

原创 js高级进阶之数据结构“队列”的实现

像栈一样,队列也是一种线性表。它允许在表的一端插入数据,在另一端删除元素。插入元素的这一端称之为队尾。删除元素的这一端我们称之为队首。队列的结构如下图所示。队列的特性:在队尾插入元素,在队首删除元素。FIFO(先进先出),和食堂排队打饭一样。es5 实现function Queue(){ var temps = []; //队列的插入 ...

2020-01-10 18:05:13 159

原创 js高级进阶之数据结构“链表”的实现

我们知道计算机内存管理在处理数组是时需要分配连续的内存空间的,如果一个数组长度很大则在维护数组时就会性能很低,根据牺牲空间换时间的原理,链表这种数据结构就比较合适用来处理数据量表较大的线性结构数据。vue3框架中就有大量的链表数据结构应用,学习链表对阅读源码有很大帮助。数组应用场景:数据比较少;经常做的运算是按序号访问数据元素;数组更容易实现,任何高级语言都支持;构建的线性表较稳定。链表应用场...

2020-01-10 16:21:50 214

原创 js高级进阶之数据结构“栈”es5和es6的实现及应用

对程序员来说栈结构最为熟悉的一种数据结构,其特点是遵从后进先出(LIFO——Last In First Out)原则,新添加或待删除的元素保存在栈的同一端,称作栈顶,另一端称作栈底。在栈中,新元素总是靠近栈顶,而旧元素总是接近栈底。js实现栈数据结构也相对简单es5实现栈结构 /** * stack类 * */ functio...

2020-01-09 17:04:52 213

原创 js高级进阶之数据结构“二叉排序树”的es5和es6实现与应用

“树”是一种较为复杂也非常重要的数据结构,特别是目前流行的vue react框架虚拟dom操作时都是以“树”为数据结构模型进行一系列的操作的,弄清楚树数据结构算法对阅读源码有很大的帮助。认识树形结构1.1树结构一个树结构包含一系列存在父子关系的节点。每个节点都有一个父节点(除了顶部的第一个节点)以及零个或多个子节点:1.2 树的定义节点:树中的每个元素都叫作节点;根节点:位于树顶部...

2020-01-09 13:52:02 341

原创 一次彻底搞清楚typeof和instanceof的用法区别如何判断js所有内置对象的类型

typeof作用:用于判断一个一个表达式,(对象或者原始值),返回一个字符串。用法 typeof a类型 结果Undefined : “undefined”Null : “object” (...

2020-01-08 16:49:35 219

原创 一次彻底搞清楚js中变量和函数(包括箭头函数)提升

做前端的同学肯定对变量提升和函数提升不陌生,但实际应用中依然会有出错的情况,前端时间组内成员review代码发现很多小d在这个问题上没有彻底弄清楚,本篇博文详细做一次刨析。变量提升首先看下这个问题:输出结果是什么?var x =20;function s(){console.log(x);var x = 10;console.log(x);return x;}; s();经...

2020-01-08 16:12:33 1615

原创 js中对空、null、undefined、0、数字、数组、空对象的严格判断

js 在if中,"", 0, NaN, false,null,undefined都为false某些情况我们需要对数据做严格的判断,比如判断每个变量或参数是不是undefined肯定不能直接if(a)去判断,因为a 如果为“ ‘’ ”, 0, NaN, false,null,undefined”中的任意一个就都会进入if内从而导致bug。本篇博文详细介绍判断这些特殊数据类型的正确姿势。常...

2020-01-07 17:43:53 5430

css-sass.zip

sass环境下css实现的文字效果,包括发光文字,3d文字,视频背景文字附带js方法直接传入字符串调用即可。

2020-01-20

threejs-loader-demo-master.zip

该demo实现threejs 对fbx obj mtl 模型的加载及动画处理,鼠标控制,附带各个模型的源文件,初学者可以参考

2019-12-27

demo-5.zip

对以上几篇博文学习笔记的demo 源码分享,全部经过测试跑通,对初学webpack人员有借鉴意义。 通过最基础操作的联系,真正理解webpack的作用

2019-12-07

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除