複習//JS部分實戰題

---

1、寫一個原型鏈繼承的例子

<div id="root"></div>在這裡插入程式碼片

function Elem(id) {
	this.elem = document.getElementById(id)
}
Elem.prototype.html = function(val){
  var elem = this.elem
  if (val) {
    elem.innerHTML = '<h1>nihao</h1>'
    return this
  } else {
    return elem.innerHTML
  }
}
Elem.prototype.on = function(type, fn){
  var elem = this.elem
  elem.addEventListener(type, fn)
}

var root = new Elem('root')
root.html('ggg')
root.on('click', function(){
  alert('nihao')
})

2、建立10個a標籤，點選對應標籤時彈出對應序號（作用域問題）

var alertI = function alertTarget(elem) {
    var a = document.createElement('a')
    a.innerHTML = elem + '<br>'
    a.addEventListener('click', function () {
      alert(elem)
    })
    document.body.appendChild(a)
  }
var i
for (i = 0; i < 10; i++) {
  alertI(i)
}

每個 i 要單獨執行一次函式，每個 i 在函式作用域內執行。因為for迴圈中 i 迴圈所需時間很少，其迴圈完而其後續的dom操作還沒開始，會導致點選每個a標籤內容都將彈出 10 。

3、實際開發中閉包的應用

閉包的應用形式：函式作為引數傳遞 / 函式作為返回值
isFirstLoad例子——函式作為返回值

    <script>
      function isFirstLoad() {
        var contenList = []

        return function (val) {
          if (contenList.indexOf(val) >= 0) {
            return '不是第一次出現'
          } else {
            contenList.push(val)
            return '是第一次出現'
          }
        }
      }

      var firstLoad = isFirstLoad()

      firstLoad(10) // 是第一次出現
      firstLoad(10) // 不是第一次出現
    </script>

把 list 定義在函式內，外部就無法修改了，保證每個傳入的資料得到正確判斷。

4、寫一個能遍歷物件和陣列的通用 forEach 函式

    <script>
      function objForEach(obj, fn) {
        var key
        // 陣列
        if (obj instanceof Array) {
          var arrForEach = obj.forEach(function (item, index) {
            fn(item, index)
          })
          return arrForEach
        } else {
          // 物件
          for (key in obj) {
            fn(key, obj[key])
          }
        }
      }

      // 物件
      var myBook = {
        book1: '易經',
        book2: '心靈擇食',
        book3: '遇見未知的自己',
      }
      objForEach(myBook, function (key, value) {
        console.log(key, value)
      })

      // 陣列
      var arr1 = [1, 2, 3, 4, 5, 'lllll']
      objForEach(arr1, function (index, item) {
        console.log(index, item)
      })
    </script>

5、DOM 操作常用 API 有哪些？

（節點、文字、屬性）
1——增：

• 1-1 建立
  document.createElement（tagName）
  document.createTextNode（data）
  document.createAttribute（name）

• 1-2 加入
  appendChild（aChild）
  insertBefore（newElement，referenceElement）
  innerHTML
  innerText

2——刪：

• removeChild（child）
  removeAttributeNode（attributeNode）

3——改：

• 3-1 改節點
  replaceChild（newChild，oldChild）

• 3-2 改樣式

  style.*** = ssss;
  setAttribute（name，value）

• 3-3 改文字
  innerHTML
  innerText
  nodeValue

• 3-4 改屬性
  setAttribute（name，value）
  . 屬性 = 值

4——查：

• 4-1 標準DOM API
  document.getElementById（id）
  document.getElementsByTagName（name）
  document.getElementsByName（name）
  document.getElementByClassName（names）
  document.querySelectorAll（selectors）
• 4-2 親屬訪問
  父關係：parenetNode、parentElement
  子關係：childNodes、children、firstChild、lastChild
  兄弟關係：previousSibling、nextSibling、previousElementSibling、nextElementSibling
• 4-3 屬性獲取
  getAttribute（attributeName）
  getAttributeNode（attributeName）

6、編寫一個通用的事件監聽器

（代理、不代理）
宣告表示式的方式

    <div id="div1">
      <p><a>1</a></p>
      <p><a>2</a></p>
      <p id="p1">nihaoa</p>
    </div>

    <script>
      function bindEvent(elem, type, selector, fn) {
        if (fn == null) {
          fn = selector
          selector = null
        }
        elem.addEventListener(type, function(e){
          var target
          if (selector) {
            target = e.target
            if (target.matches(selector)) {
              fn.call(target, e)
            }
          } else {
            fn(e)
          }
        })
      }

      // 有代理
      var div1 = document.getElementById("div1")
      bindEvent(div1, 'click', 'a', function(e) {
        alert(this.innerHTML)
      })

      // 無代理
      var p1 = document.getElementById("p1")
      bindEvent(div1,'click', function(e){
        console.log(p1.innerHTML)
      })
    </script>

7、手寫一個Ajax，不依賴第三方庫

（1）建立“XMLHttpRequest”物件；
（2）建立http請求，帶有請求方式、url、驗證方式；
（3）設定相應http狀態變化的響應函式；
（4）傳送http請求。

  var xhr = new XMLHttpRequest();
  xhr.open('GET', './myfile.txt', true)
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        alert(xhr.responseText)
      }
    }
  }
  xhr.send(null)

  alert(2)

  // 若 xhr.open 中為 false——不為非同步事件——先執行xhr的函式，再彈出2
  // 若為 true——為非同步事件——先彈出2，再執行xhr的函式

8、ADM 與 CommonJS 區別

模組化規範、同步非同步

• ADM
  1.模組化規範：
  依賴 require.js 庫
  全域性 define 定義
  全域性 require 使用
  2.依賴 JS 自動、非同步載入
• CommonJS
  1.模組化規範：
  用 module.export 或 export 暴露模組
  用 require使用
  2.同步一次性載入