![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JS
QPQ_
这个作者很懒,什么都没留下…
展开
-
学习前端的好处,网站文章复制不了?别扯.
很多时候我们在网上浏览文章或查看资料的时候,看到写的非常好的句子想要复制粘贴保存一下,这是拖动鼠标,发现“选不中,复制不了”,哎,这时候咱们前端高能出手,这都不是事儿!很简单,接下来就为众多网友们传授这个简单的小秘诀!如果文章不是pdf,那么下列方法是奏效的,否则小编也无能为力了1.首先在你需要复制的文字处右键,选中”检查“,此处以google浏览器为例,如果是IE浏览器则选择”查看元素“,如果是...原创 2018-02-09 16:01:34 · 255 阅读 · 0 评论 -
DOM事件操作优化1——事件委托
1、事件处理程序的内存和性能影响: 在js中DOM事件绑定可以与用户进行各种各样的交互,处理很多事情。但在页面中添加过多的时间处理程序将直接影响到页面整体的运行性能。原因:首先每个函数都是一个对象,都会占用内存(对象存储在堆内存中);内存中的对象越多,性能越差。其次,必须事先指定所有事件处理程序而导致的DOM访问次数会延迟整个页面的交互就绪时间。 ...原创 2018-03-03 13:19:54 · 226 阅读 · 0 评论 -
DOM事件操作优化2——移除事件处理程序
上一篇博客中谈到使用事件委托技术操作DOM事件,减少事件处理程序对内存的占用,并且减少了DOM访问时间。极大的优化了性能。然而除了这种技术外,还可以通过“移除事件处理程序”来移除无用事件处理程序与元素的绑定从而释放内存达到内存重用的目的。注意:事件就是用户或浏览器自身执行的某种动作,诸如click mouseover mouseenter……,都是事件的名字。而事件处理程序就是相应某个事件的函...原创 2018-03-03 13:49:04 · 468 阅读 · 0 评论 -
js中事件绑定的几种方式
事件处理程序即给元素绑定事件的方式有下列几种:HTML事件处理程序、DOM0级事件处理程序、DOM2级事件处理程序、IE事件处理程序、跨浏览器事件处理程序。其实这些方式就是一个逐步优化和实现跨浏览器的过程。1、HTML事件处理程序:直接在html的标签中添加事件属性,例如:<div onclick="fun()"></div>这样做很是不好,有下列两大缺点,这也是如今在开发...原创 2018-03-03 15:12:01 · 5548 阅读 · 0 评论 -
js中一个函数处理多个事件的方式
通常可能需要给某个元素绑定多个事件处理程序,此时普通法办法是一个一个绑,但下边有一个更高大上的方法,就是利用event.type属性。将所有事件的实现全部放在一个函数中,然后用event.type判断对象绑定的事件类型。var oBox = document.getElementById("box");var handle = function(e) { e = e||window.e; swit...原创 2018-03-03 17:32:19 · 2590 阅读 · 0 评论 -
js中跨浏览器的一些事件和 兼容处理
以下是针对标准浏览器和IE一些低版本浏览器的一部分事件处理,所有处理方法均保存为一个函数存放在一个对象字面量中。用时调用即可。var EventUtil = { // 给对象绑定事件 addHandle: function(element,type,fn) { if(element.addEventListener) { element.addEventListener(type,fn); ...原创 2018-03-03 17:53:55 · 414 阅读 · 0 评论 -
原生js封装的渐入式轮播插件
之前写了一篇关于“原生js封装的滑动式轮播插件”,一直想着把滑动式改为渐入式,今天终于动手了。虽然很简单,只是把定位改变为透明度为变换目标,但是实现过程中还是有很多细节需要注意。比如:(1)确定下一个将要出现的目标。(2)鼠标移入小点和鼠标进入左右两个btn时需要取消自动轮播,鼠标移出时又开始从此处继续轮播,而不是从上一次轮播被取消时停止的位置开始(因为这样可能会导致回退或超前,很不舒服)。(3)...原创 2018-03-18 14:54:23 · 268 阅读 · 0 评论 -
跟轮播杠上了,这次很轻便
之前写过两个懒人轮播,为啥叫懒人轮播呢?因为从轮播图的创建到开始轮播然后切换都是自动完成的,需要做的只是给它指定个位置,向对象init函数中传入些参数(图片长度,宽度,图片数量)即可。有点全自动洗衣机的即视感,不过这样做有一个 缺点,就是dom操作太多,影响了性能。这次不一样了,用animation动画简单实现了个自动轮播,超级轻便呢(前提条件是已知图片张数,但 图片路径未知,就是说可以通过更改...原创 2018-03-30 19:13:57 · 174 阅读 · 0 评论 -
原生js组合模式实现时钟转动
之前用“面向过程”的方式写过一个转动时钟,今天突然想要用“面向对象”的方式试一试,写完啦!js代码:(function(document) { // 把document保存为局部变量 var doc = document; // 所需元素,timer表示定时器 var ele = { eleHour: doc.getElementsByClassName("h...原创 2018-04-03 11:58:16 · 1724 阅读 · 0 评论 -
socket聊天室新增头像上传,表情包上传功能
接着上次的写,这次表情功能实现啦。大概效果图如下:代码最新版:https://github.com/COMINGLIU/socket-chat-online/tree/master/chat2原创 2018-07-17 15:44:48 · 1468 阅读 · 0 评论 -
socket聊天室增加文件上传与下载功能
新增功能:自定义表情包上传,群文件上传与下载。其实总结就增加了一个功能:文件上传。操作指示:点击“上传文件”可以选择任何类型的文件,如果是图片格式则直接作为图片输入到对话框,如果是其他文件类型则添加到群文件。另外点击文件名即可下载文件。.大致如下图所示:既然截了图那就截全套,哈哈哈哈。代码已更新至github: https://github.com/COMINGLIU/sock...原创 2018-07-18 12:23:37 · 2427 阅读 · 1 评论 -
socket聊天室实现啦
最近新get了一招,先上图:看到这是不是很熟悉呢,有没有一种想拿鼠标拖一拖的错觉呢。没错它就是模仿了qq群聊的样式,不过功能暂时不多只能发文字。这个在线聊天室使用了web-socket协议的功能并以node.js为后台进行编写,具体实现的机制是: 每个用户向进入界面后将与服务器连接,连接成功后用户向服务器发送的消息将被广播到所有正在连接该服务器的用户(即把该消息发送到连接到服务器...原创 2018-07-15 12:25:50 · 2747 阅读 · 0 评论 -
简单实现跨域js通信
当一个页面中包含来自其他子域的框架或内嵌框架时,由于跨域安全限制,来自不同子域的页面无法通过js通信。解决:通过将每个页面的document.domain设置为相同值,这些页面就可以相互访问对方包含的js对象了。例如:有一个页面加载自www.jd.com。其中包含一个加载自www.tmall.com的内嵌框架。由于两个页面的document.domain的字符串不一样,内外两个页面之间无法相互访问...原创 2018-03-02 14:13:11 · 250 阅读 · 0 评论 -
简单理解闭包的原理
首先闭包表示有权访问另一个函数作用域中的变量的函数,常见的创建闭包的方式是在一个函数中创建另一个函数。要了解闭包的原理首先要了解函数作用域,接下来从函数作用域推广到闭包的原理。1、当某个函数被调用时,会创建一个执行环境及相应的作用域链。然后使用arguments和其他参数的值来初始化函数的活动对象。但在作用域链中,外部函数的活动对象始终处于第二位, 外部函数的外部函数的活动对象处于第三位,……以此...原创 2018-03-01 16:52:05 · 4891 阅读 · 0 评论 -
js中数组检测
方法1:检测数组,在ECMAScript3中,对于一个网页或一个全局作用域而言,使用instanceof即可: if(arr instanceof Array) {}问题:(1)它假定只有一个全局执行环境,如果网页中包含多个框架,那实际上就存在两个以上不同的执行环境,从而存在两个及以上不同的Array构造函数。如果你从一个框架向另一个框架传入一个数组,那么传入的数组与第二个框架中原生创建的数组分别...原创 2018-02-26 14:37:04 · 158 阅读 · 0 评论 -
js中 基本包装类型
为了便于操作基本类型,ECMAScript还提供了3个特殊的引用类型Boolean、Number、String。这些类型与其他引用类型形似,但同时也具有各自的基本类型相应的特殊行为。实际上,每当读取一个基本类型值时后台就会创建一个相应的基本包装类型的对象,从而让我们能够调用一些方法来操作这些数据。eg: var str1 = "abcs"; var str2 = str1.concat();/...原创 2018-02-26 17:34:18 · 205 阅读 · 0 评论 -
js影响页面性能的2个隐藏因素(知识点摘录)
1.内存:由于js的垃圾回收机制,页面可能会出现卡顿现象或暂停现象。当浏览器回收内存时,JS执行被暂停,所以频繁垃圾回收会造成浏览器频繁执行。因此避免内存泄漏和频繁的垃圾回收暂停,以保持页面运行流畅至关重要。2.由于js执行的是单线程运行机制。所以在运行时,长时间运行的js会阻止主线程导致页面无响应。将工作分成更小部分(使用requestAnimationFrame()或requestAnimat...转载 2018-02-13 13:18:57 · 568 阅读 · 0 评论 -
在js中创建对象的方法
对象:在js中,ECMA-262把对象定义为是无序属性的集合,其属性包括基本值,对象或函数。可看作散列表,表内是一组没有特定顺序的值,对象的每个属性都映射到一个值。每个对象都是基于一个引用类型创建的,这个引用类型可以是原生类型,也可以是开发人员自定义的类型。在js中创建对象有四种方式:工厂模式、构造函数模式、原型模式、组合使用构造函数模式和原型模式前三种方式都有一定的弊端,组合模式是结合前两种模式...原创 2018-02-27 18:15:18 · 807 阅读 · 0 评论 -
js谈继承
在js中继承有三种方法:原型链继承、借用构造函数继承、组合继承。同样前两者都有一定的弊端,组合继承则解决了前两者的不足和结合了它们的优点。这里逐步讲解。(1)原型链继承:利用原型让一个引用类型继承另一个引用类型的属性和方法。让原型对象等于另一个类型的实例,此时的原型对象将包含一个指向另一个原型的指针,相应的,另一个原型中也包含指向另一个构造函数的指针。加入另一个原型又是另一个原型的实例,上述关系依...原创 2018-02-27 19:04:40 · 128 阅读 · 0 评论 -
js中递归写法的逐步优化
递归有很多用法例如阶乘、二分查找等,这里以阶乘来做范例。1.原始的递归表达式通常这样写: function fun(num) { if(num<=1) { return 1; }else { return fun(num-1); } } 但是这种写法有一个问题:当函数名复制给其他的变量,然后将该函数名复制为其他值或null,执行被赋值的变量函数,则函数实...原创 2018-02-28 13:14:06 · 1878 阅读 · 0 评论 -
ECMAScript的数据类型注意点
ECMAcript包含6中数据类型:五种基本数据类型:Number、String、Boolean、Undefined、Null一种复杂数据类型:Object1、特殊知识点:(1)typeof null->null 原因:null是一个空的对象引用(2)Safari5及之前的版本,Chrome7及之前版本在对正则表达式调用typeof时返回"function",其他浏览器返回"Object"....原创 2018-02-21 23:55:44 · 309 阅读 · 0 评论 -
深入理解js中函数的参数
ECMAScript函数的参数与大多数其他语言中函数的参数有所不同,ECMAScript函数不介意传递进来多少个参数,也不在乎传进来的参数是什么类型,也就是说,即便你定义的函数只接收两个参数,在调用这个函数时也未必一定要传递两个参数。可以传递一个、三个甚至不传递参数。原因:ECMAScript中的参数在内部是用一个数组来表示的,函数接收到的始终都是这个数组,而不关心数组中包含哪些数值。可以通过ar...原创 2018-02-22 00:06:43 · 319 阅读 · 0 评论 -
js严格模式注意点
严格模式:1、ECMAScript5引入了严格模式的概念,严格模式是为javascript定义了一种不同的解析和执行模型。在严格模式下,ECMAScript3中的一些不确定的行为将得到处理,而且对于某些不安全的操作也会抛出错误。要在整个脚本中启用严格模式,可以在顶部添加代码"use strict";function fn(){ "use strict"; //执行代码}2、严格模式下,javasc...原创 2018-02-22 00:09:20 · 441 阅读 · 0 评论 -
js文档模式之混杂模式与标准模式
为什么会存在这两种文档模式呢?答案是:当浏览器厂商开始创建与标准兼容的浏览器时,他们希望确保向后兼容,所以他们创建了两种表现模式:标准模式和混杂模式。1、文档模式是IE5.5引入的概念,这个概念是通过使用文档doctype实现的。(1)混杂模式:以一种先后兼容的方式显示,会让IE的行为与IE5相同,IE5包含非标准特性,以防止老站点无法工作。(2)标准模式:让IE的行为更接近标准行为,IE6及以上...原创 2018-02-22 00:08:19 · 1878 阅读 · 0 评论 -
js使用外部文件包含js的好处
在html文档中嵌入js脚本的方式有两种,一种是内部嵌套,另外一种是使用外部脚本链接,此处讲解使用后者的好处。(1)可维护性:遍及不同HTML页面的javascript会造成维护问题,但把所有js文件都放在一个文件夹中维护起来就轻松多了。而且开发人员因为也能够在不触及HTML标记的情况下集中精力编写js代码(2)可缓存:浏览器能够根据具体的设置缓存链接的所有外部js文件,也就是说,如果有2个页面都...原创 2018-02-22 00:07:22 · 2728 阅读 · 0 评论 -
原生js封装的滑动式轮播插件
最近用单体单例模式写了一个可复用型轮播小插件。功能为——根据可自行设置:轮播图所在区域、图片宽度、图片高度、轮播图片数.自动创建轮播图。实现效果大概如下:github代码地址为:https://github.com/COMINGLIU/-/tree/master/lunbo1实现效果图中由于没有传入图片参数路径,所以将看到每张图都是以随机色进行填充的。写完总结了一下,用到了下列知识点: 1....原创 2018-03-15 16:59:50 · 808 阅读 · 0 评论