11 Meskjei

尚未进行身份认证

爱那么短 而回忆那么长

等级
TA的排名 1w+

再理解—JavaScript的变量提升

学习过前端的同学们应该都对变量提升的概念不陌生,这对于没有接触过JavaScript开发的同学来说是一种极其反常识的现象。当时对这种现象并没有什么理解,只是了解并记住了这种现象。到了今天,我想重新描述我的理解,当然,未必准确,纯当抛砖引玉。首先来看一段代码:console.log(test)var test = 'Hello world'foo()function foo(){ ...

2019-11-29 00:49:39

WebRTC之MediaRecorder

文章目录构造参数方法MediaRecorder.start(timeslice)MediaRecorder.isTypeSupported()MediaRecorder.resume()MediaRecorder.stop()MediaRecorder.pause()事件下载所录制的数据MediaRecorder这个类是用来对指定的MediaStream进行录制的。构造其构造方法为:con...

2019-11-16 20:05:01

Git--基础

文章目录git init昵称和邮箱查看昵称和邮箱git config user.namegit config user.email.配置昵称和邮箱git config --global user.namegit config --global user.email修改昵称和邮箱git config --global --replace-all user.name 'your name here'g...

2019-11-09 19:49:09

RPC(远程过程调用)

文章目录概念RPC与RESTFUL概念所谓远程过程调用是相对本地调用来说的。例如现在有一个计算器类,类中有一个成员方法叫add。那如果我们想调用ada方法用本地调用就是new一个计算器类对象,然后执行该对象的add方法即可。如果是远程过程调用,那么就意味着所调用的函数的真正逻辑并不是在本地而是在远端服务器上。那么该怎么去调用服务器上的相关逻辑呢?我们第一个想到的肯定是B/S结构,即服务器上...

2019-11-09 19:41:06

React--自定义hooks

React内置的hooks函数解决了函数组件无法使用state以及在传统写法中生命周期函数混乱和this指向的问题。而hooks所带来的组件复用性的提升则是由自定义hooks来体现的。传统的组件复用多是渲染属性或者是高阶组件这两种方式,缺点除了写起来会相对复杂,还会造成组件层级过多。先来看一个自定义hooks的例子:function useSize(){ const [size. ...

2019-10-16 23:56:41

React—useRef

相信有过React使用经验的人对ref都会熟悉,它可以用来获取组件实例对象或者是DOM对象。而useRef这个hooks函数,除了传统的用法之外,它还可以“跨渲染周期”保存数据。首先来看一下它传统的用法:importReact,{useState,useEffect,useMemo,useRef}from'react';exportdefaultfunctionA...

2019-10-16 15:53:04

React—useMemo与useCallback

看到“memo”这个字眼,很多人应该会想到memo方法。这是一个高阶函数,它会返回一个函数组件,作用相当于PureComponent。而useMemo的作用也有点像,只不过它不是作用在函数组件上,而是在一段逻辑上,例如:const [count, setCount] = useState(0);const doubleCount = useMemo(() => { retur...

2019-10-16 13:25:24

React--useContext

在出现useContext之前,使用context的方式主要是两种,第一种需要使用Consumer:class Component2 extends Component{ render(){ return ( <CountContext.Consumer> { count => <div>{count}&l...

2019-10-16 12:50:30

React之lazy与suspense

文章目录动态importlazysuspenseError boundariesgetDerivedStateFromErrorcomponentDidCatch动态import在说lazy和suspense之前,还是先说说动态import这种语法。import语句我们使用的很多,通常是import ... from '...'这样的写法,这样的写法也被称作是静态加载。而所谓的动态impo...

2019-10-15 19:21:15

React之Context

文章目录概念APIcreateContext使用注意概念Context可以让数据在组件树中自上而下自由传递,而不需要在树中层层的传递。层层传递不仅在编写代码的时候会十分繁琐,而且中间层级可能根本不关心所要传递的数据,所以也为后期的维护制造理解上的障碍。可以将Context简单理解为一个全局变量。APIcreateContext这是Context的一个核心API,从名字就可以看出,这是用...

2019-10-09 15:36:18

实现一个类似Webpack的基础打包工具

文章目录引入步骤简述具体实现分析文件源码解析分析依赖关系源码解析生成最终代码源码解析引入其实在Webpack官网,可以看到官方对于Webpack的定位是一个打包工具。而它最基础的使用就是在浏览器中实现JS的模块化和将ES6转为ES5。浏览器中引入一个JS文件,如果文件中有使用import语句进行模块的引入,浏览器是会报错的。那么我们要实现的这个基础的打包工具也就是用来解决这个问题的。步骤...

2019-09-17 11:06:39

Webpack--自己写一个Loader

先直接来看代码:module.exports = function(source){ return source.replace('Webpack', 'JavaScript');}这三行代码就实现了一个最简单的Loader,它的作用是将源码中出现的所有’Webpack’替换成’JavaScript’。参数source就是所处理的文件的代码,是一个字符串。所导出的函数必须是使用...

2019-09-09 11:31:30

Webpack之resolve

文章目录resolve.extensions注意resolve.mainFilesresolve.aliasresolve.extensions我们在引入外部模块的时候,通常会有这种写法:import test from './test/test这种写法就是想从./test目录下去引入test.js。可是再进行React的开发时,我们经常会将文件后缀命名为.jsx。那么再通过上面那样的写法...

2019-09-09 09:52:27

Webpack之DLL

文章目录引入流程问题引入在我们的项目中,免不了要引入许多的第三方模块。这些第三方模块在打包的时候就会被打包进最后生成的文件之中。导致最后生成的文件过大的同时也增加了打包的时间。这时我们就会想,如果这些第三方模块能只打包一次,之后就直接使用这些打包好的模块多好,毕竟这些第三方的模块代码不会有变动。那么,我们再次打包目标代码时就不需要再从node_modules中去寻找第三方模块,而是从我们预...

2019-09-09 09:17:14

Webpack与ESLint

文章目录概念使用概念在团队中,每个人的代码风格都不尽相同。自然的,提交到代码库里的代码也就风格多样。这不是一个好事,统一的代码风格有助于团队成员理解他人写的代码,也易于维护。那么想要所有人的代码风格统一,我们就需要用到ESLint。使用首先得要安装eslint:yarn add eslint然后进行ESLint的初始化:npx eslint --init初始化过程会让我们...

2019-09-07 21:57:09

webpack-dev-server与单页应用路由

首先是三个使用React编写的文件:index.js:import React, { Component } from 'react';import ReactDOM from 'react-dom';import { BroswerRouter, Route } from 'react-router-dom';import Home from './Home';import List...

2019-09-07 00:24:09

webpack-dev-server的代理(proxy)

文章目录引入proxy引入先看一个例子:import React, { Component } from 'react';import ReactDOM from 'react-dom';import axios from 'axios';class App extends Component { componentDidMount(){ axios.get(...

2019-09-06 21:47:21

Webpack与TypeScript

文章目录引入使用问题引入TypeScript是最近一段时间非常火的一个JavaScript的超集。说是超集,那么自然TypeScript也完整的支持JavaScript语法,同时还提供了许多新特性。那么Webpack也能够对TypeScript的源文件进行打包。使用首先创建一个新项目,就叫typescript。然后在项目根目录下新建src文件夹、webpack.config.js配置文...

2019-09-06 17:15:35

Webpack之Shimming

文章目录引入使用this引入首先在index.js内写如下内容:import _ lodash from 'lodash';import { test } from './test';console.log(_.join(['a','b','c'], ''));然后在test.js中:console.log(_.join(['1','2','3'], ''));打包后在浏览器中...

2019-09-02 12:32:30

Webpack与浏览器缓存

想必大家都知道浏览器是有缓存的。浏览器缓存分为强缓存和协商缓存,在命中强缓存时就不会像服务器请求数据。那么就产生了一个问题,在强缓存生效的时间内一旦服务器资源发生了变化该怎么办?办法也很简单,修改资源的文件名。只要文件名不一样,那么请求的url也不一样,那么就相当于请求一个新的资源,自然就不会去使用缓存(尽管缓存依然存在)。那么现在我们的需求便是希望文件名能够体现文件有没有被修改过,如果两次...

2019-09-02 11:01:35

查看更多

勋章 我的勋章
  • GitHub
    GitHub
    绑定GitHub第三方账户获取
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 1024勋章
    1024勋章
    #1024程序员节#活动勋章,当日发布原创博客即可获得
  • 勤写标兵Lv3
    勤写标兵Lv3
    授予每个自然周发布7篇到8篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。