- 博客(42)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 Yarn的安装和使用
yarn是什么yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 ，正如官方文档中写的，yarn是为了弥补 npm 的一些缺陷而出现的。”这句话让我想起了使用npm时踩过的坑了1、npm install的时候巨慢。特别是新的项目拉下来要等半天（就算切到淘宝的镜像源有时候还要切回去）删除node_modules，重新install的时候依旧如此。2、同一个项目，安装的时候无法保持一致性。由于package.json文件中版本号.
2020-08-20 19:07:44
11663
2
原创 VUE SSR-概念篇
什么是vue ssr？vue官网上对此ssr的定义：Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行。个人理解vue的组件是基于vnode的，整.
2020-08-23 07:27:26
14888
2
原创 nuxt-Cannot read propertyeslint报错
问题在开发nuxt过程遇到了报错，希望大家下次遇到的时候可以迅速解决 报错信息如下 Module build failed (from ./node_modules/eslint-loader/index.js):在这里可以看到是eslint出现了问题，于是找到项目中的nuxt.config.js，翻到下面配指eslint-loader的地方，发现本来的代码是这样的build: { /* ** Run ESLINT on save */ extend (.
2020-08-22 09:15:17
18684
原创 nuxt-Module build failed报错篇
问题，在nuxt开发过程中，运行npm run dev 直接报错 报错信息如下 Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions.原因及解决办法原因：这个异常说明了 babel的版本冲突，babel依赖包不兼容， 在 package.json 依赖包中既有 babel 7.0 版本，又有 babel 6.0版本，就会报这个错误，这两个版本很明显是.
2020-08-21 20:47:34
16807
1
原创 vue-cli · Failed to download解决方案
简介在项目开发过程中遇到了一个小问题，用vue cli初始化 nuxt项目老是无法下载模板，折磨我好几天最终解决了这个问题，报错提示代码检查了好几遍，看不出问题，开始怀疑人生解决方案npm config set proxy null在命令行输入这行代码就解决了 这个代码意思就是npm配置设置代理为空谢谢观看，希望可以帮助到大家...
2020-08-21 13:05:36
15705
1
原创 koa2 + MongoDB + mongoose + Robo 3T - 搭建服务器篇
项目准备1、安装 node 和 koa2 安装方法自行百度网上有很多方法2、安装包MongoDB 安装方法自行百度即可3、安装mongoose: cnpm i mongoose 4、安装 Robo 3t 安装方法自行百度 这个是用来查看数据库的连接数据库新建config.js文件用来配置数据库的连接内容如下module.exports = ({ dbs: "mongodb://127.0.0.1:27017/dbs" })在app.js中引入 并连接数据.
2020-08-19 16:00:59
13855
原创 koa-自定义中间件
事先准备1、初始化项目 npm init 2、安装依赖 cnpm install -g koa-generator 3、进入项目并安装依赖 cd koaProject & cnpm i 4、启动项目 npm start koaProject 注意这里用的淘宝的镜像源自定义中间件自定义中间件的话一般是创建一个js文件，在app.js中引入并使用，如下所示function pv(ctx) { //do something Write your code lo.
2020-08-19 15:14:12
18138
原创 koa中间件原理篇
事先准备1、初始化项目 npm init 2、安装依赖 cnpm install -g koa-generator 3、进入项目并安装依赖 cd koaProject & cnpm i 注意这里用的淘宝的镜像源koa中间件的实现原理及代码演示实现原理初始化koa实例后，我们会用use方法来加载中间件(middleware)，会有一个数组来存储中间件，use调用顺序会决定中间件的执行顺序。每个中间件都是一个函数(不是函数的话会直接报错)，接收两个参数，第一个是ctx上.
2020-08-19 14:14:12
9335
原创 常用小工具
在本篇文章中主要介绍常用的小工具1、截图工具SnipasteSnipaste 是一个简单但强大的截图工具，也可以让你将截图贴回到屏幕上！下载并打开 Snipaste，按下 F1 来开始截图，再按 F3，截图就在桌面置顶显示了。就这么简单！下载地址：官网地址2、命令行工具 cmderCmder是一个软件包，创建纯粹是由于在Windows上缺乏良好的控制台模拟器。它基于令人惊叹的软件，加上Monokai的配色方案和自定义提示布局，从一开始就很性感。下载地址：官网地址3、Chrome浏.
2020-08-17 15:53:42
10711
原创 Typescript-配置篇
简介本篇文章主要是介绍typescript基础配置，并不会对typescript做讲解，想看typescript具体的介绍请看这个专栏链接
2020-08-17 15:48:26
14528
原创 前端工程化-webpack原理
1、plugin通过钩子机制实现2、往钩子上挂载任务，一般是通过一个函数或者是一个包含apply方法的对象3、brower sync自动编译自动刷新
2020-08-16 13:03:18
14154
原创 成果展示
下面是我自己的成果展示、希望大家批评指教1、数据可视化技术栈：fiexible + echarts网址：https://datavisualization.store/
2020-08-16 12:35:53
6926
原创 前端工程化-ESLint + Prettier
简介ESLint和Prettier是前端开发中两款非常强大的代码检查和格式化工具，但强大也意味着这两者经常发生冲突。对ESLint和Prettier在开发前进行协同完美的配置是相关重要的，可以避免冲突等麻烦，简化美化开发过程，确立团队或个人的开发风格。以下修改为个人风格总结所得，读者可根据自己需求增加减。ESLint + Prettier作用项目开发统一范式的问题代码质量问题：使用方式有可能有问题(problematic patterns)代码风格问题：风格不符合一定规则 (do.
2020-08-15 10:28:47
13879
原创 前端工程化-Stylelint
简介在前端工程化当中，不仅仅是js可以lint，而且css/sass也可以被lint，接下来为大家揭晓怎么lint css/sass准备1、在命令行输入npm init -y 初始化项目2、cnpm i stylelint-config-standard stylelint-config-sass-guidelines -D配置新建 .stylelintrc.js文件 配置如下 其实配置和ESlint差不多modules.exports = { extends: [ .
2020-08-15 10:27:58
10558
原创 前端工程化-ESLint-API篇
简介在上面文章介绍了怎么安装eslint ，在本篇文章中介绍eslint的配置文件ESLint的API1、env 决定了当前环境下可使用的全局变量browser -浏览器全局对象node -Node.js 全局变量以及scopingcommonjs -CommonJS 全局变量以及scopingshared-node-browser -Node.js 和浏览器公共的全局变量es6 -允许使用ES6中处理modules之外所有的新特性worker -web workers 的全局变量.
2020-08-13 20:40:32
13670
原创 前端工程化-规范化篇
前言这一篇文章主要是关于前端规范化的内容，前端规范化是我们践行前端工程化过程中的重要的组成部分有利于项目维护，以及二次开发，减低维护成本，便于后续人员接手为什么要有规范化1、软件开发需要多人协同2、不同的开发者具有不同的编码习惯和喜好3、不同的喜好增加项目维护成本4、每个项目或者团队需要统一的标准哪些地方需要规范化1、代码、文档、甚至是日志2、开发过程中人为编写的成果3、代码的标准化规范最为重要，因为代码的规范决定了项目的质量和可维护度，实施规范化的方法1、编码.
2020-08-13 20:24:40
10961
原创 webpack-基础配置篇
简介Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。webpack的特性1、打包 CommonJs 和 AMD 模块（以及绑定）2、可创建单个或多个按需加载的块，以减少初始加载时间3、在编译期间会解决依赖关系，减少了运行时的大小4、加载器可以在编译时预处理文件，如 coffee-script 到 javascript说明在使用webpack之前需要对下面的几条有一定的掌握1、安装nodej.
2020-08-12 12:13:51
6939
原创 模块化开发-概念篇
模块化可以说是当下最重要的前端开发范式之一，它随着前端应用的日益复杂，我们的项目代码已经逐渐膨胀到了不得不花大量时间去管理的程度了。而模块化呢就是一种最主流的代码组织方式它通过把我们的复杂代码按照功能的不同划分为不同的模块，单独维护的这种方式去提高开发效率，降低维护成本。单就模块化这个词而已，他仅仅是一个思想，或者说是一个理论，并不包含具体的实现，所以说接来就一起去学习一下如何在前端项目当中去实践模块化这样一个思想，以及我们目前行业当中的一些主流的方式或者工具。那我将这个专.
2020-08-10 16:31:30
18732
原创 webpack-api篇
简介本文主要是介绍webpack的api，具体的怎么配合使用不在本文中涉及webpack的API需要在项目的根目录下创建一个webpackconfig.js文件，这个文件是webpack的默认配置文件1、
2020-08-10 16:26:23
11864
原创 自动化构建-概念篇
简介自动化构建是前端工程化中的一个非常重要的组成部分。那再具体学习之前，那我们先来解读一下这一个开发行业当中经常提及的常见概念。自动化实际上指的就是我们通过机器去代替手工完成一些工作构建你可以把它理解成转换，就是把一个东西转换成另外的一些东西。自动化构建工作流开发行业当中的自动化构建就是把我们的开发阶段写出来的源代码。自动化的去转换成生产环境当中可以运行的代码或者程序。一般我们会把这样一个转换的过程称之为自动化，源代码→自动化构建→生产代码自动化构建当做中间过程作用.
2020-08-10 16:25:42
10724
1
原创 JavaScript性能优化-GC算法篇
GC算法简介1、GC是一种机制，垃圾回收器完成具体的工作2、工作的内容就是查找垃圾释放空间、回收空间3、算法就是工作时查找和回收所遵循的规则常见的GC算法1、引用计数2、标记清除3、标记整理4、分代回收GC算法之引用计数算法1、核心思想：设置引用数，判断当前引用数是否为02、引用计数器3、引用关系发生改变时改变引用数字4、引用数字为0是立即回收代码演示如下const user1 = { age: 10 };const user2 = { age: 20 };con.
2020-08-08 14:52:11
20787
原创 JavaScript性能优化-垃圾回收
简介在本篇文章呢，我来介绍一下JavaScript中的垃圾回收的垃圾回收JavaScript中的垃圾来看一下在JavaScript中什么样的内容会被当做是垃圾，在我们后续的GC算法当中，也会存在了一个垃圾的概念，两者的其实是完全一样的，所以在这里说明首先对于我们前端开发来说的。JavaScript中内存管理是自动的，每当创建一个数组、对象或者函数的时候呢，它就会自动的去分配相应的内存空间。后续程序代码在执行的过程。无法通过引用关系再找到某些对象的时候那么这些对象就会被看做垃圾，再或.
2020-08-08 14:51:25
15305
原创 JavaScript-内存管理篇
简介本篇文章主要是介绍JavaScript内存管理的相关内容随着近些年硬件技术的不断发展，同时高级编写语言当中也都自带了GC机制，所以这样的一些变化就让我们在不需要特别注意内存空间使用的情况下也能够正常的完成相应的功能开发，为什么？在这里我们一定要去重提内存管理呢，下面我们就通过一段极简单的代码来请说明。function fn(params) { arrList = []; arrList[100000] = 'hello world !!!' }.
2020-08-07 10:38:31
11099
原创 JavaScript性能优化-概念篇
介绍这本栏文章中主要介绍的是ECMAScript/JavaScript的性能优化我们都知道，随着软件开发行业的不断发展，性能优化呢已经是一个不可避免的话题。那么什么样的行为才能算得上是性能优化呢？本质上来说，任何一种可以提高运行效率，降低运行开销的行为，我们都可以看作是一种优化操作，这也就意味着在软件开发过程中必然存在着很多值得优化的地方。特别是在前端应用开发过程中性能优化我们可以认为是无处不在的，例如请求资源时所用到的网络以及数据的传输方式，在负责开发过程中所使用到的框架等他们都可.
2020-08-07 10:37:17
10437
原创 函数式编程-task函子
简介folktale中的函子处理异步任务，在这里使用的是2.x的版本//引用find和split方法const { find, split } = require('lodash/fp');//引用fsconst fs = require('fs');//引用taskconst { task } = require('folktale/concurrency/task');function readFile(fileName) { return task(resol.
2020-08-06 14:06:59
231
原创 函数式编程-folktale篇
简介函子可以把我们控制副作用进行异常处理，还可以去处理异步任务，因为在异步操作中会出现通往地狱之门的回调。使用task函子可以避免出现回调的嵌套，因为异步任务的实现归复杂和这块使用了folktale，这个库中提供的task函子来进行演示。folktale是个标准的函数式编程库，它和lodash、ramda不同的是，它里面没有提供功能性的函数，比如lodash和ramda 的中都提供了很多数组和字符串操作相关的方法。但是folk tale中只提供了一些跟函数式处理相关的操作，例如compo.
2020-08-06 14:06:24
10892
原创 函数式编程-Either函子篇
简介either两者中的任意一个，类似于if else的处理异常会让函数变得不纯，either函子可以用来做异常处理举例class Left { static of(value) { return new Left(value) } constructor(value) { this._value = value; } map(fn) { return this }}class Right {.
2020-08-05 10:04:55
510
原创 函数式编程-Maybe函子篇
简介我们在编程的过程中可能会遇到很多错误，需要对这些错误做相应的处理maybe函子的作用就是可以对外部的空值情况做处理（控制副作用在允许的范围）如下举例//maybe函子 处理异常函子class Maybe { static of(value) { return new Maybe(value) } constructor(value) { this._value = value; } map(fn) { .
2020-08-04 08:22:41
278
原创 函数式编程-lodash-fp模块篇
简介在之前的文章中都是手动实现柯里化，其实在lodash已经提供了柯里化的方法//通过 lodash的fp模块const fp = require('lodash/fp');let test2 = "HTML CSS PRODUCT JAVA NODE"const f3 = fp.flowRight(fp.join('-'), fp.map(_.toLower), fp.split(" "))console.log(f3(test2));//html-css-product-java
2020-08-03 08:18:31
11109
2
原创 函数式编程-函数组合篇
概念纯函数和柯里化很容易写出洋葱代码_.toUpper(_.first(_.reverse(array))); //这样就是洋葱代码 一层套一层函数组合可以把细粒度的函数重新组合成一个新函数函数组合（compose）:如果一个函数要经过多个函数处理才能得到最终值，这个时候可以把中间过程的函数合并成一个函数函数就像是数据的管道，函数组合就是把这些管道连接起来，网数据穿过多个管道形成最终的结果 函数组合默认是从右往左执行function compose(f, g) { ret.
2020-08-02 11:30:42
10765
原创 函数式编程-柯里化原理实现篇
本篇文章主要是柯里化原理实现lodash实现柯里化const _ = require('lodash');function getSum(num1, num2, num3) { return num1 + num2 + num3}const curried = _.curry(getSum);console.log(curried(1, 2, 3)); //6console.log(curried(1, 2)(3)); //6console.log(curried(.
2020-08-02 11:30:09
402
手写Promise源码
2020-10-28
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人