jquery原理與ajax基礎系列（二）之核心函數

1th.何謂“核心函數”？

形式如$()即爲"核心函數"。

要考慮的是核心函數的參數問題，

1.如果參數是function,結構變成$(function(){}),則"核心函數"變成"入口函數"，具體見前一章。

2.原生js中的選擇器的獲取（類似於.getElementById...）得到了簡寫：

$("div");
$(".box1");
$("#id1");

3.原生js中的/document.body.createElement()類似操作在jquery中得到了簡寫：

let $p=$("<p>這是一個P標籤</p>");

document.body.append($p);
//原生js
document.body.appendChild($p);

 

要注意的是，只要使用了形如$()的形式，最終返回的都是一個jquery對象，只是這個jquery對象中包含了選擇器所選中的DOM元素（2），自我創建的DOM元素（3）.

 

2th.靜態方法與實例方法

對於有java基礎的，要學習js的靜態方法與實例方法，可能僅僅就是個記憶型的問題，你要記住js的靜態方法/實例方法與java的不同。

      <script>
            function Aclass() {}
            //靜態方法
            Aclass.method1 = function() {
                  alert("this is a statciMethod");
            }
            //實例方法
            Aclass.prototype.method = function() {
                  alert("this is  a  instancMethod,it's oriented objects");
            }
            Aclass.method1();
            // 不要寫成類似於“Aclass a=new Aclass();” 的形式，這是java的寫法
            // Aclass a=new Aclass();
            let a = new Aclass();
            a.method();
      </script>

初步總結下不同：

1.js不存在真正的類的概念，在涉及到java中本該用類"class"的時候，js是用function來代替的

2.靜態方法是直接加，使用也是直接使用；實例方法存在"Aclaas.prototype.method"，使用的時候也是需要先創建對象（要仔細辨別與java的不同，上述代碼部分標識出來了）。

3.相對於java，js中的實例方法給人的感覺就是”強行面向對象“，通過”.prototype“實現的”強行面向對象“。關於面向對象的好處，就是可以少些代碼，儘可能多的達到代碼的複用（這一點對於所有的面向對象的語言都是存在的）。

 

3th.jquery中的靜態方法

注意與原生的js的方法比較，便於記憶。

數組  && 僞數組 && json

數組 ：【1,2,3,4,5】

僞數組：{0:6,1:6,2:6,3:4,4:3,5:6,length:6}僞數組是相對於數組而言的，重點強調在“僞”。它有2個要素：1.有length 2.序列下標從0開始且爲順序序列

json：{"name":"purple","age":22,"gener":"female"}。沒有length。下標無序。

one.    $.each(xxx,function(index,value))  vs   xxx.forEach(function(value,index))

格式：$.each(obj,funciton(index,value){})

            // 數組arr的比較
            // 原生的js只能在數組arr中使用，在僞數組f_arr以及json中無法使用,注意function中
            // index value的前後位置。
            arr.forEach(function(value, index) {
                  console.log(index - value);
                  console.log(index, value);
            })
            $.each(arr, function(index, value) {
                  console.log(index + value);
                  console.log(index, value);
            })

            //僞數組f_arr的比較
            // Uncaught TypeError: f_arr.forEach is not a function，報錯類型。
            // 僞數組無法在原生forEach中使用。可以在$.each(f_arr,function(){})中使用
            f_arr.forEach(function(value, index) {
                  console.log(index, value);
            })
            $.each(f_arr, function(index, value) {
                  console.log(index, value)
                  console.log(index + value)
            })

            // json的比較
            // Uncaught TypeError: json.forEach is not a function，報錯類型
            // json無法在原生forEach中使用。可以在$.each(f_arr,function(){})中使用
            json.forEach(function(value, index) {
                  console.log(index, value)
            })
            $.each(json, function(index, value) {
                  console.log(index, value);
                  // 字符串
                  console.log(index + value);

            })

two.  $.map(xxx,function(value,index){}) vs arr.map(function(value,index,arr))  

與“one.”類似，$.map(xxx,function(value,index){})適用於數組arr/僞數組f_arr/json.依舊需要強調的是要注意參數位置/參數個數的問題。

three. $.each(xxx,function(index,value))  vs $.map(xxx,function(value,index)) vs arr.map(function(value,index,arr))

