js

js上传图片大小压缩

删除回忆录丶 提交于 2020-02-09 18:23:53
/* file:文件(类型是图片格式), obj:文件压缩后对象width, height, quality(0-1) callback:容器或者回调函数 */ let photoCompress = function ( file ) { return new Promise ( ( resolve , reject ) => { try { let that = this ; let ready = new FileReader ( ) ; /*开始读取指定File对象中的内容. 读取操作完成时,返回一个URL格式的字符串.*/ ready . readAsDataURL ( file ) ; ready . onload = function ( ) { let re = this . result ; //开始压缩 canvasDataURL ( re , ( base64 ) => { let minFile = base64UrlToFile ( base64 , file . name ) resolve ( minFile ) } ) } } catch ( error ) { reject ( error ) } } ) } /*利用canvas数据化图片进行压缩*/ /*图片转base64*/ let canvasDataURL = function (

每天一点点之 taro 框架开发 - taro静态资源引入

若如初见. 提交于 2020-02-09 17:48:11
1.说明: taro中客园自由的引用静态资源,不需要安装任何的loader 引用样式文件 通过ES6的import引入 2.引用js文件 import { functionName } from './js/name.js' import defaultExportName from './js/name.js' 说明:可以去掉文件路径后面的后缀 utils.js export function setDate () { console.log('setDate') } export function getDate () { console.log('getDate') } 调用文件 import { setDate , getDate } from '../../utils' 然后通过 setDate(),getDate() 方法来访问js文件中的方法 3.引入图片、音频、字体等文件 可以通过import引入 引用: import namePng from './images/name.png' 使用: <Image src={ namePng }> 也可以使用require引用 说明:只有本地文件需要这样线上图片直接赋值就可 来源: https://www.cnblogs.com/cap-rq/p/10905660.html

JS事件委托

旧街凉风 提交于 2020-02-09 14:52:09
hello,沐晴,又来更新啦,今天呢就接着上篇博文讲讲冒泡带给我们的一大优点,就是产生了所谓的事件委托,初听事件委托,觉得有点高大上,了解过后发现它真是个非常有用的东西。OK,下面就跟我一起一探究竟把。。。 先看看解析,事件委托:也称事件代理 就是利用冒泡的原理 把加事件加到父级上,触发执行效果 首先呢,你一定写过这样的程序,有一个列表,当鼠标移入每个li,背景颜色变红,于是我们写出了这样的代 码: (我给的代码一般都写的重点代码,html大家可以自行写哈。) window.onload = function(){ var oUl = document.getElementById('ull'); var aLi = document.getElementsByTagName('li'); //获取所有列 for(var i =0;i < aLi.length;i++){ aLi[i].onmouseover = function(){ this.style.background = "red"; } } 当然这样一看代码也没什么问题,通过循环给每个li加事件,但想一想如果我们有很多个li,是不是要加很多次事件,这样其实是非常耗性能的。那么我们会想,能不能只加一个事件就能实现呢。当然是能的,不然我就不会在这扯了。 那就是通过冒泡原理进行事件委托,我们可以把事件只加给父级oUL

JS闭包的详解

不想你离开。 提交于 2020-02-09 14:20:27
目录 一、什么是闭包? 二、闭包有什么好处?应用在哪? 2.1 好处: 2.2 用法: 三、闭包需要注意的地方? 3.1 IE下会引发内存泄露 一、什么是闭包? 特点: 1 函数嵌套函数 2 内部函数可以引用外部的参数和变量 3 参数和变量不会被垃圾回收机制所回收 举一个简单的闭包的例子,例子中符合闭包的三个特点 function aaa(a){ var b = 5; function bbb(){ alert(a); alert(b); } } aaa(); 关于js 中的垃圾回收机制,这里说明一下。请看下面代码,当aaa函数执行完毕之后,aaa中的变量a会被js的垃圾回收机制所回收 function aaa(){ var a = 1; } aaa(); // 改函数执行完毕时候,函数中的变量a会被js的垃圾回收机制所回收 再举一个闭包例子 当aaa函数执行完毕之后,调用c函数仍然可以弹出1,说明了a这个变量没有被垃圾回收 function aaa(){ var a = 1; function bbb(){ alert(a); } return bbb; } var c = aaa(); // 当aaa函数执行完毕之后,调用c函数仍然可以弹出1,说明了a这个变量没有被垃圾回收 c(); 二、闭包有什么好处?应用在哪? 2.1 好处: 1 可以使一个变量常驻内存 2

前端面试集锦(1-24)

ぃ、小莉子 提交于 2020-02-09 13:06:35
目录 1、id选择器? 2、类选择器 3、元素选择器 4、通用选择器 5、简述什么是浏览器事件流 6、如何用CSS隐藏一个元素? 7、一行CSS实现padding上下左右分别为1,2,3,4px? 8、前后端分离的基本原理? 9、如何创建响应式布局? 10、你使用过那些前端框架? 11、什么式ajax请求?使用jQuery和XMLHttpRequest对象实现一个ajax请求? 12、如何在前端实现轮询? 13、如何在前端实现长轮询? 14、vuex的作用? 15、vue中的路由拦截器的作用? 16、axios的作用? 17、列举vue的常见指令? 18、简述jsonp及其原理? 19、简述cors及其原理? 20、看js代码写结果? 21、看js代码写结果 22、看js代码写结果 23、看js代码写结果 24、看js代码写结果 1、id选择器? #id /*id选择器 #号*/ #d1 { /*将id为d1的标签内部文本内容改成绿色*/ color: green; } 2、类选择器 .id /*类选择器 点号*/ .c1 { /*让所有具有c1类属性值的标签内部文本变成蓝色*/ color:blue; } 3、元素选择器 /*标签选择器 元素选择器*/ div { /*将页面上所有的div标签内部的文本变成红色*/ color: red; } 4、通用选择器 * /*通用选择器

JS创建对象的几种方式

人盡茶涼 提交于 2020-02-09 12:12:08
1.Object构造函数模式 var obj = new Object(); obj.name = 'Tom'; obj.age = 11; obj.setName = function(name){   this.name = name; } 适用场景:创建对象起始时候不确定对象内部的数据 问题:语句太多 2.对象字面量模式 var p = {   name:'Tom',   age:'11',   setName:function(){     this.name = name;   } } var p1 = {   name:'Jack',   age:'15',   setName:function(){     this.name = name;   } } 适用场景:创建对象时就知道内部需要哪些属性,同类型对象只创建一个 问题:创建同类型的多个对象时候,要重复定义这些相同的属性和方法 3.工厂模式(很少用) function createPerson(name,age){   var obj = {     name:name,     age:age,     setName:function(name){       this.name = name;     }   }   return obj; } 使用场景:同类型对象需要创建多个 问题

JS this用法详解

孤街醉人 提交于 2020-02-09 07:15:51
随着对 js 的深入学习和使用,你会发现它里面包含了很多令人困惑的机制,比如对象、闭包、原型链继承等等    1、this是啥?   简言之,this是 JavaScript语言 中定义的众多关键字之一,它的特殊在于它自动定义于每一个函数域内,但是this倒地指引啥东西却让很多人张二摸不着头脑。这里我们留个小悬念,希望看完这篇文章了你能回答出来this到底指引个甚。    2、this有啥用?   那边观众又该为了,既然this这么难以理解,那么为个甚还要用它呢?我们来看个例子: function identify() { return this .name.toUpperCase(); } function sayHello() { var greeting = "Hello, I'm " + identify.call( this ); console.log( greeting ); } var person1= { name: "Kyle" }; var person2= { name: "Reader" }; identify.call( person1); // KYLE identify.call( person2); // READER sayHello.call( person1); // Hello, I'm KYLE sayHello.call(

js 函数讲解

这一生的挚爱 提交于 2020-02-09 07:15:32
函数 来自 《JavaScript 标准参考教程(alpha)》 ,by 阮一峰 目录 概述 函数的声明 函数的重复声明 圆括号运算符,return 语句和递归 第一等公民 函数名的提升 不能在条件语句中声明函数 函数的属性和方法 name 属性 length 属性 toString() 函数作用域 定义 函数内部的变量提升 函数本身的作用域 参数 概述 参数的省略 传递方式 同名参数 arguments 对象 函数的其他知识点 闭包 立即调用的函数表达式(IIFE) eval 命令 参考链接 函数是一段可以反复调用的代码块。函数还能接受输入的参数,不同的参数会返回不同的值。 概述 函数的声明 JavaScript 有三种声明函数的方法。 (1)function 命令 function 命令声明的代码区块,就是一个函数。 function 命令后面是函数名,函数名后面是一对圆括号,里面是传入函数的参数。函数体放在大括号里面。 function print(s) { console.log(s); } 上面的代码命名了一个 print 函数,以后使用 print() 这种形式,就可以调用相应的代码。这叫做函数的声明(Function Declaration)。 (2)函数表达式 除了用 function 命令声明函数,还可以采用变量赋值的写法。 var print =

JS为table动态增加行

a 夏天 提交于 2020-02-09 05:50:19
<script language="javascript" type="text/javascript"> function insRow() { var x = document.getElementById('abcd').insertRow(1) var a = x.insertCell(0) var b = x.insertCell(1) } <table border="1" runat="server" id="abcd"> <tr > <td> <input type="button" onclick="insRow()" value="插入行"> </td> <td colSpan=2>8</td> <td colSpan=2>9</td> <td colSpan=2>10</td> <td colSpan=2>11</td> <td colSpan=2>12</td> <td colSpan=2>13</td> <td colSpan=2>14</td> <td colSpan=2>15</td> <td colSpan=2>16</td> <td colSpan=2>17</td> <td colSpan=2>18</td> <td colSpan=2>19</td> <td colSpan=2>20</td> </tr> <tr> <td></td> <TD>

排序之希尔排序(JS)

孤人 提交于 2020-02-09 05:25:30
  希尔排序(Shell's Sort)是 插入排序 的一种又称“ 缩小增量排序 ”(Diminishing Increment Sort),是直接插入排序算法的一种更高效的改进版本。希尔排序是非稳定排序算法。该方法因D.L.Shell于1959年提出而得名。   希尔排序是基于插入排序的以下两点性质而提出改进方法的: 插入排序在对几乎已经排好序的数据操作时,效率高,即可以达到线性排序的效率。 但插入排序一般来说是低效的,因为插入排序每次只能将数据移动一位。 为更加清晰地说明该排序,贴一张其它地方转载而来的图片 /* * 希尔排序 时间复杂度 o(nlog2n). * 开始时针对无序序列,步长大,交换速度有提升,当数组基本有序的时候,步长少,交换次数少,速度快 */ //不使用temp,交换数据信息 function swap(arr,i,j){ arr[i]=arr[i]+arr[j]; arr[j]=arr[i]-arr[j]; arr[i]=arr[i]-arr[j]; return arr; } //希尔排序,自组采用直接插入排序 针对有序序列在插入时采用交换法 function shellSort(arr){ //逐步降低步长直至为1为止 for(let shellWidth = arr.length/2;shellWidth>0;shellWidth/2){ /