前端
文章平均质量分 58
代码小草
这个作者很懒,什么都没留下…
展开
-
webpack5.0 + React17.0从零开始构建项目(持续更新中)
准备工作 前端开发node环境是必不可少的,如果你还没安装node环境,请先安装node,最新稳定版本。安装教程自行百度(PS: 一搜一大把) 两大必备利器: webpack:本质上,是一个用于现代 JavaScript 应用程序的_静态模块打包工具_。当 webpack 处理应用程序时,它会在内部构建一个依赖图(dependency graph),此依赖图对应映射到项目所需的每个模块,并生成一个或多个bundle。 babel: 是一个javaScript编译器。是一个工具链,主要用于将...原创 2021-03-22 23:15:08 · 927 阅读 · 0 评论 -
webpack 打包、配置优化
tree shaking (webpack V4.0之后 mode为produciton时 默认支持) Tree Shaking的含义是把一个模块里没用的东西都摇晃掉。 一个模块可以理解为一个文件,例如a.js,里面会导出很多内容,当我们去引入这个树的一部分,那么引用的部分做打包,不引入的部分剔除掉,这就是tree shaking概念。 注意:Tree Shaking只支持ES Moudule的引入,也就是支持import模块的引入,如果使用const add = require('./a.js)这种原创 2021-03-20 19:40:35 · 145 阅读 · 0 评论 -
webpack深入探讨
css自动补齐前缀 使用postCss插件的autoprefixer 的自动补全,根据can I use 规则 // 建议 mini-css-extract-plugin 与 css-loader 一起使用, 该插件与style-loaader互斥 module.exports = { entry: { app: './src/app.js', home: './src/index.js' }, output: { file..原创 2021-03-20 15:31:04 · 103 阅读 · 0 评论 -
webpack认知(学习笔记)
首先webpack是现阶段前端广为流传的一个打包工具! webpack认为一切都是模块! 话不多说,放图: 那么,既然是打包,总的先知道从哪开始也就是入口,即配置项 entry, 有入口就有出口,即配置项 output 而对于非代码的东东。比如说图片,字体等webpack也会将其根据依赖关系不断的加入到依赖树中,进行打包。 entry的用法 1. 单入口:entry是一个字符串(单页应用) module.exports = { entry: './src/index.js' }原创 2021-03-18 21:43:33 · 285 阅读 · 0 评论 -
记一次canvas拖拽和grid-layout组件拖拽事件冲突的问题
在 grid-item 上添加 dragIgnoreFrom="canvas" 可以阻止在canvas上的拖拽冒泡到外层grid-item组件上原创 2021-03-18 17:01:57 · 521 阅读 · 1 评论 -
javaScript零散知识点
js事件循环 async function async1() { console.log('async1 start'); await async2(); console.log('async1 end'); } async function async2() { console.log('async2'); } console.log('script start'); setTimeout(function() { console.log('setTimeo原创 2021-03-09 17:22:01 · 72 阅读 · 0 评论 -
javaScript零散知识点
真的了解this吗 function foo() { var a = 2; this.bar(); } function bar() { console.log( this.a ); } foo(); // ReferenceError: a is not defined 上述这段经典错误代码,试图通过 this.bar() 来引用 bar() 函数。这是绝对不可能成功的。 那么this到底是什么呢? 首先要明白this是在运行时绑定的,其次this 的绑定和函数声明的位置原创 2021-03-09 15:47:25 · 64 阅读 · 0 评论 -
javaScript零散知识点
js作用域 在 JavaScript 中,我们将作用域定义为一套规则,这套规则用来管理引擎如何在当前作用域以及嵌套子作用域中根据标识符名称进行变量(变量名或者函数名)查找。 js中只有全局作用域和函数作用域。 作用域和执行上下文是两个完全不同的概念。 js代码的整个执行过程分为编译阶段和执行阶段,而在编译阶段就会确定作用域,执行上下文则是在执行阶段创建。 作用域链,是由当前环境与上层环境的一系列变量对象组成,它保证了当前执行环境对符合访问权限的变量和函数的有序访问。 ...原创 2021-03-08 22:33:42 · 113 阅读 · 0 评论 -
javaScript零散知识点
js内存 js是在创建变量时 自动进行了分配内存,并且在不使用它们时 自动 释放。释放的过程称为垃圾回收。 内存生命周期: 1. 分配你所需要的内存; 2. 使用分配到的内存(读,写); 3. 不需要时将其释放/归还。 数据结构 栈:后进先出; 队列:先进先出; 堆:树状结构,类似于key-value键值对的存储方式。 js中并没有严格意义上区分栈内存和堆内存。 一般情况下基础类型的数据,在栈内存中维护,引用类型的数据在堆内存中进行维护。 基本类型的数据在内存中存储的是值...原创 2021-03-08 17:14:00 · 72 阅读 · 0 评论 -
javaScript零散知识点
String类 (js万物皆对象) string大家都很熟悉了吧,定义一个字符串变量,都会写 : var str = "abc"; 事实上,我们在代码中这么写的背后,js已经自动的帮我们做了一系列的处理,那么上述字符串变量定义的完整写法,实际上这样的: var str = new String("abc"); 很直观的可以看到,我们new了一个String的实例,那么在浏览器控制台输出就会看到这样子的东西。 可以看到,字符串类型string继承了字符串类String的所有属性,(好比人属原创 2021-03-06 21:11:54 · 106 阅读 · 0 评论 -
javaScript零散知识点
js原型你真的知道吗 最开始学习js的时候也学过原型,但是当时感触就是这东西也就那样(内心os:什么鬼)。现在回想,真的彻彻底底的掌握了原型了吗? 说到js继承,那是肯定绕不开原型的,那什么是原型呢? MDN是这么描述的:js只有一种结构,对象。(ps:也就是我们常听说的一句话:万物皆对象)每个实例对象都有一个私有属性(__proto__),指向它的构造函数的原型对象(prototype)。该原型对象也有一个自己的原型对象(__proto__),层层向上直到一个对象的原型对象为null。规定:nul原创 2021-03-06 20:33:02 · 72 阅读 · 0 评论 -
javaScript零散知识点
js类型转换 偶然在网上看到张很有意思的图,输出结果可能很多人意想不到。(图就不放了直接看控制台输出吧,哈哈哈!) // 在控制台输入左边代码 可得到右边值 typeof NaN // number 9999999999999999 // 10000000000000000 0.5 + 0.1 === 0.6 // true 0.2 + 0.1 == 0.原创 2021-03-03 22:50:01 · 137 阅读 · 1 评论 -
javaScript零散知识点
js 数据类型判断 1. typeof typeof('') // string typeof(2) // number typeof(false) // boolean typeof(Symbol()) // symbol typeof(BigInt(2)) // bigint typeof(undefined) // undefined typeof(null) // object typ原创 2021-03-03 18:04:28 · 103 阅读 · 2 评论 -
javaScript零散知识点
你不知道的css css,每个前端人的基本技能,或一般或熟练或精通!这里我们就来聊聊那些 你或许不知道的css。 PS:不定时补充更新。 1.flex布局会影响到overflow 2.table 不支持设置 box-shadow 3. 以下三种情况会导致position: fixed定位错位: (1)transform 属性值不为 none 的元素; (2).perspective 值不为 none 的元素; (3)在 will-change 中指定了任意 ...原创 2021-03-03 08:31:20 · 96 阅读 · 0 评论 -
javaScript零散知识点
js 初步认知 1.js是一种具有函数优先的轻量级,解释型或即时编译型的弱类型编程语言。 2. js由ECMAScript,BOM,DOM 三部分组成。其中ECMAScript是核心,规定了语言的书写规范,BOM提供于浏览器交互的接口和方法,DOM提供访问网页内容的方法和接口。 ...原创 2021-03-03 08:26:11 · 93 阅读 · 0 评论