- 博客(27)
- 收藏
- 关注
RSS订阅原创 图片预加载
使用css中的background的属性通过CSS的background属性将图片预加载到屏幕外的背景上。只要这些图片的路径保持不变，当它们在WEB页面的其他地方被调用时，浏览器就会在渲染过程中使用预加载（缓存）的图片。缺点：由于CSS是同页面的其他内容一起加载，这也就意味着增加了页面的整体加载时间。使用js中的 new Image()方法（推荐）步骤1、使用new Image()动态的创建imgvar newImg = new Image();步骤2、设置其src为要加载的
2021-12-31 17:21:08
515
原创 使用preload或者prefetch预加载页面资源
preload与prefetch的区别preload浏览器页面必定需要的资源，浏览器一定会加载这些资源适应场景：首页一些肯定会加载的资源prefetch浏览器页面可能需要的资源，浏览器不一定会加载这些资源。适应场景：例如滚动之后会加载的资源，滚动是可能触发，并不是一定触发如何使用：用法几乎一致，以preload为例使用link标签创建<link rel="preload" href="./common.css" as="style">动态创建一个link标签后插入到head
2021-12-31 17:00:17
579
原创 互联网数据分析----专业术语解释
互联网常用名词解释1、PV（page view) 页面浏览量指某段时间内访问网站或某一页面的用户的总数量,用户每刷新一次即重新计算一次。2、UV (Unique Visitor)指来到网站或页面的用户总数，这个用户是独立的，同一用户不同时段访问网站只算作一个独立访客，不会重复累计，通常以PC端的Cookie数量作为统计依据。3、Visit 访问指用户通过外部链接来到网站，进入网站到离开网站算一次4、home page 主页指一个网站起主目录功能的页面，也是网站起点。通常是网站首
2021-12-03 17:02:05
740
原创 web判断浏览器类型
通过window.navigator.userAgent var explorer = window.navigator.userAgent ; //判断是否为IE浏览器 if (explorer.indexOf("MSIE") > -1) { return 'ie'; } //判断是否为Firefox浏览器 else if (explorer.indexOf("Firefox")
2021-12-03 14:59:24
343
原创 web横屏竖屏判断
css判断@media screen and (orientation:portrait){ /*竖屏对应的css*/}@media screen and (orientation:landscape){ /*横屏对应的css*/}js判断window.addEventListener('onorientationchange',function(event){ if(window.oprientation ===180 || window.oprientation ===0){ /
2021-12-03 14:20:29
484
原创 资源管理注意事项 --- meta 文件
Cocos Creator引擎会自动生成.meta文件在每一个meta文件里都有一个uuid，所以在Creator引擎中是通过uuid来引入文件，因此可以在编辑资源管理中，随意删除，移动文件。meta文件出错的几种情况以及解决方法1、uuid冲突原因：出现文件复制粘贴导致有2个一个的uuid文件；或者多人开发时，生成了相同的uuid文件。避免：最好在引擎管理工具Cocos Creator里进行添加、移动文件。解决：关闭Creator编辑器，删除其中一个meta文件，再打开Creator。2、u
2021-10-15 14:26:48
769
原创 git合并的merge与rebase的区别以及各自的操作命令
merge假设现在有2个分支，一个master主分支，一个是branchA你的个人分支#mermaid-svg-KU35RhALF4hvNTdG .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-KU35RhALF4hvNTdG .label text{fill:#333}#mermaid-svg-KU35
2021-10-12 18:04:58
172
原创 监听用户是否点击屏幕（是否有操作），未操作时执行对应的事件
思路1、全局定义一个变量储存是否操作的状态，全局注册一个定时器，封装一个方法，传入一个callback函数，当用户一段时间未操作页面时执行，传入一个time时间，限定多长时间用户未操作就执行这个callback函数。2、通过onmousedown与onmouseup，两个事件判断用户有没有操作var timer;var timeStatus = true;function hasOperate(callback, time) { document.body.onmousedown = fu
2021-09-23 20:38:22
2389
1
原创 javascript - 使用JavaScript控制CSS3关键帧动画
项目场景：场景1：动画与事件相关，例如特定的场景出现场景2：点击之后触发动画问题描述：我的场景： 监听用户的点击，用户在限定的时间内未对屏幕进行点击就触发动画。最初写法:1、使用jq的addClass和removeClass操作 $('#div').addClass('animation-class'); setInterval(function(){ $('#div').removeClass('animation-class');
2021-09-23 20:24:22
1229
转载 Vue实例挂载的过程中发生了什么?
总结new Vue的时候调用会调用_init方法定义 set、set、set、get 、delete、delete、delete、watch 等方法定义 on、on、on、off、emit、emit、emit、off等事件定义 _update、forceUpdate、forceUpdate、forceUpdate、destroy生命周期调用$mount进行页面的挂载挂载的时候主要是通过mountComponent方法定义updateComponent更新函数执行rende
2021-08-28 15:27:35
816
原创 vue的data为什么是一个函数不是一个对象
组件实例对象的data必须是个函数,目的是为了防止多个组件实例对象之间共用一个data,产生数据污染,采用函数的形式,initdata是会将其作为工厂函数都会返回一个新的data对象
2021-08-28 15:03:30
139
转载 Vue中的组件和插件
组件在vue中每一个.vue文件都可以视为一个组件插件插件通常为Vue添加全局功能,一般有以下几种 - 添加全局方法或属性 - 添加全局资源:指令/过滤器/过渡等。 - 通过全局添加一些组件选项 。如vue-router - 添加vue实例方法，通过把他们添加到Vue.prototype上实现.详细地址:https://mp.weixin.qq.com/s/Wi0r38LBopsyQ9HesMID0g...
2021-08-28 14:55:28
252
原创 SPA（单页应用）首屏加载速度慢怎么解决？
计算首屏加载时间指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间通过DOMContentLoad或者performance来计算首屏时间// 方案一：document.addEventListener('DOMContentLoaded', (event) => { console.log('first contentful painting');});// 方案二：performance.getEntriesByName("first-contentfu
2021-08-28 11:39:11
248
转载 对SPA(单页应用)的理解?
理解:SPA(single page application):单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面;vue-router在实现单页面前端路由时，提供了两种方式：Hash模式和History模式；根据mode参数来决定采用哪一种方式。实现一个SPA写在前面：通常 SPA 中前端路由有2种实现方式：- window.history- location.hash
2021-08-27 21:24:43
400
原创 provide 与 inject 的使用
简单理解1.简单理解 provider/inject：简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。概念解析成对出现：provide和inject是成对出现的作用：用于父组件向子孙组件传递数据使用方法：provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等
2021-08-27 20:05:37
2309
转载 当我们在打开网页时，浏览器做了什么?
打开网页会触发多个进程(主要这里说的是进程不是线程,一个进程可以包含多个线程,一个线程又可以包含多个模块),单线程最常用的javascript就是单线程语言,最粗狂的解释就是-----“代码一行一行的往下执行,如果报错了就卡在哪里不走了”假设我们在打开一张页面，浏览器的网络线程、插件线程、渲染线程等等挨着挨着往下走。多线程浏览器多线程浏览器的工作原理如下，我们再次想象我们打开一张页面的过程：当我们再次打开一张页面时，此时多个线程会被分割，这种低耦合的方式，其好处就在于即使任意一个线程的任
2021-08-27 20:04:44
343
原创 Vue组件间通信方式都有哪些
父子通信兄弟组件通信祖孙与后代之间的通信非关系组件之间的通信组件间通信的方案整理vue中8种常规的通信方案1、通过props传递2、通过$emit触发自定义事件3、使用ref4、EventBus5、provide与inject6、Vuexprops 传递数据适用场景：父组件传递数据给子组件子组件设置props属性，定义接收父组件传递过来的参数父组件在使用子组件标签中通过字面量来传递值Children.vueprops:{ name:{ type:String,.
2021-08-27 16:40:43
327
原创 对Vue生命周期的理解
废话不多说直接上表格分析8个生命周期的描述以及适用场景生命周期描述场景beforeCreate组件实例被创建之前组件实例未被创建,通常用于插件开发中进行舒适化任务created组件实例已经被创建组件初始化完毕,各种数据可以用,常用于异步数据请求beforeMount组件挂载之前dom未创建mounted组件挂载完成初始化结束,dom已创建,可用于获取访问数据和dom元素deforeUpdate组件数据更新前用于获取更新前的状态upd
2021-08-26 17:22:01
133
原创 webgl是什么意思
WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。...
2021-08-21 11:20:05
651
原创 export { default as XXX } from ‘./xxxx‘ 写法说明
例如 : export { default as MiSwitch } from './Switch.vue' 从’./Switch.vue’ 中导入它的默认导出,重命名为 MiSwitch 再重新导出等同于 :import MiSwitch from './Switch.vue'export MiSwitch
2021-08-20 09:03:17
1426
原创 throw 语句
throw 语句定义和用法throw 语句抛出一个错误。当错误发生时， JavaScript 会停止执行并抛出错误信息。描述这种情况的技术术语是：JavaScript 将抛出一个错误。throw 语句创建自定义错误。技术术语是： 抛出异常。异常可以是 JavaScript 字符串、数字、逻辑值或对象：throw “Too big”; // 抛出文本throw 500; // 抛出数字如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并
2021-07-28 13:46:20
262
原创 浅谈Vue中的Setup()函数的使用
参数接收 2 个参数 props ，context1、props 参数说明import { toRefs } from 'vue'export default { props: { title: String }, setup(props) { //props 是响应式的，不能使用 ES6 解构, //如果需要解构 prop，可以通过使用 setup 函数中的 toRefs 来安全地完成此操作 const { title } = toRefs(props) console
2021-07-23 11:05:08
4235
原创 vue3结合ts开发，导入vue文件，页面报红色的波浪线
项目场景：使用vue3框架结合ts开发时，在页面导出xxx.vue文件，就会出现报错，有红色的波浪线。问题描述：原因分析： ts识别不出.vue文件，解决方案：在根目录下面添加一个xxx.d.ts,文件，文件内容为declare module '*vue' { import { Com
2021-07-22 15:08:59
6729
1
原创 “The requested module ‘/@modules/vue.js‘ does not provide an export named“markNonReactive”
项目场景： 最近在学Vue3，刚搭建完项目开发，想使用Vue-router，但是在新建history对象和router对象的时候，页面报错了，“The requested module '/@modules/vue.js' does not provide an export named 'markNonReactive'”问题描述：在vue-router也可以看到到createWebHashHistory，但是在页面导出使用的时候，页面又报错，找不到这个模块![在这里插入图片描
2021-07-22 15:01:03
6896
原创 vue全局页面设置悬浮区域
在开发过程中，可能会遇到需要全局显示的悬浮区域文章目录需求一、开发思路二、使用步骤1.js文件创建文件并挂载2.main.js导入运行3、效果总结需求 在开发过程中，可能会遇到需要全局显示的悬浮区域，比如在进行App开发的时候，在每个页面的顶部都添加一个悬浮的提示，引导用户进行下载，或者是在项目开发时，每个页面都悬浮某个广告，方便用户随时点击。一、开发思路创建一个js文件，在js文件中使用js语法创建一个节点，设置节点所需要的属性，并且将节点设置到document.body中。然后在ma
2021-07-14 17:24:06
3083
原创 uniapp使用手机的自带返回键,返回上一级,以及退出
使用到H5+的api const that = this var webview = plus.webview.currentWebview(); plus.key.addEventListener('backbutton', function() { webview.canBack(function(e) { uni.removeStorageSync('businessId'); if (e.canBack) {
2021-06-06 18:24:42
5829
2
原创 一个对象从另一个对象中取对应的键,赋值
const mergeObject = (newObj,dataObj)=>{ let Keys = Object.keys(newObj) for(let key in dataObj){ if(Keys.indexOf(key)>-1){ newObj[key] = dataObj[key] } }}
2021-06-06 18:12:16
777
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人