jQuery入口函數

jQuery與JavaScript加載模式對比

• 多個window.onload只會執行一次, 后面的會覆蓋前面的

<script>
        window.onload = function () {
            alert("hello lnj1"); // 不會顯示
        }
        window.onload = function () {
            alert("hello lnj2"); // 會顯示
        }
</script>

• 多個$(document).ready()會執行多次,后面的不會覆蓋前面的

<script>
        $(document).ready(function () {
            alert("hello lnj1"); //會顯示
        });
        $(document).ready(function () {
            alert("hello lnj2"); // 會顯示
        });
</script>

• 不會覆蓋的本質(了解,后面jQuery原理會詳細講解)
  • jQuery框架本質是一個閉包,每次執行我們都會給ready函數傳遞一個新的函數,不同函數內部的數據不會相互干擾

<script>
        // 相當于這樣寫
        var test1 = function () {
            alert("hello lnj1");
        }
        var test2 = function () {
            alert("hello lnj2");
        }
        $(document).ready(test1);
        $(document).ready(test2);
</script>

<script>
        var test3 = function () {
            var abc = "123";
//            因為在同一個函數中,所以456覆蓋123
//            var abc = "456"; 
            alert(abc);
        }
        test3();
        var test4 = function () {
            // 因為在不同函數中,所以不會影響
            var abc = "456"; 
            alert(abc);
        }
        test4();
</script>

• 為什么我們能訪問$符號?

  • 因為$符號jQuery框架對外暴露的一個全局變量

• JavaScript中如何定義一個全局變量?

• 所有全局變量是 window 對象的屬性

        function test () {
            var customValue = 998;
            alert(customValue);
//            1.沒有如下代碼customValue就不是一個全局變量,函數執行完畢之后
//            customValue會被自動釋放,test函數以外的地方訪問不到customValue
//            2.加上如下代碼之后customValue就會變成一個全局變量,函數執行完畢也不
//            會被釋放,test函數以外的地方可以訪問customValue
//            window.customValue = customValue;
        }
        test();
        alert(customValue);

• 所以jQuery框架源碼實現

window.jQuery = window.$ = jQuery;

• 所以想要使用jQuery框架只有兩種方式,一種是通過$,一種是通過jQuery

• jQuery入口函數的其它編寫方式如下

<script>
        // 方式一
        $(document).ready(function () {
            alert("hello lnj");
        });
        // 方式二
        $(function () {
            alert("hello lnj");
        });
        // 方式三
        jQuery(document).ready(function () {
            alert("hello lnj");
        });
        // 方式四
        jQuery(function () {
            alert("hello lnj");
        });
</script>

解決$符號沖突問題

• 為什么是window.jQuery = window.$ = jQuery;,而不是window.jQuery = jQuery;

  • jQuery框架之所以提供了jQuery訪問還提供$訪問,就是為了提升開發者的編碼效率

• $符號沖突怎么辦?

  • 很多js的框架都提供了類似jQuery這樣的便捷訪問方式,所以很有可能某一天我們在使用多個框架的時,多個框架作者提供的便捷訪問方式沖突(A框架通過$訪問,B框架也通過$訪問)

• ***釋放$使用權

  • 當便捷訪問符號發生沖突時,我們可以釋放$使用權, 釋放之后只能使用jQuery

<script>
        // 在使用jQuery之前指定自定義符號
        jQuery.noConflict();
        // 使用 jQuery
        jQuery("div p").hide();
        // 使用其他庫的 $()
        $("content").style.display = 'none';
</script>

• 自定義便捷訪問符號
  • 當便捷訪問符號發生沖突時,我們可以自定義便捷訪問符號

<script>
        // 在使用jQuery之前指定自定義符號
        var nj = jQuery.noConflict();
        // 和使用$一樣通過自定義符號調用jQuery
        nj(function () {
            alert("hello lnj");
        });
</script>