![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
文章平均质量分 77
charlene程程
这个作者很懒,什么都没留下…
展开
-
判断节点为元素节点 HTML XML
判断节点为元素节点function isElement(obj){var testDiv=document.creatElement("div");if(obj&&obj.nodeType===1){if(window.Node&&(obj instanceof Node){return true;}try{testDiv.appendChild(obj);testDiv.re原创 2015-11-03 21:08:36 · 816 阅读 · 0 评论 -
js实现动画效果
用js实现动画效果的主要思想是利用setInterval()函数.此函数可按照指定的周期(以毫秒计)来调用函数或表达式,并且该方法会不停地调用函数,直到clearInterval()被调用或窗口被关闭。由setInterval()返回的ID值可用作clearInterval()方法的参数。1.单个元素匀速运动以匀速水平方向运动的元素为例,该方法传入三个参数,分别为要移动元素,要移动到的目标原创 2015-11-25 13:13:41 · 4701 阅读 · 0 评论 -
socket基础知识及js中的Web Sockets
socket基本概念两个进程如果需要进行通讯最基本的前提是能够唯一的标示一个进程,在本地通讯中用PID来唯一标示一个进程,但PID只在本地唯一,网络中的两个进程PID冲突几率很大。我们知道IP层的ip地址可以唯一标示主机,而TCP层协议和端口号可以唯一标示主机的一个进程,这样我们可以利用ip地址+协议+端口号唯一标示网络中的一个进程。能够唯一标示网络中的进程后,他们就可以利用socket进行通信了。原创 2016-07-16 21:17:43 · 30593 阅读 · 0 评论 -
js中连续触发事件的稀释方法(函数节流、函数防抖、标识变量)
在浏览器中操作DOM比非DOM交互需要更多的内存和CPU的事件,连续尝试进行过多的DOM相关操作可能UI导致浏览器挂起,有时甚至会崩溃。尤其在IE中使用onresize事件处理程序的时候容易发生,当调整浏览器大小的时候,该事件会连续触发。在onresize事件处理程序内部如果尝试进行DOM操作,其高频率的更改可能会让浏览器崩溃。为了解决短时间内重复调用事件的这个问题,可以使用函数节流、函数防抖和设置原创 2016-07-31 19:15:52 · 9879 阅读 · 2 评论 -
JavaScript中的类型转换
数据类型JS中的类型一共有六种。包括五种基本类型:数值(Number)、字符串(String)、undefined、null和布尔型(Boolean),一种复杂数据类型(Object)(ES6中新增了Symbol类型,这里暂不考虑)。 JS的数据类型之间可以进行类型转换类型转换JavaScript中的取值类型非常灵活。比如当JavaScript期望使用一个布尔值的时候,我们可以提供任意类型的值,J原创 2016-08-10 12:34:21 · 638 阅读 · 0 评论 -
DOM事件(事件流、事件处理程序)
DOM事件流IE的事件流IE的事件流叫做事件冒泡,即事件开始由最具体的元素接收,然后沿着DOM树向上传播,在每一集节点上都会发生,直至传播到document对象(关于最后传播到的对象各浏览器有区别,IE9、FireFox、Chrome、Safari将事件冒泡到window对象)。 捕获事件流网景团队提出的事件流机制为事件捕获。事件捕获的思想是不太具体的节点(document)应该更早的接收事件原创 2016-04-28 10:38:02 · 1087 阅读 · 0 评论 -
前端构建工具--Gulp的使用
gulp是基于Nodejs的自动任务运行器,能自动化地完成JavaScript、sass、less html、css、image等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在该改动后重复指定的这些步骤。在实现上,gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。gulp的安装gulp是基于Nodejs原创 2016-04-10 15:18:55 · 553 阅读 · 0 评论 -
js中ajax的执行过程及其优缺点分析
AJAX的优点无刷新更新数据AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互,并避免了在网络上发送那些没有改变的信息,减少用户等待时间,带来非常好的用户体验。异步与服务器通信AJAX使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力。优化了Browser和Server之间的沟通,减少不必要的数据传输、时间及降低原创 2016-04-10 19:03:11 · 2133 阅读 · 0 评论 -
ajax基础
ajax 的全称是AsynchronousJavaScript and XML,其中,Asynchronous 是异步的意思, 它有别于传统web开发中采用的同步的方式。同步和异步异步传输是面向字符的传输,它的单位是字符;而同步传输是面向比特的传输,它的单位是桢, 它传输的时候要求接受方和发送方的时钟是保持一致的。举个例子来说同步和异步, 同步就好像我们买楼一次性支付,而异步就是买楼分期付款。原创 2016-04-10 13:41:56 · 376 阅读 · 0 评论 -
JavaScript中的作用域链详解
题外话:最近面试一直被问到作用域链的问题,所以还是要深入透彻的学习一下这两个概念。作用域链在红宝书中对作用域链的描述有这么一段话:当代码在一个环境中执行时,会创建变量对象的一个作用域链。作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问。作用域链的前端始终是当前执行的代码所在环境的变量对象。如果这个环境是函数,则将其活动对象作为变量对象。活动对象在最开始时只包含一个变量,即argume原创 2016-08-19 17:16:11 · 15401 阅读 · 1 评论 -
JavaScript内存泄漏的排查方法
本文转自JS内存泄漏排查方法——Chrome Profiles 概述Google Chrome浏览器提供了非常强大的JS调试工具,Heap Profiling便是其中一个。Heap Profiling可以记录当前的堆内存(heap)快照,并生成对象的描述文件,该描述文件给出了当时JS运行所用到的所有对象,以及这些对象所占用的内存大小、引用的层级关系等等。这些描述文件为内存泄漏的排查提供了非常有用的信转载 2016-08-19 18:11:50 · 8426 阅读 · 0 评论 -
js实现排序算法(冒泡、选择、插入、二分插入、快速、希尔)
插入排序从第一个元素开始,该元素可以认为已经被排序; 取出下一个元素,在已经排序的元素序列中从后向前扫描; 如果该元素(已排序)大于新元素,将该元素移到下一位置; 重复步骤3,直到找到已排序的元素小于或者等于新元素的位置; 将新元素插入到该位置后; 重复步骤2~5。/** * 插入排序算法 * @param {Array} ar原创 2016-05-12 20:11:01 · 12908 阅读 · 3 评论 -
JavaScript模块化相关知识
为什么需要模块化为方便文件管理、增加复用,我们需要细化JS文件,每个文件负责单一职能,称之为模块,明确每个文件的职能,当交互功能较复杂时,引用的文件也越加庞大,此时我们就需要模块化管理。 模块化管理可以避免全局变量污染、函数命名冲突、文件依赖等问题如何模块化为了实现JavaScript的模块化开发,需要遵循一定的规范,目前通用的规范分为服务端(CommonJS)和客户端(AMD/CMD)。Comm原创 2016-08-24 12:06:50 · 623 阅读 · 0 评论 -
React学习总结—生命周期
React组件的生命周期根据广义定义描述,可以将其分为挂载(Mounted)、更新(Update)和卸载(Unmounting)三个阶段,每个阶段React都封装了对应的hack函数,各阶段包含的hack函数如下图 根据这个图,我们详细说明一下各hack函数执行顺序和作用Mounted阶段该阶段是组件的挂载阶段,组件主要通过render方法解析生成对应的DOM节点,并将其推入浏览器的原创 2017-08-28 19:51:26 · 615 阅读 · 0 评论 -
webpack基本配置项总结
webpack是一个用于web项目的模板打包工具。在大部分的使用场景中,我们将它看作是一个web前端模块打包工具,它将资源的本身当做模块,这些模块可以被导入和操作,最后打包到指定的文件中下面详细讲解各个配置项的配置方法 首先写一个简单的webpack.config.js文件module.exports = { entry:'./src/index.js', output:{原创 2017-09-15 16:24:33 · 3381 阅读 · 1 评论 -
如何获取闭包中循环的i值
假设有这样的一个问题:ul中含有多个li标签,我们想对每个li绑定点击事件,并且打印出该li为第几个li元素一般写法是写一个for循环var lis = document.getElementsByTagName("li"); for (var i = 0; i < lis.length; i++) { lis[i].onclick = function(){ console原创 2016-05-20 13:10:45 · 2863 阅读 · 0 评论 -
js中的二进制操作相关类型和方法
Blob数据对象MDN官方解释Blob对象:一个Blob对象就是一个包含有只读原始数据的类文件对象。Blob对象中的数据并不一定得是JavaScript中的原生形式。File接口基于Blob, 继承了Blob的功能,并且扩展支持了用户计算机上的本地文件。创建Blob对象的方法有几种,可以调用Blob构造函数,还可以使用一个已有Blob对象上的slice()方法切出另一个Blob对象,还可以原创 2016-05-08 13:42:26 · 9110 阅读 · 0 评论 -
利用中间件Multer实现上传功能
Multer中间件实现对multipart/form-data格式的数据的操作现在实现上传图片的功能,上传文件完成后,背景图片显示上传的图片首先在html文件中添加文件上传标签<input type="file" id="file" name="files" /> 创建upload.js文件,定义ajax上传文件的方法。这里运用了XHR2的FormData对象。FormData对象可以发送二进制文件原创 2016-04-14 19:29:40 · 5510 阅读 · 0 评论 -
跨浏览器事件处理程序
//跨浏览器事件处理程序 var eventUtil={ //添加句柄 addHandler=function(elem,type,handler){ if (addEventListener) { elem.addEventListener(type,handler,false); } else if{ elem.attachEvent("on原创 2015-11-04 19:27:18 · 649 阅读 · 0 评论 -
JS中对象的建立
1 工厂模式function Person(name, age, job){ var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function(){原创 2015-10-21 14:07:24 · 532 阅读 · 0 评论 -
JavaScript中的property和attribute
点击打开链接attribute翻译成中文术语为“特性”,property翻译成中文术语为“属性”,从中文的字面意思来看,确实是有点区别了,先来说说attribute。attribute是一个特性节点,每个DOM元素都有一个对应的attributes属性来存放所有的attribute节点,attribute更强调区别于其他事物的特质/特性。attributes是一个类数组的容器,说得准确转载 2015-10-20 13:24:59 · 597 阅读 · 0 评论 -
js实现拖拽效果
当拖拽元素时,由js中的鼠标按下、鼠标移动和鼠标释放三个事件相继触发function drag(ele,subEle){//ele为要移动的元素,subEle为ele元素的子元素,当鼠标在subEle元素上按下时,触发鼠标按下事件 subEle.onmousedown=function(event){ var rLeft=event.clientX-ele.offsetLef原创 2015-11-23 15:57:30 · 943 阅读 · 0 评论 -
节点的nodeName与nodeValue
检测节点时 为了实现浏览器的兼容性 使用nodeType检测节点if(someNode.nodeType==1){alert("Node is an element");}检测各个节点 所得的结果节点类型nodeNamenodeTypeElement(元素节点)元素标签名(DIV)nullAttr(属性节点)属性名称(div)原创 2015-11-02 18:28:28 · 748 阅读 · 0 评论 -
js中css样式的操作
HTML中定义样式的方式有三种:通过元素包含外部样式表文件、使用元素定义嵌入式样式,以及使用style特性定义针对特定元素的样式。“DOM2级样式"模块围绕这3种应用样式提供了一套API。要确定浏览器是否支持DOM2级定义的CSS能力,可以使用下列代码:var supportsDOM2CSS=document.implementation.hasFeature("CSS","2.0";var原创 2016-01-17 18:00:50 · 2740 阅读 · 0 评论 -
js中元素大小操作
1 偏移量元素的偏移量包括元素在屏幕上占据的所有可见空间。元素的可见大小有其高度、宽度决定,包括所有内边距、滚动条和边框大小(不包括外边距)。通过下列四个属性可取得元素的偏移量offsetHeight:元素在垂直方向上占用的空间大小,以像素计。包括元素的高度、(可见的)水平滚动条的高度、上边框高度和下边框高度。其结果是一个数值 不包括单位offseWidth:元素在水平方向上占用的空间原创 2016-01-18 11:08:18 · 1708 阅读 · 0 评论 -
Dom中的范围
DOM2级在Document类型中定义了createRange()方法。在兼容DOM浏览器的浏览器中,这个方法属于document对象。使用hasFeature()或者直接检测该方法,都可以确定浏览器是否支持范围var supportRange=document.implementation.hasFeature("Range","2.0");如果浏览器支持范围,那么就可以使用create原创 2016-01-19 18:45:59 · 840 阅读 · 0 评论 -
js实现侧边栏效果
模仿淘宝的侧边栏效果 最终实现的效果图如下所示该侧边栏对应的html代码如下 需要说明的是该实例中的图标都是通过引用bootstrape中的图标实现的。另外,菜单项中的li的id和菜单项所对应的div的id是根据一定规律命名的,都是li的id后加“-content"命名的 ,方便以后的js操作 我原创 2016-01-11 15:13:31 · 9090 阅读 · 0 评论 -
用js实现时间效果
window.onload=function(){ showTime(); } function format(num){ if(num<10){ num="0"+num; }return num; } function showTime(){ var getD=new Array(); getD[0]="星期日"; getD[1]="星期一"; get原创 2015-11-27 16:35:26 · 467 阅读 · 0 评论 -
XSS攻击与CSRF攻击
XSS攻击与CSRF攻击XSS攻击XSS(Cross SiteScript)跨站脚本攻击,是Web程序中常见的漏洞,XSS属于被动式且用于客户端的攻击方式,所以容易被忽略其危害性。其原理是攻击者向有XSS漏洞的网站中输入(传入)恶意的HTML代码,当其它用户浏览该网站时,这段HTML代码会自动执行,从而达到攻击的目的。如,盗取用户Cookie、破坏页面结构、重定向到其它网站等。XSS攻击类似于S原创 2016-04-12 17:47:43 · 1617 阅读 · 0 评论 -
异步模块定义--AMD
AMDAMD是“asynchronous Module Definition”的缩写,意思就是“异步模块定义”, 它采用异步方式加载模块,模块的加载不影响他后面语句的运行。所有依赖这个模块的语句, 都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。 AMD采用require()语句加载模块,它要求两个参数require([module],callback);第一个参数[modu原创 2016-04-10 13:59:35 · 1065 阅读 · 0 评论 -
前端性能优化--文件位置问题
JS 和 CSS 在页面中的位置,会影响其他资源(指 img 等非 js 和 css 资源)的加载顺序,究其原因,有三个值得注意的点:JS 有可能会修改 DOM。 典型的,可能会有 document.write. 这意味着,在当前 JS 加载和执行完成前,后续所有资源的下载有可能是没必要的。这是 JS 阻塞后续资源下载的根本原因。JS 的执行有可能依赖最新样式。比如,可能会有 var width原创 2016-04-10 14:42:01 · 520 阅读 · 0 评论 -
ECMAScript6的新特性--数据类型
1 let命令ECMAScript6新增了let命令,用来声明变量。它的用法类似与var, 但是所声明的变量只在let命令所在的代码块有效。for(let i=0;i<5;i++){ console.log(i);}console.log(i);//error上面代码在for循环代码块中输出i的值时 输出的值分别为0、1、2、3、4、5, 但在for循环外输出i的值时,系统报错。这原创 2016-04-10 15:16:53 · 1084 阅读 · 0 评论 -
视频播放问题总结
最近一直在研究视频播放的问题,在研究过程中遇到很多问题,在这里总结一下遇到的问题和解决方法关于视频文件类型现在,视频文件可以大致分为两类:其一是 影像文件 ,比如说常见的VCD便是一例。其二是流式视频文件,比如说在线实况转播,就是构架在流式视频技术之上的。流式视频(Streaming Video)采用一种“边传边播”的方法,即先从服务器上下载一部分视频文件,形成视频流缓冲区后实时播放,同时继续下载,原创 2017-09-12 17:03:25 · 1742 阅读 · 0 评论