分类: JavaScript

记录点滴,修炼自己。
0

JavaScript中比较运算的详细总结

前言  在javascript开发中,比较操作是十分常见的。由于显式/隐式强制类型转换机制的存在,我们在使用比较运算时显得过于随意,也许表面上看并没有什么错误(比如在if()语句中判断两值相等时顺手就写成 == ),但是这可能会埋下很多不易发现的隐患。对于比较操作(相等关系和不等关系),在javascript中其实是有一套完善的机制的。本文依据ES5规范《ECMAScript Language

0

JavaScript中对象属性存在性及相关检测方法总结

前言  访问一个对象中的某个属性时,返回的结果可能是undefined,这有可能是本身该属性存储的值就是undefined,也有可能是该属性在对象中不存在。对此,就产生了判断属性存在性的相关问题和解决方法。 in操作符语法格式1234567var obj = { name : "Bob", age : 24};("name" in obj); //true("sex" i

0

【探究】当页面关闭时,不同浏览器对尚未完成的异步请求如何处理?

前言  以使用$.ajax()方法发出一个异步请求为例,探究当执行完发出异步请求的同步代码但尚未执行异步回调的函数的时候,关闭浏览器,不同浏览器对此有何处理。并且,这个问题是因为看到了一种不规范写法而发现的—场景是,执行完相关保存任务(异步请求)后关闭当前页面。这种写法把window.close()相关代码却写在了$ajax()的外面(后面)。违背了在成功保存的回调内关闭页面的做法。 Chro

0

JavaScript中的对象、constructor属性、prototype属性对比分析

前言  首先想说的是,这篇文章的题目准确怎么定我就考虑了不少时间。想过“JavaScript中的对象及其constructor属性和prototype属性”,想过“JavaScript中的对象、构造函数对象(constructor)和原型对象(prototype)”等等,但总觉得不够清楚。说实话现有的这个题目也不一定是很好的,只是相比较之下,选择一个“三者相对独立”的说法,这样就不会有先入为主的

0

JavaScript中值传递和引用传递的典例探究

概述  在Javascript中,基本类型(null, undefined, number, string, boolean, symbol)是通过值传递方式进行,而复合类型(object, array, function)则是通过引用传递方式进行。  但是,由于Javascript工作机制所决定,在js中,引用指向的其实是值,而无法指向其他引用,这和其他语言中的指针并不相同。  其实,两者都可

0

JavaScript中创建对象的7种模式和实现继承的6种方式

前言  JavaScript是一种面向对象(OO)的语言,但由于ECMAScript没有类的概念(ES6引入关键字class),所以在js中创建对象的方法也与其他基于类的语言有所不同。本篇总结在JavaScript中创建对象的7种方法;并在此基础上,总结实现继承的6种方式。 JavaScript中对象的基本概念创建对象的2种基本方法 创建一个Object实例123456789101112131

0

关于JavaScript生成器generator和yield的一些理解

