web开发之长度单位：px, pt, rem, vw, vh 在前端开发中，常常会碰到各种长度单位，比如 px, em, rem, vw 等。总的来说，可以把这些长度单位分成两类：绝对长度单位 和 相对长度单位。 绝对长度单位绝对长度单位是一个固定的值，一个真实的物理值，它不随设备或者受别的因素影响。具体的绝对长度单位主要包括以下几个：1）cm，厘米：一个长度计量单位，1m=100cm。2）mm，毫米：与厘米一样，也是一个长度计量单位，1cm=10mm；...
js实现一个对页面某个节点的拖曳 js拖拽是常见的网页效果，本文将从零开始实现一个简单的js插件。一、js拖拽插件的原理常见的拖拽操作是什么样的呢？整过过程大概有下面几个步骤：用鼠标点击被拖拽的元素按住鼠标不放，移动鼠标拖拽元素到一定位置，放开鼠标这里的过程涉及到三个dom事件：onmousedown,onmousemove,onmouseup。所以拖拽的基本思路就是：用鼠标点击被拖拽的元素触发onmousedown（1）设置当前元素的可拖拽为true，表示可以拖拽（2）记录当前鼠标的坐标x,y（3）记录当前元素
js 跳出 forEach 循环 使用 forEach 的时候，是不能通过 return 来跳出循环的（只可以终止 return 语句后面代码的执行，并不会终止整个循环），比如下面的例子????var list = [ {id: 'id_1', name: 'name_1', price: 1}, {id: 'id_2', name: 'name_2', price: 2}, {id: 'id_3', name: 'name_3', price: 3}, {id: 'id_4', name: 'name_4
vue 中 EventBus 实现组件通信 Vue项目中，一般会通过 vuex 进行状态管理，但在一些小项目或者初期没有规划 vuex 的情况下，在开发过程中需要进行组件通信（不止是父子组件），就可以选择通过 EventBus 来解决。EventBus又称事件总线。在 Vue 中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件。具体使用：1、建立一个 bus.js 的文件。import Vue from 'vue'c...
vue-property-decorator 使用学习 一、安装与使用一般的，vue 项目中使用 TypeScript 时，会安装 vue-property-decorator 这个库，使用装饰器简化书写。安装：npm i -S vue-property-decorator使用：// 当在vue单文件中使用TypeScript时,引入vue-property-decorator之后,script中的标签就变为这样<script lang="ts"> // 按需引入自己需要的功能模块 import { Component, Vue }
浅析赋值、浅拷贝、深拷贝的区别 1、原理赋值：将某一对象赋给某个变量的过程，称为赋值。浅拷贝：浅拷贝是创建一个对象，这个对象有着原始对象属性值的一份精准拷贝，如果属性是基本类型，拷贝的就是基本类型的值；如果属性是引用类型，拷贝的就是内存地址，如果其中一个对象改变了这个地址，就会影响到另一个对象。深拷贝：深拷贝就是将一个对象从内存中完整的拷贝一份出来，从堆内存中开辟一个新的区域存放新对象，且修改新对象不会影响原有的对象。2、区别赋值：当我们将一个对象赋值给另外一个新的变量时，赋的其实是该对象在栈中的地址，而不是堆中的数据。也就是说
JavaScript之this指向 this 是函数运行时，在函数体内部自动生成的一个对象，只能在函数体内部使用。关于 this，经常会有一些误解：比如会把 this 理解成指向函数自身，又或者认为 this 指向函数的作用域。其实，this 是在函数调用时发生的绑定，它指向什么完全取决于函数在哪里被调用。因此，函数的不同使用场合，this 也有不同的值。那么我们该如何判断 this 呢？可以按照下面的顺序来进行判断：1.函数是否在 new 中调用（new绑定）？如果是的话，this 绑定的是新创建的对象。首先，回想下 new 运算符
CSS 实现单行、多行文本溢出显示省略号（…） 1、单行文本溢出显示省略号直接用 css 属性 text-overflow: ellipsis; 设置：{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}2、多行文本溢出显示省略号直接用 css 属性 -webkit-line-clamp: n; （n是需要展示的行数）设置：{ overflow: hidden; text-overflow: ellipsis.
vue自定义指令实现页面添加水印 最近遇到个给页面添加水印的需求（之前没弄过也没见过这种效果），然后组长还要求我使用指令的方式实现，做到水印内容、样式基本可配置，说是以后再有这种需求的话就不用再开发了（嗯，道理我都懂，就是有点儿迷茫…）先去vue官网看看自定义指令：有了钩子和钩子参数，具体的就是怎么实现水印效果了。这里采用的是 canvas 的方式，具体的：'use strict';exports.__esModule = true;/** * 自定义指令'v-watermark' * 可以传入自定义参数（v-wate
TS之装饰器 装饰器装饰器是一种特殊类型的声明，它能够被附加到类声明，方法，属性或参数上，可以修改类的行为。通俗的讲，装饰器就是一个方法，可以注入到类、方法、属性、参数上来扩展类、方法、属性、参数的功能。常见的装饰器有：普通装饰器（无法传参）、装饰器工厂（可传参）装饰器类型类装饰器属性装饰器方法装饰器函数参数装饰器类装饰器类装饰器在类声明之前被声明（紧靠着类声明）；类装饰器应用于类构造函数，可以用来监视、修改或替换类定义；类的构造函数将作为唯一参数传递给装饰器；如果类装饰器返回一个值，它会
TypeScript 中类的定义 & 继承 & 多态 1.修饰符ts里面定义属性的时候给我们提供了三种修饰符：public: 共有类型，在当前类里面、子类、类外部都可以访问private: 私有类型，在当前类里面可以访问，子类、类外部不能访问protected: 保护类型，在当前类里面、子类可以访问，类外部不能访问注：属性如果没有显示声明修饰符，则默认为 public2.定义使用 class 关键字定义类。// 定义 Person 类class Person { name: string; // 属性，前面省略了
关于 ES 5 中的类、继承 小记 ES 5 ---- 类// 构造函数里定义属性 & 方法function Person() { this.name = 'zhangsan'; this.age = 18; this.run = function() { console.log(`${this.name}在跑步。`); }}// 原型链上定义属性 & 方法Person.prototype.sex = '男';Person.prototype.work = func
vue的组件通信方式小结 https://blog.csdn.net/lplife/article/details/95927762https://www.cnblogs.com/yszblog/p/10135969.htmlhttps://segmentfault.com/a/1190000019208626#item-7
前端防抖与节流 1、防抖 1.1 定义： 在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。 1.2 应用场景： (1) 用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询ajax请求，这样可以有效减少请求次数，节约请求资源； (2) window的resize、scroll事件，不断地调整浏览器的窗口大小、或者滚动时会触发对应事件，...
中英文状态的符号转换 1、JS把中文的标点全部替换成英文标点：function qj2bj(str){ var tmp = ""; for(var i=0;i<str.length;i++){ if(str.charCodeAt(i) >= 65281 && str.charCodeAt(i) <= 65374){// 如果位于全角！到全角～区间内 tmp += S...
前端处理跨域问题 跨域：即请求的地址与被请求的地址协议头、域名、端口有一个不一样就叫跨域。相反，不跨域即叫同源，同源：即协议头、域名、端口完全一致。举个例子：URL 说明 是否允许通信http://www.demo.com/a.jshttp://www.demo.com/b.js ...
URLSearchParams 小记 URLSearchParams接口定义了一些实用的方法来处理 URL 的查询字符串。之前没有没有接触过，了解之后发现还是挺实用的，记录一下。首先，我们调用 new URLSearchParams()会返回一个 URLSearchParams对象实例：let str = 'name=Amy&age=24&sex=female';let obj = new URLSe...
关注
