es6
关注
分享
扫一扫
养只猫
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
commonjs和es module对定义变量被改变的分析
commonjs和es module都是js模块化机制，commonjs一般用于服务端写nodejs而es module是用与web浏览器js开发。这篇文章主要说的是在两种不用的模块化机制中对于定义的变量改变的区别commonjs：commonjs 引用的js文件中的变量被改变是其他地方引用相同的文件的变量不会被改变文件test1const {a, afn} = require('./testmodule')console.log(a, '进来了')afn()setTimeout(fun原创 2022-03-28 16:43:34 · 926 阅读 · 0 评论 -
koa框架使用graphQL管理api
首先说说graphQL。这是一个用来管理api接口的工具。应用场景如下：项目一期首页初始化接口A需要数据B和数据C两个参数到了项目二期首页初始化接口A需要的数据多了数据D少了数据B。这样后端接口A要相应的增加数据D和删除数据B，前端也要做相应的修改。多次迭代可能有需要加回数据B这样会做大量的无用功。graphQL能让后端添加需要新增的字段而不用删除不需要的字段并且前端只拿需要用的字段。这样前...原创 2019-03-12 14:54:02 · 1260 阅读 · 1 评论 -
redux的使用以及redux devtools调试工具
redux和vuex一样是用于管理全局共享数据的工具。调试工具工欲善其事必先利其器，打开谷歌浏览器点击这三个点->更多工具->扩展程序点开这个打开chrome网上商店搜索Redux DevTools并安装。出现下面这个图标说明安装成功了接下来看一下目录结构吧src目录下的Store文件就是用来管理共享数据的脚本文件夹。actionTyp...原创 2019-05-08 17:05:33 · 7371 阅读 · 2 评论 -
react-redux的使用
react-redux是之前的博客说过的redux的封装插件，使redux能完美的运用到react中。安装npm install --save react-redux引入在index.js入口文件中引入并改写index.js调用react-redux的Provider作为标签使用并绑定store属性。store属性即为之前博客已经提过的全局数据https://blog.youkuaiyun.com...原创 2019-05-09 14:15:57 · 182 阅读 · 2 评论 -
react的ref获取dom元素
刚开始学习react，也不知道是运气好还是运气不好，一开始挑了vue作为主要的框架vue的操作还是算比较简单的在三大框架中（拿来即用）。而react相对来说会比较复杂一点涉及到的js原理性的东西也比较多包括es6等等。从vue到react会感觉有很多东西感觉比较新没有见过比如每个事件要bind(this)将定义的react对象绑定到事件上，不然默认this是指向点击的元素而获取不到constr...原创 2019-05-07 11:58:26 · 6616 阅读 · 1 评论 -
react生命周期函数
和vue一样react也有在某一个时刻会对应执行的生命周期函数。这里我将react的生命周期分为三大部分初始化生命周期compionentWillMount（组件即将被挂载到页面前执行）render（组件渲染）componentDidMount（组件挂载到页面上时执行）props和state更新生命周期componentWillReceiveProps（props独有的pro...原创 2019-05-07 14:48:37 · 220 阅读 · 1 评论 -
React Transition Group官方过渡动画的使用
react官方提供了React Transition Group这个动画框架供开发者使用。https://reactcommunity.org/react-transition-group/安装npm install react-transition-group --save引入import {CSSTransition,TransitionGroup} from 'react...原创 2019-05-07 17:44:31 · 531 阅读 · 0 评论 -
react-router-dom路由入门
react的路由和vue个人感觉有很大的不同，感觉vue-router比react-router-dom简单，react-router-dom比较绕。安装npm install react-router-dom --save入口文件中做如下配置；其中react-redux是状态管理。import {BrowserRouter,Route} from 'react-router-do...原创 2019-05-13 14:50:45 · 841 阅读 · 0 评论 -
react-router-dom之异步加载路由
这篇文章跟https://blog.youkuaiyun.com/qq_40816649/article/details/90172681衔接在一个spa单页面应用中如果项目较小的话异步组件可能影响不大，但是如果是一个大的react单页面项目如果没有使用异步组件，页面会在第一次加载的时候加载所有项目中所有的组件严重影响页面的加载速度，异步组件可以让路由跳转到对应的路由上才去加载对应的react文件，这样页...原创 2019-05-13 15:15:08 · 3982 阅读 · 2 评论 -
react父子组件间的通信和传值
react的组件化开发能极大的提升开发效率，因此理解父子组件间的传值是非常重要的。直接上代码了父组件import React, { Component } from 'react'import List from '../../components/list/list'import {Link,withRouter} from 'react-router-dom'class...原创 2019-06-25 17:03:09 · 389 阅读 · 4 评论 -
vue-cli3.0设置环境变量
我们做项目都会有测试服和正式服，而且接口地址是不同的我们希望本地开发的时候是测试服，打包上线的时候是正式服，笨方法是每次打包的时候都去将测试服的地址改成正式服，这样也是可以的但是很麻烦有时候还会忘记（都已经上传了才发现地址没改）。研究了一下vue-cli3.0的环境变量配置可以分成生产环境（线上），开发环境（测试）开发环境npm run serve测试环境npm run build现在我...原创 2019-06-27 10:34:08 · 2033 阅读 · 2 评论 -
js监听div标签上面的自定义属性
好久没写博客了，可能是近期遇到了瓶颈没有什么东西可以写了，而且最近在换工作也没什么时间。现在工作换好了，于是更多的可能会慢慢的向原生js方向去。直接上代码吧<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpo...原创 2019-08-17 15:59:36 · 1459 阅读 · 0 评论 -
node存储文件的方式
作为后台语言接收保存文件也是必备的技巧。前端代码（vue）<input value="上传" ref="file" type="file" multiple @change="getFiles"> getFiles () { var that = this var FormDataImg = new FormData() ...原创 2019-03-01 10:06:19 · 2148 阅读 · 0 评论 -
koa2完美支持async await
async await应该算是es7的东西了吧，在express和koa1中处理异步的方法都是yeild和generator等方式来处理异步看起来代码显得臃肿还有各种缺点（反正不用也没去深入了解）。koa2最新的node框架推出后直接完美支持async await，使得node能更加优雅的处理异步请求，在koa2的框架中会大量的用到这个方法。异步中的同步await必须依赖于async,...原创 2019-02-28 18:11:42 · 1346 阅读 · 2 评论 -
node常用的中间件
在node的学习过程中积累了许多好用的中间件。这些中间件大部分要个koa配合使用1、koa-bodyparser这个插件使用来解析前端post请求带来的参数的//入口文件const bodyParser = require('koa-bodyparser');app.use(bodyParser({//设置可以接收的数据类型 enableTypes:['json', 'f...原创 2019-02-28 17:15:32 · 3011 阅读 · 1 评论 -
作用域的问题
es5和es6对定义有了不同的写法es5中用var来定义，es6中用let来进行定义let定义的为块级作用域，var定义的是局部变量或全局变量下面用一个js中经常碰到的一个问题来看作用域的问题，很多东西都在注释中我就不多bb了/*es5作用域*/const callbacks = [];for (var i = 0; i <= 2; i++) { callbacks[i] = f...转载 2018-04-21 17:40:29 · 192 阅读 · 0 评论 -
vue之豆瓣电影（一）
前言学习vue也有一段时间了，一些常用的指令，路由、vuex、生命周期也了解的差不多了。公司目前没有vue的项目为了得到进一步的突破，决定利用空闲的时间写一个关于电影单页面应用。由于没有后端因此选择了豆瓣的接口，项目很简单但是代码的过程中使用到尽可能多的vue相关的知识。项目中用到了vue2.0、mint-ui、webpack、vue-cli、vue-router、vuex、axios、s...原创 2018-10-08 21:49:54 · 1125 阅读 · 1 评论 -
es6(ECMAscript 6)之let和var以及const
es6更新了很多新的功能let和var都是用来定义变量的，但他们的功能不同例如在一个代码块中用了let和var定义两个不同的变量，然后在外部访问这个变量。{ let a = 3 var b = 4 console.log(a,111)}console.log(b)console.log(a)打印的结果如下： 在代码块中都能访问到两个变量，但...原创 2018-12-24 10:29:56 · 257 阅读 · 0 评论 -
es6(ECMAscript 6)之块级作用域
es6提供了let来定义变量，变相的给我们开发提供了块级作用域的概念。块级作用域之间可以用let定义相同名字的变量，且不会污染其他的区域，即使是父子关系的块级作用域。{ let a = 5 { let a = 12 console.log(a,'子') } console.log(a,'父')} 块级作用域'{}'...原创 2018-12-24 12:51:37 · 210 阅读 · 1 评论 -
es6的class类
最进事情比较少，学了很多东西看了很多文档。这里顺便将学习的过程记录下。了解过个点php的构造函数这个class类有点类似php的构造函数。es6的class类代替了es5构建新对象和原型链的操作。es5构建新对象要通过function A(x,y){this.x = x,this.y = y}的方式来构建其中函数名要大写es6构建对象的方法class A { cons...原创 2019-01-25 15:21:03 · 127 阅读 · 0 评论 -
es6解构和默认值
es6中新加了解构和默认值，这些让我们可以省去部分判断的代码let [a,b = 5,,d] = ['1', ,'6',8];console.log(a,b,d);会输出[1,5,8]b = 5意思是如果没有值的话就默认是5，对[a,b = 5,,d]的结构后b和d之间是没有值的就算对应传入了值只是算不存在，在函数传参的时候我们可以用到这个这里我们可以通过结构来做点事情v...原创 2019-01-25 15:57:49 · 1638 阅读 · 0 评论 -
es6数字的判断方法集合
//es6检测数字是否为有限的(不是无穷大)console.log(Number.isFinite(15))//true//es6检测是否为NaNconsole.log(Number.isNaN(15))//false//以上两个方法只对数字有效其他全返回falseconsole.log(Number.isFinite('15'))//false//es6移植了es5的pars...原创 2019-01-25 16:10:08 · 3763 阅读 · 0 评论 -
es6数组相关操作
es6新增了一些对数组的操作。Array.from(),Array.of()Array.from()用来将类数组转化成数组类数组的格式是{'0':'1','1':'2','2':'3',length: 3}正确{'name':'1','age':'2','color':'3',length: 3}错误console.log(Array.from({'0':'1','1':...原创 2019-01-25 16:56:35 · 199 阅读 · 0 评论 -
es6对象操作
对象的合并var ob = {}var ob1 = {a: 213}var ob2 = {b: 454}Object.assign(ob,ob1,ob2)console.log(ob)得到{a: 213, b: 454}对象的合并在现在的工作中并没有遇到过使用场景，但是对象的合并没有碰到过其他的方法，记录一下备用...原创 2019-01-25 17:00:45 · 150 阅读 · 0 评论 -
node相关的框架koa2
最近学习了node相关的框架koa2先来看看目录结构吧 之前有学过一点php相关的知识，node也可以分离出路由(routerIndex.js)、入口文件(index.js)、模型层(model)和控制层(contrallers)。node的语法是js并完美兼容es6语法(文件都是.js结尾)，koa2最常用的有async,await。控制层控制层里面是每个接口的方法（export...原创 2019-02-23 17:27:01 · 196 阅读 · 2 评论 -
node.js加密token(jsonwebtoken)
每一个app都要有用户，而有用户就要有每个用户单独的token。jsonwebtoken是一个可以加密生成token和解密token的中间件。npm install jsonwebtoken --save安装我将这个过程封装到了一个中间件中并通过个koa2框架使用const jwt = require('jsonwebtoken')module.exports =...原创 2019-02-23 17:54:16 · 1910 阅读 · 0 评论 -
node请求外部接口的方法
在学习node的过程中一开始都是在处理外部的请求，但是如果碰到第三方接口的请求怎么办呢？这里有两种方法。一种是node原生request请求一种是引用koa2-request中间件的方法。node原生request请求这里我们分为get请求和post请求（原生node的request是需要手动引入的）get请求有以下两种，第一种直接将要的参数全部写到url里面；第二种将要传的参数写...原创 2019-02-23 18:22:57 · 8734 阅读 · 0 评论 -
node.js路由中间件koa-router
node.js后端的每一个路由就是一个接口。koa2框架结合koa-router中间件，使路由更加简介明了。这次讲讲koa-router的简单使用安装koa-routernpm install koa-router --save//在每个路由文件中引入const Router = require('koa-router')const router = new Router()...原创 2019-02-28 16:44:56 · 466 阅读 · 0 评论 -
es6定义常量
这里说说es6的常量定义。被定义的常量不能更改。比如我一出生性别就固定是男，那么就算别人说我性别是女，最终我还是性别男（看官们别多想）学习的入门教程是通过es5，es3，es6对比来学习的下面附上代码/*es5定义常量的方法*/Object.defineProperty(window, "pi2", { value: 3.1415926, writable: false, /*不...转载 2018-04-21 17:31:27 · 1268 阅读 · 0 评论