Html5 頁面中 JavaScript 啟動調用的三種方法比較

Html5 頁面中 JavaScript 啟動調用的三種方法比較

Html5 頁面中 JavaScript 啟動調用的三種方法比較

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

本文遵循“署名-非商業用途-保持一致”創作公用協議

轉載請保留此句：太陽火神的美麗人生 - 本部落格專註於 敏捷開發及移動和物聯裝置研究：iOS、Android、Html5、Arduino、pcDuino，否則，出自本部落格的文章拒絕轉載或再轉載，謝謝合作。

首先，來看一下 Html5 頁面引用 JavaScript 代碼的幾種方式：

1、Html5 頁面中使用 <script> 標籤容納 JavaScript 代碼；

     <script>        init();     </script>

這裡不僅可以調用任意位置的函數，而且可以聲明變數，構建函數和對象等等。

2、Html5 頁面中使用 <script src="xxx.js"></script> 引入同路徑下的 xxx.js 檔案中的 JavaScript 代碼；

<script src="js/main.js"></script>

注意這裡的 main.js 是與當前 Html 分頁檔同目錄下的 js 子目錄中的檔案，使用時，確保相對路徑正確，當然了，也可以使用絕對路徑。

3、Html5 介面元素事件直接賦與一段 JavaScript 代碼；

此處可參考 javascript設定onclick

以下資源可供參考，進一步理解 JavaScritp：JavaScript的5種調用函數的方法

解讀ECMAScript[1]——執行環境、範圍及閉包

解讀ECMAScript[2]——函數、構造器及原型

百度百科 javascript

要想真正掌握 JavaScript 語言，那麼閉包是必須要深刻理解和領悟的核心。

順便，記錄一下引用 CSS 的幾種方式：

1、外部樣式表

css 樣式存於一個 .css 副檔名的檔案中，引用方式：

2、內部樣式表

    page標題    

3、內聯樣式

更詳細的 CSS 運用，可參考 CSS 選取器及各樣式引用方式介紹 。

最後，切入主題，頁面載入初始調用 JavaScript 代碼的三種方式：

1、body 的 onload 事件觸發回調 JavaScript 函數；

該事件在 document 文檔中的所有內容都載入完成後才會被調用，這種方式顯得有點笨拙，但比較把握，確保一切安好，才去調用。

如想避勉過多載入，那麼頁面設計上可以相對講究些方法，人為達到滯後載入的效果，就可以給這個事件進行減壓，達到儘快執行的目標。

2、document 的 onready 事件觸發回調 JavaScript 函數；

    document.onready = init();

該事件在 document 文檔中的 dom 模型載入完成就會產生回調，而不考慮引用的圖片、指令碼等資源。

3、在引入 Html5 頁面的 JavaScript 代碼中，直接調用 JavaScript 函數或執行 JavaScript 命令；

        <script>            init();                    </script>

或在外部 js 指令碼中，直接調用 init();

init() 可以是 Html5 頁面中聲明的函數，也可以是外部參考的指令碼中的函數。

不過發現一個有趣的問題，當在 init() 函數定義中，通過

document.getElementById('container');

擷取 container 元素的引用時，如果該 Html5 元素在該段頁面內 JavaScript 代碼之後時，會擷取不到該元素。

這說明一個問題，第三種啟動執行方式，是邊載入邊執行，所以對順序有要求；

每時每刻，都有老人變新人，老手涉獵新事物，變潮人，接觸陌生的領域，變新手。

凡事都有這個過程，新領域的成熟與否，其實你與無太大關係，你還是一樣的新；

但這個領域的成熟，標誌著，有這麼多別人分享的東西，可供參考，內在的 bug 也會少很多；

但無論怎樣，在你的頭腦裡，還是需要一點點去塞滿，

並不代表，這個領域有多少，你就有多少，

也不代表，你一下子就能把這個領域成熟的東西就全能掌握，

那是需要不斷理解、實踐，總結、升華，以便再進一步擷取更深層次理解的過程，

唐僧取到的經書，如果不被水泡了，可能我們真的就能去掉這個理解的過程了，

悟性確實是可以很高的，這個高真能達到不需要理解的過程？！

。。。。。。