- 博客(110)
- 收藏
- 关注
RSS订阅原创 chalkjs
默认node在终端输出的文字是黑白的，为了使输出不在单调，添加文字背景、改变字体颜色、我们可以使用chalk.js这个库。设置字体颜色如果没有想要的颜色，那么可以使用rgb方法定义字体颜色；
2023-03-08 14:57:17
385
原创 inquirerjs
inquirerjs是一个用来实现命令行交互界面的工具集合。它帮助我们实现与用户的交互交流，比如给用户一个提醒，用户给我们一个答案，我们根据用户的答案来做一些事情，典型应用如plop等生成器工具。
2023-03-08 14:43:48
669
转载 Shelljs
exec()callback:< Function >：当进程终止时调用，并带上输出。lsshellString(str):用于将常规字符串为ShellStringshellString.prototype.to(file):把ShellString的内容覆盖写入参数指定的file。6.ShellString.prototype.toEnd(file)：把ShellString的内容写到指定文件的末尾。
2023-03-08 11:33:58
571
原创 Vue源码学习（7）- Hook Event
Hook Event （钩子事件），也就是生命周期钩子函数，供开发者在特定的逻辑点添加额外的处理逻辑，比如：在组件挂载阶段提供了beforeMount和mounted两个生命周期钩子，供开发者在组件挂载阶段执行额外的逻辑处理，比如为组件来准备渲染所需的数据。
2022-11-30 20:10:27
183
原创 Vue源码学习（五）- 全局API
Vue.use(plugin)做了什么？负责安装plugin插件，其实就是执行插件提供的install方法首先判断该插件是否已经安装过了如果没有，则执行插件提供的install方法安装插件，具体做什么由插件自己决定Vue.mixin(options)做了什么？负责在Vue的全局配置上合并options配置，然后在每个组件生成vnode时会将全局撇值合并到组件自身的配置上来。标准化options对象上的props，inject，directive选项的格式。
2022-11-18 20:09:56
631
原创 Vue源码学习（4）- 异步更新
当通过obj.key = ‘new val’ 更新值时，会触发setter的拦截，从而检测新值和旧值是否相等，如果相等什么也不做，如果不想等，则更新值，然后由dep通知watcher进行更新。所以，异步更新的入口就是setter中最后调用的dep.notify()方法。
2022-11-17 09:59:14
337
原创 vue2源码学习(3)-响应式原理(二)
将一个正常的object转换为每个层级的属性都是响应式（可以被侦测的）的object;observe方法是最外层级的，上来先看observe(obj). —>>> obj身上有没有 __obj__ —>>> new Observer() ---->>> 遍历下一层属性，逐个defineReactive。
2022-11-14 22:57:20
345
原创 vue源码学习（2）- Vue初始化过程
Vue的初始化过程（new Vue(options))都做了什么？处理组件配置项初始化根组件时进行了选项合并操作，将全局配置合并到根组件的局部配置上（也就是将Vue构造函数原型上添加的配置项合并到vm实例化对象的身上）初始化每个子组件时做了一些性能优化，将组件配置对象上的一些深层次属性放到vm.$options选项中，以提高代码的执行效率初始化组件实例的关系属性，比如$parent,$children,$root,$refs等处理自定义事件调用beforeCreate钩子函数。
2022-11-12 15:21:17
339
原创 HTML5 Canvas原生使用
是H5新增的可以通过javascript来绘制图像，甚至可以进行实时视频处理和渲染；Canvas是由HTML代码配合高度和宽度属性而定义出的可绘制区域。Javascript代码可以访问该区域，通过一套完整的绘图函数来动态生成图形；
2022-11-01 20:20:31
284
原创 React路由
React路由：一、前端路由的工作原理：其实是利用前端中的BOM对象中的history这个属性来进行的实现。二、实现前端路由的两种方法：方法一：直接使用H5推出的history身上API。但是有些旧的浏览器可能不支持。这里使用的BrowserRouter方法二：hash值(锚点)。兼容性好，会在url地址中出现#字符。使用的是HashRouter。URL的哈希值，#后面的内容不会发送给服务器，但是浏览记录会保存在历史记录中。BrowserRouter与HashRouter的区别：除了上面提到的
2021-07-13 23:35:39
390
2
原创 关于fetch网络请求
fetch也是内置的一种发送网络请求的方法，它和xhr的性质一样式window自带的。优势在于：可以不使用第三方的请求库就可以进行网络请求。fetch('/api/search/user2?q=${keyword}').then(res=>{ console.log("联系服务器成功了") //这里的 res.json()返回的是一个promise对象 return res.json()}, //error=>{ //console.log("联系服务器失败了",.
2021-07-13 23:26:22
219
原创 ReactAjax关于跨域问题的解决
react应用中需要集成第三方ajax库(或者自己封装)，这里使用axios解决跨域问题：使用代理的方式来解决这个问题，设置代理的方式，在脚手架的package.json文件中的进行配置;"proxy":"https://localhost:5000" //这时候当在3000端口发送请求的时候，会将请求发送给5000端口，从而实现跨域的问题解决当有多个服务器的时候，需要向多个服务器发送请求，每次请求都会有跨域问题。如何写代理，使得访问到正确的端口号。所以如果想配置多个代理：在src文件夹下面创.
2021-07-13 23:23:18
270
原创 虚拟DOM的两种创建方式
一、虚拟DOM的两种创建方式：1.使用jsx创建虚拟DOM <!-- 准备好一个容器 --> <div id="test"></div> <!-- 引入react核心库 先导入核心库再导入其他的库--> <script type="text/javascript" src="../js/oldVersion/react.development.js"></script> <!-- 引入react.dom 用
2021-07-13 23:21:00
948
原创 CSS小技巧
一、多行文字的垂直居中1.单行实现垂直居中<style> .item{ width: 90px; height: 50px; border: 1px solid orange; margin-bottom: 5px; text-align: center; line-height: 50px; } .item .text{ font-size: 12px; }</style><body>
2021-07-12 06:32:10
125
转载 关于HTTP中的keep-alive
1.HTTP中的keep-alive既然上面提到了HTTP是基于请求与响应的，且最主要的两个特点就是无连接和无状态，但需要说明的是，虽然是无连接的，但其底层也就是传输层大多却是基于 TCP面向连接的通信方式，因此，这里的无连接指的是：当server端和client端进行通讯的时候，client端向server端发起请 求，server端接收请求之后返回给client端一个响应，之后就会断开不再继续保持连接了；这样有一个好处就是对于只有一次访问的连接来说不仅节省 资源还很高效，但很明显，如果client端还
2021-06-03 11:34:40
10287
转载 CSS清除浮动的方法及原理
一、为什么清除浮动1.浮动的缺点：浮动虽然可以便于页面布局，但同时会产生一些问题，也就是我们常说的“副作用”。一个元素设置了浮动（即 float 值为 left, right 或 inherit 并从父元素上继承 left 或 right 值）的常见缺陷是——影响它的兄弟元素的位置和父元素产生高度塌陷，下面对这两个问题展开说明。1.1对兄弟元素的影响分为以下两种情况：若兄弟元素是块级元素且设置了高度的：上级元素设置了浮动，从而脱离了标准文档流，所以此时该兄弟元素只能补位上去，从而出现被上级元素覆
2021-06-02 19:56:58
256
原创 webpack内容详解
{ test:/\.js$/, //排除node_modules下的js文件 exclude:/node_modules/, //只检查src下的js文件 include:resolve(__dirname,'src'), //优先执行 enforce:'pre',
2021-05-02 21:13:29
328
原创 webpack优化环境配置
一、webpack性能优化概述开发环境性能优化生产环境性能优化1.1开发环境性能优化优化打包构建速度HMR优化代码调试source-map1.2生产环境性能优化优化打包构建速度oneOfbabel缓存多进程打包externalsdll优化代码运行的性能缓存(hash-chunkhash-content)tree shakingcode split懒加载/预加载pwa二 、开发环境webpack性能优化2.1 优化打包构建速度
2021-05-02 20:55:51
163
原创 webpack 生产环境相关
webpack生产环境配置就是当代码上线时保证可以正常运行。之前我我们提到的Babel，以及将css文件打包成单独文件的插件都是生产环境的配置。一、CSS兼容性处理1.安装 npm install postcss-loder postcss-preset-nev --save2.文件配置改配置必须在css-loader之前掉用 rules:[ { test:/\.css$/, use:[ .
2021-05-02 09:38:28
129
原创 webpack开发环境配置相关
所谓的开发环境配置就是指在进行打包的时候，只有在程序员开发的时候用得到，一旦上线这些配置将无用。这就是开发环境配置，这个配置，可以极大的提高程序员的开发效率。一、html-webpack-plugin这是要一个用来导出的html文件的插件，并且可以将导出的的js文件自动的引入到该文件中，一般该文件导出到导出目录中。1.安装插件：npm installl html-webpack-plugin -D2.文件配置 entry:{ 'first':'./src/index.j.
2021-05-02 08:59:04
134
原创 webpack处理javascript兼容性--Babel
.package允许你使用Babel和webpack转译JavaScript文件。因为javaScript的版本一直都在更新迭代，所以需要转译为浏览器可认识的文件内容，经常来说，我们会将ES6转换成ES5。一、Babel初使用1.基本兼容性处理1.1安装包 npm install babel-loader balel/core babel/preset-env -D1.1配置文件 { test:/\.js$/, exclude:
2021-05-01 22:14:25
623
2
原创 webpack打包其他资源文件
一、什么是loader？从webpack本身来说，主要是用作处理我们写的js代码，并且webpack会处理js之间的依赖。但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css,图片，也包括一些高级的ES6转成ES5代码，将TypesScript代码庄臣ES5代码，将scss,less，转成css，将.jsx,.vue文件转成js文件等等。对于 webpack本身的能力来说，对于这些转化是不支持的。这时候我们就可以给webpack扩展对应的loader就可以了。loader让webpac
2021-05-01 18:06:33
314
1
原创 webpack基础
一、关于模块化在学webpack之前，我们需要先谈一谈模块化。前端的工程化少不了的一个部分就是模块化。在ES6之前，我们想要进行门模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发。比如CommonJS,CMD,AMD。并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。而webpack其中一个核心就是然我们可能进行模块化开发，并且会帮助我们 处理模块间的依赖关系。当然在webpack打包的过程中还有一些附带的功能，比如代码的压缩和图片的压缩，编译等。如何理解
2021-05-01 16:43:13
410
3
原创 闭包的原理
关于什么是闭包，我想很多人都是知其然，不知其所以然，下面我将彻底解释这个闭包这个东西，以及用它要解决的问题。先扫一眼下面的代码，相信有点基础的都能看懂是什么意思。这个就是平时我们在解释闭包时经常用到的例子。 <script> var ul=document.getElementById("ul"); //当使用var变量定义，实现点击事件 for(var i=0;i<ul.length;i++){ .
2021-04-29 20:19:54
214
转载 从浏览器输入URL到页面显示的过程
从浏览器地址栏输入url到显示页面的步骤：目录1.概述浏览器根据请求的URL交给DNS域名解析器，找到真实IP，向服务器发起请求；三次握手建立连接，服务器交给后台处理完成后返回数据，浏览器接收文件（HTML，JS，CSS,图像等），数据传入完成后四次挥手断开连接。浏览器对加载到的资源（HTML,JS，CSS等）进行语法解析，建立相应的内部数据结构。载入解析到的资源文件，渲染页面，完成。2.DNS域名解析DNS域名解析过程又分为七步：1.浏览器缓存2.系统缓存3,路由缓存4.ISP.
2021-04-27 22:27:40
978
原创 Shell脚本编程之重定向的应用及函数的用法
一、创建名为Organizer的shell脚本用以整理学生数据：假设有一名为Students的文本文件存放学生基本信息，每一行的格式为：“姓名；专业；省份”，该脚本能够将学生信息依据省份导入北方和南方个两个不同的文件（华北、东北、西北地区为北方，其余为南方），文件名分别是NorthStudents和SouthStudents，如果省份信息存在错误则放入另一个文件ErrStudentsInfo，内容保持不变。要求：a)结果数据写入必须使用文件描述符。b)使用函数来判断学生信息应该导入南方还是北方。
2021-04-26 15:10:42
157
原创 Shell脚本编程之循环及选择结构命令的实例
一、创建名为CollectFirstLine的shell脚本，能够将当前文件夹下所有可读文件的第一行内容写入指定的文件（要求文件名在运行时输入）。1） 1 #!/bin/bash 2 for file in ./text/* 3 do 4 if [-r "$file"] 5 then 6 for states in $(cat -1 $file) 7 do 8 echo "$states" >&
2021-04-26 15:02:57
334
原创 06.Symbol
一、Symbol特点：1）Symbol的值是唯一的，用来解决命名冲突的问题。2）Symbol值不能与其他数据进行运算。3）Symbol定义的对象属性不能使用for in 循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名。 //为了解决表示一个独一无二的值。 //Symbol不能用new命令，可以接受一个字符串作为参数.为创建的Symbol提供描述， // 用来显示在控制台或者作为字符串的时候使用，便于区分。
2021-04-25 09:22:13
175
原创 04.对象的简化写法及箭头函数
一、对象属性新写法ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法.let name="lhh";let change=function(){ console.log("hello world");}const school={//新的写法 name, change, imporve(){}//旧的写法 name:name, change:change, imporve:function(){}}二、箭头函数1.基础声明 //当返回的内容只有一条时
2021-04-25 09:19:51
807
原创 03.字符串
一、模板字符串1.声明ES6引入了性的声明字符串的方式 ：模板字符串let str=`我是一个字符串`;2.内容中可以直接出现换行符 //在使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。 let value1=1; let value2=2; let str=`我是数值${value1}, 我是数值${value2}`; //空格和缩进会被保留 console.log(
2021-04-25 09:11:37
75
原创 02.解构赋值
ES6允许安装一定模式从数组和对象中提取之，对变量进行赋值1.对象解构 let obj={ "title":"恭喜lgd", "descibe":"在9.20"， }; //简化接收过程 let {title,descibe:des}=obj; console.log(title);
2021-04-25 09:10:25
78
原创 01.变量
1.变量不能重复声明let a='hello';let a="world";//这里会报错，但是使用var，后面的变量会覆盖前面的变量2.块级作用域一个花括号是一个块级作用域；3.不存在变量提升console.log(song);let song="我爱唱歌";4.不影响作用域链//向上级寻找let dance="like";function fn(){ console.log(dance);}5.常量//声明常量const SCHOOL='school';//1
2021-04-25 09:09:37
86
原创 js运算符
js运算符1.数字的加法运算数字+数字=数字运算；例：console.log( 1 + 1 ); //结果为2；特殊运算：console.log(0.1+0.2); //结果为0.333333333334；js存储数据是IEE47->双精度浮点数计算准确结果的方式：console.log((0.1 * 10+0.2 * 10)/10); //碰到浮点数的方法：先将小数转为整数，再进行还原操作；其他数据之间的运算：NaN和谁运算都是NaNInfinity 的运算符合数学计算
2021-04-25 09:06:58
366
原创 javaScript表单验证
1.javaScript表单验证以下实例代码用于判断表单字段(fname)值是否存在，如果不存在，就弹出信息，阻止表单提交；//javascriptfunction validateForm(){ var x=document.forms["myForm"]["fname"].value; if(x==null||x==" "){ alert("需要输入名字"); return false; //阻止表单提交 }}//HTML表单实例<form name="myForm"
2021-04-25 09:05:43
186
原创 JSON
一、JSON.pares()JSON通常用于与服务器交换数据。在接收服务器数据时一般是字符串。我们可以使用JSON.parse()方法将数据转换为JavaScript对象。JSON.parse(text[,revier])//text:必须，一个有效的JSON字符串.//revier:可选，一个转换结构的函数，将为对象的每个成员调用此函数JSON解析实例：例如我们从服务器接收了以下数据：{"name":"runoob","alexa":1000,"site":"www.runoob,com
2021-04-25 09:04:25
187
原创 web Worker
H5 web Worker1.概述：H5规范提供了js分线程的实现，取名为：Web Workers。Web Worker是HTML5提供的一个javascript多线程解决方案。我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面,但还是规定只有主线程才能更新界面。2.特点：（1）同源限制：分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。（2）DOM限制Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用
2021-04-25 09:02:16
266
原创 16.线程机制于事件循环
1.关于线程问题：JS是单线程的，使用H5中的Web Worker可以多线程执行浏览器是多线程执行的。浏览器是多进程：chrome ，单进程：firefox2.浏览器内核：支撑浏览器最核心的程序不同浏览器可能不一样内核由很多模块组成：3.主线程和分线程主线程：js引擎模块，负责js程序的编译于运行html，css文档解析模块：负责页面文本的解析。将文本解析为一个个的节点。DOM/CSS模块：负责dom/css在内存中的相关处理,最终将所有的节点都解析为一个个对象，根据相互
2021-04-25 09:00:07
103
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人