综述  Generator(生成器)函数是ES6提供的一种异步编程解决方案,而yield则是配合生成器函数使用的。 Generator函数定义  function* 声明(function关键字后跟一个星号)定义一个generator(生成器)函数,返回一个Generator对象。 语法function* name([param[, param[, ... param]]]) { statem

0

JavaScript中的__proto__、[[prototype]]和prototype

前言  proto、[[prototype]]和prototype三个概念及相关内容是javascript比较复杂且容易混淆的内容。本文尝试进行总结和分析。 prototype相关介绍  待续。 __proto__与[[prototype]]相关介绍  待续。 一张图分析三者的关系 一系列案例分析12345function Foo(){ console.log(1);}

0

JavaScript的预加载与懒加载

预加载目的  增强用户的体验,当用户需要查看时可直接从本地缓存中渲染。。否则,如果一个页面的内容过于庞大,没有使用预加载技术的页面就会长时间的展现为一片空白。但会加载服务器的负担。并且,如果不设置预加载,那么当需要渲染十分大的图片时,可能就会有“逐行扫描渲染”的感觉,用户体验不好。使用预加载的话,我们可以在图片完整渲染完成之前在页面上设置“loading”类的图标提示,而当图片数据完全获取后一次

0

JavaScript中的事件传播机制

前言  javascript与html的交互是通过事件实现的。在DOM2级模型中,为DOM元素绑定的事件有一套完整的事件传播机制,主要有3个阶段,本文进行小结。 ##

0

$(document).ready与window.onload的区别

document.ready执行时机  只要页面DOM结构绘制完毕就执行,不必等到外部资源(图片,css等)加载完毕。 并且,在jquery中,$(function(){}) 和$(document).ready(function(){})两种写法是等价的。 特点  在同一个页面中可以写多次,会顺序执行,见下面测试。 window.onload执行时机  必须等到页面内包括图片的所有元素加载完

0

JavaScript异步编程案例

【转载】阮一峰 Javascript异步编程的4种方法 前言你可能知道,Javascript语言的执行环境是”单线程”(single thread)。 所谓”单线程”,就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推。 这种模式的好处是实现起来比较简单,执行环境相对单纯;坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执

0

使用原生js实现元素拖拽功能

前言  本篇仅对拖拽过程中核心几个事件监听的写法进行小结,不涉及页面样式效果的展现。 实现1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818

0

JavaScript的call()、apply()、bind()方法对比总结

前言  JavaScript中的函数其实就是一种对象。函数对象也有自己的很多方法。其中,call()方法和apply()方法就是两个用来间接调用函数的方法。两个方法都允许显式地指明调用时的上下文环境(即this的值)。也就是说,这给我们提供了一种自由—任何函数可以作为任何对象的方法来进行调用。并且,两个方法也都允许显式地指明调用时需要用到的实参。函数经call()或apply()调用后会立即执行

0

使用JavaScript实现三级联动和实时搜索

前言  本篇仅对三级联动和实时搜索的核心给出说明,对于页面设计、整个工程结构等不做说明。 三级联动根据交互操作异步触发获取第一列数据12345678910111213141516171819202122232425262728293031323334353637383940//异步请求第一列数据-可选指标名称 $.ajax({ type: "POST", async:

0

JavaScript的caller属性和callee属性对比总结

背景  要说这两个方法,必须先说另一个东西—实参对象(arguments)。标识符arguments是指向实参对象的引用。当传入某个函数的参数个数超过函数定义时指定的形参个数时,默认的处理方法是自动忽略多出来的参数。也就是说,默认这不会引起错误。但是这会有另一个问题:无法获取多出来的参数的引用了(无法知道多出来的参数具体值是什么)。这也正是实参对象arguments可以解决的问题。通过argum

0

JavaScript数组方法对比总结

前言  本文对JavaScript中数组类型(Array)的常用方法进行总结,主要包括其API,使用示例和是否直接操作/修改原数组的分析。文章最后会对ECMAScript5中提供的数组方法进行小结。 join()作用  将数组元素衔接为字符串。参数  array.join()  array.join(separator)  separator: 在返回的拼接字符串中,用以连接原来数组元素的分隔

0

使用JavaScript实现轮播图效果(JavaScript运动框架案例)

前言  轮播图组件是一种网站中常见的表现形式。常用于广告位,头条新闻等重要信息的展示而且将图片和信息结合起来,引人注意。轮播图最重要的自然是“轮播”,也就是要让页面中的DOM元素“动”起来。这就自然需要先简单提一下JavaScript的运动框架。 JavaScript运动框架简介  JavaScript运动框架就是指利用js和DOM元素配合,利用js的相关函数以一定的频率操作改变DOM元素的位置

0

Array.prototype.slice.call()的典型应用

作用  一句话来讲,这是一种将类数组对象转换为真正数组的方法。很多时候我们会遇到“类数组对象”,比如在操作DOM元素的时候,查询符合某种class的DOM节点会返回一个NodeList,它就是一个类数组对象。真正数组的很多成员方法不能直接用于类数组对象,因此就需要将其转换为真正的数组。 示例123456789Function.prototype.bind = function(context)

0

JavaScript双向选择器的实现

前言  双向选择器是网站中经常使用的一种组件,适合于要求用户输入固定的一个或多个标签内容的场景,这种格式比普通input输入框的交互方式更加友好,而且可以防止因用户输入的随意性而导致的其他多余工作(比如表单验证)甚至错误。 效果  在说具体细节之前,可以先看一下效果,下图中就实现了一个最基本的双向选择器。 注意事项1.以上组件的编写没有基于原生的CSS,而是引入了AmazeUI框架,利用了