- 博客(42)
- 收藏
- 关注
RSS订阅原创 webwork详细攻略，在vue中使用和加载静态文件
JavaScript语言采用的是单线程模型，所有任务只能在一个线程上完成，一次只能做一个事情，前面任务没做完，后面任务只能等着。随着电脑计算能力的增强，尤其是多核 CPU 的出现，单线程带来很大的不便，无法充分发挥计算机的计算能力。Web Work的作用就是为js创造多线程环境，允许主线程创建Worker线程，将一些任务分给后者进行。
2023-04-26 16:28:41
1213
1
原创 threejs 模型 世界坐标系和设备坐标系
开发中遇到需求需要点击屏幕位置处，生成一个类似圆形弹窗面板，这个交互需要进行的坐标转换为模型坐标（局部坐标）=>场景坐标（世界坐标）=>标准设备坐标=>屏幕空间坐标，也就是一个将3D坐标转换为2D坐标的过程，话不多说，上代码！
2023-04-10 09:09:42
1768
原创 vue中通过postMessage传值，通过window.opener双向通信
vue中通过postMessage传值，通过window.opener双向通信
2023-01-07 10:18:57
2140
原创 vue进行多图片上传、压缩、旋转、转blob格式、canvas绘制最后图片预览
vue进行多图片上传、压缩、旋转、转blob格式、canvas绘制最后图片预览
2022-10-26 15:10:19
1844
原创 HTTP中Get、Post、Delete、Put、Patch、Options、Trace、Head的区别
HTTP中Get、Post、Delete、Put、Patch、Options、Trace、Head的区别
2022-07-03 12:46:06
1632
2
原创 通过js去手写vue的双向数据绑定，以及从MVVM =＞双向数据绑定 =＞ 数据驱动 =＞ 响应式原理 =＞ Object.defineProperty整体理解
通过js去手写vue的双向数据绑定，以及从MVVM =>双向数据绑定 => 数据驱动 => 响应式原理 => Object.defineProperty整体理解
2022-06-29 19:44:28
342
原创 前端提高代码质量--设计模式
前提： 发现自己发起项目合并请求时，常常被打回来要求修改，总结原因还是低质量代码太多，明明写代码之前也思考过，只是实现了需求，但是思考的程度太表面，现在打算总结代码的设计模式，为写出高质量代码而加油高质量代码的要求：1、代码语义化：变量名和函数名都有意义，最好代码既注释2、减少重复代码：代码的抽象度高，代码的复用性提高3、模块的功能单一：一个模块专注于一个功能，当我们需要做大功能时，就可以将多个模块组合起来，复用性也就增加4、代码扩展性高：代码耦合性低，扩展度高，局部代码的修改不会引入大规模的改动
2022-01-09 17:13:37
1269
2
原创 vue-cli-service build 自定义参数
vue-cli-service build 自定义参数vue-cli-service build（1）**作用：**是打包资源文件（2）**工具：**通过脚手架依赖的dotenv模块实现参数定义和读取（3）**原理：**detenv作用是将环境变量从.env文件加载到process.env中，代码就可以通过process.env.VUE_APP_XX访问自定义的VUE_APP_XX的值了在vue-cli-service的packjson中切换环境(1) 在运行时如果需要区分生产环境和测试
2022-01-05 15:56:03
8277
1
原创 vue中安装使用cesium，亲测版
前提:最近想写一个自己关于cesium的demo库，发现网上用法很多，加在自己项目中却各种不行，最后选择了最方便的vue-cli-plugin-cesiumvue-cli-plugin-cesium专门为脚手架vue-cli3.0和2.0打造的针对Cesium的VueCli扩展插件，自动化包括：1.自动扩展 VueCLI 中 Cesium 相关的 webpack 配置自动扩展 VueCLI 中 Cesium 相关的 webpack 配置添加一个 cesium 别名，以便我们在项目中轻松的
2021-11-23 16:05:41
4366
10
原创 一看就会的JS封装
一看就会的JS封装最近对js类的封装使用越来越频繁，经常因为不知道该用哪种方式封装头疼，现在对此进行一次总结基本概念封装：把客观事物封装成抽象的类，隐藏属性喝方法，仅对外公开接口属性、方法分类：私有属性和方法：只能在构造函数内访问，不能被外部所访问(构造函数内使用var声明的属性)公有属性和方法：对象外可以访问到对象内的属性和方法(构造函数内使用this，设置构造函数原型对象上比如Person.prototype.xxx)静态属性和方法：定义在构造函数上的方法，比如Person.xxx，不需
2021-11-22 10:27:01
2131
原创 3d开发所需要知道的坐标系
目前学习了mapbox, three.js, webgl, cesium的过程中，发现坐标系是一个非常重要的东西，目前我所了解到的坐标系对其进行一个总结，先粘贴上图片： 方法可取消由 setTimeout() 方法设置的 timeout语法：cl
2021-09-24 16:27:10
214
原创 vue中scss从安装到最后完成一键换肤效果全过程
本来打算用less来实现这个功能，更为轻量简便，但是平时scss使用更多，首先是安装scss一、安装对应依赖node模块： npm install node-sass --save-dev npm install sass-loader --save-dev二、 在vue.config.js中进行配置 module.exports = { chainWebpack: config => { const oneOfsMap = config.module.rule('scss')
2021-09-10 17:42:31
339
2
原创 震惊！！！一眼就能看懂的getBoundingClientRect用法！！！
主要介绍getBoundingClientRect的基本属性，以及具体的使用场景和一些需要注意的问题。getBoundingClientRectElement.getBoundingClientRect()含义：方法返回元素的大小及其相对于视口的位置。值：返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合。属性值：top: 元素上边距离页面上边的距离left: 元素右边距离页面左边的距
2021-08-20 10:03:39
18477
4
原创 震惊！！！一眼就能看懂的setAttribute用法！！！！
setAttribute(String(添加属性名称)，String(添加属性值)) 方法添加指定的属性，并为其赋指定的值，如果指定属性存在，则仅设置/更改值例子1：var a = document.querySelector("button")a.setAttribute("class", "helloButton")例子2：var style = docuement.createElement('style')style.setAttribute('type', 'text/css').
2021-07-21 09:11:48
1930
2
原创 vue中$set用法及其源码的底层原理
在我们开发过程中，经常会遇到，为一个数组或者对象data中添加一个属性，点击按钮后发现，控制台打印明明对象中已经出现了这个属性，视图层却并没有更新该数据，这是因为受到JS的限制，vue.js中不能监听对象属性的添加和删除，因为在vue组件初始化过程中，会调用getter和setter方法，所以该属性只有存在data中时，试图层才会响应数据的变化。解决办法：(1)通过set对象中：this.set对象中：this.set对象中：this.set(obj,key,value) student: { n
2021-07-20 10:20:28
632
原创 遇到github,gitlab无权限访问仓库，需要配置ssh密钥
当我们换新电脑时，去拉github,gitlab的项目时，都会出现没有权限访问该仓库的问题，这个时候我们就需要去配置我们的ssh密钥问题如下所示：[email protected]: Permission denied (publickey). fatal: 无法读取远程仓库。请确认您有正确的访问权限并且仓库存在。解决办法：1.首先检查有没有在GitHub的https://github.com/settings/keys上添加你本机的SSH key。注意换了电脑是要重新添加的，每台都不一样。添加SSH k
2021-07-16 10:02:30
3299
原创 震惊！！！一眼就能看懂的CSS页面布局方式！！！！
代码复制都可以直接使用！有帮助记得点赞互粉加收藏！1.理解盒子模型border-sizing(怪异盒子)：内容宽高+margin外边距左右content-box(标准盒子)：内容宽高+margin外边距左右+padding内边距左右+border边框一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而conten
2021-07-15 09:32:07
157
原创 震惊！！！一眼就能看懂的vue自带的transition组件！！！！
代码可以直接复制到项目中使用，真实有效，有用记得点赞互粉哦 showHello hello <button v-on:click="show1 = !show1"> showWorld</button><transition name="slide-fade"> <span v-if="show1">world</span>
2021-07-14 09:30:50
118
原创 震惊！！！一眼就能看懂的自定义组件directives方法！！！！
震惊！！！一眼就能看懂的自定义组件directives方法！！！！Vue中内置了很多的指令，如v-model、v-show、v-html等，但是有时候这些指令并不能满足我们，或者说我们想为元素附加一些特别的功能，这时候，我们就需要用到vue中一个很强大的功能了—自定义指令。自定义组件时对底层的DOM元素进行操作，所以不能盲目使用（1）了解自定义组件的钩子函数：一个指令定义对象可以提供如下几个钩子函数 (均为可选)：bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
2021-07-13 09:31:52
173
原创 震惊！！！一眼就能看懂的transition与display冲突问题！！！！
transition与display冲突问题问题：在使用dispaly:none(block)对div的显示隐藏应用于过渡属性上时，但是transition完全失效，没有过渡效果原因：display:none的时候，页面文档流中将不会存在该元素，display:block的时候，文档流中才存在该元素，transition属性无法对一个从无到有的元素进行过渡显示解决方法:（1）使用visibility代替display,visibility:hidden的时候元素任然存在于文档流中，同时visibil
2021-07-12 10:59:32
326
原创 震惊！！！一眼就能看懂的element-ui引入和修改样式问题！！！！
安装使用element-ui框架(1)下载指令 npm i element-ui -S(2)在main.js中引入import Vue from ‘vue’;import ElementUI from ‘element-ui’;import ‘element-ui/lib/theme-chalk/index.css’;import App from ‘./App.vue’;Vue.use(ElementUI)更改element ui 的三种方式(1)给组件加上id或者class，然后添加一
2021-07-09 10:15:12
325
原创 震惊！！！一眼就能看懂的arguments用法问题！！！！
arguments 是一个类数组对象。代表传给一个function的参数列表arguments的三种用法(1)可以用来传输实参的真实长度，因为有时实参传递的个数不一定和形参的个数相等 function fn1(a,b,c) { for(var i=0;i<arguments.length;i++) { console.log(arguments[i],'fn1') // 10,20,30,进行遍历 } } fn1(10
2021-07-08 09:12:01
362
原创 震惊！！！一眼就能看懂的this指向问题！！！！
this的显示绑定和隐式绑定显示绑定：当一个函数没有明确的调用对象时，单独作为独立函数调用，将对函数的this使用默认绑定，绑定到全局window对象例子一(函数内嵌套函数)：var a = 1console.log(this.a) // 1，this指向windowfunction god () {var a = 2;console.log(this.a) // 1，this指向windowfunction myGod () {var a = 3;console.log(this...
2021-07-07 11:32:25
71
原创 震惊！！！一眼就能看懂的eventloop事件循环！！！！
要想搞清楚eventloop事件循环，首先要弄清楚宏任务和微任务宏任务：script全部，setTimeout，setInterval，setImmediate，I/O等微任务：Process.nextTick(Node独有)，Promise等eventloop(事件循环)：由三个部分祖成，调用栈(call stack)、消息队列(Message Queue)、微任务队列eventloop运行机制：(1)只有宏任务时：function fn1() {console.log(5)setTime
2021-07-06 09:40:41
60
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人