- 博客(41)
- 收藏
- 关注
RSS订阅原创 Vue3.x属性继承报错解决
编写vue组件的时候莫名报了下面的警告:[Vue warn]: Extraneous non-props attributes (border, style) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.at xxxx(发生问题的组件位置)at ...解决：在自定义组件上添加了border、style属性
2021-05-24 15:18:55
14183
原创 webpack性能优化全方案
提升webpack性能优化无非从两个方面入手：1.如何构建速度2.如何优化打包后的文件如何构建速度webpack构建的过程，其实是把，从入口开始，通过AST语法树分析，把所有依赖的模块，结合loader和plugin，都进行内容转换，合并在一起，最终输出打包文件的过程。所以，要提高构建速度，就要减少不必要的模块依赖，和loader、plugin的使用...
2021-05-06 15:10:34
6507
2
原创 ES6模块懒加载
ES6的模块化使用import导入模块，使用webpack打包的时候，webpack会把所有通过import导入的模块，代码打包到bundle里面。示例：import _ from 'lodash-es'var arr = [1,2,3,4]console.log('webpackJsonp',webpackJsonp)setTimeout(()=>{ console.log("_",_.chunk(arr,2))},5000)//输出结果//webpackJsonp [Ar
2021-05-06 11:29:17
1113
原创 css编译工具之postcss
postcss是一个依赖postcss插件处理css工程化问题如:编译未来css语法和css预编译语法为浏览器能兼容和识别的css语法的工具。安装postcss和其命令行工具、预设：npm i -D postcss postcss-cli postcss-preset-envpostcss-cli是专门调用postcss库api的工具，postcss-preset-env是集成了postcss大部分常用插件，安装此预设等于安装了precss、autoprefixer等一系列插件。构建语法：..
2021-03-22 11:17:23
623
原创 CSS预编译器之LESS
介绍LESS以类似编程语言形式去书写CSS代码，可以解决下列的问题：重复的样式值：例如基本的颜色、常用长度宽度大小等重复的CSS代码段：例如浮动和清除浮动代码大多数地方是一致的重复的嵌套书写：利用各种选择器选择元素的重复难以阅读的嵌套书写原理LESS本身是一个预编译器，使用LESS语法的代码，浏览器是不能识别的，需要通过LESS预编译器编译成.css文件才能正常使用。安装这里我选择开发环境安装。npm i less --save-dev编译命令npx lessc 【需要编译的
2021-03-18 19:11:33
226
原创 webpack开发服务器-webpack-dev-server
webpack-dev-server的作用webpack-dev-server为你提供了一个简单的 web 服务器，并且能够实时重新加载修改的内容。安装：npm install --save-dev webpack-dev-serverwebpack.config.jsmodule.exports = {+ devServer: {+ contentBase: './dist'+ },};package.json"scripts": {+ ...
2021-03-17 18:49:18
198
原创 webpack插件之html-webpack-plugin
html-webpack-plugin的作用html-webpack-plugin的主要作用就是在webpack构建后生成html文件，同时把构建好入口js文件引入到生成的html文件中。安装html-webpack-pluginWebpack 5 npm i --save-dev html-webpack-plugin yarn add --dev html-webpack-pluginWebpack 4 npm i --save-dev html-webp
2021-03-17 14:52:56
11679
原创 css的工程化
CSS存在的问题一、类名冲突当一个项目的模块和界面变动越来越丰富的时候，命名一个css类名难度越来越大，因为新的类名很可能会在其他模块存在，但是我们并没发现，这样的情况下，会导致类名冲突，从而所写的样式会影响到其他模块。一般这样的情况下我们都会选择通过css选择器或者层级来选择样式，保证不会影响到其他模块，但是这样依然会有影响其他模块的风险，同时通过选择器和层级来选择的元素往往要写很长一段css选择的代码，这样很不容易阅读，并且难以维护和修改。二、样式或属性值重复在一个网站里面，相同的样式和
2021-03-17 00:08:11
556
原创 babel的使用详解
目录Babel 是什么？Babel安装命令行工具和核心库安装安装和配置预设构建配置兼容的浏览器在webpack中使用babelBabel 是什么？babel可以认为是一个javascript的翻译工具。ECMAScript迄今为止，已经更新很多个版本了。而旧浏览器并不一定支持新版本的ECMAScript的标准。例如ES6的许多语法和API在旧版本的ie中就不支持，因此为了所写代码的兼容性，Babel就可以把新版本的代码翻译成旧浏览器也能识别的语法。Babel安装.
2021-03-11 21:02:10
860
原创 javascript的执行机制
目录浏览器的组成预编译事件循环JS的事件循环（eventloop）是怎么运作的?尾调用尾递归尾递归(尾调用)优化浏览器的组成1.User Interface（用户界面）－包括地址栏、后退/前进按钮、书签目录等，也就是你-所看到的除了页面显示窗口之外的其他部分2.Browser engine（浏览器引擎）－可以在用户界面和渲染引擎之间传送指令或在客户端本地缓存中读写数据等，是浏览器中各个部分之间相互通信的核心3.Rendering engine（渲染引擎）－解析DO
2021-03-11 11:18:12
115
原创 解决vue中axios设置超时无效的问题
现在有一个大概需要6分钟才返回结果的接口，查看axios官方文档默认是1000毫秒，于是我改成了30分钟：const http = axios.create({ timeout: 30 * 60 * 1000, headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }})但是在请求接口的时候，2分钟或者4分钟就断开了：通过查资料
2021-02-24 18:36:12
7138
2
原创 正则表达式
描述字符描述字符分为普通字符和元字符。用于描述正则匹配规则的内容。普通字符即是数字字母和常用符号，用以描述自身。元字符具有代表一类字符的特殊字符。普通字符 var str = 'ac10_' var r = /ac/g console.log(str.match(r)) //["ac"] //在r表示的正则表达式中ac为特殊字符，只能匹配str字符串中的ac字符。元字符 // . ：查找单个字符，除了换行和行结束符 var str = 'aZ1_?#
2021-02-02 10:35:14
162
原创 webpack-loader简析和使用
webpack loader的作用为：在webpack读取文件之后，loader会对匹配到的文件内容进行处理加工，最后给webpack进行下一步编译和构建。当然也可以在loader函数内部做一切node环境支持的事情，例如文件操作，业务逻辑处理等webpack的loader使用在编译之前，读取文件之后。上图：以项目为案例：目录结构如下：// 构建前的项目目录loader-test|-loaders |-a.js |-b.js |-c.js|-src |-index.js|-n
2021-01-07 17:35:02
314
原创 webpack中的entry和output配置解析
在webpack的配置文件中，有两个关于入口和出口的配置分别问entry和output。entry的值是代表生成chunk的入口地址，而output的值是把chunk输出成文件的路径。entry//webpack.config.js//写法1：module.exports = { entry:'./src/index.js'}//写法2：module.exports = { entry:{ mychunk:'./src/index.js', .
2021-01-05 21:27:03
551
原创 webpack的安装和基本使用
初始化根目录：npm init然后一路按回车，为了方便生成packge.json的文件，为后续方便配置使用的webpack命令。安装：npm i -D webpack webpack-cliwebpack仅在开发阶段使用，所以安装的时候加上-D参数，只作为开发阶段的依赖。打包构建：npx webpackwebpack的默认入口文件为根目录的./src/index.js文件，出口文件为根目录的./dist/,打包好的文件都会放着这个目录下边。如果要修改入口和出口的目录可以在根目录新建一
2020-12-29 00:17:56
219
原创 webpack的作用
javascript在浏览器端步入模块化时代以后，产生了下列的问题：性能和效率的问题。由于模块化的出现，致使需要功能模块被细分，从而导致js文件变多(依赖变多)。进而，当引入一个完整的功能模块的时候，浏览器会加载更多的js文件。浏览器加载js文件是通过网络请求的方式的获取的，如果一个模块的依赖很多的话，就会发生很多的网络请求去获取js文件，导致了多余的网络开销，间接的影响了性能。 兼容性问题。浏览器目前的模块化标准只支持ES6，AMD,CMD，并不支持commonJS的模块化标准，进而导致使用comm
2020-12-28 00:32:59
315
原创 ES6模块化与commonJS的对比
javascript模块技术是让javascript这门语言通往工程化和编写大型应用的一块敲门砖，因为它彻底解决了js文件依赖混乱和全局变量污染的问题。什么是依赖混乱？ 现在2个js文件：// a.jsvar a1 = function(){ // active code }var a2 = function(){ // active code }// b.jsvar b1 = function(){ // active code }v..
2020-12-26 00:20:19
281
1
原创 css如何画有边框的三角形
vue的logo就可以看作是一个有边框的三角形。以画一个vue的logo为例子: <div> <div id="vue-logo"> <div class="green"> <div class="gray"> <div class="white"></div> </div>
2020-05-27 19:21:53
1317
原创 如何在vue组件中递归组件
以简单的树形组件为案例，实现在组件中递归组件。App.vue组件:<template> <div class="main"> <tree :list = "list" /> </div></template><script>import tree from "./tree";export default { components: { tree }, data() { return
2020-05-27 15:30:07
516
原创 理解vue生命周期钩子
图解先上一副官网的生命周期图，稍微补充了点说明。在不同的生命周期函数中执行代码：const vm = new Vue({ el:"#app", methods:{ myfn:function(){ this.a = this.val } }, data:{ a:'a', b:'b', val:"" }, wat
2020-05-08 23:22:17
126
原创 定义变量更好的方式
假如现在需要定义三个变量,最初的方式： //定义了三个全局变量 var a = function () {} var b = function () {} var c = 'c'以上定义变量有一个严重的缺陷，如果此时也有人在全局作用域定义a,b,c三个一样变量名,你和别人的变量就会冲突。把冲突的变量 变成局部变量方式一：对象收编 var obj = { ...
2020-04-26 17:10:16
149
原创 v-if,v-else-if,v-else与v-show
基本使用v-if、v-else-if、v-else <template v-if = "false">雷天</template> //渲染 //和流程控制一样，只会进入第一个符合条件的渲染 <div v-if = "true">晴天</div> //渲染 <div v-else-if = "true">雨...
2020-04-26 11:38:26
280
原创 通过vue响应式原理，解释一些数据改变而不渲染的现象
现象在vue中，通过以下情况改变data，是不会渲染页面的：在对象中增加新元素和删除对象或属性通过索引赋值的方式给数组添加新元素或改变元素值通过改变length属性值,改变数组长度案例：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <div id="ap...
2020-04-22 01:27:00
374
原创 then和$.when在ajax中的使用
then在then中可以分别注册，成功，失败，进行中的函数。在Jq的链式调用then的时候，只有返回一个promise时，下一个then注册的回调函数才能使用回调结果，否则只会依次触发回调函数而没有回调结果。案例：不用then $.ajax({ url:'https://autumnfish.cn/api/hero/simple', type:'get'...
2020-04-14 12:46:47
4068
原创 $.Deferred的基本使用
在Jquery中,对比异步回调函数管理工具方法中的$.Callbacks,还有一个更加方便的管理异步回调函数的工具方法，而且这是一个有状态的方法 — $.Deferred。如果不了解 $.Callbacks方法，建议先看我上一篇文章Callbacks基本使用关于$.Deferred为了更好区分回调函数，jquery内部给Deferred对象定义了三种注册和调用函数的方法:类型注册...
2020-04-13 12:24:41
4821
原创 $.Callbacks的基本使用
jquery提供了一个$.callback的工具方法，可以用来管理函数，应用场景多用于用来管理回调函数。基本使用$.callback对象var callback = $.Callbacks()在控制台打印callback可以看到对象内部的方法：$.callback对象常用的方法使用下列方法前，记得先引入jquery库！add(fn[必填])添加函数到调用列表<scr...
2020-04-09 13:43:45
970
原创 如何解决onclick与onmousedown,onmouseup的冲突，取消默认事件
onclick是点击，一个完整的点击动作由按下鼠标键onmousedown，和弹起鼠标键onmouseup完成，所以很多时候，onclick事件和onmousedown,onmouseup混用的时候会出现冲突。如下案例： <script> document.onclick = function(e){ console.log('onc...
2020-04-02 00:53:01
4550
原创 事件冒泡、捕获？如何阻止
事件冒泡 <style> div{ color: white; font-size: 30px; } .content{ width: 400px; height: 400px; background-color...
2020-04-02 00:24:07
3365
原创 js如何给dom元素绑定事件，移除事件
拿点击事件举例：<script> var div = document.getElementsByTagName("div")[0] function test(){ console.log(1) } // 兼容性很好 div.onclick = test // 绑定事件 div.onclick = ''...
2020-04-01 21:33:53
3298
原创 dom元素对象常用的属性和原生js方法总结
getAttribute(prop)获取dom元素的属性值。 <div name="demo" id="demo" class="demo"> <!-- 我是注释 --> <span></span> </div> <script> var re...
2020-03-30 23:06:46
286
原创 原生js获取dom元素的方式总结
原生js获取元素只有两种方式：第一种是通过document对象内置的方法。第二种是通过document节点获取。方法可以结合节点的方式来获取元素。第一种：通过方法动态方法无论在何时获取元素，document中的对象如何变化，使用动态方法中获取的元素都是最新状态的。document.getElementById()通过元素的id获取，id元素的唯一标识。在IE8以下，id不...
2020-03-29 17:40:52
562
原创 CSS如何让元素水平，竖直方向都居中？
第一种原理：通过定位和调整matgin-top和margin-left的位置的方式调节。 <style type="text/css"> .demo{ width: 200px; height: 200px; background-color: skyblue; position: absolute; top:50%; left: 50%...
2020-03-27 00:03:42
440
原创 两步让对象变数组
在javascript中,数组也是对象类型，但是真正意义上的对象和数组还是有区别，一般的json对象是不具备数组的方法和属性的。案例： //对象 var arr = { 0 : 'javascript', 1 : 'java', 2 : 'node' } // 数组 var arr1 = [ 0 : 'javascript', 1 : 'java', 2 : ...
2020-03-24 23:55:14
239
原创 ES3常用数组方法
增删系列方法：push(元素1，元素2，…，元素n)功能：往源数组的末端添加元素。返回值：添加元素后，源数组的长度。示例：var a = [1]a.push(2,3,4)console.log(a) //(4) [1, 2, 3, 4]unshift（元素1，元素2，…，元素n）功能：往源数组从首端添加元素。返回值：添加元素后，源数组的长度。示例：var a = ...
2020-03-24 00:32:15
396
原创 callee和caller的使用
calleecallee是arguments对象中的一个方法，功能是引用arguments所在的函数。案例：//命名函数function fn(){console.log(arguments.callee)}fn()结果如下：//ƒ fn(){console.log(arguments.callee)}//匿名函数(function(){console.log(argume...
2020-03-22 17:23:42
269
原创 js函数中的形参，实参和arguments对象
形参：形式参数，是函数作用域内的变量。实参：调用函数时，传入的参数，有对应的形参时，实参会赋值给形参。案例：var MyF = function(a){} //a为形参MyF(1) //1为实参在javascript中的函数中，有如下一些规则：1.实参传入个数和形参设置数量都是自定义的。实参传多或者传少都是允许的，实参不是非必传，形参也不是非必设，原理和变量的定义和赋值一样。...
2020-03-22 14:36:53
1074
原创 js中hasOwnProperty和instanceof的使用
hasOwnPropertyhasOwnProperty方法是用来判断某个属性是否是属于自身对象的，该方法仅用于判断自身对象，不会查找原型链。案例如下：Person.prototype.name = '原型'Person.prototype.myFc = function(){}function Person(){ this.age = 18 this.myFc = funct...
2020-03-22 00:40:40
496
原创 搞懂Js中的this，call和apply方法
为了更好的看懂这篇文章，建议先要理解js对象的原型和原型链相关的知识，若不了解，可以看上一篇文章《js对象的构造函数与原型》this的理解在全局中使用this，this为window对象谁调用了对象中属性，this就是谁this.xxx调用属性的时候，会沿着原型链查找xxx属性案例如下： var width = 200,name = 'window' Object.prototy...
2020-03-21 20:12:52
329
原创 js对象的构造函数与原型
从__proto__属性说起我们都知道，javascript创建对象一般有两种方式：方式一：通过字面量创建，例如：var obj = {} //创建一个空对象var obj1 = { name :'js'} //创建带属性的对象方式二:通过new关键字，如：//内置构造函数var numObj = new Number(3) //创建一个number对象//自定义构造函数fu...
2020-03-21 01:22:06
173
原创 解析Js中&和&&、|和||运算符的区别和运算过程
&运算符先在浏览器控制台，举个例子：为什么 234 & 456 打印的结果是200？&的运算步骤：先把234,456两个十进制的数字转换成二进制分别为：11101010，111001000把11101010补齐八位与111001000位数相同，为011101010比较011101010和111001000，对应位数上数字相同记相同的数，不同则为0，得出得结果...
2020-03-18 12:35:44
358
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人