- 博客(191)
- 收藏
- 关注
RSS订阅原创 React hooks
hoos规则：hooks通常放在组件顶部hooks不能写在if语句里面1.useState(initState)用于为函数组件引入状态state可接受状态的初始值作为参数返回一个数组，数组的第一个成员是一个变量，指向状态的当前值；数组的第二个成员是一个函数，用来更新状态；注意点：setState() 不一定是同步的，为了提升性能，React会批量执行state更新和DOM渲染setState() 并不会立即改变state，而是创建一个即将处理的state不要依赖s
2022-04-29 18:29:20
626
原创 electron框架的webview标签使用以及preload设置
使用webview标签是为了在主页面中嵌入其他web页面内容，类似小窗口使用webview1.主窗口对应的页面index.html其中使用<webview>标签，src引入需要内嵌的web页面路径，可以是本地文件，也可以是远程请求，例如src=“https://www.douyin.com/”，引入抖音官网主页然后通过<script>引入渲染脚本2.主窗口主进程入口文件main.js该文件中，创建主窗口，并在创建过程中 通过设置webPref.
2022-03-29 17:50:44
8459
4
原创 HTML5 拖拽
拖放是HTML5标准的组成部分链接和图片默认时可拖动的，但是其他元素如果需要可拖动，需要设置draggable属性为true----在拖拽目标上触发的事件ondragstart 用户开始拖动元素时触发ondrag 元素正在拖动时触发ondragend 用户完成元素拖动后触发----在释放目标上触发的事件ondragenter 当鼠标拖动的对象进入目标容器范围内时触发ondragover 当鼠标拖动的对象在目标容器范围内拖动时触发ondragleave
2021-12-03 11:13:25
223
原创 HTML5
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言HTML的第五次重大修改新增特性：语义特性、本地存储特性、设备兼容特性、连接特性、网页多媒体特性、三维、图形以及特效特性、性能与集成特性、地理定位、设备权限与功能、css3特性----H5新增的语义结构标签article 定义页面独立的内容区域。 aside 定义页面的侧边栏内容。 figure 规定独立的流内容（图像、图表、照片、代码等等）。 figcaption 定义 <figure>
2021-12-03 10:25:35
577
原创 Vue动态组件
动态组件1.设置动态组件引用，直接使用<component></component>标签 绑定is属性即 :is="组件名" 表示使用的是哪个组件，如果是局部组件，使用前要先注册动态组件状态维持1.多个动态组件在使用时，如果某个组件内部带有输入框或者其他input，在输入完值后，切换了新的组件，再切回来时，之前输入的值就没了，如果想要维持之前输入过后的数据状态，那么需要使用<keep-alive>来进行状态维持2.在&l
2021-11-18 14:32:27
1170
原创 Vue组件通信及slot插槽
一、通过props和emit子组件无法直接使用父组件的data数据，但是可以通过prop属性来获取并使用1.父组件作用域中使用子组件时 给子组件标签上绑定要使用的父组件数据属性2.子组件内部设置props 注册属性props可以是数组或对象 例如 props: ['msg']props是对象时，有4个属性，type为属性的数据类型，default为属性默认值，required是否必填,validator(){} 校验如果props接收的是一个对象，需要注意，传递的其实
2021-11-18 14:11:57
984
原创 Vue组件
一般来说，组件大致可以分为三类：1.页面级别的组件通常是pages目录下的.vue组件，是组成整个项目的一个大的页面，一般不会有对外的接口2.业务上可复用的基础组件通常是在业务中被各个页面服用的组件，这一类组件通常都写到components目录下，然后通过import在各个页面中使用，这一类组件通常是实现某个功能3.与业务无关的独立组件通常是与业务功能无关的独立组件，这类组件通常是作为基础组件，在各个业务组件或页面组件中被使用----组件创建组件的使用分为组件构造、注册组件、
2021-11-17 20:41:16
439
原创 Vue生命周期
事务发展 从开始到结束 就是一个完整的生命周期钩子hook 通知 => 执行 预先准备好 触发就做回调callback 等待 => 执行Vue实例的生命周期 beforeCreate => created => beforeMount => mounted => beforeUpdate => updated => beforeDestroy => destroyed创建阶段beforeCreate => created =&g..
2021-11-17 20:07:35
76
原创 Vue基础使用
----基础指令和内容插值Mustache插值语法 {{ 插值 }} 插值可以为变量 或者 表达式v-once 只渲染一次v-text 不识别html标签 相当于 innerText 会将指定变量的值作为标签内容显示 v-text会等vue实例完成初始化才会生效v-html 识别html标签 相当于innerHTMLv-cloak 隐藏插值标签 在vue实例化完成后 v-cloak会自动删掉 [v-cloak] { display: none;} 可设置样式 防止在网络不好等因素
2021-11-17 17:33:53
794
1
原创 前端路由学习
SPA单页面应用单页面应用指的是应用只有一个主页面，通过动态的替换DOM内容并同步修改url地址，来模拟多页面应用的效果，切换页面的功能直接由前台脚本完成，而不是由后端渲染完成后前端只负责展示----路由路由是URL到函数的映射路由分为后端路由和前端路由--后端路由服务器端路由，对于服务器来说，当接收到客户端发来的http请求，就会根据请求的URL，来找到相应的映射函数，然后执行该函数，并将函数的返回值发送给客户端优点：安全性好，SEO好缺点：加大服务器的压力，不利于用户体验
2021-10-24 20:47:51
62
原创 Webpack学习
webpack是一种打包工具----安装npm install webpack webpack-cli webpack-dev-server -D----webpack配置文件可命名 webpack.config.js 单个总的配置文件也可以拆分成3个配置文件，另建文件夹config，新建3个配置文件：webpack.common.js、webpack.dev.js、webpack.prod.js其中，webpack.common.js配置文件中存放一些开发环境和生产环境公用的配置；
2021-10-22 13:50:56
499
原创 Promise对象
Promise是异步编程的一种解决方案Promise，就是一个容器，里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果；从语法上说，Promise是一个对象，从它可以获取异步操作的消息；Promise提供统一的API，各种异步操作都可以用同样的方法进行处理Promise对象有以下2个特点：1.对象的状态不受外界影响；Promise对象代表一个异步操作，有三种状态：pending(进行中)、fufilled(已成功)、rejected(已失败)；只有异步操作的结果，可以决定当前是哪一种状
2021-09-29 10:17:23
4393
原创 ES6 Symbol
ES6引入了一种新的原始数据类型Symbol，表示独一无二的值，它是javascript的第七种数据类型，前6种是：undefined、null、布尔值Boolean、字符串String、数值Number、对象ObjectSymbol值通过Symbol函数生成Symbol函数前不能使用new命令，否则会报错；这是因为生成的Symbol是一个原始类型的值，不是对象；也就是说，由于Symbol值不是对象，所以不能添加属性Symbol函数可以接收一个字符串作为参数，表示对Symbol实例的描述，主
2021-09-23 10:02:58
119
原创 ES6 Proxy代理
Proxy用于修改某些操作的默认行为；可以理解为在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写例如，上述对一个空对象架设了一层拦截，重定义了属性的get和set行为----Proxy构造函数Proxy对象的所有用法，都是上面这种形式，不同的只是handler参数的写法new Proxy()表示生成一个Proxy实例，target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行.
2021-09-22 14:22:50
155
原创 ES6 Class
ES6引入了Class类的概念，作为对象的模板，通过class关键字，可以定义类；基本上，ES6的class可以看作只是一个语法糖constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法；一个类必须有contructor方法，如果没有显示定义，一个空的constructor方法会被默认添加类的实例与ES5一样，类的所有实例共享一个原型对象可以通过实例的__proto__属性为类添加方法可以通过Object.getProptotypeOf()方法.
2021-09-22 11:03:50
90
原创 ES5/ES6 解构 遍历
ECMAScript5 2009年12月正式发布的ECMAScript5.1就是常说的es5ECMAScript6 2015年6月正式发步 正式名为ECMAScript2015声明命令let和const----let声明符ES6新增了let命令，用来声明变量；用let声明的变量，只在let命令所在的代码块内有效var命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefinedlet命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错es6..
2021-09-16 16:08:06
541
原创 Object方法
----Object.getOwnPropertyNames()方法返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括Symbol值作为名称的属性）组成的数组----Object.getPrototypeOf()方法返回指定对象的原型（内部[[Prototype]]属性的值）----Object.getOwnPropertyDescriptors()方法用来获取一个对象的所有自身属性的描述符----Object.getOwnPropertyDescriptor()..
2021-09-16 13:17:55
126
原创 原型链与继承
每个实例对象都有一个私有属性(proto)指向它的构造函数的原型对象prototype；该原型对象也有一个自己的原型对象，层层向上直到一个对象的原型对象为null；根据定义，null没有原型，并作为这个原型链中的最后一个环节1.原型链继承基本思想：利用原型让一个引用类型继承另一个引用类型的属性和方法核心：原型链对象变成父类实例，子类就可以调用父类方法和属性优点：实现简单缺点：引用类型值的原型属性会被所有实例共享；不能向父类传递参数2.借用构造函数继承核心：子类构造函数内部调.
2021-09-16 11:05:01
593
原创 javascript面向对象
创建对象1.简单方式const person = new Object()person.name = 'Jack'person.age = 18person.sayName = function () { console.log(this.name)}2.字面量const person = { name: 'Jack', age: 18, sayName: function () { console.log(this.name) }}3.工厂函数...
2021-09-16 10:09:22
99
原创 javascript之Function 函数式编程
Function方法----call(thisObj, arg1, arg2,....)调用一个对象的一个方法，以另一个对象替换当前对象call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj----apply(thisObj, [argsArray])类似call()方法，区别在于call()方法接收参数列表，ap
2021-09-15 16:30:42
166
原创 cookie
cookie 用来存储数据，当用户访问了某个网站的时候，就可以通过cookie来向访问者电脑上存储数据1.不同的浏览器存放的cookie位置不一样，也是不能通用的2.cookie的存储是以域名形式进行区分的3.cookie的数据可以设置名字的4.一个域名下存放的cookie的个数是有限制的，不同的浏览器存放的个数不一样5.每个cookie存放的内容大小也是有限制的，不同的浏览器存放大小不一样----访问cookie要在服务器环境下console.log(document.
2021-09-15 14:50:11
619
原创 RegExp正则表达式
正则表达式是描述字符模式的对象，用于对字符串模式匹配及检索替换创建正则表达式1.直接字面量var reg = /hello/gi;2.new RegExp(pattern, modifiers)var reg = new RegExp('hello', 'gi')pattern 要匹配的内容modifiers 修饰符i 忽略大小写匹配 g 全局匹配，默认只匹配第一个元素，就不再进行匹配 m执行多行匹配正则表达式用法及区别----String中正...
2021-09-15 14:38:58
195
原创 BOM 浏览器对象模型
BOM的核心是window，window既是通过js访问浏览器窗口的一个接口，又是一个全局对象BOM对象window对象：浏览器中打开的窗口，顶层对象navigator对象：浏览器的相关信息screen对象：客户端显示屏幕的信息history对象：用户在浏览器窗口中访问过的URLlocation对象：当前URL的信息window对象中包含对BOM其他4个对象的只读引用以及Document对象的只读引用----document对象实际上是window对象的属性，是唯一一个既
2021-09-15 14:05:08
70
原创 定时器 防抖 节流
定时器----setTimeout() clearTimeout()在指定的毫秒数到达之后执行指定的函数，只执行一次// 创建一个定时器，1000毫秒后执行，返回定时器的标识var timerId = setTimeout(function () { console.log('Hello World');}, 1000);// 取消定时器的执行clearTimeout(timerId);----setInterval() clearInterval()定时调用的函数，可...
2021-09-15 11:10:24
3073
3
原创 鼠标Event位置 视窗位置
鼠标Event位置 鼠标事件event对象clientX 以浏览器左上顶角为原点，定位 x 轴坐标 clientY 以浏览器左上顶角为原点，定位ｙ轴坐标 offsetX 以当前事件的目标对象content左上角为原点，定位x轴坐标 offsetY 以当前事件的目标对象content左上角为原点，定位y轴坐标 pageX 以Document 对象（即文本窗口）左上角为原点，定位x轴坐标 pageY 以Document 对象（即文本窗口）左上角为原点.
2021-09-15 10:42:13
149
原创 DOM 基础事件
onabort 图像的加载被中断。 onblur 元素失去焦点。 onchange 域的内容被改变。 onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onerror 在加载文档或图像时发生错误。 onfocus 元素获得焦点。 onkeydown 某个键盘按键被按下。 onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被
2021-09-15 10:16:58
181
原创 DOM API
----节点对象选择器document.getElementById('id')获取ID名称为 id的标签 返回对应的节点对象(单个) 如果文档内有多个 ID名称为 id的标签 只获取第一个document.getElementsByTagName('p')获取文档内的所有 p 标签 返回一个 DOM集合(NodeList) 类数组对象 哪怕没有找到只有一个也返回类数组集合document.getElementsByClassName('des')获取文档内的所有类名为 des 的标签 返...
2021-09-14 14:54:56
137
原创 javascript DOM Node节点分类
DOM 文档对象模型 DOM可以把HTML看作是文档树，通过DOM提供的API可以对树上的节点进行操作----DOM基础名词文档：一个网页可以称为文档节点：网页中的所有内容都是节点元素：网页中的标签属性：标签的属性----Node节点基础分类Node有一个属性nodeType表示Node的类型：--Element类型Element提供了对元素标签名、子节点和特性的访问特性：1.nodeType为1 2.nodeName为元素标签名 3.tagName也是返...
2021-09-14 14:28:34
175
原创 async/await Promise.all Promise.race
async声明一个异步函数1.自动将常规函数转换成Promise，返回值也是一个Promise对象2.只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数3.异步函数内部可以使用awaitawait暂停异步的功能执行1.放置在Promise调用之前，await强制其他代码等待，直到Promise完成并返回结果2.只能与Promise一起使用，不适合用于回调3.只能在async函数内部使用async函数完全可以看作多个异步操作，包装成的一个Promise对
2021-09-14 09:45:08
1027
原创 express 核心API
1.express.xxx 为express函数内置的中间件2.app.xxx 为express创建的app对象所具有的属性和方法3.router.xxx 是跟路由相关的router对象的方法4.request.xxx 是请求时的request对象所具有的方法5.response.xxx 是响应时的response对象所具有的方法expressexpress是express模块暴露出来的顶级函数，用于生成一个应用----express内置的中间件express.json
2021-09-09 16:05:48
237
原创 express框架 中间件
express框架是一个快速，简单，极简的nodejs web框架安装express生成器工具：npm install -g express-generator初始化一个express应用：express express-app(应用名)app.js应用初始化文件，包括引入所有应用的依赖项、设置视图模板引擎、静态资源路径、引入路由、配置中间件等bin/www启动文件，设置监听端口、启动http服务等public静态文件目录routes路由文件，响应用户的http请求并返...
2021-09-09 10:08:38
132
原创 AJAX异步交互 同源策略跨域 Cookie
核心 XMLHttpRequestXMLhttpRequest对象用于与服务器交互 通过XMLHttpRequest可以在不刷新页面的情况下请求特定URL，获取数据；这允许网页在不影响用户操作的情况下，更新页面的局部内容let xhr = new XMLHttpRequest();--xhr.open(method, url, flag)method 请求方式url 请求地址--xhr.onreadystatechange当readyState属性发生变化时触发xhr.onr
2021-09-08 17:15:13
235
原创 nodejs HTTP模块
const http = require('http');----创建HTTP服务器 监听端口let server = http.createServer(requestListener);requestListener(req, res) req请求对象 res相应对象例如：http.createServer((function(req, res){ console.log(req); });server.listen(port, [host], [backlog],[callback
2021-09-08 09:46:42
115
原创 nodejs url模块
const url = require('url');----方法--url.parse(urlStr, boolean1, boolean2)解析一个url地址 返回一个url对象urlStr url地址字符串boolean1 默认false 当为true的时候返回的url对象中query属性返回的是一个对象boolean2 默认false 当为true的时候 则//之后至下一个/之前的字符串会解析作为host例如：let parseUrlObj = url.parse('ht
2021-09-08 09:03:34
218
原创 nodejs fs 文件系统模块
nodejs的fs模块提供了许多非常实用的函数来访问文件系统并与文件系统进行交互const fs = require('fs');注意：1.在nodejs中，使用fs模块来实现所有有关文件及目录的创建、写入及删除操作2.在fs模块中，所有的方法都分为同步和异步两种实现3.具有sync后缀的方法为同步方法，不具有sync后缀的方法为异步方法----flagr 读文件，文件不存在报错 r+ 读取并写入，文件不存在报错 rs 同步读取文件并忽略缓存 w
2021-09-07 16:28:26
373
原创 nodejs Buffer缓存区
javascript语言自身只有字符串数据类型，没有二进制数据类型；但是在处理像TCP流或者文件流的时候，必须使用二进制数据Buffer类 用来创建一个专门存放二进制数据的缓存区----Buffer和字符编码Buffer实例一般用于表示编码字符的序列 通过使用显式的字符编码，就可以在Buffer实例与普通的javascript字符串之间进行相互转换const buf = Buffer.from('hello', 'ascii');buf.toString('hex');buf.to.
2021-09-07 15:35:49
184
原创 nodejs Path路径系统模块
path模块是nodejs中用于处理文件/目录路径的一个内置模块const path = require('path');path模块的默认操作会因nodejs应用程序运行所在的操作系统而异；具体来说，当在windows操作系统上运行时，path模块会假定正被使用的是windows风格的路径如果要在任意操作系统上使用windows文件路径获得一致的结果，使用：path.win32，例如：path.win32.basename('C:\\temp\\file.html');如果要在任意操作系统
2021-09-07 15:00:00
334
原创 nodejs 事件触发器 events模块
----events大多数nodejs核心API构建于惯用的异步事件驱动架构，其中某些类型的对象(触发器 Emitter)会触发命名事件来调用函数(监听器 Listener)所有能触发事件的对象都是EventEmitter类的实例；当EventEmitter对象触发一个事件时，所有绑定在该事件上的函数都会被同步的调用；被调用的监听器返回的任何值都将会被忽略并丢弃const EventEmitter = require('events');const eventEmitter = new E.
2021-09-07 14:12:50
211
原创 nodejs模块
模块是node.js应用程序的基本组成部分 文件和模块是一一对应的nodejs使用commonjs规范作为模块化标准 每个文件都被视为一个独立的模块----主模块当nodejs直接运行一个文件的时候，require.main会被设为它的module，可以通过require.main === module 来判断一个文件是否被直接运行可以通过require.main.filename来获取当前应用程序的入口----核心模块核心模块定义在nodejs源代码的lib/目录下requi.
2021-09-07 13:52:13
159
原创 nodejs Event Loop 异步同步 阻塞非阻塞
在程序中设置2个线程：一个负责程序本身的运行，称为主线程；一个扶额在主线程与其他进程的通信，称为Event Loop线程(消息线程)Event Loop是一个执行模型，在不同的地方有不同的地方有不同的实现1.浏览器的Event Loop是在html5的规范中明确定义2.node js的Event Loop是基于libuv实现的3.libuv已经对Event Loop做出了实现，而html5规范中只是定义了浏览器中Event Loop的模型----宏队列和微队列--宏队列 macr
2021-09-07 10:31:35
189
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人