JavaScript的单线程性质以及定时器的工作原理



JavaScript的单线程性质以及定时器的工作原理。

How JavaScript Timers Work

从基础的层面来讲,理解JavaScript的定时器是如何工作的是非常重要的。计时器的执行常常和我们的直观想象不同,那是因为JavaScript引擎是单线程的。我们先来认识一下下面三个函数是如何控制计时器的。

  • var id = setTimeout(fn, delay); – 初始化一个计时器,然后在指定的时间间隔后执行。该函数返回一个唯一的标志ID(Number类型),我们可以使用它来取消计时器。
  • var id = setInterval(fn, delay);[......]

Read more

JavaScript字符串与数字的相互转换实例教程



JavaScript字符串与数字的相互转换实例教程。

js字符串转换成数字
js 字符串转换数字方法主要有三种:转换函数、强制类型转换、利用JS变量弱类型特点进行转换
1. 转换函数:js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数,后者把值转换成浮点数。只有对String类型调用这些方法,这两个函数才能正确运行;对其他类型返回的都是NaN(Not a Number)。
将字符串转换成数字,得用到parseInt函数。
parseInt(string) : 函数从string的开始解析,返回一个整数。
举例:
parseInt(“123[......]

Read more

this的使用方法,补充讲解javascript中的this关键字讲解

this的使用方法,补充讲解javascript中的this关键字讲解  。在之前的文章当中,已经讲解了this的常用的五种方法,也讲解了javascript中this的指向原则。

指向原则:永远指向其所在函数的所有者如果没有所有者时,指向window。
*理解this的要点:关键在于将函数与函数名分开看待。同一个函数,在不同的执行方法下,会有不同的效果。

今天主要要补充讲解的知识是,运用addEventListener和attachEvent方法进行事件绑定时,函数当中this的基本指向。
<body>
<div id=”div0″ class=”"&gt[......]

Read more

javascript浏览器的渲染原理简介

javascript浏览器的渲染原理简介。看到这个标题大家一定会想到这篇神文《How Browsers Work》,这篇文章把浏览器的很多细节讲得很细,而且也被翻译成了中文。为什么我还想写一篇呢?因为两个原因,

1)这篇文章太长了,阅读成本太大,不能一口气读完。

2)花了大力气读了这篇文章后可以了解很多,但似乎对工作没什么帮助。

所以,我准备写下这篇文章来解决上述两个问题。希望你能在上班途中,或是坐马桶时就能读完,并能从中学会一些能用在工作上的东西。

 

浏览器工作大流程

 

废话少说,先来看个图:

【转】浏览器的渲染原理简介 - 鬼眼邪神 - 鬼眼邪神

&nbsp[......]

Read more

JavaScript事件详细讲解实例源码

JavaScript事件详细讲解实例源码。前言:原本这篇文章是打算6号书写出来的,但是基于某些私人原因,希望能够通过这篇文章尽可能的将事件讲解的更加详细和通俗易懂,因此,多花了一天时间,不多说了,接下来对“事件”来一个较为详细的介绍。

需要了解事件的什么?

对于事件来讲,首先,我们需要了解这样几个概念:事件;事件处理程序;事件类型;事件流;事件冒泡;事件捕获;事件对象;事件方面的性能优化(事件委托、移除事件处理程序);常见的浏览器兼容问题。

事件的概念

事件:指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器(或者处理程序)来预定事件,以便事件发生的时候执行相[......]

Read more

javascript跨浏览器的事件处理函数处理DOM2级事件兼容

javascript跨浏览器的事件处理函数处理DOM2级事件兼容。在前面介绍到了有关事件的相关操作。主要涉及了事件处理程序;事件类型;事件流;事件方面的性能优化等很多事件的知识。本篇文章继续为大家讲解事件方面的东西,主要是如何书写能够跨浏览器的事件处理函数。目的是解决掉DOM2级的IE和FF(火狐)对事件不同的语法。

事件兼容
事件绑定:addEventListener与attachEvent
事件移除:removeEventListener与detachEvent
获取事件对象:e.target与 window.event.srcElement
阻止冒泡:e.stopPropa[......]

Read more

javascript如何获取body的scrollTop

javascript如何获取body的scrollTop?如何想要获取不同浏览器下body的scrollTop值?

首先,需要了解不同浏览器下的scrollTop差异:
iE 6/7/8 :
文档头部没有DOCTYPE声明 :需要使用document.body.scrollTop来获取scrollTop。
文档头部存在DOCTYPE声明 :需要使用document.documentElement.scrollTop来获取scrollTop。
Firefox / Chrome / Opera / iE 9+ 等:
使用document.documentElement.scroll[......]

Read more

javascript如何实现图片预加载与图片懒加载

javascript如何实现图片预加载与图片懒加载。

图片预加载
图片预加载主要是针对非icon类图片。
加载快,有良好的用户体验。
提前加载图片,当用户需要查看时可直接从本地缓存中渲染、可能因为图片很大,浏览器显示出它会用很长的时间,这样浏览者可能以为图片预览慢而没兴趣浏览,把网页关掉,这时,就需要图片预加载,让浏览区先显示其他的图片(一般使用LOGO)给浏览者看,等图片加载完了之后,再将图片显示。
预加载的意义:预加载可以说是牺牲服务的前段性能,换取更好的用户体验,这样可以使用户的操作得到更快的用户体验。
实现预载的方法
实现预载的方法非常多,可以用CSS(backgro[......]

Read more

javascript面向对象系列讲解之拖拽(继承知识)实战

javascript面向对象系列讲解之拖拽(继承知识)实战  。声明:为了方便大家学习和查看,所以特意控制了文章的篇幅,将面向对象写成了多篇连续博文的方式,也方便大家根据自己具体情况进行选择性的学习

在上一篇文章当中,我们讲解了面向对象的Tab切换书写方法,本文当中,我将为大家介绍拖拽的面向对象写法以及继承的基本知识。

首先,我们来书写一个拖拽的基本功能代码,在此就不贴代码了,直接上代码截图(毕竟这个原版的拖拽不是我们这次要讲解的重点)

面向对象系列讲解——拖拽(继承知识)实战 - 独行冰海 - 独行冰海

 

注意:这个拖拽是没有条件限制的拖拽

接下来按照我们上一篇文章中讲过的处理方法进行处理:

将函数进行提取,不允[......]

Read more

javascript面向对象系列讲解之Tab切换实战

javascript面向对象系列讲解之Tab切换实战。声明:为了方便大家学习和查看,所以特意控制了文章的篇幅,将面向对象写成了多篇连续博文的方式,也方便大家根据自己具体情况进行选择性的学习。

在上一篇文章当中,我们讲解了混合模式的书写方法,解释了如何使用new去解决这种工厂模式的缺陷,如何利用原型解决“方法”的重复创建。本文我将以Tab切换为实例,为大家讲解如何一步步将自己的代码修改为面向对象的代码。

进行基本结构和样式搭建:

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset=”UT[......]

Read more