原生js学习
文章平均质量分 79
方朝端
这个作者很懒,什么都没留下…
展开
-
20230728----重返学习-新电脑环境
把D盘合并到C盘,以后文件基本上都装C盘,防止软件有问题。安装公司内网通信工具,如。安装git图形化管理工具。原创 2023-09-10 23:36:37 · 180 阅读 · 0 评论 -
20230703----重返学习-组件封装-Vue.extend()语法-创建一个使用函数来调用的组件-组件和插件的问题-vuex-Vue.mixin()
组件调用:template中标签语法。使用函数的方式去调用。原创 2023-07-03 23:55:50 · 327 阅读 · 0 评论 -
20230701----重返学习-Vue的单向数据流-todoList项目-组件封装-jsx语法
fang/f20230701/day0701/src/main.js或fang/f20230701/day0701/src/global.js,因为global.js是在入口文件main.js直接引入的,和在入口文件执行代码差不多。fang/f20230701/day0701/src/main.js或fang/f20230701/day0701/src/global.js,因为global.js是在入口文件main.js直接引入的,和在入口文件执行代码差不多。在需要用到该按钮的地方直接使用。原创 2023-07-02 00:09:03 · 402 阅读 · 0 评论 -
20230630----重返学习-QQ音乐-从零开始构建一个Vue2的项目-常见面试题-Vue组件间通信
如果不想传递东西只想操作实例:在父组件中,可以基于ref($children)获取子组件的实例,这样就可以很方便地去操作子组件实例上的数据和方法了,然后想做什么就做什么。如果需要传递的是一些值/方法:基于属性即可。在代码编译的时候,可以把我们写的px单位的值,按照指定的rem和px和换算比例,自动转换为rem的值!Vue2进阶/VueQQMusic/src/assets/images/loading.gif。Vue2进阶/VueQQMusic/src/assets/images/music.svg。原创 2023-06-30 23:52:03 · 205 阅读 · 0 评论 -
20230628----重返学习-自定义指令的玩法和作用-对象新增属性不能响应的问题-Vue组件中的data属性-Vue生命周
面试题:自定义指令的玩法和作用在我之前的项目中,有些需求我是基于创建自定义指令完成的。我觉得这也算是一种封装技巧,把一些要实现的功能,封装成为自定义指令,以后基于v-xxx进行调用,用起来也很方便!比如我之前封装过:v-power 实现权限的校验。在自定义指令内部,获取登录者具备的权限标识,根据传递进来的需要判断的标识,验证当前登录者是否具备相应的权限,从而控制元素的渲染和销毁。v-debounce/throttle 实现函数的防抖和节流。原创 2023-06-29 00:03:37 · 283 阅读 · 0 评论 -
20230627----重返学习-全局处理vue-Vue.use()-element-ui说明-vue2中原型链-如何设置样式
创建,用于设置全局相关的配置。在中,在导入之前先导入。原创 2023-06-28 00:28:41 · 379 阅读 · 0 评论 -
20230626----重返学习-Vue的学习路线-常用的vue指令-v-model-vue常见面试题
template>jsx语法OptionsAPI样式私有化方案类组件函数组件UI组件库二次封装vuexvue-router上拉刷新下拉加载超长列表登录权限管理模型。原创 2023-06-26 23:56:51 · 352 阅读 · 0 评论 -
20230624----重返学习-vue-响应式处理思路-仿源码
Vue是渐进式框架Vue2全家桶Vue3全家桶。原创 2023-06-24 23:58:54 · 325 阅读 · 0 评论 -
20230621----重返学习-仿QQ音乐播放器-静态页面的免费部署-vue2
audio标签标签的属性各浏览器对不用音频格式的支持是不一样的可以在audio标签用内部使用source来指定可以使用的音频源。</audio标签对应的DOM元素对象的常见属性</</let;/*currentTime:存储了当前播放的时间「单位秒」duration:存储了总的时间ended:true/false 是否播放完毕paused:true/false 当前是否为暂停的volume:0~1 控制音量的 1最大音量 0静音play方法:控制音频播放pause方法:控制播放暂停。原创 2023-06-21 23:56:23 · 1548 阅读 · 0 评论 -
20230620----重返学习-移动端事件处理-响应式
day-095-ninety-five-20230620-移动端事件处理-响应式移动端事件处理移动端的事件处理移动端事件处理PC端主要以:鼠标事件、键盘事件、资源加载事件、动画事件等事件为主。其中click在PC端是点击事件!移动端主要以:手指事件(单手指和多手指)、资源加载事件、动画事件等为主。其中,click在移动端是单击事件。移动端事件问题移动端事件的各个问题:问题1:click事件在移动端存在300ms的延迟。原因:click事件在移动端是单击原创 2023-06-20 23:58:41 · 2700 阅读 · 0 评论 -
20230619----重返学习-图片缩略图幻灯片-插件封装的步骤-NativeApp与WebApp
day-094-ninety-four-20230619-图片缩略图幻灯片-插件封装的步骤-NativeApp与WebApp图片缩略图幻灯片总体思路整理思路。所有的结构都包在一个盒子中。盒子里有两层内容:盒子宽高由前端根据设计稿来定。盒子宽高应具体到px,以便内部使用百分比进行布局。一层是封面,用于展示播放时长和视频主图。一层是进度图,用于展示进度条对应的视频缩略图。根据用户鼠标在盒子中横向距离与盒子宽度的比例,控制进度图的进度,之后进度图控制精灵图中显示的区域。精灵图是一张原创 2023-06-19 23:47:56 · 860 阅读 · 1 评论 -
20230614----重返学习-HTTP网络-辅助知识-前端性能优化
从输入URL地址到看到页面,中间都经历了啥第一步:URL地址解析。httphttpsHTTPSSLftp上传内容下载内容0~65535第二步:缓存检查Expireshttp/1.0http/1.1Expires具备在效期的缓存信息html页面强缓存webpack编译唯一hash值代码修改每次打包不同的文件html页面最新的文件强缓存服务器资源最新资源本地缓存协商缓存协商缓存强缓存强缓存协商缓存协商缓存的机制HTTP/1.0ETagHTTP/1.1ETag第三步:DNS解析DNS解析递归查询。原创 2023-06-14 23:59:37 · 1144 阅读 · 0 评论 -
20230613----重返学习-HTTP网络-毕设总结
毕设是非常重要的,如果毕设都完不成,也不需要去面试了,直接重听就好了!只有完成毕设,和写完简历,并且我审核过了,才能毕业「我给你看简历之前,先看毕设」不限技术框架「Vue2、Vue3、React 皆可」,但是建议:你想用啥技术作为主栈去找工作,那么就先以啥技术框架去做毕设!!一个人 / 两个人:自愿结组「三个人结组的,需要我审核」毕设需要是一个完整的项目「包含前后端的各种通信问题」如果自己可以写后台,自己写也可以,如果不会后端,则找开源的后端!!知乎日报「只许一个人开发」原创 2023-06-13 23:42:20 · 287 阅读 · 0 评论 -
20230531----重返学习-redux总步骤-TaskOA-react路由管理方案react-router-dom
确定基础骨架目录。编写基础骨架代码。定义派发标识。定义派发标识。创建基础reducer骨架。创建基础reducer骨架。创建基础reducer骨架。编写具体reducer业务逻辑。编写具体reducer业务逻辑。合并reducer并导出。合并reducer并导出。创建redux公共容器。创建redux公共容器。创建action的基础骨架。创建action的基础骨架。创建action的基础骨架。修改具体action的派发逻辑。修改具体action的派发逻辑。合并action并导出。合并action并导出。原创 2023-06-01 00:00:35 · 357 阅读 · 0 评论 -
20230517----重返学习-react组件化开发-小知识-创建一个React组件
组件化开发组件化+工程化React中的组件化开发在Vue2中,其组件的划分有两大思路:TableList方法名属性名思路一:全局组件与局部组件,目前公司项目中划分的主要模式。首先要创建一个 XxxXxx.vue 的单文件组件。VoteDemo这样在任何一个组件中,都可以直接调用这个组件!函数组件与类组件this.xxx在React中,其组件不分全局和局部的,或者说都是局部组件。都得引入才能使用。.vue.jsx.jsx后缀.js后缀.js后缀.jsx后缀.jsx后缀文件.js后缀文件。原创 2023-05-17 23:56:00 · 583 阅读 · 0 评论 -
20230516----重返学习-react基础-业务开发思路
MVVM(Vue) 与 MVC(React)关于版本问题。jsx语法故而把需要构架视图的js文件,其后缀名改为.jsx。可以把每一个.jsx理解为一个单文件组件。.jsx的文件,在webpack打包的时候,也是按照js的方式处理。把所有的视图(内容)编译后,都放在#root的容器中渲染。React18是这样写的。在jsx语法中,我们基于{}大胡子语法绑定JavaScript表达式。{}变量{title}值{"字符串值"}数学运算{1+1}判断操作只能使用三元运算符。原创 2023-05-17 00:00:54 · 340 阅读 · 1 评论 -
20230513----重返学习-同步异步任务-作用域与this指向与变量自增-发布订阅设计模式-webpack
所有的代码都是在ECStack执行环境栈-即主线程开始的。async-await与setTimeout()与Promise()及then()。就算定时器写了0毫秒,但实际上也不是0毫秒,会等待浏览器最快的反应时间执行。async函数中的代码还是会以同步代码的方式来执行。await后面的代码还是会以同步代码的方式来执行。new Promise()内部的东西还是会以同步方式执行。new Promise().then()传入的回调函数会以异步函数执行。DOM绑定事件与Promise()与then()方法。原创 2023-05-13 23:59:29 · 309 阅读 · 0 评论 -
20230512----重返学习-Promise进阶-项目环境的问题-async与await
是否是一个对象或者函数,因为它可能是一个伪Promise实例对象。是一个标准的Promise官方实例对象,则。的状态是失败的,值就是抛出的异常。原创 2023-05-12 23:57:33 · 576 阅读 · 0 评论 -
20230510----重返学习-前端开发中的同步异步编程-Promise基础知识深入-ES6小知识-手写Promise源码基础版-简历说明
因为定时器定时的是1000ms,如果同步操作还经过了很长才执行,那么A与B都会进入EventQueue队列中,就会出现A执行结束后,立马就执行B的场景。宏任务先执行,就是每次取多个异步任务-全部微任务与宏任务,之后按顺序执行完,再去取下一次EventQueue队列中的排队队列。jQuery中提供的$.ajax方法,就是基于传统的回调函数方式,来管理异步的XMLHttpRequest请求。微任务先执行,就是每次取一个异步任务,之后就先执行这一个异步任务。它内部是一个回调函数,放到队列中就会等待,必定能执行。原创 2023-05-10 23:54:38 · 421 阅读 · 1 评论 -
20230509----重返学习-对象拷贝-ES6的兼容-对象的合并-前端开发中的同步异步编程
对于正常的一些属性值,而且属性名都是字符串类型的,可以直接基于JSON.stringify()/JSON.parse()实现深拷贝。JSON.stringify()具备很强的局限性,因为它是ES3的,当时还没ES6相关的规则。只合并第一级,或者不论属性值是什么类型,直接用后面对象中的值,替换前面对象中的值。修改的是obj1这个对象,obj2对象不变,最后返回的值也是obj1这个对象!浅合并两个对象,用 obj2 中的每个成员,去替换 obj1 中的每个成员。lodash中的方法。HTTP网络请求线程。原创 2023-05-09 23:56:28 · 459 阅读 · 0 评论 -
20230508----重返学习-call()与bind()重写-JS中数据类型检测汇总-装箱与拆箱-类的多种继承方案
call()的作用例子自定义call()基本原理自定义call()需求fn.call()的处理步骤fn()这个函数,首先基于__proto__找到Function.prototype.call()这个方法把找到的call()方法执行而在call()方法内部:把fn()执行,把它里面的this改为obj,并且为其传递了10与20这些入参,接收它的返回值并作为call函数执行的返回值简洁初步版初步完善版。原创 2023-05-08 23:59:05 · 452 阅读 · 0 评论 -
20230507----重返学习-jQuery源码-循环处理-this处理-迭代对象方法each的封装
jQuery及$的命名冲突转移的使用权。原创 2023-05-07 23:39:04 · 263 阅读 · 0 评论 -
20230506----重返学习-嵌套循环返回相同结构对象-转成链式compose组合聚合函数-柯里化函数-面向对象梳理-重写new方法-鸭式变形-jQuery源码-模块管理的工具
新的执行上下文作用域链函数私有作用域。原创 2023-05-07 00:01:31 · 74 阅读 · 0 评论 -
20230505----重返学习-回顾JavaScript知识体系的综合性整理-数据类型转化-堆栈内存及闭包作用域
..原创 2023-05-05 23:59:51 · 500 阅读 · 0 评论 -
20230321----重返学习-变量提升-作用域-闭包
不论判断条件是否成立,都会进行变量提升只对等号左边的进行变量提升return 不阻断变量提升,只会阻断后面的代码执行return 下面的代码虽然不能执行,但是可以进行变量提升,return 后面的代码不进行变量提升如果变量名字重复,依旧会变量提升var变量提升 声明一次,后面的语句在后面会在原地等待进行赋值function变量提升 声明一次,赋值多次。顺序依旧会改变,函数都放前面了自执行函数在当前所在的作用域中不进行变量提升,自执行函数自己所形成的私有作用域照常进行带var与不带var区别。原创 2023-03-21 23:57:47 · 210 阅读 · 1 评论 -
20230317----重返学习-js盒子模型-getBoundingClientRect-图片懒加载
: 的: 的拿到到的以及到的offsetWidth: ++++offsetHeight: ++++clientWidth +-clientHeight +-scrollWidth 的scrollHeight 的scrollTop 滚动条scrollLeft 滚动条中,和一致,可以滚动事件获取样式获取元素的任何形式的计算后的样式,返回一个CSSStyleDeclaration对象中括号原创 2023-03-17 23:59:01 · 394 阅读 · 0 评论 -
20230315----重返学习-动画-轮播图
是变形属性,不是动画 过渡动画 帧动画选取规则总原则:用配合也可以在中设置也可以使用在上监听用配合设置和设置用给设置animate.css直接用,用单个粘贴复制直接用引入给DOM元素对象设置类名原生JavaScript动画是定时器/ 清除定时器: ,代表是把控用一个来存储。后,后把手动。之后,来判断。养成习惯: 一旦了,就用存储,就要,并。每一个,我们都最好把从系统中会等待到的时候,把执行DOM元素样式原创 2023-03-15 23:59:43 · 159 阅读 · 0 评论 -
20230314----重返学习-原生JavaScript开发思路-DOM自定义属性-JavaScript编程思想-匿名函数具名化-jQuery
给DOM元素对象设置自定义属性的方式对象的成员访问原理:直接操作DOM元素对象的堆内存空间基于去管理原理:直接设置在元素的标签上所以所设置的属性值都会转换为字符串,并且属性名不区分大小写因为所有属性在标签上都是字符串属性名都会转为小写两种方式因为原理不一样,所以不能混在一起使用除非一些特殊的内置属性例如id,在结构中设置,在堆内存空间中也有改了堆内存中的信息元素标签的结构也跟着改变了这个叫做DOM映射jQuery是一个前端框架或类库。它里面封装了大量的方法,可以简化我们。原创 2023-03-14 22:39:44 · 453 阅读 · 0 评论 -
2021-09-06 时间转化-通过某一天获取相关联的日期
实际上使用时,一般不用自己手写,而是用dayjs。通过引入dayjs这个第三方插件来操作时间。但有时候,不想引入过多的第三方插件,那么就要使用JavaScript原生代码来书写。原创 2023-02-12 12:29:36 · 98 阅读 · 0 评论 -
Array.forEach() 与 Array.map()这些方法的第三个可选参数 array 的作用
如上,forEach回调方法接受三个参数item, index, _arr,但是最近有人问第三个参数的用法,这第三个参数有用过的吗?如果在回调中需要访问数组,而你又没有接受第三个参数,那么引擎需要向上层作用域查询是否存在变量,而如果你接受了第三个参数,那么相当于在当前作用域中就已经有这个变量了而不需要向上查询。这或许能算是一个好处吧,虽然可能微不足道。比如在封装回调函数的情况下:函数式编程就是可以让你做到逻辑完全分离,也就是说 callback 函数也可以完全分离。想象一下你有可能把 callback原创 2022-06-29 17:43:35 · 329 阅读 · 0 评论 -
2022-04-26 跳出特定for循环,JavaScript中的label语法
原理标记语句可以和 break 或 continue 语句一起使用。标记就是在一条语句前面加个可以引用的标识符标签语句用于给语句加标签,语法如下:label: statement下面是一个例子:start: for (let i = 0; i < count; i++) { console.log(i);}在这个例子中,start是一个标签,可以在后面通过break或continue语句引用。标签语句的典型应用场景是嵌套循环。label语句只在以下场景中使用:for 语句d原创 2022-04-26 13:02:36 · 1986 阅读 · 0 评论 -
2021-09-15 JavaScript中强制将某个未知类型变量转成基础数据类型
为什么要强制将某个未知类型变量转成基础数据类型?实际业务场景里,一个变量的数据是否合法或符合预期,会影响到自己的代码的可靠性。比如在别人使用自己写的自定义函数,而自己写的函数中的一些值是需要对入参严格限制为数字的,同时自己想,如果别人输入错误,就使用一些默认值。//自己写的代码---名为[自定义函数集.js];const 自定义函数 = (未知类型入参一)=>{ const 内部数字变量一 = 根据未知类型入参一转成的数字;//在这里,需要根据[未知类型入参一]初始化变量; 根据内部原创 2021-09-15 11:57:17 · 117 阅读 · 0 评论 -
2021-07-30 JavaScript中常用数据的判断
为什么要判断一个变量的常用数据?实际业务场景里,一个变量的数据是否合法或符合预期,会影响到项目中用到的UI组件库特定组件的运行。比如element-ui中的el-select组件,单选时绑定的数据不能为数组,多选时要为数组。有些函数也是要限定某些合法数据的。比如Date()里可以是时间戳,也可以是某些格式的字符串。常用的数据:代表数字的非NaN数据:''//空字符串;代表无数字输入或0;判断一个变量是否是常用数据【-0】let theVariable = -0;Obje原创 2021-09-02 14:49:01 · 114 阅读 · 0 评论 -
2021-07-21 vue插槽
说明为什么要有插槽?是为了方便优雅地在父组件中向子组件传递向子组件传递dom结构。代码处理子组件该子组件的组件名为ChildComponent:<template> <div class="the-box"> <div>子组件开始</div> <div style="border: 1px solid rgb(255, 0, 0)"> <div>插槽1---开始</div>原创 2021-07-21 20:59:55 · 84 阅读 · 0 评论 -
2021-07-20 value!==value,JavaScript中NaN
关于NaNNaN 属性代表一个“不是数字”的number类型的字面量值。这个特殊的值是因为运算不能执行而导致的,不能执行的原因要么是因为其中的运算对象之一非数字。NaN的出现场景:一个表达式中如果有减号(-)、乘号(*) 或 除号(/) 等运算符时,JS引擎会在计算之前试图将运算符两边的变量转化为number类型,如果转化失败,表达式将返回NaN。直接使用 parseInt(), parseFloat()或 Number()将一个非数字的值转化为数字时,表达式返回NaN。NaN的检测判断1.原创 2021-07-20 17:36:35 · 317 阅读 · 0 评论 -
2021-07-20 JavaScript中关于eval()方法
eval()常见用途1.使用ajax获取到后台返回的json数据时,使用 eval 这个方法将json字符串转换成对象数组let jsonString = JSON.stringify({fang:'方'})const jsonObject = eval('('+jsonString+')')console.log('jsonObject--->',jsonObject)替代eval()方法替代的方法都是不是绝对安全。特别在node里使用的,更不安全。要确保传的代码字符串不会牵扯到一系原创 2021-07-20 17:13:12 · 252 阅读 · 0 评论 -
2021-07-01 原生js获取文件数据
原理手动用js创建一个type为file的DOM元素。在读取到数据后,清空手动创建的DOM元素。返回得到的Promise类型的文件数据files。const getFilesPromise = async () => { let thePromise = new Promise((resolve, reject) => { let theElement = document.createElement("input"); theElement.type = "fil原创 2021-07-01 12:05:29 · 646 阅读 · 0 评论 -
2021-06-28 CSS变量设置颜色
说明css变量只能以[–]开头。距离当前dom元素层级最近的父元素作用域css变量的值更容易生效。css变量在css文件中只能以var()函数来使用。代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />原创 2021-06-28 17:28:36 · 617 阅读 · 0 评论 -
2020-11-18 原生js实现自动打字效果
原理使用定时器,对要输出的文字进行遍历,每遍历一次,都增加一个字以及在段尾加上"|"暗示别人正在打字。js代码 const fangWrite = (theString, queryString, timeInterval, identifier) => { const thisString = theString || ""; const thisQueryString = queryString || "body"; const th原创 2020-11-18 09:51:03 · 265 阅读 · 1 评论 -
flex布局-20201028
改版自阮一峰的网络日志-Flex 布局教程:语法篇在flex容器上设置的(即父元素上设置);flex-direction属性决定主轴的方向(即项目的排列方向)。flex-direction: row | row-reverse | column | column-reverse; row(默认值):主轴为水平方向,起点在左端。 row-reverse:主轴为水平方向,起点在右端。 column:主轴为垂直方向,起点在上沿。 column-reverse:主轴为垂直方向,起点在下沿。原创 2020-10-28 14:20:57 · 219 阅读 · 0 评论