- 博客(133)
- 资源 (7)
- 收藏
- 关注
原创 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
411
1
原创 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
253
原创 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
476
原创 JavaScript 原型链深入 与 instanceof
instanceof一、 instanceof 用法二、 原型链一、 instanceof 用法A instanceof BA.__proto__ 是否存在 B.prototype二、 原型链JavaScript 原型链,看下图:图片来自:点击这里
2021-09-09 09:40:36
101
1
原创 JavaScript this对象的产生
this对象的产生一、this 对象的产生一、this 对象的产生引用 阮一峰老师 的话:它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。所以时刻提醒自己this是在函数执行时被绑定的,不要被任何赋值语句打乱阵脚。...
2021-09-02 11:00:19
274
原创 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
2007
原创 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
552
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
1054
原创 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
89
原创 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
757
原创 CSS 实现父组件半透明,子组件不透明
父组件半透明,子组件不透明,达到部分组件高亮的效果;应用场景: 当 input 输入框获取焦点的时候,给 body 添加半透明效果,input 组件不透明;举例子:( 应用到CSS3的rgba属性)background: #rgba(88, 88, 88, 0.3);...
2021-06-11 12:22:44
468
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
357
原创 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
390
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
534
原创 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
80
原创 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
240
原创 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
207
原创 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
827
原创 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
932
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
127
原创 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
278
原创 正则表达式 - - 常用的匹配函数
目录一、正则表达式的方法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
2373
原创 正则表达式 - - 分组:( 小括号 ) 的 使用
目录一、 (小括号) 的使用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
899
原创 正则表达式 - - 断言 & 匹配模式
目录一、断言:\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
480
原创 正则表达式 - - 匹配日期(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
6727
原创 正则表达式 - - 选择运算 | & 匹配 ip 地址
正则表达式一、 选择或者关系运算 : |1.1、匹配 ip:192.168.1.35 地址呢?二、匹配 ip一、 选择或者关系运算 : |规则:自左向右匹配,一旦匹配上,就不会回头直接上代码:console.log(/12|34|56/.exec('1'));console.log(/12|34|56/.exec('3'));console.log(/12|34|56/.exec('12'));console.log(/12|34|56/.exec('56'));consol
2021-05-23 16:34:12
311
原创 正则表达式 - - 字符分组:[ 中括号 ] & 量词:{ 大括号 }
目录一、正则 简介1.1、元字符1.2、转义字符:\二、字符组 : [ ]三、量词:匹配多个字符,修饰个数 : {}3.1、量词范围格式3.2、默认的匹配模式:贪婪模式一、正则 简介正则:是用来处理(匹配)字符串的;正则是单独的一套语法体系1.1、元字符元字符:在正则中有特殊语义的字符:. [] [^] ? * + {min,max} ^ $ () \1\2 | ;1.2、转义字符:\当匹配的字符中有特殊语义的字符时,需要用到转义字符(\)。二、字符组 :
2021-05-22 19:17:57
979
原创 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
899
原创 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
117
原创 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
300
1
原创 JavaScript 假装了解 函数柯里化
目录一、什么是函数柯里化?1、柯里化?2、如何实现add(3)(4) ?二、实现函数柯里化三、增强版的curryAdd( )一、什么是函数柯里化?1、柯里化? 我第一眼看到它的想到的是:这名字也太高端了吧,这不会哪个伟人又整了什么高等数学的定理要我学?还好我的"闺蜜"之一(仅是我单方面认定的闺蜜关系) - - 维基百科,告诉了它的真实身份。 柯里化,英语:Currying(满满的英译中的既视感),是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且
2021-05-17 18:30:33
141
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
236
原创 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
473
原创 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
139
原创 JS面试 - - 严格模式下需注意的地方
我了解的严格模式,从三个方面描述:变量 ;对象 ;函数 ;严格模式下,“use strict”变量:(涉及 属性描述符 知识)1、变量使用前必须要声明 ;(var let const关键字申明)2、不能直接对变量操作 delete ;(静默失败 - - 变成报错)对象 :1、属性描述符 出现操作不当的时候,会静默失败 ;(enumerable不会报错);函数 :1、参数是唯一的 (形参不重复); ***2、实参与形参的映射关系:不存在 ;
2021-05-11 16:06:58
105
原创 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
57
原创 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
405
1
原创 JavaScript 防抖 与 节流
目录一、防抖二、节流三、防抖和节流之间的区别一、防抖个人理解的防抖:将规定时间内的多次请求,最终执行一次请求,且是新计时区间的第一次。为什么防抖要用到 setTimeout ? 因为,需求是请求是多次,但是最终只执行一次; 我们阻止不了事件的触发次数(多次),但我需要控制触发事件的执行次数,而且是规定时间内,这时setTimeout是不是就很合适。setTimeout首先是在计时器线程里计时,时间到了再到事件队列等待执行,到了事件队列里的事件没办法控制它取消执行,但是计时器线程里的事件可
2021-04-29 17:14:27
138
原创 JavaScript setTimeout( ) 与clearTimeout( )
setTimeout( )setTimeout( ) 方法用于在指定的毫秒数后调用函数或计算表达式。返回: 整型数值 id ,是 setTimeout 的唯一标识符,可用于取消 setTimeout 设置的函数clearTimeout( )clearTimeout( id ) : 根据 id 取消相应的定时器...
2021-04-29 16:02:03
136
Hibernate基础编程
2018-01-26
Eclipse4.7+struts2.5+tomcat7+hibernate5.0.12+mysql5.1.45 简单例子
2018-01-26
Mac下 Eclipse4.7 + Struts2.5 简单的例子
2018-01-26
Mac下 Eclipse4.7 + MySQL5.1.45 简单的数据库连接
2018-01-26
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人