习术-JS

原创 2015年11月19日 20:42:20

放下对象

要理解 JavaScript,你得首先放下对象和类的概念,回到数据和代码的本原。编程世界只有数据和代码两种基本元素,而这两种元素又有着纠缠不清的关系。JavaScript 就是把数据和代码都简化到最原始的程度。

所谓“对象化”,就是可以将数据和代码组织成复杂结构的能力。JavaScript 中只有 object 类型和 function 类型提供了对象化的能力。

JavaScript 中只有 object 类型和 function 类型提供了对象化的能力。

执行顺序

情景分析

情景1

var myfunc = function ()
{
    alert("hello");
};
myfunc(); //第一次调用 myfunc,输出 hello
myfunc = function ()
{
    alert("yeah");
};
myfunc(); //第二次调用 myfunc,将输出 yeah

情景2

function myfunc ()
{
    alert("hello");
};
myfunc(); //这里调用 myfunc,输出 yeah 而不是 hello
function myfunc ()
{
    alert("yeah");
};
myfunc(); //这里调用 myfunc,当然输出 yeah

JavaScript 执行引擎并非一行一行地分析和执行程序,而是一段一段地分析执行的。
而且,在同一段程序的分析执行中,定义式的函数语句会被提取出来优先执行。
函数定义执行完之后,才会按顺序执行其他语句代码。
也就是说,在第一次调用 myfunc 之前,第一个函数语句定义的代码逻辑,已被第二个函数定义语句覆盖了。所以,两次都调用都是执行最后一个函数逻辑了。

一段代码中的定义式函数语句会优先执行,这似乎有点象静态语言的编译概念。所以,这一特征也被有些人称为:JavaScript 的“预编译”。

技术点

特性

通常来说,浏览器对于Javascript的运行有两大特性:
1)载入后马上执行
2)执行时会阻塞页面后续的内容(包括页面的渲染、其它资源的下载)。于是,如果有多个js文件被引入,那么对于浏览器来说,这些js文件被被串行地载入,并依次执行。
 因为javascript可能会来操作HTML文档的DOM树,所以,浏览器一般都不会像并行下载css文件并行下载js文件,因为这是js文件的特殊性造成的。所以,如果你的javascript想操作后面的DOM元素,基本上来说,浏览器都会报错说对象找不到。因为Javascript执行时,后面的HTML被阻塞住了,DOM树时还没有后面的DOM结点。所以程序也就报错了。

1. 加载顺序:引入标记script的出现顺序

页面上的Javascript代码是HTML文档的一部分,所以Javascript在页面装载时执行的顺序就是其引入标记

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题 3</title> 
<script>
    alert("1-最先执行"); 
</script> 
</head> 
<body onload="alert('3-最后执行');"> 
<script>
    alert("2-接着执行"); 
</script> 
</body> 
</html>

基本概念

函数-function

定义式函数

function myfunc()
{
    alert("hello");
};

变量式函数

var myfunc=function myfunc()
{
    alert("hello");
};

原生JS+canvas粒子连线效果

  • 2017年12月14日 10:14
  • 3KB
  • 下载

【Chart.js】通过Ajax请求JSON数据来绘制图表

背景   在使用Chart.js绘制图表时,我们通常会有这样的需求:从后台方法动态获取图表的数据,而非Demo中使用的静态数据。本文将分享如何使用Ajax动态请求JSON数据并且完成图表的绘制。 ...

The Majesty Of Vue.js

  • 2017年12月13日 09:37
  • 8.89MB
  • 下载

js unicode加解码

  • 2017年12月11日 15:03
  • 913B
  • 下载

个人比较喜欢的JS网页跳转传值

首先,在未跳转的网页里写下: function JumpToRoute() {         window.location.href = "route?originalHTML=1";   ...

Jquery,js的逐帧动画实现

  • 2017年12月07日 10:09
  • 88KB
  • 下载

解决下载下来的flexgrid.js下载下来直接使用数据不能显示的问题

在我们下载下来flexigrid.js之后在前台页面上调用之后,有时你会发现在显示数据的时候,数据根本显示不出来,这其实是下载下来的flexigrid.js有错误,我们需要修改里面的内容已达到我们数据...

DWR框架包(包含所有jar、js)

  • 2017年12月04日 15:05
  • 791KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:习术-JS
举报原因:
原因补充:

(最多只允许输入30个字)