前端知识
文章平均质量分 53
归小超
这个作者很懒,什么都没留下…
展开
-
详解debounce防抖和throttle节流
首先我们先来看看如果一个事件持续频繁触发:<style> #itemBox{ background-color: lightgrey;width: 500px;height:300px; font-size:30px;text-align:center;line-height:300px; }</style><body> <div id="itemBox"></div></body><script>原创 2020-12-22 17:55:46 · 1700 阅读 · 0 评论 -
详解bind函数
之前将call和apply的具体实现模拟写了一遍,今天就将bind函数的具体实现来写一遍看看bind:一句话描述:将创建一个新函数,当这个函数被调用时,传入的第一个参数作为新的this对象,后续的参数作为绑定函数的参数与call和apply相同点:都可以传递参数不同点:apply和call是会具体执行该回调函数,而bind是返回一个函数首先,我们实现一个简单的bind绑定function bindFoo(){ console.log('My name is ' + this.name);}v原创 2020-12-14 20:16:25 · 6401 阅读 · 0 评论 -
详解JS中call和apply的实现
JS中call和apply的实现改变this指向都是通过call和apply的方式,这段时间也对这两个进行了详细的梳理1.call一句话解释:call()方法就是通过指定一个this对象和一些指定的参数来调用某个函数或者方法一个简单的例子:var child = { name : 'gui'}function func(){ console.log(this.name);}func.call(child); //gui其实本质上就是:函数Parent在执行的时候this执行被指定原创 2020-12-04 16:44:29 · 4548 阅读 · 1 评论 -
详解JS继承
一:原型链继承原型链继承:function Father(){ this.showArr = [1,2,3]; this.showName = 'Father';}function Mother(){ this.showArr = [4,5,6]; this.showName = 'Mother';}function Child(){ this.age = 18;}var Father = new Father();Child.prototype = Father;var So原创 2020-12-01 20:21:27 · 4096 阅读 · 2 评论 -
jsPDF和html2canvas兼容IE11
之前写了利用jsPDF和html2canvas做多页PDF导出,但是发现在IE下面不行,存在BUG,也就是Promise未定义的问题,于是也一起处理了一下。期限我想打算用bluebird.js,但是发现与现有项目代码存在冲突,所以先放弃了,然后采用了第二种方式通过引用polyfill.js可以解决这个问题:bluebird.js:...原创 2020-04-09 09:55:58 · 4672 阅读 · 4 评论 -
利用jsPDF和html2canvas前端实现页面PDF多页导出
这两天说要做一个流程表单的导出功能,所以就想到这个,直接导出为PDF形式:其本质主要是利用页面偏移量position,canvas的待导出的整体高度leftHeight和通过一页pdf显示html页面生成的canvas高度pageHeight。首先因为我们导出采用的是a4纸的形式,尺寸为595.28 * 841.89。我们可以相应计算出宽高比例,然后根据canvas的宽度,得到等比缩放后的高度...原创 2020-03-30 09:41:26 · 7226 阅读 · 1 评论 -
本地利用FileReader打开文件
第一步,在html上加一个按钮,用来打开文件<input type="file" id="loadFile" />第二步,通过事件监听,用来执行相应的打开文件方法function readSingleFile(e) { var file = e.target.files[0]; //如果文件不存在,就直接返回 if (!file) { return; }...原创 2020-01-14 20:52:34 · 4771 阅读 · 0 评论 -
浏览器内多个标签页之间的通信
一 使用localstorgelocalstorge在一个标签页里被添加、修改或删除时,都会触发一个storage事件,通过在另一个标签页里监听storage事件,即可得到localstorge存储的值,实现不同标签页之间的通信//写入<input id="XXX"><input type="button" id="submitBtn" value="提交">&l...原创 2019-12-17 15:15:06 · 5120 阅读 · 0 评论 -
Object.keys()是按什么顺序执行
今天在用angualr写一些模块的时候,当我JS给select数据赋予初始值时,数据双向绑定并没有将初始值赋予select框中,最后找啊找,试啊试,终于找到了一种方法:利用ng-selected 指令:...原创 2019-10-31 18:22:07 · 9023 阅读 · 0 评论 -
前端br换行符被转为String,无法实现换行解决
今天在页面渲染的时候,后台给了我一些特殊字符作为换行标志“%%”,我拿到后想用replace,但是感觉不太友好,所以自己写了个formate,开始的时候,我将“%%”转化为<br/>,但是无法实现,页面自动解析为了string解决办法1.将 替换为 \n2.并在前端添加样式style="white-space:pre-line;这样就可以实现了...原创 2019-08-07 16:55:27 · 10678 阅读 · 0 评论 -
输入类型匹配下拉框
前两月一直在忙着写投稿论文,很开心终于被接受了,可以等待发表大期刊上,也就意味着硕士生涯不会因为论文而被延期毕业了,哈哈哈。言归正传,前几天产品要做一个输入框,能自动匹配出数据提供选择,所以就研究了一下。...原创 2019-07-31 17:08:00 · 425 阅读 · 0 评论 -
jQuery.Deferred() 方法
今天在项目中遇到了Deferred()的方法,虽然项目中使用的是dojo,但是其实各个框架都是相通的,以前都没有遇到过,所以今天就在网上找了些资料学习了一下:定义和用法:$.Deferred() 是一个构造函数,用来返回一个链式实用对象方法来注册多个回调,并且调用回调队列,传递任何同步或异步功能成功或失败的状态。提示:$.Deferred() 构造函数创建一个新的 Deferred(延迟...原创 2018-11-21 22:45:24 · 8366 阅读 · 0 评论 -
angular模块理解
今天下雨,阴沉沉的今天利用angular写了些模块,突然发现自己连最原始的定义都忘记了,那就在默写一遍吧:var app = angular.module(“myApp” , []);app.controller(‘myController’, function(){})...原创 2018-11-15 19:25:27 · 12777 阅读 · 0 评论 -
浅析http一些知识点
很早之前整理过http的一些知识点,今天重新整理了一下:域名解析的阶段可以分为以下几个:根据域名找到服务器的IP --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求,浏览器得到html代码 --> 浏览器解析html代码,并请求html代码中的资源(如js、css、图片等) --> 浏览器对页面进行渲染呈现给用户...原创 2018-10-30 20:24:46 · 262 阅读 · 0 评论 -
JS遍历对象以及数组新增contains方法
今天想直接在数组中调用contains的方法,发现没有,所以自己写了一个,可以通过此方法,改写Array的原型,新增contains方法:Array.prototype.contains = function (obj) { var index = this.length; while (index--){ if (this[index] === obj) { ...原创 2018-10-31 20:55:20 · 5242 阅读 · 1 评论 -
JS call 和 apply的区别
call 和 apply 这两个方法平时都用的比较少,所以可能会比较陌生,刚好昨天有同事问我,顺便重新梳理了一下:首先看定义:apply:调用一个对象的一个方法,用另一个对象替换当前对象。例如:B.apply(A, arguments);即A对象应用B对象的方法。call:调用一个对象的一个方法,用另一个对象替换当前对象。例如:B.call(A, args1,args2);即A对象调用B对...原创 2018-10-26 15:01:53 · 838 阅读 · 0 评论 -
浅析跨域
1.跨域的原理是什么? 答:跨域主要是浏览器同源策略,有协议,域名,端口号三个原因,浏览器是根据请求中的origin头,如果origin是服务器认识的,那就正常返回,还会带上Access-control-Allow-Origin,如果没有这个,那么浏览器就会判定请求不合法。2.不能跨域的原因是什么? 答:浏览器不能跨域是为了安全,严格上来说是为了防止CSRF。就是攻击者可以利用我们的身份和...原创 2018-08-19 21:10:05 · 2555 阅读 · 0 评论 -
cookie,session,localStorage,sessionStorage的区别
一、Cookie、session和localStorage的区别 cookie若不设置时间,表示这个cookie的生命期为浏览器会话期间,关闭浏览器窗口,cookie就消失,称为会话cookie,一般不存储在硬盘保存在内存里,若设置了过期时间,浏览器就会把cookie保存到硬盘上,关闭后再打开浏览器这些cookie仍然有效直到超过设定的过期时间。对于保存在内存里的cookie,不同的浏览器有不...原创 2018-08-22 19:48:28 · 4794 阅读 · 0 评论 -
利用CSS3做简单的图片上下左右翻转
今天想在页面上加一点效果,所以就做了一个图片翻转 直接上代码吧:1.第一步肯定是在HTML页面上放入图片 <img class="transition" src="XXX.jpg" /></li>2.第二步骤就是在改元素下面添加一个transition,参数分别表示时间和移动的效果 .transition { -webkit-transi...原创 2018-08-31 15:23:58 · 15221 阅读 · 4 评论 -
JS原生的一些写法
今天在写页面的时候,因为不想使用JQUERY了,所以想用原生JS写一下,发现原生的JS都差不多忘记了,所以来补习一下:slice:会将它字符串的长度与对应的负数相加,接收的是起始位置和结束位置(不包括结束位置) substring:以两个参数中较小一个作为起始位置,较大的参数作为结束位置,负数转0,接收的是起始位置和结束位置(不包括结束位置) substr:第一个参数负加长,第二个转0,接...原创 2018-08-28 20:01:29 · 1020 阅读 · 0 评论 -
详解原型链一
一. 普通对象与函数对象JavaScript 中,万物皆对象!但对象也是有区别的。分为普通对象和函数对象,Object 、Function 是 JS 自带的函数对象。下面举例说明var o1 = {}; var o2 =new Object();var o3 = new f1();function f1(){}; var f2 = function(){};var f3 = new ...转载 2018-09-25 09:23:44 · 270 阅读 · 0 评论 -
前端项目优化
经常会被问到这个问题,所以记录一下:1.减少HTTP请求,把一些资源合并2.合理使用浏览器缓存3.使用压缩,尽可能的将外部的脚本、样式进行合并,多个合为一个,之前看的jquery.mini和普通版就是很好的例子4.CDN加速,本质仍然是一个缓存,而且将数据缓存在离用户最近的地方,使用户以最快速度获取数据,即所谓网络访问第一跳5.CSS放在页面最上部,js放在页面最下面,js阻塞 HTML...原创 2018-09-25 09:26:00 · 2187 阅读 · 0 评论 -
分享几种风格的 jQuery 分页效果
jQuery 分页非常好用,效果也比较好,有一个缓慢的滑动过渡过程,我看了目前市面上的考拉,淘宝,京东的没有直接滑动,可能和电商希望用户逐页查看有关,使用范围并不是很广。先上效果图:这是部分的HTML代码 &amp;lt;div class=&quot;content&quot; style=&quot;margin-bottom:100px&quot;&amp;gt;原创 2018-09-20 10:57:54 · 1099 阅读 · 0 评论 -
JS事件的一些基本点
国庆回来,任务特别重,今天恰到碰到了一些JS事件,所以就想稍微写一点巩固一下。事件流:JavaScript与HTML之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以监听事件,用来当事件发生时执行的代码。其中IE提出的是冒泡流,而网景提出的是捕获流。<body> <div id="box">box <di...原创 2018-10-11 20:06:06 · 297 阅读 · 0 评论 -
详解原型链二
四. protoJS 在创建对象(不论是普通对象还是函数对象)的时候,都有一个叫做__proto__ 的内置属性,用于指向创建它的构造函数的原型对象。对象 person1 有一个 __proto__属性,创建它的构造函数是 Person,构造函数的原型对象是 Person.prototype ,所以:person1.proto == Person.prototype请看下图:根据上面这...转载 2018-09-27 18:56:24 · 213 阅读 · 0 评论 -
详解原型链三
七. 函数对象 (复习一下前面的知识点)所有函数对象的proto都指向Function.prototype,它是一个空函数(Empty function)Number.__proto__ === Function.prototype // trueNumber.constructor == Function //trueBoolean.__proto__ === Function.pr...转载 2018-09-27 19:07:55 · 219 阅读 · 0 评论 -
浅谈require和import
最近在学习webpack时候,教程上用到的是require,但是之前我写代码用的Import比较多,所以借这个机会来学习一下:node编程中最重要的思想就是模块化,import和require都是被模块化所使用。遵循规范–require 是 AMD规范引入方式–import是es6的一个语法标准,如果要兼容浏览器的话必须转化成es5的语法调用时间–require是运行时调用,所以req...原创 2018-09-28 20:32:31 · 32971 阅读 · 3 评论 -
CSS基本点
CSS优先级: !important &amp;amp;gt; 行内样式&amp;amp;gt;ID选择器 &amp;amp;gt; 类选择器 &amp;amp;gt; 标签 &amp;amp;gt; 通配符 &amp;amp;gt; 继承 &amp;amp;gt; 浏览器默认属性CSS选择器:class,id,*,element元素, [target],div,p,div p(div内的P)原创 2018-09-29 19:25:57 · 458 阅读 · 0 评论 -
数据双向绑定浅析
近期看到一篇文章关于jquerymy.js ,是一个关于数据双向绑定的库,具体源码有4000多行,差不多是JQUERY源码的一半,还没有慢慢细读,就想先把之前对于angular和vue的双向数据绑定给梳理一下。数据绑定其实跟框架的设计模式相关,主要有MVC,MVP,MVVM三种,可参考我之前总结的文章angular数据双向绑定模块:angular其实是从MVC发展过来(MVC的界面和逻...原创 2018-08-14 14:39:17 · 12349 阅读 · 0 评论