- 博客(60)
- 收藏
- 关注
RSS订阅原创 Map()、Set()
如果使用对象作为映射的键，这个对象后来被丢弃（所有的引用解除），试图让垃圾回收回收其内存，那么map本身仍然会保持其项目，也就是仍然引用其项目。WeakMap是map的变体，二者的多数外部行为特征是一样的，区别在于内部内存分配（垃圾回收）的工作方式。WeakMap只接受对象作为建，这点与Map不同，Map既可以使用对象，也可以使用简单类型作为键。WeakMap没有clear()、size方法/属性，也不会暴露任何键、值或项目上的迭代器。WeakSet的值必须是对象，而并不像Set一样可以是原生类型值。
2023-03-28 11:02:32
144
原创 centrifuge-js前端基本使用方法
github地址npm install centrifugeimport {centrifueToken} from '@/api/power.js'//获取token的接口var Centrifuge = require ( "centrifuge" ) ;const centrifuge = new Centrifuge("连接地址url",{ onRefresh: function(ctx, cb) { centrifueToken().then(resp=&
2022-03-24 16:40:39
1316
原创 axios请求压缩文件流
axios请求压缩的二进制文件流function getData(parameter){ return axios({ url : 'url', method : 'post', data : parameter, responseType : 'arraybuffer' })}pako.js是一款可以对内容禁行压缩/解压的js，pako最基本的两个方法就是deflate（压缩）和inflate（解压）方法。npm install pakoimport pako from .
2022-03-24 14:49:45
1145
原创 threejs射线拾取对象THREE.Raycaster()
let pickPosition={ x:-100000 , y:-100000 }//初始化射线位置//通过屏幕位置，获取射线位置getPickPosition(event){ let width =window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth let height =window.innerHeight || document.documentElement.c
2022-03-23 17:33:08
1094
原创 threejs性能优化，clone(),Object3D(),remove()
在绘制threejs场景的过程中，可能需要很多相似的几何体，如果每次都创建新的，会影响性能，所以建议使用克隆。//创建网格var scene = new THREE.Scene();createNewMesh(){ var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry var material = new THREE.MeshLambertMaterial({ color: 0x
2022-03-23 16:44:05
1071
原创 threejs中添加GLTF模型
1、引入GLTF加载器import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';2、加载模型getGltfModel(){ const loader = new GLTFLoader(); loader.load( '模型绝对位置.../model/Unity2GLTF.gltf', function ( gltf ) { let root = gltf.scene this.scene.add( root
2022-03-23 15:19:52
3456
原创 threejs基本使用方法
1、基本使用案例import * as THREE from "three";//有些功能需要单独引入，如下：//1、轨道控制器，可以使得相机围绕目标进行轨道运动。import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';//2、第一人称控制器import { FirstPersonControls } from 'three/examples/jsm/controls/FirstPersonContro
2022-03-23 11:41:58
1567
原创 vue3.0构建项目笔记
1、使用 Vite 初始化项目vite是一个开发构建工具，在开发过程中利用浏览器native ES Module特性导入组织代码，生产中利用rollup作为打包工具，特点：光速启动、热模块替换、按需编译。vite官方中文文档兼容性注意：Vite 需要 Node.js 版本 >= 12.0.0。npm init vite@latest //或yarn create vite2、CSS 预编译器 Stylus/Sass/Lessnpm i stylus -Dnpm i sass -Dnp
2021-08-24 15:01:58
188
1
原创 每次都记不清的JS循环（map、forEach、for in、for of）
1、map（）（数组方法）特点：（1）、map不改变原数组但是会返回新数组（2）、可以使用break中断循环，可以使用return返回到外层函数let newarr = arr.map(e=>{ return i+=1})//arr:[1,2,3]//newarr:[2,3,4]2、forEach（）（数组方法）特点：（1）、遍历简洁，不用集合下标，减少出错（2）、无返回值（3）、不能使用break中断循环，不能使用return返回到外层函数let newarr =arr
2021-08-11 14:11:31
256
原创 正则表达式-元字符
原文地址\d就是[0-9]。表示是一位数字。记忆方式：其英文是digit（数字）。\D就是[^0-9]。表示除数字外的任意字符。\b匹配单词的开始或结束\B匹配不是单词开头或结束的位置\w就是[0-9a-zA-Z_]。表示数字、大小写字母和下划线。记忆方式：w是word的简写，也称单词字符。\W是[^0-9a-zA-Z_]。非单词字符。\s是[ \t\v\n\r\f]。表示空白符，包括空格、水平制表符、垂直制表符、换行符、回车符、换页符。记忆方式：s是space character的首字母。
2021-07-29 16:10:23
113
原创 textarea文本框高度根据内容适配高度
<textarea id="textareaDom" name="" cols="20" rows="1" placeholder="请输入"></textarea>let textareaDom = document.getElementId('textareaDom')let textareaHeight //textarea的高度if(textareaDom){ textareaHeight = textareaDom.style.height textareaDo
2021-07-22 14:19:21
219
原创 #转#textarea中光标处插入字段
handleInsert(text){ const textareaDom = document.getElementById('textarea') let textareaVal if(textareaDom.selectionStart || textareaDom.selectionStart===0){ let startFoucs = textareaDom.selectionStart, endFocus = textareaDom.selectionEnd textarea
2021-07-14 15:41:26
95
原创 #转#图片格式转换——base64转文件
dataURLtoFile(dataUrl,filename){ let arr = dataUrl.split(','), minr = arr[0].match(/:.*?;/)[1], bstr = atob(arr[1]), u8arr = new Uint8Array(n); }
2021-07-07 10:09:10
88
原创 图片压缩（canvas）
let compresImage=''//压缩过的图片let canvas = document.createElement('canvas')let ctx = canvas.getContext('2d)let image = new Image()image.src = imageValue//imageValue是获取的图片image.onload = function(){ canvas.width = image.width canvas.height = image.height
2021-07-05 17:29:30
100
原创 nodejs-web服务器（实例）
1.server.jsconst http = require('http');const controller =require('./controller')const hostname = '127.0.0.1';const port = 3000;//端口const server = http.createServer();server.listen(port,hostname,()=>{ console.log(`Server running at http://${
2021-06-10 11:19:30
204
原创 js获取当前页面的url
var url;url = window.location.href; /* 获取完整URL */alert(url); /* http://127.0.0.1:8020/Test/index.html#test?name=test */ url = window.location.pathname; /* 获取文件路径（文件地址） */alert(url); /* /Test/index.html */ url = window.location.protocol; /* 获取协议 */a
2021-04-21 16:50:09
135
原创 Vue构造函数
Vue.extend(options)官网实例：<div id="mount-point"></div>// 创建构造器var Profile = Vue.extend({ template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>', data: function () { return { firstName: 'Walter', lastName:
2021-04-20 16:45:49
1370
原创 上传图片，并将图片File格式转base64
使用input上传，如果觉得这个按钮不好看，可以将它隐藏在其他button下。<input id="inputDom" type="file" accept=".jpg,.png">accept：可以上传的文件格式。 let inputDom =document.getElementById('inputDom') //图片上传时间 inputDom.onchange =function (imgFile){ let fileData =imgFil
2021-04-19 14:27:13
390
原创 AJAX基本使用方法（get，post请求封装）
//1.创建ajax对象if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xhr=new XMLHttpRequest();}else{ // code for IE6, IE5 xhr=new ActiveXObject("Microsoft.XMLHTTP");}//2.配置ajax对象(type-请求类型post或get,url-请求路径)xhr.open(type, url);
2021-02-23 16:16:27
206
原创 h5页面禁止缩放
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, user-scalable=no" name="viewport" />
2021-01-28 15:43:14
247
原创 vue中页面缓存＜keep-alive＞
vue项目页面缓存使用方法：<keep-alive> <router-view v-if="$route.meta.isKeep"></router-view></keep-alive><router-view v-if="!$route.meta.isKeep"></router-view>const router = new VueRouter({ routes:[ { name:'Index
2021-01-20 15:01:00
99
原创 点击复制（document.execCommand(“copy“)）适配ios和安卓
<button id="click">点击复制链接</button><div id="copyDom"></div>//复制链接copyUrl(){ var inputDom =document.createElement('input'); var copyDom = document.getElementById('copyDom') copyDom.appendChild(inputDom);// 把标签添加给body
2020-12-22 16:57:09
3592
原创 动态倒计时（仿vantUI倒计时）
先看下效果图（动态的，懒得做动图，就截个图大概看下）：这个效果其实vantUI上有个相似的，vantUI倒计时。我的项目其实引入了vantUI，但是没用这个组件。主要是因为我发现这个组件需要把时分秒给分开（如下图），反正我是不太喜欢这个样子，所以我原生了一个。<!--html--><div id="cdTimerDom"></div>//vue项目，这是个数字小于0，前面加0的过滤器，因为下面用到了，所以黏贴出来。filters: { addZe
2020-12-15 14:35:42
564
原创 几种GET下载方法＜a＞＜iframe＞
第1种：最简单的get下载方法<a :href="下载地址" target="_blank" download="下载文件名称（file.jpg）">优点：简单缺点：会打开一个新的页面，如果下载过程中出现问题，将会停留在一个空白页面。也不可以动态添加参数第2种：第1种的升级版，可以动态添加参数var a = document.createElement('a');a.href = "下载地址 + 参数"; //地址a.download="file.jpg"; //图片名及格式a
2020-11-30 18:13:46
1478
原创 生成有背景的二维码图片及本地下载（canvas+qrcode）
先看下效果图：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./qrcodejs-
2020-11-23 15:34:09
1480
1
原创 二维码生成插件使用（qrcode.js）
插件gitHub地址qrcodejs地址1、插件引入<script src="./qrcodejs-master/qrcode.js"></script>2、使用<div id="qrcode"></div><script type="text/javascript">var qrcode = document.getElementById("qrcode");var qrcode = new QRCode(qrcode , {
2020-11-20 10:29:48
1228
3
原创 笔记：网页添加水印（watermark-dom）
1、下载包npm install watermark-domgitHub地址2、引入import watermark from 'watermark-dom'3、配置调用 watermark.init({ watermark_id: 'wm_div_id', //水印总体的id watermark_prefix: 'mask_div_id', //小水印的id前缀 watermark_txt:"测试水印",
2020-11-18 18:23:06
1650
原创 笔记：electron+vue开发跨平台应用（使用electron-builder）
1、项目搭建使用的vue-cli搭建项目，搭建方法查看官方文档vue-cli文档2、安装插件方法一：(可视化安装)vue ui打开“vue项目管理器”安装插件vue-cli-plugin-electron-builderelectron-builder插件文档地址electron-builder文档点击安装完成，保存文件改动，然后根据提示安装electron，下载过程比较慢。方法二：安装插件：vue add electron-builder全局安装electron：npm insta
2020-11-13 11:12:34
790
1
原创 笔记：git命令（创建分支，分支代码提交，合并）
1、创建分支1.查看分支$ git branch //查看当前分支$ git branch -a // 查看所有分支$ git branch -r //查看远程分支2.创建分支$ git checkout -b test-branch3.切换分支$ git checkout test-branch4.推送本地分支到远程分支$ git push origin test-branch:test-branch5.本地分支与远程分支建立关联$ git branch --set-ups
2020-11-10 16:44:54
269
原创 笔记：vantUI进阶用法浏览器适配
1、插件安装npm安装：npm install postcss-pxtorem --save-devnpm install lib-flexible --saveyarn安装：yarn add postcss-pxtorem --save-devyarn add lib-flexible --save2、配置vue.config.jsconst autoprefixer = require("autoprefixer");const pxtorem = require("postcs.
2020-11-10 14:12:03
537
原创 笔记：文本两端对齐
<div>产品<i></i></div>div{ width:200px; text-align: justify;}i{ display:inline-block; /*padding-left: 100%;*/ width:100%;}注：padding-left: 100%; 和 width:100%; 二选一
2020-11-06 17:44:24
71
原创 笔记：页面中滚动条样式设置
1、清除页面中的滚动条 html { /*隐藏滚动条，当IE下溢出，仍然可以滚动*/ -ms-overflow-style:none; /*火狐下隐藏滚动条*/ overflow:-moz-scrollbars-none; } /*谷歌适用*/ ::-webkit-scrollbar{ display:none; }2、修改页面滚动条样式 ::-webkit-scrollbar {
2020-10-23 11:07:55
228
原创 #转载# axios post 三种请求方式的写法
原文地址笔记：1、请求头：Content-Type: application/jsonimport axios from 'axios'let data = {"code":"1234","name":"yyyy"};axios.post(`${this.$url}/test/testRequest`,data).then(res=>{ console.log('res=>',res); })2、请求头：Content-Type: multipa
2020-08-27 11:28:54
296
原创 重写路由的push方法
const routerPush = VueRouter.prototype.push; VueRouter.prototype.push = function push(location) { return routerPush.call(this, location).catch(error => error); }; const originalPush = VueRouter.prototype.push VueRouter.prototype.push = functio.
2020-08-27 10:31:03
573
原创 long型时间数据转换成YYYY-MM-DD HH：MM：SS格式(js)
/** * long型时间处理 * @param longTypeDate long型时间 * @returns String时间 */longTimeToString (longTypeDate){ if(longTypeDate ==null ||longTypeDate ==''){ return null } var datetimeType = ""; var date = new Date(); date.setTime(longTypeDate); d
2020-07-02 18:17:08
1429
原创 字体图标的使用方法
第一步，将字体图标如下文件放入如下文件夹中：第二步，main.js全局引入第三步，使用1、unicode的使用方法2、font class使用方法添加新的图标在原文件中的方法第一步，把有新图标的css文件中的如下代码复制到原css文件中注：使用以上方法会出现ie不兼容的问题，新增的这个图标在ie浏览器中无法显示，不知道为什么。我当时的解决方法是把新的图标文件重新新建了文件夹全局引入。...
2020-07-02 18:05:18
238
原创 vue中的消息滚动栏
<div class="news"> <img class="homeWarning" src="../assets/images/home_warning.png" alt="" /> <span class="txt"...
2020-04-02 11:17:55
454
原创 微信小程序-自定义组件
在小程序自定义组件中，在/components目录下新建自定义组件。.wxml .wxss 和其他正常页面相同。.js文件如下:Component({//父传子：接收父组件传过来的数据 properties: { data: { type:Array } },//子组件私有使用的数据 data: { tabIndex:'0', }...
2020-01-06 18:05:44
122
原创 微信小程序-关于获取当前位置用户授权
wx.getLocation(Object object)获取当前的地理位置、速度。当用户离开小程序后，此接口无法调用。开启高精度定位，接口耗时会增加，可指定 highAccuracyExpireTime 作为超时时间。wx.getLocation({ type: 'wgs84',//wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标 succe...
2020-01-06 11:10:44
3210
1
原创 PC端自适应-rem
rem：是指相对于根元素字体大小的单位，一个相对单位。rem可以做到随着根元素的字体大小随之变化，达到自适应屏幕的效果。使用步骤如下：1、在html的head中加上meta标签<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"...
2019-11-28 14:11:18
1877
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人