wopelo的博客

But are we all lost stars. Trying to light up the dark.

几种手动实现HMR的方式

1.前言 众所周知,在webpack中使用模块热替换(HMR),能够使得应用在运行时,无需开发者重新npm run dev、刷新页面,便能更新更改的模块,并且将效果及时展示出来,这无疑极大的改善了前端同学们的生活。 当然,目前有许多脚手架——比如vue-cli、create-react-app...

2018-06-09 14:29:35

阅读数 3112

评论数 1

使用Nuxt.js改造已有项目

前言 如果我们需要对现有的vue项目进行ssr改造,使用nuxt.js是一个不错的选择。这里用作例子的“现有项目”是一个高仿饿了么外卖APP的spa。不过我没有把全部功能开发出来(全部做出来就不得了了),只是做出几个基本界面意思意思 下面就以这个demo为小白鼠进行ssr改造 准备 现...

2018-05-28 18:31:05

阅读数 9475

评论数 2

styled-components设置组件属性

问题 最近在试着用react做一个音乐播放器,在这之前其实并不了解styled-components,但由于使用css in js并且想实现hover效果,百度各种解决方案后发现了styled-components这个好东西,如果你看到了这篇博客,就证明你应该了解或者熟练运用styled-com...

2018-05-18 16:17:14

阅读数 2127

评论数 0

在create-react-app中使用css modules

前言 如果我们从零开始用webpack + es6来结合react开发前端应用,那势必会在各种webpack配置中消耗大量精力,于是便有了各种脚手架,create-react-app就是其中之一。 对于css modules,在react中,通常用它来避免预料之外样式规则相互覆盖以及实现其他功...

2018-05-14 17:22:01

阅读数 5152

评论数 1

vuex中mutation/action的传参方式

前言 在vuex中提交 mutation 是更改状态的唯一方法,并且这个过程是同步的,异步逻辑都应该封装到 action 里面。对于mutation/action,有一个常见的操作就是传参,也就是官网上说的“提交载荷”。 这里是关于如何在vue-cli中使用vuex的方法,我们采用将vuex设...

2018-05-11 18:18:40

阅读数 9471

评论数 1

如何在vue-cli中使用vuex

前言 众所周知,vuex 是一个专为 vue.js 应用程序开发的状态管理模式,在构建一个中大型单页应用中使用vuex可以帮助我们更好地在组件外部管理状态。而vue-cli是vue的官方脚手架,它能帮助我们方便的配置webpack。这样看来,有很大的可能我们需要同时使用vue-cli与vuex ...

2018-05-11 17:07:12

阅读数 3510

评论数 1

为什么要使用computed而不是data获取vuex中的state

