JS高级
文章平均质量分 74
Jyann~
要坚信,人生所有走过的路,都不会白走
展开
-
js库——Day.js、Big.js
Day.js 方便操作对时间解析 验证 对时间进行计算等操作。原创 2023-10-20 09:39:12 · 1015 阅读 · 0 评论 -
lodash库_.chunk、_.pick、_.omit、_.cloneDeep、_.debounce方法
lodash 模块化、高性能的 JavaScript 实用工具库。官方文档:https://www.lodashjs.com。原创 2023-10-19 20:01:23 · 584 阅读 · 0 评论 -
web 性能优化详解(Lighthouse工具、优化方式、强缓存和协商缓存、代码优化、算法优化)
Web 性能是客观的衡量标准,是用户对加载时间和运行时的直观体验。Web 性能指页面加载到可交互和可响应所消耗的时间,以及页面在交互时的流畅度——滚动是否顺滑?按钮能否点击?弹窗能否快速打开,动画是否平滑?Web 性能既包括客观的度量如加载时间,每秒帧数和到页面可交互的时间;也包括用户的对页面内容加载时间的主观感觉。原创 2023-10-16 18:59:45 · 893 阅读 · 1 评论 -
js正则表达式
w 匹配字母数字下划线,相当于[0-9A-Za-z_]\s 匹配单个空白字符,包括空格、制表符、回车符、换行符\b 匹配一个词的边界。原创 2023-10-16 18:30:05 · 341 阅读 · 0 评论 -
js防抖和节流
防抖:在n秒内,多次触发,只执行最后一次节流:事件多次触发,每间隔n秒执行一次定时器方式实现防抖和节流时区别:(清除定时器时机不同)注意如果函数有参数,是在返回函数中获取上下文this和参数,并通过fn.apply(context,args) 方式进行传递。原创 2023-10-16 16:32:46 · 273 阅读 · 0 评论 -
js继承的几种方式(原型链继承、构造函数继承、组合式继承、寄生组合式继承、ES6的Class类继承)
子类在自身实例上找不到属性和方法时去它父类实例(父类实例和实例的原型对象)上查找,从而实现对父类属性和方法的继承。原创 2023-10-16 14:13:55 · 676 阅读 · 1 评论 -
js面向对象(工厂模式、构造函数模式、原型模式、原型和原型链)
实例可以通过__proto__访问到原型对象,其原型对象又可以根据__proto__访问到其上级的原型对象,直到访问到Object的原型对象,Object的原型对象通过__proto__就会访问到原型链的最顶端null。如下,可以通过car1 instanceof CreateCar检验,CreateCar构造函数的prototype是否出现在对象car1的原型链中的任何位置。通过对象的constructor属性判断是否和构造函数相等。__proto__在实例的原型对象上。3. 执行构造函数中的代码。原创 2023-10-16 09:46:12 · 424 阅读 · 0 评论 -
同源策略和跨域问题
浏览器的同源策略影响,同源策略是一种安全机制,它限制了一个网页中的脚本只能访问同源的资源。跨源网络访问的三种方式:跨域写操作,跨域资源嵌入,跨域读操作。原创 2023-10-14 17:45:25 · 421 阅读 · 0 评论 -
ajax实现原理
网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面。这使得程序能够更快地回应用户的操作。获取服务器与客户端的响应数据 xhr.responseText。传入请求方式和请求地址。原创 2023-10-14 17:17:51 · 130 阅读 · 0 评论 -
Event Loop(事件循环)
javascript是一门单线程的语言,它的异步和多线程都是通过Event Loop实现的。原创 2023-10-14 17:11:12 · 128 阅读 · 0 评论 -
this的基本概念,call/bind/apply的使用,手写call/bind/apply方法
其中thisArg是要绑定到函数执行上下文的对象,也就是this要指向的对象,从第二个参数开始,arg1, arg2, ...是传递给函数的参数。与call和apply方法不同,bind方法并不会立即执行函数,而是返回一个新函数,可以稍后调用。其中thisArg是要设置为函数执行上下文的对象,也就是this要指向的对象,argsArray是一个包含参数的数组。其中thisArg是要设置为函数执行上下文的对象,也就是this要指向的对象,从第二个参数开始,arg1, arg2, ... 是传递给函数的参数。原创 2023-10-14 16:37:38 · 143 阅读 · 0 评论 -
闭包及底层原理
称为闭包误区:闭包不是函数里面嵌套函数。原创 2023-10-14 12:47:39 · 124 阅读 · 0 评论 -
js深拷贝与浅拷贝
当你更改源或副本时,也可能(可能说的是只针对引用数据类型)导致其他对象也发生更改。原创 2023-10-14 11:48:44 · 290 阅读 · 0 评论 -
js内存与数据
想要对js理解更深刻,就需要对内存空间有个清晰的认知。原创 2023-10-13 17:28:32 · 180 阅读 · 0 评论 -
js预编译(全局预编译/函数预编译)
预编译是上下文创建之后, js代码执行前的一段时期, 在这个时期, 会对js代码进行预处理。原创 2023-10-13 16:57:09 · 276 阅读 · 0 评论 -
作用域和作用域链
每个作用域链里面都有一个变量对象,其中函数所包含的称为活动对象AO(Active Object),每个函数包含着对上一个变量对象的引用,如果变量在当前作用域中找不到,就会通过作用域链找到他的上一级,上一级也找不到就会继续往上找,最终会找到window全局作用域,全局作用域也找不到就会打印not defined并报错。原创 2023-10-13 15:07:57 · 157 阅读 · 0 评论 -
ES6 对象排序:根据对象属性进行sort排序
【代码】ES6 对象排序:根据对象属性进行sort排序。原创 2023-06-08 17:52:31 · 550 阅读 · 0 评论 -
JS手写防抖与节流
节流:隔一段时间执行一次,如果指定时间内再次被触发,则不执行,指定时间后才继续执行。实现主要需要利用闭包,定时器(隔一段时间执行一次)/时间戳(立即执行),arguments和this指向。防抖:指定内只执行一次,如果指定时间内再次被触发,则重新开始计时。实现主要需要利用闭包,定时器,arguments和this指向,立即执行。同时利用时间戳立即执行和定时器可以隔段时间执行的优点。立即执行,停止触发后不会最后再执行一次。不立即执行,隔段时间执行一次。原创 2023-03-23 18:01:17 · 195 阅读 · 0 评论 -
前端交互三(axios库)
目录1.axios的主要函数2.针对url的一些处理3.post参数及请求头的处理4.返还对象的包装5.工厂模式函数和混入模式5.1axios的使用方式5.1.1方式一:axios({})5.1.2方式二:axios.get({})5.1.3方式三:axios.create({})5.2工厂模式函数和混入模式5.3继承函数6.拦截器6.1拆分di...原创 2020-04-30 17:05:45 · 543 阅读 · 0 评论 -
前后端交互三(Fetct基本用法——Request 对象,Headers 对象,Response对象,text(),json();Fetch 与 XMLHttpRequest 的差异)
目录1.fetch()的基本用法2.fetch(url,options)的参数解析2.1第一个参数是请求的url2.2第二个参数 options对象常用配置3.Fetch的Headers对象4.Fetch的Response对象4.1Response.clone()4.2Response.json()4.3Response.text()5.Fetch 与 XM...原创 2020-04-30 16:53:35 · 1061 阅读 · 0 评论 -
前后端交互二(CORS解决跨域,后端代理原理,利用koa-server-http-proxy中间件实现代理,前后分离开发,新闻管理添加案例 )
目录1.主题及目标2.CORS跨域设置2.1res.header('Access-Control-Allow-Origin', '*')表示任意域名都可访问2.2ctx.set("Access-Control-Allow-Credentials",true)允许携带cookie2.3Access-Control-Allow-Methods :设置允许请求的方法2.4A...原创 2020-04-30 16:28:13 · 1012 阅读 · 0 评论 -
前后端交互一(ajax的封装,formData实现多文件上传,qq空间批量上传图片案例)
1.重点掌握及知识点重点掌握:XMLHttpRequest对象的使用 ajax的封装使用 利用node搭建服务器提供数据 FormData对象的使用 利用formData实现多文件上传 qq空间批量上传图片案例知识点:XMLhttpRequet的使用 会使用ajax进行数据交互 会使用node搭建服务器 学会使用FormData来上传文件2.ajax封装 封装...原创 2020-04-30 16:04:49 · 842 阅读 · 0 评论 -
客户端储存(cookie,localStorage及sessionStorage)
目录1.知识要点及学习目标2.客户端储存方案2.1服务端储存2.1.1服务端文件储存2.1.2内存2.1.3数据库:mysql、mongoodb、Oracle等等。2.2客户端储存(离线储存)2.2.1浏览器3.cookie3.1koa中cookie的使用3.1.1储存cookie的值;3.1.2获取cookie的值3.1.3options常用设...原创 2020-04-27 10:21:56 · 1923 阅读 · 0 评论 -
Node.js(二)——npm包管理器,koa安装及使用,koa中的applition对象及context对象,koa-views,koa-static,koa-router,常见http状态码
目录1.课堂目标及知识点2.koa介绍3.koa使用3.1koa安装3.2一个简单的koa服务器3.3Koa 利用中间件 控制"上游",调用"下游“;4.Application对象5.上下文context对象常用属性及方法5.1context 将node中的request和response 封装到一个对象中,并提供一些新的api提供给用户进行操作;5.2re...原创 2020-04-21 17:58:39 · 1549 阅读 · 0 评论 -
Node.js(三)——新闻列表系统,后端管理系统实战
1.课堂目标及知识点课堂目标mvc三层架构 koa-body使用 get及post传参; node中的文件上传 数据的文件存储本节知识点mvc的应用 通过koa-body实现接收post参数 实现文件上传到服务端 实现数据在服务端的持久化保存2.mvc模式 mvc 即 model 、controller、view;mvc模式将model、view、control...原创 2020-04-21 09:10:05 · 1686 阅读 · 0 评论 -
Node.js(二)——pug模板引擎,nunjucks模板引擎,在koa中使用pug和nunjucks模板引擎
目录1.知识点及课堂目标2.模板引擎3.pug模板引擎使用3.1安装pug3.2pug常用语法3.3练习工具 hade4.nunjucks模板引擎在koa中的应用4.1安装koa-nunjucks-24.2使用nunjucks4.3nunjucks的语法使用——变量4.4nunjucks的语法使用——注释4.5nunjucks的语法使用——if4...原创 2020-04-21 09:02:24 · 3331 阅读 · 0 评论 -
ES6高阶(defineProperty,Proxy代理,数据劫持,es6模块化、exports 和 import,AMD /CMD模块化)
目录1.课堂主题及知识点2.defineProperty3.proxy4.es6模块化4.1导出方式4.1.1导出 方式一 :4.1.2导出方式二 关键字 "as"4.1.3导出方式三4.1.4导出方式四4.2导入方式4.2.1export导出的,命名要保持一致方式4.2.2export导出的,命名可以自定义方式;4.2.3通配符 "*"方式导入...原创 2020-04-19 14:06:28 · 910 阅读 · 0 评论 -
面向对象四——应用之实现jquery库核心功能
1.课堂主题定义函数返还JQuery对象 ready方法和原生节点处理 选择器器封装 封装JQ的eq方法 封装JQ的click方法 封装JQ的on方法 封装JQ的css方法2.知识点对象成员与类成员 判断类型 链式调用实现 正则表达式3.jquery特性说明知己知彼,百战不殆;想要知道jq功能如何实现,先要了解其特性;###如何实现链式调用根据对象的特性,...原创 2020-04-12 20:45:50 · 429 阅读 · 0 评论 -
nodejs部署配置pm2
目录1.高大上先上部署node方式:2.使用场合:3.pm2主要特性:4.使用npm/cnpm全局安装:5.pm2命令使用(项目更目录下使用):6.启动进程的方式详细:7.配置pm2启动文件:8.processes.json说明:1.高大上先上部署node方式:直接通过node app来启动,如果报错了可能直接停在整个运行,supervisor感觉...转载 2020-04-11 22:13:33 · 735 阅读 · 0 评论 -
node环境下,无法运行使用ES6语法(import,default等)的JS的问题解决
问题报错:解决方法一:所有语法改为其他语法。如,CommonJS。注意引入到该js文件中的语法也必须不适用ES6语法。解决方法二:参考自https://blog.csdn.net/wushichao0325/article/details/85262063安装babel相关模块:npm install --save babel-core npm install --save ...原创 2020-04-11 22:06:00 · 8613 阅读 · 0 评论 -
React 项目npm ERR! A complete log of this run can be found in: npm ERR! ..._logs\2020-04-...debug.log
报错:e:\StudyFile\kaikeba\works\React专题\react-router>npm start> react-router@0.1.0 start e:\StudyFile\kaikeba\works\React专题\react-router> react-scripts startStarting the development serv...原创 2020-04-03 17:05:45 · 3357 阅读 · 0 评论 -
React(五)——Redux
目录1.知识点2.状态(数据)管理3.Redux——核心概念3.1state 对象3.1.1state 是只读的3.1.2通过纯函数修改 state3.2Reducer 函数3.3action 对象3.4Store 对象3.4.1Redux.createStore 方法3.4.2getState() 方法3.4.3dispatch() 方法3.4...原创 2020-03-30 22:47:20 · 862 阅读 · 0 评论 -
React(四)——React 路由(react-router-dom)
目录1.路由1.1SPA1.2SPA 的页面切换机制1.3后端路由与前端路由1.3.1后端路由1.3.2前端路由1.4React.js 中的路由2.React Router2.1基于 Web 的 React Router2.1.1安装2.1.2概览3.基础3.1应用场景(一)3.1.1Router 组件3.1.2Route 组件3.1...原创 2020-03-30 22:22:29 · 2142 阅读 · 0 评论 -
React(三)——React组件之生命周期
目录1.周期分类2.挂载阶段2.1constructor2.2render()2.3static getDerivedStateFromProps()2.4componentDidMount()3.更新阶段3.1static getDerivedStateFromProps()3.2shouldComponentUpdate()3.3render()3....原创 2020-03-30 21:50:19 · 1203 阅读 · 0 评论 -
React(三)——React组件之属性默认值
目录1.默认属性值1.1defaultProps 静态属性1.1.1基于 static 的写法2.非受控组件默认值2.1defaultValue 属性2.1defaultChecked 属性1.默认属性值1.1defaultProps 静态属性defaultProps 可以为 Class 组件添加默认 props。这一般用于 props 未赋值,但又不能为 nu...原创 2020-03-30 21:42:21 · 6425 阅读 · 0 评论 -
React(三)——React组件之props验证
目录1.props 验证1.1prop-types1.2安装1.3使用1.props 验证随着应用的不断增长,也是为了使程序设计更加严谨,我们通常需要对数据的类型(值)进行一些必要的验证,React.js 提供了一个验证库:prop-types1.1prop-typesprop-types 是一个独立的库,需要安装https://www.npmjs.co...原创 2020-03-30 21:37:56 · 1903 阅读 · 0 评论 -
React(三)——React组件之children
目录1.children1.1dialog 组件1.1.1CSS1.1.2dialog.js1.children一个组件通过 props 除了能给获取自身属性上的值,还可以获取被组件包含的内容,也就是外部子组件,前面我们写的组件更多的是作为一个单标签组件,实际应用中很多组件是双标签的,也就是可以包含内容的,也可称为:容器组件,那么组件包含的内容,我们就可以通过 props...原创 2020-03-30 21:35:17 · 2437 阅读 · 0 评论 -
React(三)——React组件之表单与受控非受控组件
React组件的表单受控组件和非受控组件。原创 2020-03-29 19:47:08 · 635 阅读 · 0 评论 -
webpack
默认情况下,webpack 会报错,因为 webpack 处理不了 txt 和 md 这样的非 js 的模块,但是我们可以通过不同的loader专门来处理纯文本内容(不同的 loader 有不同的作用)。其实就是以模块为单位,当模块代码发生修改的时候,通知客户端进行对应的更新,而客户端则根据具体的模块来更新我们的页面逻辑(这些逻辑需要自己去实现),好在当前一些常用的更新逻辑都有了现成的插件。随之就出现了,它的核心的局部(模块)更新,也就是不刷新页面,只更新变化的部分。原创 2019-10-17 17:57:21 · 910 阅读 · 1 评论 -
webpack与模块化
目录1.模块化2.模块化的核心3.ESM3.1独立模块作用域3.2导出模块内部数据3.3导入外部模块数据3.3.1静态导入3.3.2ESM导入导出——示例:3.3.3动态导入import()4.模块化的向下兼容5.CommonJS5.1独立模块作用域5.2导出模块内部数据5.3导入外部模块数据5.4CommonJS规范使用示例6....原创 2019-10-16 10:01:51 · 336 阅读 · 0 评论