javascript
关注
分享
扫一扫
凉音、
小笨鸟
展开
-
js监听元素尺寸变化
上代码：/** * @description 监听元素尺寸变化 * @author: hruomei * @update * @date: 2021-07-22 11:29:40 */export default class ResizeObserver { constructor() {} static handleResize(e) { const trigger = e.target.__resizeTrigger__; if .原创 2021-07-22 13:04:49 · 2862 阅读 · 3 评论 -
js 判断元素是否在指定元素的可视区内
函数export const isInContainer = (el, container) => { if (!el || !container) return false; const elRect = el.getBoundingClientRect(); let containerRect; if ([window, document, document.documentElement, null, undefined].includes(conta.原创 2021-02-02 11:51:20 · 635 阅读 · 0 评论 -
ES6 Promise 编写一个等待函数
// 等待timeSpan毫秒后执行resolve方法，且不会阻塞js执行线程export async function wait(timeSpan = 600) { return new Promise(resolve => { setTimeout(resolve, timeSpan); })}此方法接收一个等待时长参数（默认600毫秒），返回一个Promise对象，等待时长到期后将执行Promise的resolve方法。此方法是一个很好的执行流程控制工具.原创 2021-01-14 11:39:43 · 1045 阅读 · 1 评论 -
JS 判断某容器内的图片全部加载完毕
有时候在做聊天等功能的时候，需要监听所有图片加载完成的事件并将页面滚动至底部，以下是实现代码// 等待所有图片加载完成后滚动到底部getImgLoadEd(callback) { // 查询容器下所有图片 let images = document.getElementById('chatContentInner').querySelectorAll('.chat-img'); // Array.prototype.slice.call将images类数组转换成合法原创 2020-12-08 10:02:01 · 3141 阅读 · 0 评论 -
webpack构建内存溢出解决方案
关于vue项目构建Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory的解决方案原因node中通过javascript使用内存时只能使用部分内存（64位系统下约为1.4 GB，32位系统下约为0.7 GB），这就是我们编译项目时为什么会出现内存泄露了。解决方案查看安装的node的版本node -v8.0以上的版本通过设置NODE_OPTIONS环境.原创 2020-11-02 17:20:05 · 2855 阅读 · 1 评论 -
JS编写防抖和节流函数
在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。一个例子通常，我们想要监听窗口的滚动事件，去做一些处理，我们可以直接为元素绑定onscroll事件，下面我们编写一个例子，来观察滚动事件触发的频率<!DOCTYPE html><html lang="en"> <head> <meta charset="utf.原创 2020-10-29 14:11:10 · 765 阅读 · 0 评论 -
ES7编写常用的decorator装饰器，如日志，自动发布事件，只读属性等
/** * @description 常用的修饰器 * @author: hruomei * @update * @date: 2020-10-19 10:12:17 */function isDescriptor(desc) { if (!desc || !desc.hasOwnProperty) { return false; } const keys = ['value', 'initializer', 'get', 'set']; .原创 2020-10-26 17:19:33 · 240 阅读 · 0 评论 -
手写promise，实现一个简易的promise
文案没编辑好，先上代码吧const isFunction = variable => typeof variable === 'function'// 定义Promise的三种常量const PENDING = 'PENDING'const FULFILLED = 'FULFILLED'const REJECTED = 'REJECTED'class MyPromise { constructor(handle) { this._status = PENDING // 当前状原创 2020-08-24 14:42:57 · 354 阅读 · 0 评论 -
数据访问对象模式-前端封装本地数据存储类
数据访问对象模式（Data access object-DAO）:抽象和封装对数据源的访问和存储，DAO通过对数据源链接的管理方便对数据的访问和存储。假设我们有一个功能需要本地存取数据实现而非调用后台接口，这个功能并不难，但存在以下问题数据很可能会覆盖他人的数据或被其他人员覆盖 添加一条数据需要做各个浏览器的兼容 无法知道数据存取的状态成功、失败、过期等 更多一系列的问题那么，有什么办法可以让每个人方便的管理自己的本地存储库呢？...原创 2020-05-22 14:51:26 · 402 阅读 · 0 评论 -
浅析javascript代理模式-事件绑定与内存泄漏
代理模式（Entrust）：多个对象接收并处理同一请求，他们将请求委托给另一个对象统一处理请求。在开发中我们可以利用委托模式做事件绑定以及防止内存泄露举个栗子，有一个日期列表，当用户点击日期格子的时候将格子的背景色变成灰色首先我们先看下面这一种方式var ul = document.getElementById('container'), li = document.getElementsByName('li'), i = li.length - 1; for(; i >.原创 2020-05-21 21:24:41 · 460 阅读 · 0 评论 -
浅析javascript观察者模式（发布-订阅模式）与应用
观察者模式（Observer）:又称作发布-订阅模式或消息机制，定义了一种依赖关系，解决了主体对象与观察者之间功能的耦合。发布订阅模式可以解决主体对象与观察者之间功能的耦合。举个栗子，一架飞机要从沈阳飞到香港，当经过北京中转站时，需要向卫星发送位置信息，卫星接收到飞机的位置信息后将消息保存在消息容器中，向订阅了飞机信息的北京站和香港站发送信息，两个站点接收到飞机的消息并做相应的处理以避免飞机事故的发生当飞机已经离开北京中转站，北京中转站就不需要再接收飞机的位置信息，因此北京中转站可以取消订阅原创 2020-05-21 17:56:18 · 498 阅读 · 0 评论 -
链模式-jquery链式调用的原理与实现
链模式（Operate of Responsibility）:通过在对象方法中将当前对象返回，实现对同一个对象多个方法的链式调用。从而简化对该对象的多个方法的多次调用时，对该对象的多次引用...说白了就是可以a().css().attr().on()这样调用方法，而不需要a().css();a().attr();a().on()这样繁琐而且要多次创建对象jQuery的设计就是通过这种模式使得代码更简洁。这种链模式是基于原型继承的，并且在每一个原型方法的实现上都返回当前对象this，使当前对象一直处于原型原创 2020-05-21 14:50:33 · 2744 阅读 · 1 评论 -
JS 利用按位非取反(~)运算符判断字符串中是否有某一个字符
本文不是讨论这个字符是什么意思，如果想了解关于按位非运算符请戳这里首先让我们来看看这一段代码if (~selector.indexOf('#')) { // 如果字符串中包含‘#’} else { // 否则}不了解~符合的小伙伴可能到这里就懵了，这是什么操作？我们都知道，在js中，str.indexOf()会返回某个指定的字符串值在字符串中首次出现的位置，如果没有找到，会返回-10在内存中的存储方式是所有位为00000000000000000那么按位取反后位16个1原创 2020-05-21 10:41:24 · 583 阅读 · 0 评论 -
巧妙的使用模板字符串生成dom元素
通常，我们拼接dom元素字符串是这样的...function createDOM(option) { var dom = '<div class="preview-modal"><div class="preview-header">' + option.title + '<a href="javascript:void(0)" class="preview-btn-close" title="' + option.title + '"/>' + '原创 2020-05-16 16:39:08 · 4045 阅读 · 0 评论 -
vue项目全局异常日志处理方案（uni-app示例）
Vue有一个配置Vue.config.errorHandler，用于指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时，可获取错误信息和 Vue 实例。我们可以借助这个函数，进行应用的错误日志记录并做一些自定义的处理（兜底），防止出现一些严重异常导致应用挂掉。一般情况下错误日志可以在前端页面中展示，并且需要记录到数据库中。在异常发生时我们可以调用接口存储到后台，前端查询的实现可以使用状态管理（如果需要持久化存储就配合本地存储，但一般不太建议，因为异常太多的话会影响性能）首先，我们可以原创 2020-05-16 15:25:29 · 8784 阅读 · 7 评论 -
设置URL路径参数，解析URL参数函数
function throwIfMissing() { throw new Error('Missing parameter');} /* * @description 设置URL参数 * @method setUrlParams * @param {String} url url路径，如http://xxx.xx.xxx.xx或pages/veiw/login * @param {Object} params 设置的参数，对象格式，如{a: 1, b: 2} * @param {B.原创 2020-05-16 09:44:34 · 2771 阅读 · 1 评论 -
javascript数据类型校验常用函数
// 判断是否为JSON对象function isJson(obj) { return typeof(obj) == "object" && Object.prototype.toString.call(obj).toLowerCase() == "[object object]" && !obj.length;}// 判断是否为数值function isNumber(obj) { var reg_exp = /^[0-9]+$/; if (obj == ".原创 2020-05-09 18:35:42 · 315 阅读 · 0 评论 -
前端利用canvas绘制水印
// watermark.js// text: 水印文字function watermarkByCanvas(text) { var id = '1.23452384164.123412415'; var confg = { canvasSize: 200, canvasFontSize: '14px sans-serif', canvasTextColor: 'rgba(200, 200, 200, 0.30)', canvasRotate: -30 * Math.PI / 1.原创 2020-05-09 18:56:04 · 370 阅读 · 0 评论 -
javascript浅拷贝、深拷贝实现
看这篇文章之前，推荐大家先了解一下ECMAScript数据类型在ECMAScript中，变量可以存在两种类型的值，即基本数据类型和引用数据类型。基本数据类型：名值存储在栈内存中引用数据类型：名存在栈内存中，值存在于堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值而深拷贝与浅拷贝的概念只存在于引用数据类型ES5中浅拷贝的实现...原创 2020-05-09 18:28:42 · 2064 阅读 · 1 评论 -
javascript设计模式-面向对象编程（封装、继承、多态）
编程的两种风格--面向过程与面向对象面向过程：分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用就可以了面向对象：把构成问题事务分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为以五子棋为例：面向过程的设计思路就是首先分析问题的步骤：1、开始游戏，2、黑子先走，3、绘制画面，4、判断输赢，5、轮到白子，6、绘制画面，7、判断输赢，8、返回步骤2，9、输出最后结果。把上面每个步骤用不同的方法来实现。面向原创 2020-05-09 14:21:54 · 354 阅读 · 0 评论 -
echarts多条折线图Y轴数据不正确问题
如图，官网的示例“搜索引擎”实际值为932，而Y轴的数据却为1700左右，不正确，原因是"stack"这一项配置，去掉该配置即可原创 2020-05-08 11:38:32 · 3018 阅读 · 5 评论 -
基于axios和element-ui封装的request请求插件
请求loading可配置，请求异常可默认提示本示例仅供参考！！使用的过程中可能需要根据需求做调整！！request.jsimport axios from 'axios'import { Message, Loading} from 'element-ui'import { getToken} from './auth'export const s...原创 2020-05-08 09:45:59 · 655 阅读 · 0 评论 -
JS格式化日期时间、获取指定时间
/* * @description 格式化日期时间 * @demo dateFormat(new Date(), 'yyyy-MM-dd HH:mm:ss') * @method dateFormat * @param {Date} d 时间 * @param {String} str 格式，默认'yyyy-MM-dd HH:mm:ss' * @return {String} 格式化...原创 2020-05-07 17:03:15 · 345 阅读 · 0 评论 -
解决UNI-APP "请注意 showLoading 与 hideLoading 必须配对使用" 问题
直接使用uni.showLoading()和uni.hideLoading()经常会出现"请注意 showLoading 与 hideLoading 必须配对使用" 的问题原因：loading全局只创建一个，hideLoading可能会触发多次导致loading已经被隐藏，没有达到预期的配对效果，虽然不至于报错，但是警告提示也让人感觉很不舒服。解决方案：用计数器记录loading被调...原创 2020-05-07 12:10:38 · 40148 阅读 · 6 评论 -
装饰者模式-一个简单的装饰函数
装饰者模式（Decorator）:在不改变原对象的基础上，通过对其进行包装拓展（添加属性或者方法）使原有对象可以满足用户更复杂的需求。一个简单的栗子：需求：为输入框绑定新事件而不影响原有事件var decorator = function(input, fn) { // 获取事件源 var input = document.getElementById(input);...原创 2020-04-29 00:13:44 · 280 阅读 · 0 评论 -
利用外观模式实现浏览器通用事件绑定及阻止浏览器默认行为
外观模式（Facade）：为一组复杂的系统接口提供一个更高级的统一接口，通过这个接口使得对子系统接口的访问更容易。一个通用事件绑定的栗子// 外观模式实现function addEvent(dom, type, fn) { // 对于支持DOM2级事件处理程序addEventListener方法的浏览器 if (dom.addEventListener) { ...原创 2020-04-28 23:55:36 · 217 阅读 · 0 评论 -
将this返回-一个链式操作的小技巧
一个检测类的栗子var CheckObject = function() {};CheckObject.prototype = { checkName: function() { // 验证姓名 return this; }, checkEmail: function() { // 验证邮箱 retur...原创 2020-04-28 23:24:29 · 178 阅读 · 0 评论 -
前端下载二进制流文件解决方案
在做vue项目的某一个功能的数据导出功能时，后端直接向前端输出数据流，于是利用原生XMLHttpRequest做了一个小插件用法：import { httpRequestExport } from '@api/download'exportData() { httpRequestExport('/api/exportData.do', { projDevel...原创 2020-04-13 15:24:09 · 1675 阅读 · 0 评论 -
Symbol以及WeakMap实现私有化部署属性和方法
symbol:由于以 Symbol 值作为键名，不会被常规方法遍历得到。我们可以利用这个特性，为对象定义一些非私有的、但又希望只用于内部的方法。let size = Symbol('size');class Collection { constructor() { this[size] = 0; } add(item) { this[this[size]...原创 2020-03-31 09:56:33 · 356 阅读 · 0 评论 -
vue 项目利用 vuex+mixins 实现全局换肤及多语言
项目中需要做一个全局换肤（主题色）以及多语言的需求，在通用页更改，全局生效。我们都知道，vue是MVVM模式，即模型-视图-视图模型，视图更新，数据会跟着更新，反之也一样。但是仅仅在当前组件生效，那么：如何在一处修改数据就能触发全局视图的更新呢？答案就是vuex状态管理。有了状态管理，如何将主题色，语言数据等注入每一个组件呢？我们可以用mixin(混入)，单组件混入或全局混入都...原创 2020-02-24 10:42:13 · 1682 阅读 · 0 评论 -
树结构深度递归查询
getTreeItem(tree, id) { const flat = function(arr){ if (!Array.isArray(arr)) return []; return [].concat(...arr.map(item => [].concat(item, ...flat(item.children)))); } return fl...原创 2019-12-27 10:36:30 · 434 阅读 · 1 评论 -
《编写可维护的JavaScript》笔记 - 编程实践
第二部分 编程实践第5章 UI层的松耦合5.1 什么是松耦合通俗的讲，就是修改一个组件不需要修改其他组件（或尽可能少的修改其他组件）5.2 将JavaScript从CSS中抽离避免使用CSS表达式。这是针对IE8和更早版本的浏览器中的特性，CSS表达式（expression）5.3 将CSS从JavaScript中抽离不在js中...原创 2019-12-16 17:28:42 · 226 阅读 · 0 评论 -
《编写可维护的JavaScript》笔记 - 编程风格
第一部分 编程风格第1章 基本的格式化1.1 缩进层级统一缩进层级。主张两种缩进层级使用制表符进行缩进 使用2/4/8个空格缩进推荐使用4个空格字符作为一个缩进层级//不好的示例//好的示例1.2 语句结尾推荐总是以“；”结尾，如果省略了分号，JSLint和JSHint默认都会有警告。1.3 行的长度...原创 2019-12-14 13:09:06 · 244 阅读 · 0 评论