最近在学习vuex时,照着官网最基本的 Vuex 记数应用示例敲的时候遇到了这样一个问题 想实现的效果: 点击加号、减号实现数字增减 vuex设置: Vue.use(Vuex); Vue.prototype.$store = new Vuex.Store({ state: { ...

2018-05-08 18:45:03

阅读数 4819

评论数 0

解决koa2 ctx.render is not a function

最近在学习使用koa2,在尝试用koa2复写之前用express写的一个入口文件的时候发现命令行报错ctx.render is not a function 项目路径如下 app.js是之前用express写的入口文件 koa.js是用koa2复写的入口文件 view是前端页面文件...

2018-04-18 11:25:16

阅读数 2334

评论数 0

express解决413 request entity too large问题

最近在尝试自己实现一个图片上传组件,后台用express(4.16.2)做服务器,然后就尴尬的发现只要上传的数据超过1mb,后台就会报request entity too large并且前台返回413 经过一段时间的百度,发现有多种解决方案,其中,这个帖子包括了我看到的所有解决方法。 首先...

2018-04-03 23:10:27

阅读数 1530

评论数 0

如何取消ajax请求

之前在面试的时候,被面试官问到了如何取消ajax请求,然鹅并不知道,被刷之后痛定思痛,总结了原生XHR、jquery、axios取消ajax请求的方法。 原生XHR 对于原生XHR对象来说,取消的ajax的关键是调用XHR对象的.abort()方法 var native = new XM...

2018-04-03 14:13:36

阅读数 5336

评论数 0

mongodb如何更新数组中嵌套的对象

前言 众所周知,mongodb以类似json的数据格式——bson储存数据,它允许数据之间相互嵌套,所以说,查找、修改嵌套比较深的字段就成了一个问题。假设有那么一个collection { "_id" : ObjectId("5a3...

2018-04-02 14:26:57

阅读数 4025

评论数 0

linux如何安装nginx以及配置多域名对多端口

假如你有一台服务器(实例版本为centos7)、多个域名,你想在这台服务器上部署了多个项目,并且一个项目对应一个域名,但又不想在访问项目的时候加上端口号,这时,你或许应该尝试使用nginx。 安装nginx 安装依赖 这一步中的某些依赖,可能你的电脑上已经安装了,但你不知道或者忘记了,在每一...

2018-02-28 23:04:13

阅读数 1614

评论数 0

函数节流与函数防抖

最近经常看到“函数节流”与“函数防抖”,于是便总结了一篇文章 出现原因 某些事件,如mousemove、scroll等是会不断触发,如果对应处理函数中有执行DOM操作、加载资源的行为,那很有可能会导致浏览器卡顿、崩溃等 目前主流的解决方法为函数节流与函数防抖 函数节流 思想 当调用动作...

2018-02-28 18:05:53

阅读数 157

评论数 0

js延迟加载的几种方法

众所周知,在一个HTML页面加载的时候,如果遇到script标签,一般情况下会停止页面渲染,转而加载并执行脚本,等到脚本执行结束后才继续渲染页面。 但世界上存在可以使js延迟加载的方法,这些方法有助于提高页面加载速度 1.defer属性 作用 脚本会立即下载,但要在页面已加载之后才运行脚本...

2018-02-21 12:09:43

阅读数 3731

评论数 0

js实现继承的4种基本方式

在ES6之前,js创建对象都需要通过函数,如何实现继承成为一个问题。目前有很多人已经给出了自己的解决方案,但由于没有统一的定义,导致相同方式有多个名称、一种方式有多种变体。本文总结了4种最基本的方式,没有遗漏的话,其他方式应该就是下面四种方式的变体或者重命名。欢迎各位读者在评论区补充没有提及的基本...

2018-02-13 21:07:17

阅读数 319

评论数 0

js创建对象的6种基本方式

如何在js中创建对象,一直是一个值得关注的问题。有很多人在博客上进行了总结,但由于没有权威的定义,导致某些方式有多种不同的命名以及不同的变体。下文将介绍我总结的5种方式,如果没有遗漏的话,其他一些本文没有提及的创建方式应该都是下面5种方式的别名或者变体。欢迎各位读者在评论区补充我没有总结到的基本方...

2018-02-13 20:53:42

阅读数 155

评论数 0

exports与module.exports还有import

由于JavaScript缺乏模块体系,在ES6之前,社区指定了一些模块加载方案,比如node.js所遵循的commonJS规范。而在ES6在语言层面上实现了模块功能,完全可以取代现有的commonJS等规范,成为浏览器、服务器通用的模块解决方案。本篇博客目录如下: 1.如何使用exports ...

2017-12-25 11:12:07

阅读数 2795

评论数 0

axios用post提交的数据格式

vue框架推荐使用axios来发送ajax请求,之前我还写过一篇博客来讲解如何在vue组件中使用axios。但之前做着玩用的都是get请求,现在我自己搭博客时使用了post方法,结果发现后台(node.js)完全拿不到前台传来的参数。后来进过一番探索,终于发现问题所在。 post提交数据的四...

2017-12-12 16:41:22

阅读数 104365

评论数 2

Service Workers/Web Workers/WebSockets的区别

原文戳这里前言之前在看面经的时候看到了“Service Workers”这个名词,赶紧百度了一下,发现许多博客对它的描述是“一个Service Worker是一段运行在浏览器后台进程里的脚本,他独立于当前页面,提供了那些不需要与web页面交互的功能在网页背后悄悄执行的能力。”我眉头一皱,发现这句话...

2017-11-22 20:22:48

阅读数 1131

评论数 0

BFC浅析

当我第一次接触到BFC时,我的三观基本上都被颠覆了。在平时编程中我们会经常遇到BFC,只不过那些与BFC相关的现象——比如外边距折叠我们往往都忽略掉。 1.什么是BFC BFC是Block Formatting Context的缩写,翻译成中文就是“块级格式化上下文”。 简单来说,BFC...

2017-11-19 20:53:56

阅读数 207

评论数 0

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