- 博客(44)
- 收藏
- 关注
RSS订阅原创 Vue 插件（plugin）
插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制,一般有下面几种： 添加全局方法或者 property。如：vue-custom-element 添加全局资源：指令/过滤器/过渡等。如vue-touch 通过全局混入来添加一些组件选项。如vue-router 添加 Vue 实例方法，通过把它们添加到Vue.prototype上实现。 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如vue-router 一、开发插件...
2021-11-23 15:42:15
7443
1
转载 http与https区别
一、http基本特点1.通信中使用明文，内容容易被窃听2.无验证机制，有可能遭遇跨站点请求伪造攻击3.无法证明报文内容的完整性，有可能遭运营商劫持修改二、https基本特点1.结构区别： 从上图可以看出，http通信接口部分用新增了ssl/tls。通常http直接和tcp通信，当使用https时则演变成先和ssl通信，再由ssl和tcp通信。 https是在http协议基础上加入加密处理和认证机制以及完整性保护，即http+加密+认证+完整性保护=https2...
2021-08-12 10:58:33
730
原创 Webpack之DllPlugin 和 DllReferencePlugin
一、什么是DllPlugin和DllReferencePlugin?webpack官网上是这么定义的通俗来说作用就是：DLLPlugin： 能把第三方库代码分离开，并且每次文件更改的时候，它只会打包该项目自身的代码。所以打包速度会更快。项目结构： 首先需要新建一个webpack.dll.config.js文件。webpack.dll.config.js作用是把所有的第三方库依赖打包到一个bundle的dll文件里面，还会生成一个名为 manifest...
2021-08-11 14:35:48
814
1
转载 Javascript 算法面试题
一、改造代码输出0-9？解析：因为javascript是单线程执行，只有执行完主线程的代码之后才会去执行异步函数里的宏任务清理掉，所以主线程里的i执行完以后已经是10了，执行到setTimeout的时候输出的都是10.（1）解析：利用 let 变量的特性 — 在每一次 for 循环的过程中，let 声明的变量会在当前的块级作用域里面（for 循环的 body 体，也即两个花括号之间的内容区域）创建一个文法环境（Lexical Environment），该环境里面包括了当前 fo...
2021-08-04 00:14:09
177
转载 Webpack 打包原理
一、什么是webpack？webpack是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图，此依赖图对应映射到项目所需的每个模块，并生成一个或多个bundle。主要功能：（1）打包：将多个文件打包成一个文件，减少服务器压力和下载带宽；（2）转换：将预编译语言转换成浏览器识别的语言；（3）优化：性能优化特点：（1）代码拆分webpack 有两种组织模块的依赖方式，同步、异步异步依赖将作为分割...
2021-08-03 17:00:51
582
转载 Vue 核心 虚拟DOM（Virtual DOM）
一、什么是虚拟DOM（Virtual DOM）？Virtual DOM 其实就是一棵以 JavaScript 对象( VNode 节点)作为基础的树，用对象属性来描述节点，实际上它只是一层对真实 DOM 的抽象。最终可以通过一系列操作使这棵树映射到真实环境上。简单来说，可以把Virtual DOM 理解为一个简单的JS对象，并且最少包含标签名( tag)、属性(attrs)和子元素对象( children)三个属性。不同的框架对这三个属性的命名会有点差别。...
2021-08-03 14:05:56
332
原创 Javascript（算法） 求整数数组中两数求和等于目标值target
给定一个整数数组和一个目标值，找出数组中和为目标值的两个数示例：nums=[2,7,11,15],目标值target=9；因为nums[0]+nums[1]=2+7=9;所以返回[0,1]
2021-08-03 11:28:24
1271
原创 css3 伪类与伪元素
一、什么是伪类？伪类用于定义元素的特殊状态。例如，它可以用于：设置鼠标悬停在元素上时的样式 为已访问和未访问链接设置不同的样式 设置元素获得焦点时的样式语法：selector:pseudo-class { property: value;}示例：/* 未访问的链接 */a:link { color: #FF0000;}/* 已访问的链接 */a:visited { color: #00FF00;}/* 鼠标悬停链接 */a:hover {
2021-08-02 17:51:56
118
转载 Javascript 事件机制原理
一、事件捕获/冒泡事件捕获：事件捕获会由最先接收到事件的元素然后传向最里边（我们可以将元素想象成一个盒子装一个盒子，而不是一个积木堆积）事件冒泡：事件冒泡即由最具体的元素（文档嵌套最深节点）接收，然后逐步上传至document示例：我们点击一个span，我可能就想点击一个span，事实上他是先点击document，然后点击事件传递到span的，而且并不会在span停下，span有子元素就会继续往下，最后会依次回传至document。DOM事件：web端Dom事件分为三类：一类：do.
2021-08-02 15:29:03
426
原创 JavaScript之排序问题
一、冒泡排序实现原理：数组中有n个数，比较每相邻两个数，如果前者大于后者，就把两个数交换位置；这样一来，第一轮就可以选出一个最大的数放在最后面；那么经过n-1（数组的 length - 1） 轮，就完成了所有数的排序。执行完当前代码浏览器输出：可得出结论目前数组最后一位为数组中的最大值，那么我们这样循环list.length-1次就可以使得数组按从小到大的顺序排好。...
2021-07-26 18:33:20
210
原创 JavaScript之---函数闭包
一、什么是闭包？闭包就是能够读取其他函数内部变量的函数在javascript中，只有函数内部的子函数才能读取局部变量，所以说，闭包可以简单理解成“定义在一个函数内部的函数“在javascript语言中，函数内部可以直接读取全局变量，但是在函数外部无法读取函数内部的变量（在函数内部生命变量的时候一定要用var，如果不用的话，实际上声明的是全局变量）二、闭包原理function test1(){ var n =100;function test2(){...
2021-07-26 17:57:09
99
原创 Javascript实现一个简单的Promise
一、什么是Promise？ Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了`Promise`对象. 所谓`Promise`，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。二、Promi...
2021-07-24 16:10:03
554
1
原创 JavaScript实现数组的reduce方法
一、什么是数组的reduce方法？语法：arr.reduce(callback,initValue)reduce 为数组中的每一个元素依次执行回调函数callback，callback接收四个参数值callback（pre，cur，index，arr）pre：上一次调用返回的值，或者提供的初始值cur：数组中当前处理的元素index：数组中当前处理的元素的下标arr：调用reduce函数的数组下面通过一个例子具体说明：执行程序后浏览器输出从这里可以看...
2021-07-24 00:32:46
2026
1
原创 JavaScript （一）性能优化之防抖函数与节流函数
一、函数防抖当一个事件持续触发时，在设定的时间周期内没有再触发事件，事件处理函数才会执行一次。如果在设置的时间周期内又触发了事件，就重新开始延时。防抖原理：维护一个计时器，在设置的delayTime时间后触发函数，但是在delayTime时间内再次触发的话，就会清空之前的定时器，按当前时间重置定时器。所以，在规定时间段delayTime内只有最后一次操作能被触发。现在的情况是，我点击了几次按钮就执行了几次事件处理函数，但是这样会对服务器造成很大的压力，为了解决这中状况我们可以使用debo
2021-07-08 17:38:07
112
原创 egg.js(四) 中间件
概念：中间件时一个函数，在请求与响应之间执行1.如何定义中间件？（1）在app目录下新建middleware文件夹；（2）在middleware文件夹下新增一个js，名称为中间件函数名称，示例如下：这里我们用一个示例来说明：实现获取数据需验证token功能注意中间件结构函数返回一个 async 函数，并把这个函数导出；2.如何使用中间件？在router中引入，例如获取接口需要调用此中间件，那么就在router第二个参数引入checktoken中间件。这时候如果
2021-06-24 16:17:32
219
原创 egg.js -中间件
egg.js的官网是这么描述中间件的，所以在app文件下新建middleware文件夹，放置项目的中间件。中间件定义格式：module.exports=option=>{returnasyncfunctionaa(ctx,next){}}中间件编写完成后，需要手动挂载，手动挂载的地方是app文件夹下config文件下的config.default.js里的middleware:["中间件文件名称"]里添加，这时候刷新界面可以在控...
2021-04-21 23:18:59
565
原创 vue/cli3 项目webpack优化
1.如何优化？首先要通过npm run build后打包的大小以及分析图确定每个模块文件所占的内存大小，从而针对每个模块具体的优化这里我借助webpack-bundle-analyzer插件：（1）cnpm install webpack-bundle-analyzer --save (2).vue.config.js里配置：（3）npm run build 后结果如图。2.优化点分析：（1）element-ui 按需引入，已达到减少非必须的组件等，压缩elem.
2021-04-18 17:27:16
399
原创 git仓库 完整迁移教程
因为公司的分部仓库服务器挂了，需要将项目代码迁移到新的仓库。完整迁移，不仅将所有代码移植到新的仓库，而且要保留所有的commit记录，branch记录，tag记录等等。比如老仓库的地址是http://10.1.30.125/web/future.git,新仓库的地址是http://10.1.20.88/project/future.git1.首先新建一个空的文件夹，在这个文件夹下执行git命令：git clone --barehttp://10.1.30.125/web/future.gi.
2021-03-25 23:48:14
939
原创 webpack 之 require.context
一.什么是require.context？官方文档上是这样描述的：简单来说，就是通过执行 require.context 函数获取一个特定的上下文, 返回一个 require 函数。格式：require.context(directory,includeSubdirs,filter)directory：要查找遍历的路径includeSubdirs：是否遍历子路径filter：匹配文件的正则规则二.什么时候要用？项目里我们根据不同的功能划分成不同的模块，我们可以在公共.
2021-03-19 17:49:32
162
原创 git tag 标签相关教程
Git标签管理创建标签：首先，切换到需要打标签的分支上，比如有master，devlop两个分支，现在要基于master打个1.0版本的标签，git checkout master; 切换到master分支 git tag V1.0 基于master的最新提交的commit版本号生成1.0版本标签 如果需求不是基于当前最新的commit 生成标签，而是基于之前的某一个commit打标签，那么找到之前版本的版本号，输入命令命令：git tag 标签名称（tagName） 版本号（commitID
2021-03-15 20:41:46
195
原创 Vue slot 实践解析
1.匿名插槽(可以放置在组件的任意位置，一个组件中只能有一个该类插槽),例子如下：父组件：子组件：当父组件没有配置slot里面的内容时，默认显示子组件<slot></slot>包含的内容当父组件配置slot里面的内容时，父组件里的内容替换掉子组件了<slot></slot>的位置2.具名插槽匿名插槽没有name属性，所以是匿名插槽，那么，插槽加了name属性，就变成了具名插槽。具名插槽可以在一个组件中出现多次。用在不..
2020-12-31 15:33:10
86
原创 JS之全局变量与局部变量常见面试题
1.示例1：functionf(a){a=a+1;alert(a)}vara=1;f(a);alert(a)依次输出 2,1解析：函数外的a是全局变量，函数f中的a是参数a，而不是全局定义里的a，JavaScript中作用域是函数级别的...
2020-02-18 16:32:47
587
1
原创 JS之reduce函数解析
语法：arr.reduce(callback,[initialValue])reduce() 方法接收一个函数作为累加器,reduce 为数组中的每一个元素依次执行回调函数参数说明：（1）callback是调用方法；（2）initialValue是callback初次调用时的第一个参数值。callback函数中包含四个参数：如下arr.reduce(function(pre...
2020-02-02 13:32:05
381
原创 JS append添加后的元素点击事件无效实践与分析
原因： append的节点是在整个文档加载完成后才添加的，页面并不会为未来的元素初始化添加点击事件，所以使用这种方式动态添加的节点中的点击事件不会生效.解决办法：用事件委托的方法解决demo如下：或者:$(document).on("click",".Node",function(){})...
2019-10-08 11:47:36
1144
原创 ES6 之 Promise学习
一.什么是promise?所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise对象有以下两个特点。（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败...
2019-09-24 13:14:35
74
原创 vue/cli 3 构建多页面应用实践教程
1.首先升级vue-cli,之前用的是2.0版本,根据官网可知道升级命令：安装：npm install -g @vue/clli or yarn global add @vue/cli创建一个工程：vue create demo(demo为项目名称) or vue ui之后选择你需要的配置,根据提示进行操作,生成项目，这里选择自定义创建，没有eslint之类...
2019-09-11 18:56:09
506
原创 Element ui 父子表格的实现
成品就如上图所示,下面具体介绍一下实现过程:(1)首先查阅Element ui文档,找到Tabel组件展开行这一部分，通过设置 type="expand" 和Scoped slot可以开启展开行功能.(2)设置slot-scope,slot-scope包含的部分就是展开行的内容(3)设置slot-scope="props(参数，可替换)"，即可通过props.row获取到当前...
2019-09-05 11:49:47
6720
2
原创 vuex 学习之路
1.什么是vuex? 官方:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化2.什么是store？store（仓库）：包含应用中大部分的状态 (state),以及改变状态（state）的方法(Mutation)等等. Vuex 的状态存储是响应式的。当 Vue 组件从...
2019-08-22 18:07:07
64
原创 JS 之排序算法浅谈
1.冒泡排序思想:(1)比较相邻的两个数,下标小的比下标大的大,则两者交换位置(2)比较完第一轮的时候最大1个的数会被排在最后，那么比较完n轮之后,最大的n个数会被排在最后,简而言之,就是第n轮比较的时候只需要比较(0-数组长度-n-1)的数据为止。function sort(){for(var i=0;i<demoArr.length;i++){for(var ...
2019-08-20 13:47:14
52
原创 浅谈javascript闭包
面试中常常被面试官问道什么是闭包,有时面试官也会让你手写一个简单的闭包函数,为了弄清楚其原理,我们可以亲自动手试试。1.什么是闭包？简单来说函数内部能访问另一个函数内部的变量的方法就叫做闭包。2.闭包怎么产生的？（1）在一个函数内部创建另一个函数 function global(){ var num=1; function closeArea(){ //闭包...
2019-08-15 16:12:38
50
原创 js判断两个对象是否相等
function differ(obj1,obj2){//1.定义一个构造函数,把要检测的两个对象作为参数传入debugger//首先判断传入的两个参数是否是对象var result1=obj1 instanceof Object;var result2=obj2 instanceof Object;if(!result1||!result2){return ob...
2019-08-06 15:50:39
605
原创 Javascript call(),apply(),bind() 方法解析
javaScript权威指南上的解释是：call() 、apply()可以看作是某个对象的方法，通过调用方法的形式来间接调用函数,bind() 就是将某个函数绑定到某个对象上。作用:这三个方法的作用都是改变函数的执行上下文！通俗点说,call()和apply()的作用就是把方法绑定到指定的对象下去执行示例:var demo1={name:"小可爱",sex:"男"}func...
2019-08-05 00:03:08
94
原创 react-app 项目初学（3）组件
属性传值： 1.父子组件之间传值可通过属性传值的方法,在父组件上定义一个属性字段，子组件通过{this.props+字段名称}去获取父组件传过来的值。子组件若要传递一个事件到父组件，首先得在子组件里{this.props.+方法名},然后在父组件上把方法名当做一个属性,之后再触发父组件里的具体方法。子组件：父组件：...
2019-07-31 00:49:26
145
1
原创 javascript 之继承
一.通过原型链继承demo：function animal(){ }animal.prototype.name='老虎'animal.prototype.sexy='母'animal.prototype.likes=function(){ return this.sexy+this.name+'喜欢吃肉'}var demo1=new animal();con...
2019-07-30 20:40:59
84
转载 js 之事件捕获和冒泡实践
如上demo，经过运行之后发现输出为:由此可以看出,先捕获，后冒泡，捕获从上到下(从窗口window一直到指定的元素,)，冒泡从下到上(从指定元素一直往上到当前window),var wrapDiv = document.getElementById("wrapDiv");var innerP = document.getElementById("innerP");...
2019-07-24 15:42:19
152
原创 vue-cli项目 webpack 入门（1）
webpack是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图会映射项目所需的每个模块，并生成一个或多个bundle。入口入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图(dependency graph)的开始。...
2019-07-23 18:52:04
109
原创 浅谈prototype和_proto_
.Javascript中所有的对象都是Object的实例，并继承Object.prototype的属性和方法，也就是说，Object.prototype是所有对象的父亲。在对象创建时，就会有一些预定义的属性，其中定义函数的时候，这个预定义属性就是prototype,这个prototype是一个普通的对象。而定义普通的对象的时候，就会生成一个__proto__，这个__proto__指向的是...
2019-07-22 11:20:02
115
原创 react-app 项目初学（2）JSX语法
下面就以一个TodoList的demo为例1.在jsx里面法里可以写js表达式但是不可以写js语句2.render函数返回出去的内容只能是一个jsx,如果是两个就会报错因该用一个大的div包裹变成一个jsx,3.事件方法的定义需要在组件里，且调用的时候{this.方法名}但是这时候会有个问题，在buttonClick的点击事件里this.state是取不...
2019-07-18 13:33:55
308
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人