JavaScript基礎進階

JavaScript基礎進階

開篇需要理解的你可能不知道的JS系列... ...

本文主要總結歸納一些不太常見或者重要的知識點，理解它們能幫助我們更好地學習JavaScript。

• web中涉及到三大交互的細節

  這三個交互是：行爲交互、數據交互、邏輯交互。

  行爲交互：用戶行爲操作，如：點擊按鈕，縮放頁面。

  數據交互：用於顯示頁面展示的數據信息，如：圖片，文字等。

  邏輯交互：對用戶行爲和數據進行相關的處理，比如：點擊按鈕時JS代碼要幹什麼？

• JS的三種引入方式

  這三種引入方式分別爲：行間、內部和外部。

  行間：直接在div元素上做相關處理，如：onclick="alert('hello world')"。

  內部：在<script>標籤中直接編寫JS代碼。

  外部：通過<script>標籤的src屬性引入外部文件的代碼。

  在通過外部引入JS文件時，需要額外注意的主要有兩點：加載JS文件的性能問題和安全性問題

  1. 性能問題

     HTML是按順序運行頁面腳本，所以如果將script標籤放在head裏面，會阻塞頁面的渲染（JS是單線程異步的邏輯處理，詳見阮一峯的JS運行機制），所以常規的處理辦法是將script放到DOM加載完成後，也就是body最後面，也可以通過defer或者async屬性將scirpt代碼延遲執行或加載（這裏有一個問題就是script不一定在DOM的內容加載完成後執行）

  2. 安全問題

     通過JS的src屬性可以進行跨域操作，因爲src可以引入不同域名的代碼，所以它超出了瀏覽器的同源策略限制，當外部JS代碼不安全時，可能會對頁面造成不可避免的安全性問題。

• JS的註釋方式

  只要有兩種：單行註釋和多行註釋

  // 這裏是單行註釋
  /*這裏是多行註釋*/
  let commtents = '註釋';

  在項目中推薦使用多行註釋

  /*  test方法   用於實現XXXXX
   *  params： a： 第一個參數，用於表示XXXX
   *           b： 第二個參數，用於表示
   *           ... ...
   *  return:  返回XXXX
  */
  function test(a, b, c){
      //...
  }
  ​
  // 你也可以寫的更花哨一點
  /*------------------XXXXX模塊1---------------------------
   * ....
   * ....
  */
  function a(){ //... };
  /*------------------XXXXX模塊2---------------------------
   * ....
   * ....
  */
  function b(){ //... }

• 項目中的JS命名規則

  1. 變量

     變量的命名規則：遵循ECMAScript規範來就行。

     常量的命名規則：建議全部大寫，語義單詞間用_分開；

     構造函數是特殊情況，建議用大駝峯方式命名

     let _dollar = '155美元';
     const INITED_VALUE = 100;
     var getName = function(){......};
     // 構造函數
     function Util(){};
     let util_1 = new Util();                        

  2. 文件、文件夾或者圖片

     小寫是最普遍的命名方式：index.css，nav_bar.js，icon_1.png；

     也有小駝峯命名的方式：navBar.js,

• 三目運算符

  多級三目運算符能簡化一些代碼:

  let test = typeof mm === 'undefined' ? '1' : null == undefined ? '2' : '3'

  雖然它能簡化通過if (), else()之類的邏輯判斷，但是其語義不太明確，可讀性較低，在實際項目中根據實際情況採用就行了。

• 獲取對象的屬性

  兩種方法：點操作符與方括號操作符

  let obj = {
      a: 1,
      b: 2
  };
  obj.a         // 1
  obj['a']        // 1

  建議通過方括號操作符獲取屬性值，因爲它可以傳入變量，靈活性更好，而且利於後期代碼維護或者新增一些功能。

• 你可能記不全的console

  可能大多數前端開發人員用的最多的就是console.log()方法了，但是console還有一些其他實用的方法，對我們的代碼調試非常有用的

  console.assert();          // 在不知道第一個參數是否存在，可以用它試試
  console.clear();           // 一不小心寫了很多BUG? 控制檯清空的功能
  console.time(); conole.timeEnd();     // 看一下方法運行了多久吧，太久了可不好哦！

  其它的詳見MDN CONSOLE方法

  小擴展：重寫console.log()；返回你想要顯示的信息

  var logs = console.log;
  console.log = function(text){
    logs.call(console,"結果爲："+text);
    }
  console.log("真的")

• 字符串拼接

  在ES6模板字符串沒出來之前，字符串拼接最常用的就是“+”了（可是換行咋個搞），它是非常有用的方法，至今還在被廣泛使用。但是，千萬別寫成下面這樣子哦！

  let last_Value = '1' + 2 + ' test value of '
                    + 5;                         // 它的結果沒有換行！！