随笔分类 - javascript
1
摘要：该功能主要通过监听鼠标事件来在canvas上绘制 const cvs = document.getElementById("cvs");//获取canvas节点 const ctx = cvs.getContext("2d"); let isDrawing = false;//标记是否处于绘制状态
阅读全文
摘要：首先来看一下效果： 这里是使用了canvas来绘制出来的，但是canvas是静态的，如何实现动态的下雨效果呢？没错，定时器，都是基本的东西，但是组合起来效果还是很好的。 下面开始方法： 第一步是需要获取展示代码雨的dom宽高 这里是用的全屏，所以宽高就直接是windom的innerWidth和inn
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi
阅读全文
摘要：实现帧动画，首先需要这种图片： （图片来着阿里云） 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge
阅读全文
摘要：用js给图片格式的文件添加水印并渲染到页面上，这里通过canvas来绘制； 第一步将获取到图片路径，将图片转换为canvas 1 /** 2 * 图片路径转成canvas 3 * @param {图片url} url 4 */ 5 async function imgToCanvas(url) {
阅读全文
摘要：首先在http域配置 map $http_upgrade $connection_upgrade { default upgrade; '' close; } 然后在server域增加匹配条件（之前是放 location / {} 下面，发现所有的代理地址都会访问消息服务的地址） location
阅读全文
摘要：<!DOCTYPE html> <html> <!-- head --> <head> <title>图片登录验证</title> </head> <body> <div style="display: flex;align-items: center;justify-content: space-
阅读全文
摘要：<div class="div_item"> <div id="nav"> <ul class="list"> <li class="item">导航1</li> <li class="item">导航2</li> <li class="item">导航3</li> <li class="item"
阅读全文
摘要：1. 获取文件后缀名 使用场景：上传文件判断后缀名 /** * 获取文件后缀名 * @param {String} filename */ export function getExt(filename) { if (typeof filename == 'string') { return fil
阅读全文
摘要：标题设置 1 title: { 2 text: '某站点用户访问来源', 3 subtext: '模拟数据', 4 // x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px） 5 x: 'center', 6 //
阅读全文
摘要：因为工作上需要实现一个可调整表格列宽的需求，所以在不停的努力寻找与测试下，发现一个好用的非常小巧的jQuery插件。可实现用鼠标控制，随意拖动表格边框，使其变大和缩小。 加入样式： <style type="text/css"> table{border-collapse:collapse;bord
阅读全文
摘要：定义 订阅-发布模式定义了对象之间的一种一对多的依赖关系，当一个对象的状态发生变化时，所有依赖它的对象都可以得到通知。 与观察者模式的区别 订阅-发布模式与观察者模式概念相似，但在订阅-发布模式中，订阅者与发布者之间多了一层中间件：一个被抽象出来的信息调度中心。 特点 松耦合：订阅者可以订阅多个类型
阅读全文
摘要：定义 将一个复杂对象的构建与它的实例分离，使得同样的构建过程可以创建不同的实例。 建造者模式实现 比如你打算装修一个房子，首先你会找到开发商提出你的需求 /** * @information: 业主 */ class Owner { constructor (need){ this.need = n
阅读全文
摘要：定义 单例就是保证一个类只有一个实例。 实现方法是，先判断实例是否存在，如果存在则直接返回，如果不存在，则创建实例对象，并将实例对象保存在静态变量中，当下次请求时，则可以直接返回这个实例对象，确保了一个类只有一个实例对象。 应用：弹窗，登录，node模块，webpack模块等。 模板 class A
阅读全文
摘要：定义 工厂模式定义创建对象的接口，但是让子类决定实例化哪个类。根据不同的输入返回不同类的实例，一般用来创建同一类对象。工厂方式的主要思想是将对象的创建与对象的实现分离，将类的实例化延迟到子类。 概述 我们可以用Object构造函数来创建单个对象。但是，使用同一接口创建很多对象时，会产生大量重复的代码
阅读全文
摘要：单一原则single responsibitity 定义：每个模块只专注自己的功能，一个类应该只负责一项职责。 简单的说就是让一个模块所负责的功能尽量少。如果发现一个模块功能过多，应该拆分为多个模块，让一个模块专注于一个功能的实现，更有利于代码的维护。 体现：微服务，把不同的程序逻辑装到不同的服务中
阅读全文
摘要：每个构造函数都有一个原型对象prototype，这个对象中有一个构造器constructor指向了这个构造函数 每个通过构造函数实例化出来的实例对象中都有一个属性__proto__，这个属性指向一个原型对象，这个对象和上面的原型对象prototype是同一个，如下图： 原型 学习原型之前一般都是用如
阅读全文
摘要：此方法接受任意的字符串，并当作JavaScript代码来处理。 如果代码是在运行时动态生成，有一个更好的方式不使用eval而达到同样的目标。 例如，用方括号表示法来访问动态属性会更好更简单： // 反面示例 var property = "name"; alert(eval("obj." + pro
阅读全文
摘要：1.call() 语法：obj1.call(obj2[,param1,param2,...])定义：用obj2对象来代替obj1，调用obj1的方法。即将obj1应用到obj2上。说明：call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 o
阅读全文
摘要：reduce语法 array.reduce(function(total, currentValue, currentIndex, arr), initialValue)； 参数描述 function(total,currentValue, index,arr) total 必需。初始值, 或者计算
阅读全文
1
浙公网安备 33010602011771号