js
关注
分享
扫一扫
文章平均质量分 87
wh_xmy
毕业于城建学院计算机系，前端，曾任职过联想、探路者等公司
展开
-
防抖和节流简介
背景：近期经常被问到防抖和节流，之前项目中也有遇到并且解决过，猛地一问这么专业的术语如果之前没有听过还真容易发蒙，因此简单整理一下，希望对需要的小伙伴们有所帮助。可能需要做防抖和节流的场景简单整理如下：1.判断回到顶部按钮的显示时机，一般需求是当页面滑动距离顶部一定距离之后才需要显示，此时我们一般只需要监听浏览器滚动事件，返回当前滚动条与顶部的距离。代码如下：function showTop () { var scrollTop = document.body.scrollTop |原创 2020-07-01 15:21:39 · 1593 阅读 · 2 评论 -
js深拷贝
背景：深拷贝和浅拷贝的理解对处理一些数据很有帮助，为了更好地区分它们的区别，对于深拷贝的方法整理如下：关于深拷贝和浅拷贝的更多细节，请参考js深拷贝和浅拷贝小结一、赋值、浅拷贝与深拷贝的区别二、深拷贝的方法1.JSON转换var targetObj = JSON.parse(JSON.stringify(copyObj))let arr4 = JSON.parse(JSON.stringify(arr))缺点：（1）如果对象里有函数,函数无法被拷贝下来（2）无法拷贝c原创 2020-06-23 15:11:19 · 508 阅读 · 0 评论 -
JavaScript 执行机制（宏任务和微任务）
本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，可以揍我。不论你是javascript新手还是老鸟，不论是面试求职，还是日常开发工作，我们经常会遇到这样的情况：给定的几行代码，我们需要知道其输出内容和顺序。因为javascript是一门单线程语言，所以我们可以得出结论：javascript是按照语句出现的顺序执行的看到这里读者要打人了：我难道不知道js是...转载 2020-03-19 14:21:13 · 894 阅读 · 0 评论 -
监听屏幕滚动开始和结束事件(scroll start 和scroll stop)
背景：最近在写一个专题页，产品要求右边导航栏在滑动的时候收起，滑动停止时显示，这样就需要监听到屏幕滚动（scroll start）事件和滚动结束(scroll end)事件，但是又不能为了这个功能专门引入jQuery mobile这个库，所以找到以下方法进行实现，基于jQuery 封装的插件。解决方案：（jQuery1.9版本及以后）插件代码如下/** * 函数：scrollstart...原创 2019-07-16 09:01:42 · 5271 阅读 · 2 评论 -
在安卓上解决input调起软键盘之后容器高度被挤压的问题
问题描述：一个简单的带有背景图片的登录页面，结果调起软键盘之后在安卓手机上出现了背景图片无法充满整个页面的问题，即使容器高度设置100%也不好使，后来只能使用监测window的size变化，从而重新给背景图容器赋值的方法，代码如下：//安卓弹出框图片压缩解决方案 var clientHeight = $(document.body).height(); $(window).resiz...原创 2019-01-14 11:43:15 · 1799 阅读 · 0 评论 -
H5微信开发iOS真机上input调起软键盘后不回弹的解决方案
问题描述：input输入在iOS的微信中调起软键盘之后，输入完成收起软键盘的时候页面下方（原来软键盘的位置）有空白，这将导致下方fixed定位按钮失效等问题，解决方案：通过给input添加失去焦点事件，触发该事件的时候使页面自动滑动到顶部，亲测有效，代码如下：$("input").blur(function(){ setTimeout(function() { ...原创 2019-01-14 11:08:20 · 5130 阅读 · 0 评论 -
微信小程序开发记录（四）地址栏传参之true和false的坑
先看看小程序地址栏传参的方法，如下wxml: <view class="weui-cells weui-cells_after-title" wx:if="{{isNewUser}}"> <navigator url="../address/address?isNewUser=true" class="weui-cell weui-cell_access n...原创 2018-10-31 15:27:51 · 4876 阅读 · 3 评论 -
什么是MVVM，MVVM和MVC的区别？
1. Mvvm定义MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现...转载 2018-08-30 15:59:14 · 17157 阅读 · 7 评论 -
ajax工作原理及优缺点
虽然在实际的项目中使用多种ajax请求，但就其工作原理，优缺点尚未深入总结，参考：http://www.cnblogs.com/SanMaoSpace/archive/2013/06/15/3137180.html现就此做下以下简要笔记：Ajax工作原理：相当于在客户端与服务端之间加了一个抽象层(Ajax引擎)，使用户请求和服务器响应异步化，并不是所有的请求都提交给服务器，像一些数据...原创 2018-08-28 14:04:32 · 838 阅读 · 0 评论 -
深拷贝与浅拷贝的区别，实现深拷贝的几种方法
如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。此篇文章中也会简单阐述到栈堆，基本数据类型与引用数据类型，因为这些概念能更好的让你理解深拷贝与浅拷贝。我们来举个浅拷贝例子：let a=[0,1,2,3,4], b=a;console.log(a===b);...转载 2018-08-27 12:01:58 · 519 阅读 · 0 评论 -
通过canvas实现将html的某些元素转为png图片
有时候我们需要把html或者某些html元素转换为图片，并且支持下载，下面是学习之后的总结，希望能给大家带来帮助。所需插件库：html2canvas.js、canvas2image.js、base64.js 资源地址：链接: https://pan.baidu.com/s/12hpynzrXtgBZXvYkMqpoFg 密码: bvvu思路如下：html2image思路 需要获取的...原创 2018-08-02 16:49:10 · 1774 阅读 · 0 评论 -
从一个数组中随机取出若干个数
随机取数下面给出从一个数组随机取出若干数字组成新书组和从一个数组随机取出一个数字的方法，代码如下：/*** 从一个数组中随机取出若干个元素组成数组* @param {Array} arr 原数组* @param {Number} count 需要随机取得个数**/const getRandomArray = (arr, count) => { var shuffled...原创 2018-08-06 17:13:27 · 5795 阅读 · 0 评论 -
日期格式化方法
时间格式化有时候我们会用到时间的展示，时间的展示种类也是各种各样，对于不用的产品需要不同的样式，这时候就需要我们做一下时间的格式化处理，下面是一种常见的日期显示方式，代码如下：/*** 格式化时间 * @param {String} date 原始时间格式* 格式后的时间：yyyy/mm/dd hh:mm:ss**/const formatTime = (date) =>...原创 2018-08-06 16:57:55 · 2965 阅读 · 0 评论 -
原生JS实现ajax详解
原生js写ajax可以类比打电话打电话分下面4步：1.拿出手机2.拨号3.说话4.听对方说话ajax也分下面4步：1.创建ajax对象2.连接到服务器3.发送请求（告诉服务器我要什么文件）4.接收返回值下面是原生js写ajax的具体写法 ：<script>window.onload=function(){ var oBtn = docume...转载 2018-07-27 15:04:36 · 3327 阅读 · 0 评论 -
JS加减乘除位移方法封装
常用加减乘除等方法汇总直接上代码，逻辑简单，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Math Methods</title></head>&原创 2018-07-11 17:37:16 · 651 阅读 · 0 评论 -
js获取设备信息的方法汇总
1.获取访问者IP及所在地<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <转载 2018-07-04 10:51:05 · 25086 阅读 · 1 评论 -
js对象方法Object.assign( )详解
1 基本用法Object.assign方法用于对象的合并，将源对象（ source ）的所有可枚举属性，复制到目标对象（ target ）。var target = { a: 1 };var source1 = { b: 2 };var source2 = { c: 3 };Object.assign(target, source1, source2);target // {a:1, b:2, ...转载 2018-06-29 10:52:34 · 1996 阅读 · 0 评论