這三者的區別主要體現在返回的參數上（原數組arr都不會發生變化，變化的是新生成的arr的返回值，故原數組不做比較）：

//組arr都不會發生變化，變化的是新生成的arr的返回值，故原數組不做比較
    let arr1 = arr.map(function(value, index, arr) {
                  console.log(index, value)
                  // 可以使用,改變返回值
                  return value + 1
            })
            // //  [undefined, undefined, undefined, undefined, undefined, undefined, undefined]
            console.log(arr1)

            let arr2 = $.map(arr, function(v, i) {
                  console.log("   " + i, v)
                  // 可以使用，改變返回值
                  return v + 1;
            })
            // 空數組，length長度爲0
            console.log(arr2)

            // undefined
            let arr3 = arr.forEach(function(value, index) {
            //依舊是undefiend，失效。
                  return value + 1;
            })
            console.log(arr3)

            //  [1, 3, 5, 6, 7, 3, 4],原數組返回。
            let arr4 = $.each(arr, function(index, value) {
            //依舊是原數組返回，失效。
                  return value+ 1;
            })
            console.log(arr4)

簡言之，一句話：forEach/$.each返回的是undefined/原數組，都無法通過return修改返回值;map/$.map返回的是【undefined,undefined,undefined,.....】或者空數組【】,都可以通過return修改返回值（jquery與原生代碼策略上的“一致性”）。

總結，

只有$.each(function(index,value))中function的參數是（index,value）順序，其他的都是（value,index）順序。【便於記憶】; arr.map(function(value,index,arr))  中的function是3個參數，（value ,index,arr）。

Four.  $.trim(str)

主要用於祛除字符串str兩邊的空格，常見於校驗等操作。使用的是返回的結果，並不改變原有字符串。

       let str="     左邊空五格右邊空五格      ";
                  // 去除兩邊的空格
                alert( "+++"+$.trim(str)+"+++") ;
                alert( "+++"+str+"+++") ;

 

Five.    $.isArray    vs  $.isFunction  vs  $.isWindow

三者的返回值都是布爾值，true/false。要特別說明的是let fn=$.isFunction(jQuery)返回值是true,表明jquery這個框架本身是個函數  ，打開jquery源代碼，取首尾部分，格式形如（function()）（window）[隨着版本的不同，function的參數不同，可以是( window, undefined )，也可以是( global, factory )],典型的匿名函數自調用。

            // 只能判別是否是“真”數組，僞數組不在其列
            alert($.isArray(arr))
            alert($.isArray(f_arr))  //僞數組，返回的是false

           //下面兩種返回ture，說明jQuery框架本身是一個自調用函數！
            alert($.isFunction(jQuery));
            alert($.isFunction($));
           // 區分大小寫，否則會報錯：“jquery  is not  defined”.jQuery爲正確。
            alert($.isFunction(jquery)); 
          
          //參照 window.load=function(){} 中的window。注意大小寫
            alert($.isWindow(w));
            alert($.isWindow(window))
            //Window is undefined。正確格式：window
            alert($.isWindow(Winodw));

six

注意$.holdReady(false)的位置，目前來看，$.holdReady(false)只能寫在html這裏。我覺得這個可能是$.holdReady(true/false)較少用到的原因之一？！代碼如下：

  <script>
            // 通常是成對的出現，中間包裹着“預加載”。這個預加載可以是原生的寫法，也可以是
            // jquery的寫法。
            $.holdReady(true)
            $(function() {
                  alert("$.holdReady(true) && $.holdReady(false) 是一對好機油啊！")
            })

            // 寫在這裏貌似沒用！而且還會報錯。
            // let btn = document.getElementsByTagName("button")[0];
            // btn.onclick = function() {
            //       $.holdReady(flase)
            // }
      </script>

</head>

<body>
<!-- $.holdReady(false)必須的得寫在這裏啊！ -->
      <button type="button" name="button"  onclick="$.holdReady(false)" >true --->flase </button>
</body>

<script>
// 寫在這裏也沒有用！報錯：“false”  is undefined。這麼設計也有好處，因爲寫在這裏，HTML已經加載完成了，無必要再使用$.holdReady(true/false)了：

      // $("button")[0].onclick = function() {
      //       $.holdReady(flase);
      // }