JavaScript
文章平均质量分 67
筱葭
这个作者很懒,什么都没留下…
展开
-
浅谈JavaScript的浮点数值
浮点数的最高精度是17位小数,但在进行算术运算时其精确度远远不如整数,0.1+0.2的结果不是0.3,而是0.30000000000000004。这个小小的舍入误差会导致无法测定特定的浮点数值,如if (0.1 + 0.2 == 0.3)得到的是false。JS的浮点数值必须包含一个小数点,且小数点后面必须至少有一位数字,虽然小数点前面可以没有整数,但不推荐这种写法。由于保存浮点数原创 2017-03-16 10:52:00 · 452 阅读 · 0 评论 -
浅谈JavaScript中的函数作用域
函数作用域的含义:属于此函数的全部变量都可以在整个函数的范围内使用及复用,实际上在嵌套的作用域内也可以使用。 1、隐藏内部实现:对函数的传统认知:先声明一个函数,再向里面添加代码。试想,若从所写的代码中挑选出一个任意的片段,再用函数声明对其进行包装,可以实现将这段代码隐藏起来——这段代码中的任意声明(变量或函数)都会绑定到新的函数作用域中,而不是在先前所在的作用域中。也就是说,可以把变原创 2017-04-05 11:00:51 · 533 阅读 · 0 评论 -
浅谈JavaScript变量提升与函数提升
从两个实例说起:eg1:var i;console.log(i); // 2eg2:console.log(i); // undefinedvar i = 2; 1、提升变量和函数声明从它们在代码中出现的位置被提升到了最上面。注意:只有声明本身会被提升,而赋值操作不会被提升。变量会提升到其所在函数的最上面,而不是整个程序的最上面。函数声明会被提升,但原创 2017-04-05 11:42:55 · 699 阅读 · 0 评论 -
浅谈JavaScript异步加载的三种方式——async和defer、动态创建script
1、defer="defer"和async="true/false"html4.0中定义了defer;html5.0中定义了async。(1)没有defer或async,浏览器会立即加载并执行指定的JS脚本,也就是说,不等待后续载入的文档元素,读到JS脚本就加载并执行。(2)有async,加载后续文档元素的过程将和JS的加载与执行并行进行(异步)。(3)有defer,加载后续文档元原创 2017-03-03 21:30:00 · 11235 阅读 · 0 评论 -
浅谈JavaScript内存泄漏
1、当页面中元素被移除或替换时,若元素绑定的事件仍没被移除,在IE中不会作出恰当处理,导致内存泄露。 var btn = document.getElementById("btn"); btn.onclick = function(){ ......} 解决方法:① 手动移除元素绑定的事件var btn = document.getElementById("btn");原创 2017-03-04 21:23:19 · 432 阅读 · 0 评论 -
浅谈JavaScript与JSON
1、JSONJSON:JavaScript Object Notation,JavaScript面向对象表示法。JSON与JavaScript语法类似,容易理解,可以将JSON数据解析成有用的JavaScript对象。 2、JSON数据类型(1)简单数据类型:字符串、数值、布尔值,null(不支持JavaScript的 undefined)(2)对象:无序的键值对(3)原创 2016-12-10 16:19:15 · 654 阅读 · 0 评论 -
浅谈JavaScript严格模式
除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode)。顾名思义,这种模式使得Javascript在更合理、更安全、更严谨的条件下运行。进入严格模式的标识为 "use strict"。① 严格模式有两种调用方法:1) 将"use strict"放在脚本文件的第一行,指定整个脚本都以严格模式运行。2) 将"use str原创 2017-03-03 17:13:38 · 511 阅读 · 0 评论 -
浅谈jQuery对象和DOM对象
DOM对象是原生JavaScript获得的对象,可以使用原生JavaScript的方法,但不能使用jQuery的方法。jQuery对象是用jQuery的$选择器获得的对象,是通过jQuery包装DOM对象后产生的对象,是jQuery独有的,可以使用jQuery的方法,但不能使用DOM的方法。 jQuery对象和DOM对象的相互转换:1) jQuery对象转换成DOM对象:由于j原创 2017-04-14 19:20:58 · 423 阅读 · 0 评论 -
浅谈JavaScript实现文本框的placeholder
代码: window.onload = function() { var defaultValue = "请输入关键词"; var input = document.getElementById("input"); input.style.color = "grey"; input.on原创 2017-04-14 20:56:13 · 898 阅读 · 0 评论 -
浅谈Array.prototype.map(func)方法的实现
var arr1 = [1,2,3,4,5];alert(arr1.map( function(element) { return element * 2; })); // 输出:[2,4,6,8,10]function MyArray(arr) { this.arr = arr;}MyArray.prototype.map = function(func) { var n原创 2017-03-15 19:15:58 · 524 阅读 · 0 评论 -
浅谈JavaScript和Canvas实现彩色图片转换成黑白图片
1、convertToGray()在主体代码中使用 canvas 元素的id来获取画布,并设置画布的宽和高为图片的宽和高,再将上下文初始化为2d画布;彩色图片加载完成后,使用 drawImage 将图片加载到上下文,调用用于完成剩余绘制工作的 getColorData()和 putColorData();最后为myImage指定彩色图片的路径。2、getColorData()使原创 2017-03-13 11:35:02 · 3572 阅读 · 0 评论 -
浅谈JavaScript表单
浅谈表单脚本一、表单的基础知识取得元素引用的方式:1) 为元素添加id,然后通过getElementById()方法来访问;var myForm = document.getElementById("form1");2) 通过document.forms取得页面中的所有表单,再通过下标或name值来访问:① 通过下标:var myForm = document.form原创 2017-04-17 19:30:22 · 679 阅读 · 0 评论 -
浅谈三种方法实现一个圆形的可点击区域
方法一:+ 方法二:border-radius#circle{ background:red; width:100px; height:100px; border-radius:50%;}方法三:纯JavaScriptdocument.onclick = function(e) { var r = 50; var x1 = 100原创 2017-02-28 16:10:05 · 3812 阅读 · 0 评论 -
浅谈JavaScript设计模式——单例模式
单例模式的定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点。单例模式是一种常用的模式,有些对象只需要一个,如线程池、全局缓存、浏览器中的window对象等,这时候可以用到单例模式。单例模式典型的应用场景:单击按钮时,页面中会出现一个登陆浮窗,而该登录浮窗是唯一的,无论单击多少次按钮,这个浮窗都会被创建一次,则适合用单例模式创建。全局变量不是单例模式,但在JavaScript开原创 2017-04-01 17:17:58 · 2364 阅读 · 0 评论 -
浅谈JavaScript继承
1、构造函数、原型和实例的关系构造函数有一个原型属性prototype指向一个原型对象; 原型对象包含一个指向构造函数的指针constructor ;实例包含一个指向原型对象的内部指针[[prototype]] 。 2、通过原型链实现继承基本思想:利用原型让一个引用类型继承另一个引用类型的属性和方法,子类型可以访问超类型的所有属性和方法。原型链的构建是将一个类型的实例赋值给原创 2016-12-08 15:40:54 · 438 阅读 · 0 评论 -
浅谈JavaScript函数中的apply()和call()方法的用途和异同
JavaScript的函数是对象,因此有属性和方法。每个函数都包含两个属性:length和prototype,每个函数都包含两个非继承而来的方法:apply()和call()。今天先来介绍一下前端面试中经常问到的apply()和call()的区别吧!这两个方法的作用是在函数调用时改变函数的执行上下文,也就是函数内的this,apply()方法接收两个参数,一个是在其中运行函数的作用域,另一原创 2016-10-13 15:07:09 · 515 阅读 · 0 评论 -
浅谈JavaScript设计模式——构造器模式(生成器模式)
工厂模式虽然解决了重复实例化的问题,但无法识别对象类型。可以采用构造函数(构造方法)可用来创建特定的对象,可以解决工厂模式无法识别对象实例的问题。也就是说,使用构造函数的方法 ,即解决了重复实例化的问题 ,又解决了对象识别的问题。构造器模式与工厂模式的不同之处在于:① 构造函数方法没有显示的创建对象 (new Object());② 直接将属性和方法赋值给 this 对象;原创 2017-04-02 15:25:07 · 801 阅读 · 0 评论 -
浅谈JavaScript设计模式——工厂模式和抽象工厂模式
1、工厂模式:虽然Object构造函数和对象字面量都可以用来创建单个对象,但这个方式有个明显的缺点:使用同一个接口创建很多对象,会产生大量重复的代码。为了解决这个问题,开始使用工厂模式。利用工厂模式,可以实现不指定特定的类而创建出对象,也就是说,不需要使用new关键字来创建特定类或子类的实例。var TravelTeam = function(){};TravelTeam.proto原创 2017-04-02 16:20:06 · 1327 阅读 · 0 评论 -
浅谈JavaScript模拟事件和自定义事件
1、DOM中的事件模拟1) DOM中的事件模拟有以下3个步骤:步骤1:创建事件对象event可以在document对象上使用createEvent()方法创建event对象,此方法接收一个参数,即要创建的事件类型的字符串。在DOM2级中这些字符串都使用英文复数形式,而在DOM3级中都变成了单数。这个字符串可以是以下几个字符串之一:① UIEvents:一般化的UI事件,鼠标事件和键原创 2017-03-24 23:02:53 · 3864 阅读 · 0 评论 -
浅谈JavaScript设计模式——观察者模式(发布订阅模式)
观察者模式,又称为发布订阅模式,它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己的状态。 在观察者模式中,并不是一个对象调用另一个对象的方法,而是一个对象订阅另一个对象的特定活动并在状态改变后获得通知。订阅者也称为观察者,而被观察的对象称为发布者或主题。当发生了一个重要的事件时,发布者将会通知(原创 2017-04-02 17:18:22 · 2169 阅读 · 0 评论 -
浅谈JavaScript中的五种为事件指定处理程序的方式
JavaScript和HTML之间的交互是通过事件实现的。 IE9、Firefox、Opera、Sarifi、Chrome都已经实现了DOM2级事件模块的核心部分,IE8是最后一个仍然使用其专有事件系统的主要浏览器。 事件流:事件流描述的是从页面中接受事件的顺序,但IE和Netscape却提出了完全相反的事件流的概念,IE的事件流是事件冒泡流,而Netscape的事件流是事件捕原创 2017-03-24 11:22:23 · 1087 阅读 · 0 评论 -
浅谈数组全排列、去重、求最大值的JavaScript实现
1、全排列(递归)function permutation(arr){ if (arr.length == 1) return arr; else if (arr.length == 2) return [[arr[0],arr[1]],[arr[1],arr[0]]]; else { var temp = []; for (var i = 0; i < arr.leng原创 2017-03-15 21:17:50 · 1780 阅读 · 0 评论 -
浅谈JavaScript事件的内存与性能
在JavaScript中,添加到页面上的事件处理程序数量直接关系到页面的整体运行性能,导致这个问题的原因有几个:① 每个函数都是对象,都会占用内存,内存中的对象越多,性能就越差;② 必须事先指定所有事件处理程序而导致的DOM访问次数,会延迟整个页面的交互就绪时间。因此,必须利用好事件处理程序,才能提高JavaScript的性能。 事件委托:对事件处理程序过多的问题的解决方案原创 2017-03-24 18:42:48 · 425 阅读 · 0 评论 -
浅谈JavaScript对象的浅拷贝和深拷贝
1、浅拷贝仅仅复制对象的引用,而不是对象本身。var person = { name: 'Alice', friends: ['Bruce', 'Cindy']}var student = { id: 30}student = simpleClone(person, student);student.friends.push('David');alert(person.f原创 2017-04-22 21:10:58 · 402 阅读 · 0 评论 -
浅谈原生JavaScript实现remove()和recover()
利用原生JavaScript实现:remove(selectors)删除指定的一个或一组元素recover(selectors)恢复刚才删除的元素原创 2017-04-25 15:10:52 · 8304 阅读 · 0 评论 -
浅谈childNodes和children以及firstChild和firstElementChild
1、childNodes属性:返回指定元素的子节点集合,包括元素节点和文本节点。除了IE9和Firefox,其他浏览器都支持通过childNodes[i]获取第i个子节点。 2、children属性:返回指定元素的子元素集合,只包括元素节点,不包括文本节点。除了IE9和Firefox,其他浏览器都支持通过children[i]获取第i个子节点。注意:children在I原创 2017-05-06 17:10:17 · 1836 阅读 · 0 评论 -
浅谈JavaScript高级选择器querySelector和querySelectorAll
querySelector和querySelectorAll根据CSS选择器规范,便捷定位文档中指定元素,主流浏览器均支持:包括IE8+、Firefox、Chrome、Safari、Opera。querySelector返回的是一个对象,querySelectorAll返回的一个集合(NodeList)。querySelector系列方法与getElementBy系列方法的区别:1原创 2017-04-25 11:32:47 · 1681 阅读 · 0 评论 -
浅谈JavaScript模拟$(HTML字符串)实现创建DOM对象
JavaScript里动态创建标准DOM对象一般使用:document.createElement()方法。但在实际使用过程中,可能会希望直接根据HTML字符串创建DOM节点,模拟$(HTML字符串)创建DOM对象的方法。1、思路:① 用document.createElement()方法创建一个div元素;② 用innerHTML来给div元素插入HTML字符串;③ 用div原创 2017-04-25 15:29:49 · 5026 阅读 · 2 评论 -
浅谈JavaScript类数组对象转换为数组对象
1、类数组对象:拥有length属性,可以通过下标访问;不具有数组所具有的方法。 2、为什么要将类数组对象转换为数组对象?数组对象Array有很多方法:shift、unshift、splice、slice、concat、reverse、sort,ES6又新增了一些方法:forEach、isArray、indexOf、lastIndexOf、every、some、map、filt原创 2017-04-25 10:49:00 · 1430 阅读 · 0 评论 -
浅谈循环中setTimeout执行顺序问题
期望:开始输出一个0,然后每隔一秒依次输出1,2,3,4。 for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, 1000 * i);}结果:输出5原因:setTimeout 使函数延迟1s执行,而for循环执行完成还不到0.1秒,到执行函数的时候,其实 i 已经变成5了,因此原创 2017-03-10 20:47:56 · 5630 阅读 · 0 评论 -
浅谈JavaScript空数组[]和空对象{}的布尔运算
空数组[]和空对象{}都是object类型:console.log(typeof []); // 控制台输出:objectconsole.log(typeof {}); // 控制台输出:object空数组[]转化为Number,会得到0;空对象{}转化为Number,会得到NaN:console.log(Number([])); // 控制台输出0console.lo原创 2017-03-06 15:14:26 · 5032 阅读 · 0 评论 -
浅谈JavaScript重写alert()方法
变量提升,是把变量声明提升提到函数顶部。注意:变量提升只是提升变量的声明,并不会提升变量的值。 var content = 'Hello World'; (function output(){ alert(content); var content='Welcome'; })() 输出:undefined等价于:var content = 'Hello Worl原创 2017-03-11 16:34:43 · 6891 阅读 · 1 评论 -
浅谈JavaScript对象数组根据某属性sort升降序排序
1、自定义一个比较器,其参数为待排序的属性。2、将带参数的比较器传入sort()。var data = [ {name: "Bruce", age: 23, id: 16, score: 80}, {name: "Alice", age: 24, id: 12, score: 90}, {name: "David", age: 21, id: 11, score: 70}, {na原创 2017-05-04 21:37:49 · 10688 阅读 · 0 评论 -
浅谈React实现todolist
todoList.html: todoList.jsx:var TodoList = React.createClass({ getInitialState: function() { return {lists: []} }, addList: function(list) { if (this.stat原创 2017-04-22 16:42:01 · 1164 阅读 · 0 评论 -
浅谈JSONP
JSONP是JSON with Padding的略称,是一个非官方的协议,允许在服务器端集成Script tags返回至客户端,通过JavaScript callback的形式实现跨域访问。JSONP比JSON外面有多了一层,callback()。也就是说,在服务器端需要先将查询结果转换成JSON格式,然后用参数callback在JSON外面再套一层,就变成了JSONP。(1)JSON格式原创 2017-03-16 10:27:16 · 493 阅读 · 0 评论 -
浅谈JavaScript实现关键字文本高亮显示
前端通常是指网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,现在最新的高级版本HTML5、CSS3,以及SVG等。 HTML、CSS、JavaScript是前端开发中最基本也是最必须的三个技能。前端的开发中,在页面的布局时, HTML将元素进行定义,CSS对展示的元素进行定位,再通过JavaScript实现相原创 2017-04-15 13:53:59 · 10719 阅读 · 0 评论 -
浅谈JavaScript的事件对象event
事件对象event包含导致事件的元素、事件的类型以及其他与特定事件相关的信息。1、DOM中的事件对象属性/方法类型说明bubblesBoolean表明事件是否冒泡cancelabelBoolean表明是否可以取消事件的默认行为currentTa原创 2017-03-24 17:38:55 · 757 阅读 · 0 评论 -
浅谈事件委托(事件代理)和事件冒泡
事件冒泡:子级元素的某个事件被触发,它的上级元素的该事件也被递归触发。事件委托:使用了事件冒泡的原理,从触发某事件的元素开始,递归地向上级元素传播事件。事件委托的优点:1) 对于要大量处理的元素,不必为每个元素都绑定事件,只需要在它们的父元素上绑定一次即可,提高性能。2) 可以处理动态插入DOM中的元素,对动态插入DOM中的元素进行直接绑定是不行的。关于事件原创 2017-03-09 10:52:19 · 4241 阅读 · 0 评论 -
浅谈事件冒泡和事件捕获的应用场景——事件代理/事件委托
采用事件代理,为页面中的所有a标签绑定click事件。document.addEventListener("click", function(e) { if (e.target.nodeName == "A") console.log("a");}, false);问题:若a标签里面仍有span、img等其他元素,上述代码中,单击span、img等其他元素不能触发click事件。原创 2017-04-16 22:45:07 · 7253 阅读 · 1 评论 -
浅谈函数节流
鼠标的mousemove、scroll,浏览器窗口的resize事件等,都是在短时间内重复触发。以onresize事件为例,若事件处理程序需要进行修改元素宽度高度等操作,那么频繁的触发事件会导致频繁的重绘页面。DOM操作比非DOM交互需要更多的内存和CPU时间,连续尝试进行过多的DOM相关操作可能会导致浏览器挂起,有时候甚至会崩溃。为了解决这个问题,需要使用定时器对该函数进行节流。函数节流原创 2017-04-16 20:25:16 · 7710 阅读 · 2 评论