
前端 javascript
文章平均质量分 51
前端-阿辉
自己不努力,没人能给你你想要的生活!!!
展开
-
基于Handsontable.js + Excel.js实现表格预览和导出功能(公式渲染)
二、编写页面布局三、编写预览核心代码如下图所示:通过以上代码,我们成功将Excel文件中的数据、样式、合并单元格等信息加载到了Handsontable中,并渲染到了页面上。所以我们需要对公式进行处理,将公式替换为对应的值。请看以下处理公式的方法。由图可以看到带有公式的单元格是一个对象,这就是带有公式的单元格渲染后是"[object Object]"的原因。解决方法就是将带有公式的单元格替换为对应的值,请看以下代码:通过处理后,带有公示的单元格不在渲染为"[object Object]“,但是会渲原创 2024-10-11 17:50:32 · 1551 阅读 · 0 评论 -
关于javascript数字精度丢失的解决办法
分析原因例如下面的例子:我们在计算 0.1 + 0.1 的到的结果是 0.2,但是计算 0.1 + 0.2 的结果并不是0.3,而是我们在计算 1.2 - 1 的结果并不是0.2,而是不过这并不是JavaScript独有的,其他编程语言也会存在同样的问题。既然这样,那能不能防止精度不准确呢???解决办法:我们可以使用凑整后再使用,比如计算接下来我们封装成方法使用......原创 2022-06-13 16:14:07 · 1191 阅读 · 0 评论 -
关于前台封装实现zip文件流的下载功能并如何使用
前台封装 zip 文件流的下载并如何使用在前端开发过程中有关于文件下载的基本是后台返回文件地址指向的 url ,前端通过 window.open 进行下载,但是对于后台返回 zip 文件流如何进行下载呢?接下来 来看看如何实现。1. 后台返回 zip文件流2. 前台使用axios请求后台接口获取zip文件流请求前的准备axios的 responseType 设置为blob将返回的zip文件流转换为blob对象解析,并指定type为:“application/zip;charset-UTF原创 2022-05-14 14:39:20 · 2988 阅读 · 0 评论 -
微信小程序请求接口的封装和怎么调用
1. 在app.js文件中封装请求的接口看下方代码://app.jsApp({ // 公共的接口路径, 这里仅为说明不是真正的接口路径 severpath: "http://88.110.112.119:8080", //请求后台接口数据 request: function (url, data, success, fail, optionnew) { var option = { // 拼接成完整的接口地址 url: this.severpath + url, // 请原创 2020-07-28 19:07:55 · 5862 阅读 · 6 评论 -
关于使用threeJs开发3d应用的相关爬坑记录
问题一:关于使用轨道控制器:THREE.OrbitControls 出现的问题。问题描述:当场景使用轨道控制器后,致使页面中的输入框或单选或复选按钮全部失效的问题分析问题原因:该问题是由于轨道控制器的工作原理造成的,当模型不是全屏状态(body中)渲染,而是在局部渲染时会出现该问题。解决办法是:// 第二个参数默认为body 如果您的场景是局部渲染的,请确保使用它(即场景渲染的容器)controls = new THREE.OrbitControls(that.camera, that.re原创 2022-03-30 08:38:26 · 1300 阅读 · 3 评论 -
简述vue项目中指定某个DOM进入全屏模式与退出全屏
vue项目中指定某个DOM进入全屏模式与退出全屏首先安装全屏插件npm install screenfull@4.2.1 --save在使用的页面中引入import screenfull from ‘screenfull’我们指定某个DOM元素的id,然后获取这个DOM节点methods: { // 定义全屏方法,通过按钮点击触发 fullscreenHandle () { const element = document.getElementById('ta原创 2022-01-19 13:35:17 · 1325 阅读 · 2 评论 -
简述前端如何导出PDF的功能实现
前端导出PDF首先,你需要安装相关插件或依赖npm install html2canvasnpm install jspdf在项目的 src/utils 目录下新建tools.js文件,写入以下内容import html2canvas from 'html2canvas';import JsPDF from 'jspdf';export default { /** * @param ele 要生成 pdf 的DOM元素(容器) * @param padfName原创 2022-01-14 16:09:48 · 1133 阅读 · 5 评论 -
ThreeJs DRACO压缩并加载gltf模型的爬坑记录
采用DRACO压缩并加载gltf模型的用法,以VUE开发为例首先,在官方文件中找到对模型进行压缩 所需要的文件 位置大概在项目的examples/js/libs/draco/gltf下,我们可以放在项目的public目录下,如下图所示:下面来安装gltf-pipeline;该插件的作用是把现有的gltf格式模型进行压缩,跟图片压缩一样。缩小体积,更快的加载。npm i -g gltf-pipeline用法:在命令行或终端中输入以下命令,格式为:gltf-pipeline -i 原始文件原创 2021-10-27 14:45:55 · 7070 阅读 · 21 评论 -
关于在vue项目中封装快捷工具的方法
话不多说,简单粗暴,直接上代码 !!!首先根据项目开发规范在项目中新建tool.js文件,比如:我放在了项目中的src/utils/文件夹下export default { getDateSpan: function (action) { var star_time, end_time; if (action == "today") { star_time = this.getDateBefore(0) + " 00:00:00" end_time = t.原创 2021-09-11 15:22:23 · 357 阅读 · 0 评论 -
关于在vue项目中引入ThreeJs相关API和模型的几种方式
1. 引入Threejs我们可以在public下的index.html文件中引入:2. 相关依赖文件可以在main.js文件中引入3. 模型可以放在public文件夹下新建static文件夹放入其中function loadGlt(obj) { //为模型添加添加天空盒子环境贴图反光材质 var path = 'static/surround/' var urls = [ path + 'you.jpg',原创 2021-09-06 17:22:51 · 2518 阅读 · 0 评论 -
关于threejs灯光的使用
现实环境中,人们之所以能看得到物体,是因为有光,物体的材质反射光到人眼中。在ThreeJS中有几种光源,去模拟现实环境。最常见的四种分别为:环境光( AmbientLight ):笼罩在整个空间无处不在的光点光源( PointLight ):向四面八方发射的单点光源聚光灯( SpotLight ):发射出锥形状的光, 模拟手电筒,台灯等光源平行光( DirectinalLight ):平行的一束光,模拟从很远处照射的太阳光其他还有半球光光源( HemisphereLight ),平面光光源(.原创 2021-08-19 12:31:07 · 6089 阅读 · 0 评论 -
关于threejs天空盒子的使用
创建场景添加天空盒子相关代码如下:var scene = new THREE.Scene() //创建场景 var path = 'static/surround/' //注意加载的图片是有顺序的,分别是:右 => 左 => 上 => 下 => 前 => 后 六张宽高、格式相同的图片 //我们可以想象一下一个正方体盒子,而我们的模型就位于正方体盒子内部一样。 var urls = [ path + '4.jpg', path +原创 2021-08-19 11:51:30 · 1474 阅读 · 0 评论 -
关于three.js渲染器THREE.WebGLRenderer()参数的介绍和使用
首先来看下THREE.WebGLRenderer可以设置的参数如下:var renderer = new THREE.WebGLRenderer({ //创建渲染器对象 // canvas: document.getElementById('can3d'), //渲染器绘制其输出的画布, alpha: false, // 画布是否包含alpha(透明度)缓冲区。默认值为false。 premultipliedAlpha: true, //渲染器是否会假设颜色具有 预乘alpha。默原创 2021-08-18 19:56:18 · 10430 阅读 · 1 评论 -
浅谈Javacript浅拷贝和深拷贝的实现
浅拷贝和深拷贝如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝;如果B没变,那就是深拷贝,深拷贝与浅拷贝的概念只存在于引用数据类型。1. 浅拷贝var obj1 = { name: "帅哥", age: 20, speak: function () { console.log("我是" + this.name); }};var obj2 = obj1;// 当修改obj原创 2021-07-30 15:49:18 · 435 阅读 · 0 评论 -
写一个递归函数将多维数组降维
利用递归将多维数组降维function dimension(arr) { var newArr = []; for (var i = 0; i < arr.length; i++) { if (Array.isArray(arr[i])) { // 如果是数组,调用递归函数 dimension 将其扁平化,然后再 push 到 newArr 中 newArr.push.apply(newArr, dimension(arr[i])); } else {原创 2020-10-29 20:18:17 · 621 阅读 · 0 评论 -
总结几个常用的数组去重的方法
方法一: es6的set()方法var arr = ["1", "2", "3", "3", "2"];function unique(arr) { return Array.from(new Set(arr));}console.log(unique(arr))方法二: js的indexOf()方法function unique(arr) { if (!Array.isArray(arr)) { alert("type error"); return false;原创 2020-10-29 20:06:21 · 282 阅读 · 0 评论 -
写一个可以用来判断数据类型的函数
function judgeType(obj) { if (obj === null) { console.log(String(obj)); } else if (typeof obj === "object") { var type = Object.prototype.toString .call(obj) .replace("[object ", "") .原创 2020-10-15 16:50:15 · 1035 阅读 · 0 评论 -
封装一个请求函数,实现可以设置最大请求次数,请求成功则不再请求,请求失败则继续请求直到超过最大次数
function request(url, body, successCallback, errorCallback, maxCount = 3) { return fetch(url, body) .then(response => successCallback(response)) .catch(err => { if (maxCount <= 0) return error原创 2020-10-15 16:28:30 · 789 阅读 · 0 评论 -
去除数组对象中重复的值
问题背景:当我们请求接口拿到数据渲染到也面上时,我们不想将重复的数据也渲染到页面上,这时我们就需要将返回的数据做一些简单的处理。如下是返回的数据,并非真实数据,仅作说明问题使用: var data = [ { name: "小三", age: 20 }, { name: "小王", age: 10 }, { name: "小王", age: 10 }, { name: "小张", age: 15 }, { name: "小张", ag原创 2020-10-15 16:11:21 · 1577 阅读 · 2 评论 -
js怎么将json数据的键名替换为我们想要的键名
描述:有时候我们请求接口得到的数据并不是我们想要的格式,单又不想麻烦后端开发人员更改,让其误以为我们很菜时,这时候就需要我们前端进行转换一下,得到我们像要的数据格式,以彰显我很的技术水平了。来看个例子,如下所示数据:data: [ { achieveSum: null checkState: 1 companyId: null companyName: null directory: null directoryName: "第一章 哇哈哈" }, directory原创 2020-09-27 23:33:19 · 2189 阅读 · 1 评论 -
JavaScript Math.round()的用法以及怎么保留指定小数
JavaScript 数学表达式:Math.round()语法:Math.round(xx) // 参数 ‘xx’ 代表一个数值 返回值:把给定的值四舍五入为最接近的整数示例:var xx= 20.5;console.log(Math.round(xx, xx)) // 21var xx= 20.49;console.log(Math.round(xx)) // 20var xx= -20.5;var xx= -20.55;console.log(Math.round原创 2020-08-19 22:21:51 · 29723 阅读 · 2 评论 -
总结JavaScript中this指向的问题
一、什么是this、this又指向谁?1.1 什么是this定义:this是包含它的函数作为方法被调用时所属的对象。这句话听起来有点绕嘴,但一个多余的字也没有,定义非常准确,我们可以分3部分来理解它!1、包含它的函数。2、作为方法被调用时。3、所属的对象1.2 this指向谁谁最终调用函数,this就指向谁。二、this指向特点1、this指向的只可能是对象。2、this指向谁,不取决于this写在哪儿,而取决于函数在哪儿调用。3、this指向的对象,称之为函数的上下文(函数的调用者)原创 2020-06-10 15:00:29 · 142 阅读 · 0 评论 -
Javascript异步编程
JavaScript是天生异步的,其可以先执行程序的主要逻辑,将耗时的操作推迟执行,相对同步来说,这样可以优化体验和提高性能。1. 回调函数回调函数我们接触过很多了,它非常简单、容易理解和部署,但确定也十分明显:不利于代码的阅读和维护,各个部分之间高度耦合,流程混乱。function xxx(param){ console.log('我是高阶函数'); // 上面的代码执行完,去调用另一个函数 param();}function yyy() { console.lo原创 2020-05-23 11:12:20 · 152 阅读 · 0 评论 -
对JavaScript 标签语句的简单理解
JavaScript 标签语句在学习一个新东西的时候,常常难于理解一个新的概念 ,大概是因为它的名字迷惑了我们。初次看到这个标签语句时就让我非常的不解,想着这JavaScript怎么又和HTML的标签搞到一块去了,于是就让我煞费苦心的搜啊,终于皇天不负有心人,接下来就让我们看看这个JavaScript 标签语句到底是个什么NB的东西。首先来看看标签语句的概念是什么:简单来说,JavaScri...原创 2020-03-03 16:25:11 · 329 阅读 · 1 评论 -
对Javascript中的一些基本概念和一些难点的理解
1. 字面量在计算机科学中,字面量(literal)是用于表达源代码中一个固定值的表示法(notation)。通俗来讲,字面量就是指这个量本身,比如字面量3。也就是指3. 再比如 string类型的字面量"ABC", 这个"ABC" 通过字来描述。 所以就是字面量,可以简单理解成一眼就能知道的量。对比下 string x; 那么x 是多少呢? 它是个变量,你不确定它的值。 但是string x...原创 2020-02-13 17:58:02 · 330 阅读 · 0 评论 -
JavaScript数据类型和内存(内存泄漏、内存垃圾回收)
变量和内存管理为了合理的管理内存,操作系统一般会把内存划分区域来使用,如代码区、数据区等。被编译成机器的码的程序在执行时会被复制到内存的代码区,程序中的变量和常量会被存放到数据区中。数据区,一般又分成:堆区、栈区、全局区……。各大语言的编译器的内存模型一般会有一定的差别,不过基本都有堆和栈之分。对于JavaScript来说,为了更好的理解,也需要去讨论讨论堆和栈。栈区一般由系统自动分配存储空...原创 2020-02-13 15:39:18 · 236 阅读 · 0 评论 -
深刻理解什么是回调函数和高阶函数
在JavaScript中,函数是一等公民,它们是一种特殊类型的对象,也就是Function对象。更确切地说,函数是用Function()构造函数创建的Function对象,既然函数就是对象,那么函数就可以作为另外一些函数的实参进行传递。1. 回调函数回调函数就是一个通过函数指针调用的函数。如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调...原创 2020-02-13 15:05:05 · 1710 阅读 · 0 评论 -
彻底搞懂什么是深拷贝和浅拷贝
深拷贝和浅拷贝,主要是对象发生复制的时候,根据复制的层级不同来区分的。很多人在这里经常变量赋值发生混淆。我们前面知道了,对于JavaScript数组等复杂的数据类型来说,将其赋值给其它变量,其实只是复制了对象的地址给它,两个变量指向的是同一个对象,因此普通的赋值既不是深拷贝也不是浅拷贝。浅拷贝所谓浅拷贝就是指对象复制的时候只复制一层。var xiaoHong = { name: '小...原创 2020-02-13 15:00:53 · 985 阅读 · 0 评论 -
对ES6中面向对象的深刻理解
在JavaScript中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等。对象是由属性和方法组成的。属性:事物的特征,在对象中用属性来表示(常用名词)方法:事物的行为,在对象中用方法来表示(常用动词)0. 创建对象的三种方式0.1 使用对象字面量创建对象:就是花括号 { } 里面包含了表达这个具体事物(对象)的属性和方法;{ } 里面采取键...原创 2020-01-13 17:55:58 · 306 阅读 · 0 评论 -
node.js核心http模块的使用
http模块是Nodejs的核心模块,无需安装就可以直接使用。中文文档地址为:http://nodejs.cn/api/http.html基本使用首先在项目目录创建一个新文件server.js,在里面编写如下内容:// 引入核心模块const http = require('http');// 创建服务器const sev = http.createServer();// 为服务器...原创 2019-12-19 20:49:51 · 261 阅读 · 0 评论 -
ES6模块化
1.产生背景:在程序的开发中,模块化开发一直是一种比较好的方案,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块就行了,常见的流行语言基本都已经支持或者变相支持,比如Python的import、 CSS 都有@import。但是,一直以来Javascript没有模块化支持,面对复杂的项目,会变得十分被动,其实在ES6以前,它连”类”(class)都不支持,更别提什么”模块”(mo...原创 2019-12-14 22:07:40 · 141 阅读 · 0 评论 -
关于ES6的class类继承的总结
什么是类:简单来讲,构造函数就是我们的类1.关于类的继承:子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。举个简单明了的例子如下:/** * 定义一个父类 */class Human { //这是父类构造方法 ...原创 2019-12-14 21:26:30 · 166 阅读 · 0 评论