Lhy@@-CSDN博客

原创 Vue源码之虚拟DOM与Diff算法

虚拟DOM一、虚拟DOM1.1、h（） ==》虚拟节点Vnode1.2、将虚拟节点上树（显现到界面上）二、Diff算法策略一、虚拟DOM1.1、h（） ==》虚拟节点Vnodeh( sel , data ,c )sel：选择器 ; data：属性（class,id，key…）; c：文本节点或者虚拟节点h()返回虚拟节点：Vnode文件 h.jsexport default function(sel,data,c){ if(arguments.length!=3){

2022-03-07 10:53:07 394 1

原创 Vue源码之mustache模板引擎核心

Vue

2022-03-07 09:51:33 213

原创 Vue 简单封装component 并上传到 npm

一、新建一个 Vue 项目注释：可以是Vue2.0构建也可以是Vue3.0 构建新项目，这个案例使用的是Vue2.0。二、先看下我的项目文件结构简单介绍下：example 文件夹 ----- 是原 src 文件夹，用来开发过程中测试组件packages 文件夹 -----是新建的，保存着组件以及涉及的样式、js文件，打包文件新建了vue.config.js ---- 配置启动的入口文件如果想要完整代码：git download 地址代码中也有相应的注释。...

2021-10-13 10:54:10 235

原创 JS 字符串分割以及填充

涉及的知识点string.substr(start,len) //截取函数string.padEnd(targetLength,flag) //填充函数 // tag : 要拆解的目标字符串 // length ：将字符串按照几等份拆解 // flag : 自定义填充字符 function autoFill(tag, length = 5, flag = "0") { var len = tag.length; var sa =

2021-09-13 16:09:03 449

原创 JavaScript 原型链深入与 instanceof

instanceof一、 instanceof 用法二、原型链一、 instanceof 用法A instanceof BA.__proto__ 是否存在 B.prototype二、原型链JavaScript 原型链,看下图：图片来自：点击这里

2021-09-09 09:40:36 87 1

原创 JavaScript this对象的产生

this对象的产生一、this 对象的产生一、this 对象的产生引用阮一峰老师的话：它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。所以时刻提醒自己this是在函数执行时被绑定的，不要被任何赋值语句打乱阵脚。...

2021-09-02 11:00:19 201

原创 Webpack 遇到的坑之 HtmlWebpackPlugin

异常：ERROR in Error: Child compilation failed: Entry module not found: Error: Can't resolve 'D:\VueProjects\Protal_works\webpack配置vue\index.html' in 'D:\VueProjects\Protal_works\w ebpack配置vue': Error: Can't resolve 'D:\VueProjects\Protal_works\webpa

2021-07-05 19:53:32 1787

原创 Vue Router路由跳转方式（含参数）

1、router-link1. 不带参数// 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。<router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name 2.带参数 <router-link :to="{name:'home', params: {id:1}}">

2021-06-25 19:52:26 524 1

原创 JS 对象数组中判断是否存在某个值

情景再现：//是否存在 catvar arr = [{ name: "cat", value: "0"}, { name: "dog", value: "1"}];//使用Array.prototype.somevar result = arr.some(function(item) { if (item.name == "cat") { return true; }});...

2021-06-25 15:44:12 1030

原创 JavaScript 数组去重

NaN == NaN 为false,NaN === NaN 为falseindexOf(NaN) 返回 -1undefined == null 为true ;undefined === null 为 false数组去重var arr = [1,1,‘true’,‘true’,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,‘NaN’,0,0, ‘a’, ‘a’,{},{}];1.ES6的 Set..

2021-06-16 16:34:37 77

原创 JavaScript 精确取得 object 的类型

对于typeof 值为object，仍想进一步知道对象的类型时，可以使用：Object.prototype.toString.call() <script type="text/javascript"> console.log(Object.prototype.toString.call(123)) //"[object Number]" console.log(Object.prototype.toString.call('123'))

2021-06-16 14:30:18 727

原创 CSS 实现父组件半透明，子组件不透明

父组件半透明，子组件不透明，达到部分组件高亮的效果；应用场景：当 input 输入框获取焦点的时候，给 body 添加半透明效果，input 组件不透明；举例子：（应用到CSS3的rgba属性）background: #rgba(88, 88, 88, 0.3);...

2021-06-11 12:22:44 413 2

原创 JS 面试 - - undefined 与 not defined 与 null

目录摘要1、not defined2、undefined3、null摘要undefined 是原始数据类型，值为 undefined ，转布尔值为 false；not define 出现在报错信息中；null 是原始数据类型，表示"非对象"，转布尔值为 false；null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。 console.log(Number(null)); //0 console.log(Number(

2021-06-07 16:17:50 321

原创 JavaScript 之属性描述符（数据属性 & 访问器属性）

目录一、属性描述符介绍二、数据属性描述符2.1、特性的默认值2.1、修改默认的特性三、访问器属性一、属性描述符介绍首先，我们创建对象常用的声明形式：// 1、对象字面量声明 { } var obj = { name: 'Lu', // ... } // 2、new 关键字声明 var otherObj = new Object(); otherObj.name = 'Lu';对象 obj 的属性 name 也有一些特性：ECMA-262 使用一些内

2021-06-05 16:03:01 320 1

原创 Vue之 v-model 数据的双向绑定

目录一、v-model 的使用范围二、v-model 基本用法三、v-model 的实质四、自定义组件（Input） v-model 双向绑定五、自定义check组件 v-model一、v-model 的使用范围v-model 官网解释。二、v-model 基本用法谈及Vue ，都会说到MVVM（Mode-View-View-Model）双向绑定。v-model 就是个很好的证明，input 输入的值，会立即显示到 span 上，<template> <div>

2021-06-04 15:16:43 454

原创 Vue watch 与 computed

目录一、watch二、computed一、watchvue 的功能属性： watch：监听数据的变化，主要监听：data 数据props 数据路由 data 数据：data() { return { b: 120, obj:{ c:99, d: 100, }, state: "", }; },watch:{ //简单属性 num(newValue,olbValue

2021-06-03 14:42:35 69

原创 Vue 之vue-cli 脚手架项目的目录结构介绍

一、项目的目录结构项目例子二、目录结构介绍node_modules ：项目的依赖中心public ：静态资源文件，和assets 不同的是：public不会被webpack打包，使用的是绝对路径src ：项目的核心区域：所有的开发文件的核心内容区域，包括组件，静态资源等等。assets : 静态文件夹，使用的是相对路径components ：整个vue功能组件的存放位置App.vue ：整个vue的根组件，main.js ：vue 的入口文件，...

2021-06-02 14:32:44 221

原创 Vue 之使用vue-cli 脚手架快速生成vue项目

1、安装 vue-cli 步骤vue-cli 是 vue 的脚手架工具，帮助我们快速生成了 vue 的起步项目，它内置了一些必备的比如打包工具，配置文件等等。安装 vue-clinpm install -g @vue/cli检查 vue-cli 是否安装成功vue --version 如果输出的是版本号，表示安装成功2、创建 vue 项目步骤vue create projectname它会让你选择 vue 2 还是 vue 3，根据喜好选择，我选了vue

2021-06-02 11:32:30 183

原创 VSCode Vue项目中报错 [vue/require-v-for-key]

一、错误如下[eslint-plugin-vue][vue/require-v-for-key]Elements in iteration expect to have ‘v-bind:key’ directives.Renders the element or template block multiple times based on the source data.二、解决办法更改vetur配置 vscode->首选项->设置->搜索（vetur

2021-05-28 17:28:05 779

原创 Vue 解惑之关于axios 回调函数中 this 的指向

一、主要内容SendGet 函数中的两个this打印情况如果 this 不想等，找找原因？二、打印结果两个this 是不一样的，out this 指向的是Vue 实例；inner this 指向的是window；三、结果分析其实两个this指向不一样是因为调用它们所在函数的对象不一样，out this所在的函数SendGet 是被Vue 实施调用，inner this 所在的回调函数时是在执行栈中被执行，this指向就是window了四、修改 this 的指向方法这个修改

2021-05-28 11:04:40 846 1

原创 jQuery 源码浅析之无 new 构造

大部分人使用 jQuery 的时候都是使用第一种无 new 的构造方式，直接 $(’’) 进行构造，这也是 jQuery 十分便捷的一个地方当我们使用第一种无 new 构造方式的时候，其本质就是相当于 new jQuery()，// 无 new 构造$('#test').text('Test'); // 当然也可以使用 newvar test = new $('#test');test.text('Test');那么在 jQuery 内部是如何实现无 new 构造的呢？ // .

2021-05-26 17:30:02 114

原创 Node.js 作用域问题和 exports & module.exports

Node.js 一、js 的作用域1.1、在HTML宿主环境中1.2、在Node.js宿主环境中二、exports 命令一、js 的作用域1.1、在HTML宿主环境中我们知道，在HTML中，通过 script 标签引入 js 文件；js 文件里定义的全局变量时共用的；这是因为，这些 js 文件里定义的全局变量是挂在window对象上的属性，所以是共用的1.2、在Node.js宿主环境中js 文件之间的变量初始是隔离的；因为它没有所谓的 window 对象； **那如

2021-05-25 17:13:01 200

原创正则表达式 - - 常用的匹配函数

目录一、正则表达式的方法1、test( )2、exec( )二、字符串的方法1、search( )2、replace( )3、match( )一、正则表达式的方法1、test( )regexp.test(string)返回 Boolean，查找对应的字符串中是否存在模式2、exec( )regexp.exec(string)匹配结果的数组。如果没有找到，返回值为 null二、字符串的方法1、search( )string.search（string | regexp）方法用

2021-05-25 10:59:11 2158

原创正则表达式 - - 分组：( 小括号 ) 的使用

目录一、（小括号）的使用1.1、分组1.2、引用一、（小括号）的使用它有两个含义：分组：子表达式引用：可以被捕获到1.1、分组通过代码理解上面两点：// 1.分组 :（）// 我们知道{2}量词仅修饰的是前面一个字符(b),但是我们让{2}修饰的是ab,这是就用到了分组:()console.log(/ab{2}/.exec('abb'));console.log(/ab{2}/.exec('abab'));// (ab): 此时 ab 也叫做 -- 子表达式

2021-05-25 10:00:31 813

原创正则表达式 - - 断言 & 匹配模式

目录一、断言：\b \B二、以什么开头：^，以什么结尾：$三、环视（正向环视）四、匹配模式一、断言：\b \B断言：判断当前文本是否是在单词的边界（是开头/ 结尾）；console.log(/\ban/.test('an apple')); // 在开头，trueconsole.log(/\ban\b/.test('an apple')); // 在开头或者结尾，trueconsole.log(/an\b/.test('a banan')); // 在结尾，trueconsol

2021-05-24 16:37:51 381

原创正则表达式 - - 匹配日期（yyyy-mm-dd）

// 匹配时间：2021/05/24 年份没什么限制，月份 1-12 月，日期1-31// 年份：\d{4}// 月份： 1[0,1,2]|0?\d // 日期： 3[0,1]|[1,2]\d|0?\dvar rex = new RegExp('(\\d{4})[-/](1[0,1,2]|0?\\d)[-/](3[0,1]|[1,2]\\d|0?\\d)');console.log(rex);console.log(rex.exec('今天是2021-05-24啦'));console.

2021-05-24 15:38:46 6580

原创正则表达式 - - 选择运算 | & 匹配 ip 地址

2021-05-23 16:34:12 291

原创正则表达式 - - 字符分组：[ 中括号 ] & 量词：{ 大括号 }

目录一、正则简介1.1、元字符1.2、转义字符：\二、字符组 : [ ]三、量词：匹配多个字符，修饰个数 : {}3.1、量词范围格式3.2、默认的匹配模式：贪婪模式一、正则简介正则：是用来处理（匹配）字符串的；正则是单独的一套语法体系1.1、元字符元字符：在正则中有特殊语义的字符：. [] [^] ? * + {min,max} ^ $ () \1\2 | ;1.2、转义字符：\当匹配的字符中有特殊语义的字符时，需要用到转义字符（\）。二、字符组 :

2021-05-22 19:17:57 860

原创 Node.js 搭建简单服务器 -- demo

一、搭建简单服务器的步骤：1、直接上demo.js：//得到内置模块，引入NodeJS的内置 http 模块 var http = require('http');// 创建服务器，使用createServer方法var server = http.createServer(function(req,res){ // req：请求，res: 响应 // 返回 / 输出 res.end("hello NodeJs");});// port:3000server.listen(3

2021-05-21 15:06:29 855

原创 Node.js 简介

目录一、初识 Node.js(node.js的安装以及配置环境变量省略)一、初识 Node.js 首先 Node.js 是一个基于Chrome V8引擎的JavaScript运行环境。（来自百度百科）Node.js 不是一门语言，是一个 JavaScript 的运行环境；还是基于JavaScript进行编程的；JavaScript 的运行必须需要宿主环境：之前的 js 文件的宿主有 HTML ，js 放到 HTML 相应的位置才会运行；现在，还有要介绍的 No

2021-05-21 11:29:29 82

原创 JavaScript 函数式编程 - - AOP （上）

目录1、案例情景需求2、解决方案3、完善解决方案（待续）4、讲讲AOP的理解4.1、编程思想类型4.2、 AOP的优点关于 AOP（Aspect Oriented Programming） – 面向切面编程的官方解释，可移步到百度百科 AOP解释本文以解决案例需求形式，阐述我对AOP编程的理解：1、案例情景需求首先以函数对象为例，有一个函数test，它的核心功能就是输出 2，但是，现在想在处理核心功能前，先处理 before 函数其的工作内容是输出 1，然后，执行核心功能函数最后，执行

2021-05-19 16:26:06 261 1

原创 JavaScript 假装了解函数柯里化

目录一、什么是函数柯里化？1、柯里化？2、如何实现add(3)(4) ?二、实现函数柯里化三、增强版的curryAdd( )一、什么是函数柯里化？1、柯里化？我第一眼看到它的想到的是：这名字也太高端了吧，这不会哪个伟人又整了什么高等数学的定理要我学？还好我的"闺蜜"之一（仅是我单方面认定的闺蜜关系） - - 维基百科，告诉了它的真实身份。柯里化，英语：Currying(满满的英译中的既视感)，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且

2021-05-17 18:30:33 125 1

原创 JavaScript 客户端存储之 sessionStorage + localStorage

1 背景两者目的是：解决，通过客户端存储不需要频繁发送回服务器的数据时，的问题。cookie是每次发送请求，cookie数据也会发送。sessionStorage 和 localStorage 统称为 Storage 类型。浏览器中两者均不受页面刷新影响2 特性Storage 实例与其他对象一样，但增加了一些方法？clear（）：删除所所有值；（不在Firefox中实现）getItem（name）：取得给定 name 的值key（index）：取得给定 index 的值，remov

2021-05-16 15:27:43 203

原创 JavaScript 客户端存储之创建cookie + 读取cookie + 删除cookie

1、创建 cookie （无过期时间）创建一个名为 username 的 cookie ,它的值为 Jack;注意：一个创建表达式，只能创建一个cookie ,不能后面接着定义下一个cookie如果不设置过期时间，浏览器关闭的时候 cookie 就会被删除 // 创建一个 username cookie ,它的值为 Jack; document.cookie = "username=Jack"; //创建一个 age cookie ,它的值为 18; docu

2021-05-15 16:37:25 448

原创 JavaScript 不得不了解的XML

目录一、XML 概述1.1、引入1.2、什么是 XML？二、XML 基本语法三级目录一、XML 概述一段标准的 XML 数据格式：http://wthrcdn.etouch.cn/WeatherApi?citykey=1010101001.1、引入XML 数据格式最主要的功能就是数据传输；XML 数据格式主要的用途有哪些？程序之间的数据传输配置文件，config.xml存储数据，小型的数据库XML 主要起了什么作用？规范数据格式，是数据具有结构性，易读易处理。1.2、

2021-05-12 16:42:17 122

原创 JS面试 - - 严格模式下需注意的地方

我了解的严格模式，从三个方面描述：变量；对象；函数；严格模式下，“use strict”变量：（涉及属性描述符知识）1、变量使用前必须要声明；（var let const关键字申明）2、不能直接对变量操作 delete ；（静默失败 - - 变成报错）对象：1、属性描述符出现操作不当的时候，会静默失败；（enumerable不会报错）；函数：1、参数是唯一的（形参不重复）； ***2、实参与形参的映射关系：不存在；

2021-05-11 16:06:58 82

原创 JS面试 - - 事件相关

1、事件流1.1 为什么会有事件冒泡 / 事件捕获？首先我们知道 document文档是HTML标签的嵌套建立形成的，所以有了这样一个情景：三个div,当我点击了div3的时候，div2，div1是否也被点击了？所以有事件冒泡（IE4 ） / 事件捕获（Netscape）两种不同的页面接收事件的顺序方案。2、事件轮询是一种机制。3、事件对象event4、事件的模拟基本步骤： let btn = document.getElementById("mybtn"); // 1

2021-05-11 15:16:33 46

原创 JavaScript async & await 执行顺序

仅以此篇加深记忆：1、什么是async、await？ async / await 是Generator函数的语法糖，原理是通过Generator函数 + 自动执行器实现的，这使得async / await 跟普通函数一样，不用一直 next( ) 执行了。例子1 function f(){ return new Promise((resolve,reject)=>{ resolve('f 函数执行成功的结果'); }); }

2021-05-11 11:45:17 369 1

原创 JavaScript 防抖与节流

目录一、防抖二、节流三、防抖和节流之间的区别一、防抖个人理解的防抖：将规定时间内的多次请求，最终执行一次请求，且是新计时区间的第一次。为什么防抖要用到 setTimeout ? 因为，需求是请求是多次，但是最终只执行一次；我们阻止不了事件的触发次数（多次），但我需要控制触发事件的执行次数，而且是规定时间内，这时setTimeout是不是就很合适。setTimeout首先是在计时器线程里计时，时间到了再到事件队列等待执行，到了事件队列里的事件没办法控制它取消执行，但是计时器线程里的事件可

2021-04-29 17:14:27 103

原创 JavaScript setTimeout( ) 与clearTimeout( )

setTimeout( )setTimeout( ) 方法用于在指定的毫秒数后调用函数或计算表达式。返回：整型数值 id ,是 setTimeout 的唯一标识符,可用于取消 setTimeout 设置的函数clearTimeout( )clearTimeout( id ) : 根据 id 取消相应的定时器...

2021-04-29 16:02:03 122