Html5 页面中 JavaScript 启动调用的三种方法比较

Html5 页面中 JavaScript 启动调用的三种方法比较

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es)

本文遵循“署名-非商业用途-保持一致”创作公用协议

转载请保留此句：太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究：iOS、Android、Html5、Arduino、pcDuino，否则，出自本博客的文章拒绝转载或再转载，谢谢合作。

首先，来看一下 Html5 页面引用 JavaScript 代码的几种方式：

1、Html5 页面中使用 这里不仅可以调用任意位置的函数，而且可以声明变量，构建函数和对象等等。

2、Html5 页面中使用  引入同路径下的 xxx.js 文件中的 JavaScript 代码；

注意这里的 main.js 是与当前 Html 页面文件同目录下的 js 子目录中的文件，使用时，确保相对路径正确，当然了，也可以使用绝对路径。

3、Html5 界面元素事件直接赋与一段 JavaScript 代码；

此处可参考 javascript设置onclick

以下资源可供参考，进一步理解 JavaScritp：

JavaScript的5种调用函数的方法

解读ECMAScript[1]——执行环境、作用域及闭包

解读ECMAScript[2]——函数、构造器及原型

百度百科 javascript

要想真正掌握 JavaScript 语言，那么闭包是必须要深刻理解和领悟的核心。

顺便，记录一下引用 CSS 的几种方式：

1、外部样式表

css 样式存于一个 .css 扩展名的文件中，引用方式：

2、内部样式表

3、内联样式

更详细的 CSS 运用，可参考  CSS 选择器及各样式引用方式介绍 。
 

最后，切入主题，页面加载初始调用 JavaScript 代码的三种方式：

1、body 的 onload 事件触发回调 JavaScript 函数；

该事件在 document 文档中的所有内容都加载完成后才会被调用，这种方式显得有点笨拙，但比较把握，确保一切安好，才去调用。

如想避勉过多加载，那么页面设计上可以相对讲究些方法，人为达到滞后加载的效果，就可以给这个事件进行减压，达到尽快执行的目标。

2、document 的 onready 事件触发回调 JavaScript 函数；

    document.onready = init();

该事件在 document 文档中的 dom 模型加载完成就会产生回调，而不考虑引用的图片、脚本等资源。

3、在引入 Html5 页面的 JavaScript 代码中，直接调用 JavaScript 函数或执行 JavaScript 命令；

或在外部 js 脚本中，直接调用 init(); 

init() 可以是 Html5 页面中声明的函数，也可以是外部引用的脚本中的函数。

不过发现一个有趣的问题，当在 init() 函数定义中，通过 

document.getElementById('container');

获取 container 元素的引用时，如果该 Html5 元素在该段页面内 JavaScript 代码之后时，会获取不到该元素。

这说明一个问题，第三种启动执行方式，是边加载边执行，所以对顺序有要求；

每时每刻，都有老人变新人，老手涉猎新事物，变潮人，接触陌生的领域，变新手。

凡事都有这个过程，新领域的成熟与否，其实你与无太大关系，你还是一样的新；

但这个领域的成熟，标志着，有这么多别人分享的东西，可供参考，内在的 bug 也会少很多；

但无论怎样，在你的头脑里，还是需要一点点去塞满，

并不代表，这个领域有多少，你就有多少，

也不代表，你一下子就能把这个领域成熟的东西就全能掌握，

那是需要不断理解、实践，总结、升华，以便再进一步获取更深层次理解的过程，

唐僧取到的经书，如果不被水泡了，可能我们真的就能去掉这个理解的过程了，

悟性确实是可以很高的，这个高真能达到不需要理解的过程？！

。。。。。。