
原生js
Beamon__
学不完的新技术,做不完的新需求
展开
-
浏览器页面切换-兼容IE
// url为新页面地址window.location.href=url;if (/MSIE (\d+\.\d+);/.test(navigator.userAgent) || ~navigator.userAgent.indexOf('Trident/')) { window.location.reload()}原创 2020-11-30 14:43:19 · 225 阅读 · 0 评论 -
创建指定长度指定内容的数组
核心思想:Array.from()传入两个参数:第一个参数为对象,仅一个属性length,指定了第二个参数运行的次数;第二个参数为回调函数,回调函数有两个参数,分别是数组元素、下标,实现对数组元素值的设置,元素值默认undefined;案例如下:Array.from({length: 5},(item,index)=>item = 'test' + index)// ...原创 2019-11-03 17:37:32 · 3139 阅读 · 0 评论 -
js打印页面-实现局部打印
最近项目需要实现将局部页面输出pdf文件,做了以下案例html:<template> <div id="test-page"> <!-- 额外元素 --> <div class="myInput"> <el-input v-model="text"></el-...原创 2019-10-17 14:11:36 · 506 阅读 · 0 评论 -
vue禁止粘贴/控制粘贴
最近项目遇到了一个关于控制用户粘贴的功能,简单研究了下,提出以下方案:使用Jquery获取的DOM对象绑定paste方法具体如下:1.安装jquerynpm i jquery -S修改项目中build/webpack.base.config.js// 顶部引入webpackconst webpack = require('webpack');...modul...原创 2019-10-14 20:34:54 · 2549 阅读 · 0 评论 -
base64转为file对象
/** * @method 将base64转换为file对象 * @param {String} dataURL base64地址 * @param {String} fileName 文件名称 * @param {String} fileType 图片类型 默认image/jpg * @return {Object} file对象*/dataURLtoFile(dataU...原创 2019-10-06 14:55:22 · 1804 阅读 · 0 评论 -
break 优化循环
关键字:break通常用途: 1. 配合swith case 语句使用; 2. 结束循环;场景描述:开发过程中我们经常使用循环来进行一些数据匹配业务的实现,但我们会经常在匹配数据后依然循环数据源,这就产生了很多不必要的循环,无形中增加了性能问题,这个时候我们就可以使用break来解决;案例预期效果:变量i等于5时结束循环js代码:<s...原创 2019-04-22 00:10:47 · 414 阅读 · 0 评论 -
restful风格数据交互 前端封装
restful是目前最流行的 API 设计规范,用于 Web 数据接口的设计,核心思想就是,客户端发出的数据操作指令都是"动词 + 宾语"的结构。交互方式主要有以下几种:get请求:用于查询后台数据库数据;post请求:用于向后台数据库新增数据;put请求:用于修改后台数据库数据;delete请求:用于删除后台数据库数据;项目基于统一管理原则制定了以下请求封装供参考:...原创 2018-11-16 00:54:49 · 3832 阅读 · 2 评论 -
使用聚合数据制作天气信息组件
最近个人做了一个移动端的小demo,看到手机屏幕上的天气提示组件,就想自己做一个,目前是一个可以用的简易版本,后期优化再更新,现在先分享出来仅供参考!ps:数据使用了聚合数据网提供的全国天气预报接口(http://v.juhe.cn/weather/index),主要使用技术为Jquery;html代码如下:<div id='nav'> <div cla...原创 2018-08-22 23:07:08 · 1409 阅读 · 0 评论 -
对象、数组传递赋值之引用传递
开发过程中经常会遇到如下情况,将一个对象赋值给另一个对象,修改后者,前者也随之改变,场景代码如下:控制台输出入下图:造成以上现象的原因,个人总结如下:对象,数组都是引用类型数据,在上述赋值操作过程中,仅仅是将存储在栈中的路径进行的赋值,而未对堆中的数据进行赋值,所以两者依然依赖相同的堆中存储的数据,改变后者,实际上是通过栈中存储的路径改变了堆中的数据,顾两者依赖的数据(栈所指向的堆...原创 2018-08-08 23:56:14 · 1759 阅读 · 0 评论 -
获取/设置浏览器scrollTop,兼容低版本ie及各主流浏览器
考虑到兼容各个浏览器,以及兼容低版本ie,经过自己测试,提出以下方法封装,仅供参考:<script> /** * @method getScrollTop 获取scrollTop */ function getScrollTop() { var scrollTop = document.documentElement.scrollT...转载 2018-08-13 11:37:42 · 2754 阅读 · 0 评论 -
浅谈bind、call、apply区别,使用方法及场景
谈到bind、call、apply,首先想到的是改变this全局上下文指向,但三者的区别,就自己的使用浅谈心得。首先,直接调用三个方法并打印,获取直观对比,demo代码如下:<script> var objA = { name: '小王', } var objB = { log: function () { ...原创 2018-08-12 23:33:00 · 2055 阅读 · 0 评论 -
数组使用forEach与map 个人浅谈区别
经过测试主要两者主要区别在于数组使用forEach方法后返回undefined,而使用map方法后返回一个新的数组;具体操作如下:首先定义一个数组,分别调用forEach方法与map方法:<script> var arr = [1,2,3,4,5,6]; console.log(arr.forEach((item)=>{})) console.l...原创 2018-08-07 00:44:25 · 390 阅读 · 0 评论