JS相关API/Lib学习笔记与知识图谱

介绍一下JS常用的原生API：

• 浏览器元素DOM的操作
• 表单操作
• 一些HTML5的API
• AJAX访问的API

一些JS常用的库：

• jQuery：一个dom操作的便捷库，兼容性优化，动画实现
• underscore：函数式编程的库。

知识图谱：下载

JS原生API

浏览器对象

• window：窗口的信息
  • innerWidth获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。
  • innerHeight
  • outerWidth 浏览器窗口的整个宽高。
  • outerHeight
• navigator：浏览器的信息。可以很容易地被用户修改，所以JavaScript读取的值不一定是正确的
  • navigator.appName：浏览器名称；
  • navigator.appVersion：浏览器版本；
  • navigator.language：浏览器设置的语言；
  • navigator.platform：操作系统类型；
  • navigator.userAgent：浏览器设定的User-Agent字符串。
• screen：对象表示屏幕的信息，常用的属性有：
  • screen.width：屏幕宽度，以像素为单位；
  • screen.height：屏幕高度，以像素为单位；
  • screen.colorDepth：返回颜色位数，如8、16、24。

• location：对象表示当前页面的URL信息

  • location.href 完整url

  • location.protocol、location.host、location.port、location.pathname、location.search、location.hash。

    // http://www.example.com:8080/path/index.html?a=1&b=2#TOP
    location.protocol; // 'http'
    location.host; // 'www.example.com'
    location.port; // '8080'
    location.pathname; // '/path/index.html'
    location.search; // '?a=1&b=2'
    location.hash; // 'TOP'

  • location.assign()：加载一个新页面

    • 相对路径'/discuss'
    • 新网址
  • location.reload()：重新加载当前页面，

• document 表示当前页面。document对象就是整个DOM树的根节点。

  • document.title、document.head、document.body

  • document.cookie：

    建议服务器在设置Cookie时可以使用httpOnly。防止cookie被其他非法js文件窃取。

  • document.getElementById()

  • document.getElementsByTagName()
• history：由于大量使用AJAX和页面交互，简单粗暴地调用history.back()可能会让用户感到非常愤怒。
  • back()
  • forward ()

DOM操作

DOM最重要的API就是表示Document的document与Element的节点。分为增删改查。

• 查：

  • document.getElementById() 直接定位唯一的一个DOM节点
  • document.getElementsByTagName() 按照tag返回element数组
  • document.getElementsByClassName()按照clsss返回element数组
  • querySelector()通过选择器查找元素。参数传入选择器ex:'#q1'。
  • querySelectorAll():通过选择器查找所有元素。参数传入选择器ex:'p'。返回数组
  • xxx.children 所有子节点。只读,但是遍历增删时时会动态改变
  • xxx.firstElementChild、xxx.lastElementChild 第一个，最后一个节点。只读

  // 返回ID为'test'的节点：
  var test = document.getElementById('test');
  // 先定位ID为'test-table'的节点，再返回其内部所有tr节点：
  var trs = document.getElementById('test-table').getElementsByTagName('tr');
  // 先定位ID为'test-div'的节点，再返回其内部所有class包含red的节点：
  var reds = document.getElementById('test-div').getElementsByClassName('red');
  // 通过querySelector获取ID为q1的节点：
  var q1 = document.querySelector('#q1');
  // 查找所有的p
  var ps = document.querySelectorAll('p');

  概念：DOM节点是指Element，但是DOM节点实际上是Node，在HTML中，Node包括Element、Comment、CDATA_SECTION等很多种，以及根节点Document类型，但是，绝大多数时候我们只关心Element，也就是实际控制页面结构的Node，其他类型的Node忽略即可。根节点Document已经自动绑定为全局变量document。

• 更新、修改节点内容

  • innerHTML： document和element都有。完全替换所有内容，可以替换成新的element节点。

    注意：innerHTML如果是从网络获取的字符串，可能被插入js脚本<script>....</script>。因此建议插入之前进行编码。即会修改成<script>...</script>,改代码不会执行

  • innerText：写入改属性的值会自动HTML编码。textContent也是，细节不同是，后者返回完整元素（包括隐藏的）

  • xxelement.style.属性 修改节点属性，对应css中的属性名，注意：因为CSS允许font-size这样的名称，但它并非JavaScript有效的属性名，所以需要在JavaScript中改写为驼峰式命名fontSize

• 添加元素，添加属性

  • 直接使用innerHTML ="<span>child</span>":完全替换
  • parentElement.appendChild(element)插入到最后。
  • parentElement.insertBefore(newElement, referenceElement);插入到引用的元素之前。
  • 新建节点
    • var e = document.createElement('p');
    • 添加属性
      • e.setAttribute('id', '123');
      • e.id="123" 与上面功能相同
  • 注意点：如果不新建节点，直接插入已经存在于当前的文档树的节点，这个节点首先会从原先的位置删除，再插入到新的位置。

  var d = document.createElement('style');
  d.setAttribute('type', 'text/css');
  d.innerHTML = 'p { color: red }';
  document.getElementsByTagName('head')[0].appendChild(d);

• 删除：要删除一个节点，首先要获得该节点本身以及它的父节点

  • 调用父节点的removeChild把自己删掉

    // 拿到待删除节点:
    var self = document.getElementById('to-be-removed');
    // 拿到父节点:
    var parent = self.parentElement;
    // 删除:
    var removed = parent.removeChild(self);
    removed === self; // true

  • 注意点，删除时读取children属性容易出错

    var parent = document.getElementById('parent');
    parent.removeChild(parent.children[0]);
    parent.removeChild(parent.children[1]); // <-- 浏览器报错

表单操作

• 读写输入框的值：

  • 常见的输入框：HTML表单的输入控件主要有以下几种：
    • 文本框，对应的<input type="text">，用于输入文本；
    • 口令框，对应的<input type="password">，用于输入口令；
    • 单选框，对应的<input type="radio">，用于选择一项；
    • 复选框，对应的<input type="checkbox">，用于选择多项；
    • 下拉框，对应的``，用于选择一项；
    • 隐藏文本，对应的<input type="hidden">，用户不可见，但表单提交时会把隐藏文本发送到服务器。

  • 读取：

    // text、password、hidden以及select。
    var input = document.getElementById('email');
    input.value; // '用户输入的值'
    
    // 单选框和复选框，value属性返回的永远是HTML预设的值，而我们需要获得的实际是用户是否“勾上了”选项，所以应该用checked判断
    var mon = document.getElementById('monday');
    mon.checked; // true或者false

  • 设置：类似上面，赋值即可。

  html5有很多input控件，使用类似。不支持HTML5的浏览器无法识别新的控件，会把它们当做type="text"来显示。支持HTML5的浏览器将获得格式化的字符串。例如，type="date"类型的input的value将保证是一个有效的YYYY-MM-DD格式的日期，或者空字符串。

• 表单提交

  • 方式一：设置button的onclick事件，自己调用form.submit();提交

  • 方式二：监听summit按钮的提交事件，拦截处理。配合hidden使用。

    <!-- HTML -->
    <!--注意到id为md5-password的<input>标记了name="password"，而用户输入的id为input-password的<input>没有name属性。没有name属性的<input>的数据不会被提交。-->
    <form id="login-form" method="post" onsubmit="return checkForm()">
        <input type="text" id="username" name="username">
        <input type="password" id="input-password">
        <input type="hidden" id="md5-password" name="password">
        <button type="submit">Submit</button>
    </form>
    
    <script>
    function checkForm() {
        var input_pwd = document.getElementById('input-password');
        var md5_pwd = document.getElementById('md5-password');
        // 把用户输入的明文变为MD5:
        md5_pwd.value = toMD5(input_pwd.value);
        // 继续下一步:
        return true;
    }
    </script>

文件操作

• 在HTML表单中，可以上传文件的唯一控件就是<input type="file">。

  当一个表单包含<input type="file">时，表单的enctype必须指定为multipart/form-data，method必须指定为post，浏览器才能正确编码并以multipart/form-data格式发送表单的数据。

• HTML5的File API提供了File和FileReader两个主要对象，可以获得文件信息并读取文件。

AJAX

• 异步访问—XMLHttpRequest（低版本IE ActiveXObject）

  • XMLHttpRequest对象的open()方法有3个参数，第一个参数指定是GET还是POST，第二个参数指定URL地址，第三个参数指定是否使用异步，默认是true。
  • 调用send()方法才真正发送请求。GET请求不需要参数，POST请求需要把body部分以字符串或者FormData对象传进去。
  • onreadystatechange回调函数
    • readyState === 4判断请求是否完成，
    • status === 200 判断是否是一个成功的响应。

  var request;
  // 低版本IE兼容
  if (window.XMLHttpRequest) {
      request = new XMLHttpRequest();
  } else {
      request = new ActiveXObject('Microsoft.XMLHTTP');
  }
  
  request.onreadystatechange = function () { // 状态发生变化时，函数被回调
      if (request.readyState === 4) { // 成功完成
          // 判断响应结果:
          if (request.status === 200) {
              // 成功，通过responseText拿到响应的文本:
              return success(request.responseText);
          } else {
              // 失败，根据响应码判断失败原因:
              return fail(request.status);
          }
      } else {
          // HTTP请求还在继续...
      }
  }
  
  function success(text) {
      var textarea = document.getElementById('test-response-text');
      textarea.value = text;
  }
  
  function fail(code) {
      var textarea = document.getElementById('test-response-text');
      textarea.value = 'Error code: ' + code;
  }
  
  // 发送GET请求，注意地址没有跨域:
  request.open('GET', '/api/categories');
  request.send();
  
  alert('请求已发送，请等待响应...');

• 跨域与安全访问

  • 当前页面默认无法访问其他URL域名下的网页。

    域名要相同（www.example.com和example.com不同），协议要相同（http和https不同），端口号要相同（默认是:80端口，它和:8080就不同）。

  • 如果要调用其他页面的接口怎么办？解决办法

    • Flash插件：过时了

    • 同源域名下架设一个代理服务器来转发：比如访问'/proxy?url=http://www.sina.com.cn'。有Server开发工作量。

    • JSONP：利用 <script src="http://example.com/abc.js"></script>可以访问外域。一般改js脚本会返回一个callback("data")调用。其中callback是调用接口是传给它的。

      function refreshPrice(data) {
          console.log(data)
      }
      
      function getPrice() {
          var
              js = document.createElement('script'),
              head = document.getElementsByTagName('head')[0];
        // 访问API，callback通过参数传入refreshPrice 
        // 返回的js是 refreshPrice([...data..]);
          js.src = 'http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice';
          head.appendChild(js);
      }

    • CROS 推荐，全称Cross-Origin Resource Sharing，是HTML5规范定义的如何跨域访问资源：

      • 简单请求：服务端通过设置Access-Control-Allow-Origin来控制哪些网站可以获取资源。Access-Control-Allow-Origin为http://my.com，或者是*，本次请求就可以成功。

        

        简单请求包括GET、HEAD和POST（POST的Content-Type类型仅限application/x-www-form-urlencoded、multipart/form-data和text/plain），并且不能出现任何自定义头（例如，X-Custom: 12345），通常能满足90%的需求。

        不包括post的Json请求

      • preflighted请求：对于PUT、DELETE以及其他类型如application/json的POST请求，在发送AJAX请求之前，浏览器会先发送一个OPTIONS请求到这个URL上，询问目标服务器是否接受。（web页面不需要修改，只有server需要）

        <!-- request -->
        OPTIONS /path/to/resource HTTP/1.1
        Host: bar.com
        Origin: http://my.com
        Access-Control-Request-Method: POST
        <!-- response -->
        HTTP/1.1 200 OK
        Access-Control-Allow-Origin: http://my.com
        Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS
        Access-Control-Max-Age: 86400

        浏览器确认服务器响应的Access-Control-Allow-Methods头确实包含将要发送的AJAX请求的Method，才会继续发送AJAX，否则，抛出一个错误。

• ajax结合Promise应用

  // 工具方法：ajax函数将返回Promise对象:
  function ajax(method, url, data) {
      var request = new XMLHttpRequest();
      return new Promise(function (resolve, reject) {
          request.onreadystatechange = function () {
              if (request.readyState === 4) {
                  if (request.status === 200) {
                      resolve(request.responseText);
                  } else {
                      reject(request.status);
                  }
              }
          };
          request.open(method, url);
          request.send(data);
      });
  }
  // 注意访问地址不要跨域
  var p = ajax('GET', '/api/categories');
  p.then(function (text) { // 如果AJAX成功，获得响应内容
      console.log(text);
  }).catch(function (status) { // 如果AJAX失败，获得响应代码
      console.log('ERROR: ' + status);
  });

Canvas

html5的一个元素，可以绘制内容。类似android的canvas。

Canvas除了能绘制基本的形状和文本，还可以实现动画、缩放、各种滤镜和像素转换等高级操作。如果要实现非常复杂的操作，考虑以下优化方案：

• 通过创建一个不可见的Canvas来绘图，然后将最终绘制结果复制到页面的可见Canvas中；
• 尽量使用整数坐标而不是浮点数；
• 可以创建多个重叠的Canvas绘制不同的层，而不是在一个Canvas中绘制非常复杂的图；
• 背景图片如果不变可以直接用``标签并放到最底层。

JQuery

功能

• 消除浏览器差异：你不需要自己写冗长的代码来针对不同的浏览器来绑定事件，编写AJAX等代码；
• 简洁的操作DOM的方法：写$('#test')肯定比document.getElementById('test')来得简洁；
• 轻松实现动画、修改CSS等各种操作。

目前jQuery有1.x和2.x两个主要版本，区别在于2.x移除了对古老的IE 6、7、8的支持，因此2.x的代码更精简。选择哪个版本主要取决于你是否想支持IE 6~8。

Tip

• $`符号冲突 `jQuery.noConflict();`还原之前的`$的功能，现在只能用jQuery使用jQuery了

选择器

选择器是jQuery的核心。一个选择器写出来类似$('#dom-id')

<!-- 讲解的HTML结构 -->
<ul class="lang">
    <li class="js dy">JavaScript</li>
    <li class="dy">Python</li>
    <li id="swift">Swift</li>
    <li class="dy">Scheme</li>
    <li name="haskell">Haskell</li>
</ul>

• jQuery对象

  • jQuery用$查找到的不是Dom元素，而是jQuery对象。它是一个对象类似数组

    • [<div id="abc">...</div>]
    • []

  • jQuery的选择器不会返回undefined或者null，这样的好处是你不必在下一行判断if (div === undefined)

  • jQuery对象和DOM对象之间可以互相转化

    var div = $('#abc'); // jQuery对象
    var divDom = div.get(0); // 假设存在div，获取第1个DOM元素
    // var divDom = div[0];
    var another = $(divDom); // 重新把DOM包装为jQuery对象,然后再使用

  • 不需要获取DOM对象，直接使用jQuery对象更加方便，可以简单地调用$(aDomObject)把它变成jQuery对象，这样就可以方便地使用jQuery的API了。

  • 注意，jQuery对象的所有方法都返回一个jQuery对象（可能是新的也可能是自身），这样我们可以进行链式调用，非常方便。

  • 批量操作，返回的jQuery对象可能代表一组节点，此时应用css可以批量操作

• 参考 css选择器，用的比较多的就是 id选择器，类选择器 层次选择器（上下文）子选择器

• jQuery自带的一些

  • :input`：可以选择，，和；
  • :file：可以选择`，和input[type=file]`一样；
  • :checkbox：可以选择复选框，和input[type=checkbox]一样；
  • :radio：可以选择单选框，和input[type=radio]一样；
  • :focus：可以选择当前输入焦点的元素，例如把光标放到一个`上，用$(‘input:focus’)`就可以选出；
  • :checked：选择当前勾上的单选框和复选框，用这个选择器可以立刻获得用户选择的项目，如$('input[type=radio]:checked')；
  • :enabled：可以选择可以正常输入的、等，也就是没有灰掉的输入；
  • :disabled：和:enabled正好相反，选择那些不能输入的。

  此外，jQuery还有很多有用的选择器，例如，选出可见的或隐藏的元素：

  $('div:visible'); // 所有可见的div
  $('div:hidden'); // 所有隐藏的div

• 查找和过滤，jQuery对象的方法

  • find()查找子节点，参数是任意的选择器

  • parent()当前节点开始向上查找,可以传参数

  • next()和prev() 同级搜索，可以传参数

    var ul = $('ul.lang'); // 获得<ul>
    var dy = ul.find('.dy'); // 获得JavaScript, Python, Scheme
    var swf = $('#swift'); // 获得Swift
    var parent = swf.parent(); // 获得Swift的上层节点<ul>
    var a = swf.parent('div.red'); // 从Swift的父节点开始向上查找，直到找到某个符合条件的节点并返回

  • filter()方法可以过滤掉不符合选择器条件的节点

  • map()方法把一个jQuery对象包含的若干DOM节点转化为其他对象

  • first()、last()和slice()方法可以返回一个新的jQuery对象，把不需要的DOM节点过滤了。

    var langs = $('ul.lang li'); 
    var a = langs.filter('.dy'); // 用选择器过滤
    langs.filter(function () { // 用函数过滤
        return this.innerHTML.indexOf('S') === 0; // 返回S开头的节点
    });
    // 把jQuery对象，转换成，字符串数组
    var arr = langs.map(function () {
        return this.innerHTML;
    }).get(); //['JavaScript', 'Python', 'Swift', 'Scheme', 'Haskell']
    
    var js = langs.first(); // 获取第一个
    var sub = langs.slice(2, 4);  // 获取2--4个

操作dom

• text&&html

  • selector.text()获取节点的文本，传入参数表示设置
  • selector.html() 原始HTML文本，传入参数表示设置

• 修改CSS

  • 批量操作的特点
  • css('name', 'value')方法，作用于DOM节点的style属性，具有最高优先级。

  var div = $('#test-div');
  div.css('color'); // '#000033', 获取CSS属性
  div.css('color', '#336699'); // 设置CSS属性
  div.css('color', ''); // 清除CSS属性
  
  // 常用操作，通过添加class修改样式
  div.hasClass('highlight'); // false， class是否包含highlight
  div.addClass('highlight'); // 添加highlight这个class
  div.removeClass('highlight'); // 删除highlight这个class

• 隐藏显示元素

  • 可以设置CSS的display属性为none，利用css()方法就可以实现，不过，要显示这个DOM就需要恢复原有的display属性，这就得先记下来原有的display属性到底是block还是inline还是别的值。
  • show()和hide()方法，更方便

• 获取DOM信息

  • 获取信息

    / 浏览器可视窗口大小:
    $(window).width(); // 800
    $(window).height(); // 600
    
    // HTML文档大小:
    $(document).width(); // 800
    $(document).height(); // 3500
    
    // 某个div的大小:
    var div = $('#test-div');
    div.width(); // 600
    div.height(); // 300
    div.width(400); // 设置CSS属性 width: 400px，是否生效要看CSS是否有效
    div.height('200px'); // 设置CSS属性 height: 200px，是否生效要看CSS是否有效

  • 修改属性：attr()和removeAttr()方法用于操作DOM节点的属性

    var div = $('#test-div');
    div.attr('data'); // undefined, 属性不存在
    div.attr('name'); // 'Test'
    div.attr('name', 'Hello'); // div的name属性变为'Hello'
    div.removeAttr('name'); // 删除name属性
    div.attr('name'); // undefined

    • prop()与attr()对于属性checked处理有所不同

      var radio = $('#test-radio');
      radio.attr('checked'); // 'checked'
      radio.prop('checked'); // true

      HTML5规定有一种属性在DOM节点中可以没有值，只有出现与不出现两种,checked,selected

    • 建议is(':selected')，判断属性

• 表单操作

  • val()：统一的方法获取和设置对应的value属性，不论input的类型。

• 操作DOM结构

  • 添加

    • html()这种暴力方法

    • append()、prepend()方法，添加到子节点

    • after()、before()方法，同级节点间添加

      var ul = $('#test-div>ul');
      ul.append('<li><span>Haskell</span></li>');
      // 在第二个位置添加
      var js = $('#test-div>ul>li:first-child');
      js.after('<li><span>Lua</span></li>');

  • 删除

    • 用remove()方法

      var li = $('#test-div>ul>li');
      li.remove(); // 所有<li>全被删除

事件

因为JavaScript在浏览器中以单线程模式运行，页面加载后，一旦页面上所有的JavaScript代码被执行完后，就只能依赖触发事件来执行JavaScript代码。

• 绑定click事件

  var a = $('#test-link');
  a.on('click', function () {
      alert('Hello!');
  });
  // 推荐
  a.click(function () {
      alert('Hello!');
  });

• 常见事件

  • 鼠标
    • click: 鼠标单击时触发；
    • dblclick：鼠标双击时触发；
    • mouseenter：鼠标进入时触发；
    • mouseleave：鼠标移出时触发；
    • mousemove：鼠标在DOM内部移动时触发；
    • hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave
  • 键盘：作用在当前焦点的DOM上，通常是<input>和<textarea>。
    • keydown：键盘按下时触发；
    • keyup：键盘松开时触发；
    • keypress：按一次键后触发。

• 事件回调参数：mousemove和keypress，我们需要获取鼠标位置和按键的值

  $(function () {
      $('#testMouseMoveDiv').mousemove(function (e) {
          $('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
      });
  });

• 取消绑定

  • off('click', function),function必须是同一个引用

    function hello() {
        alert('hello!');
    }
    
    a.click(hello); // 绑定事件
    
    // 10秒钟后解除绑定:
    setTimeout(function () {
        a.off('click', hello);
    }, 10000);

  • 无参数调用off()一次性移除已绑定的所有类型的事件处理函数。

• 代码触发事件：当用户在文本框中输入时，就会触发change事件。但是，如果用JavaScript代码去改动文本框的值，将不会触发change事件

  • input.change() input.trigger('change'),手动触发事件，可以减少代码。。

    var input = $('#test-input');
    input.val('change it!');
    // input.change()相当于input.trigger('change')，它是trigger()方法的简写。
    input.change(); // 触发change事件

• 其他事件

  • focus：当DOM获得焦点时触发；
  • blur：当DOM失去焦点时触发；
  • change：当<input>、<select>或<textarea>的内容改变时触发；
  • submit：当<form>提交时触发；
  • ready：当页面被载入并且DOM树完成初始化后触发。

• ready:绑定事件的时机：如果DOM没有加载完，绑定事件是无效的！初始化代码必须放到document对象的ready事件中，保证DOM已完成初始化：

  <html>
  <head>
      <script>
          $(document).on('ready', function () {
              $('#testForm).on('submit', function () {
                  alert('submit!');
              });
          });
       	 // 简化:
          $(document).ready(function () { 
      	 $('#testForm).submit(function () {
          		alert('submit!');
      	});
        	// 再简化:
        	$(function () {
      		// init...
  		});
  });
  });
      </script>
  </head>
  <body>
      <form id="testForm">
          ...
      </form>
  </body>

  • 反复绑定事件处理函数，它们会依次执行

动画

• jQuery内置

  • show(time) hide(time) toggle(time)加时间就是动画,效果从左上角变换。
  • slideUp(time)和slideDown(time) slideToggle(time)是在垂直方向逐渐展开或收缩的。
  • fadeIn(time) fadeOut(time) fadeToggle(time)

• 自定义动画

  • animate()

    var div = $('#test-animate');
    div.animate({
        opacity: 0.25,
        width: '256px',
        height: '256px'
    }, 3000, function () {// 在3秒钟内CSS过渡到设定值
        console.log('动画已结束');
        // 恢复至初始状态:
        $(this).css('opacity', '1.0').css('width', '128px').css('height', '128px');
    });

  • 串行动画：delay()方法还可以实现暂停

    var div = $('#test-animates');
    // 动画效果：slideDown - 暂停 - 放大 - 暂停 - 缩小
    div.slideDown(2000)
       .delay(1000)
       .animate({
           width: '256px',
           height: '256px'
       }, 2000)
       .delay(1000)
       .animate({
           width: '128px',
           height: '128px'
       }, 2000);
    }

  • 细节问题：

    • 没有效果：因为jQuery动画的原理是逐渐改变CSS的值，如height从100px逐渐变为0。但是很多不是block性质的DOM元素，对它们设置height根本就不起作用，所以动画也就没有效果。
    • jQuery也没有实现对background-color的动画效果，用animate()设置background-color也没有效果。这种情况下可以使用CSS3的transition实现动画效果。

AJAX

• jQuery在全局对象jQuery（也就是$）静态绑定了ajax()函数，可以处理AJAX请求。ajax(url, settings)函数需要接收一个URL和一个可选的settings对象，常用的选项如下：
  • async：是否异步执行AJAX请求，默认为true，千万不要指定为false；
  • method：发送的Method，缺省为'GET'，可指定为'POST'、'PUT'等；
  • contentType：发送POST请求的格式，默认值为'application/x-www-form-urlencoded; charset=UTF-8'，也可以指定为text/plain、application/json；
  • data：发送的数据，可以是字符串、数组或object。如果是GET请求，data将被转换成query附加到URL上，如果是POST请求，根据contentType把data序列化成合适的格式；
  • headers：发送的额外的HTTP头，必须是一个object；
  • dataType：接收的数据格式，可以指定为'html'、'xml'、'json'、'text'等，缺省情况下根据响应的Content-Type猜测。

• 发送&&接收

  var jqxhr = $.ajax('/api/categories', {
      dataType: 'json'
  }).done(function (data) {
      console.log('成功, 收到的数据: ' + JSON.stringify(data));
  }).fail(function (xhr, status) {
      console.log('失败: ' + xhr.status + ', 原因: ' + status);
  }).always(function () {
      console.log('请求完成: 无论成功或失败都会调用');
  });

• 辅助方法

  // get
  var jqxhr = $.get('/path/to/resource', {
      name: 'Bob Lee',
      check: 1
  });
  // post
  var jqxhr = $.post('/path/to/resource', {
      name: 'Bob Lee',
      check: 1
  });
  //get 自动解析为JSON对象
  var jqxhr = $.getJSON('/path/to/resource', {
      name: 'Bob Lee',
      check: 1
  }).done(function (data) {
      // data已经被解析为JSON对象了
  });

• jsonp：在ajax()中设置jsonp: 'callback'，让jQuery实现JSONP跨域加载数据。

jQuery插件

• 扩展jQuery对象（$(‘p’).xxx）

  • 扩展$.fn对象（本质添加原型方法）
  • 插件函数最后要return this;以支持链式调用
  • 插件函数要有默认值，绑定在$.fn..defaults上；（推荐）
  • 用户在调用时可传入设定值以便覆盖默认值。（推荐）

  $.fn.highlight = function (options) {
      // 用短路运算符设置运算符
      // var bgcolor = options && options.backgroundColor || '#fffceb';
      // var color = options && options.color || '#d85030';
      // 合并默认值和用户设定值:$.extend的功能后面向前合并
      var opts = $.extend({}, $.fn.highlight.defaults, options);
      this.css('backgroundColor', opts.backgroundColor).css('color', opts.color);
      return this;
  }
  
  // 设定默认值:
  $.fn.highlight.defaults = {
      color: '#d85030',
      backgroundColor: '#fff8de'
  }

  • 针对特定元素的扩展：在函数内过滤一下

• 静态扩展（$.xxx）

  • extend？

underscore

• 一个库提供一些函数式方法兼容各种浏览器，入map， filter， some，every

• 以标志符_开头调用，如_.map()

• 方法有：

  • Collection：Array和Object，暂不支持Map和Set

    • _.map _.mapObject
    • _.filter()
    • _.every() _.some()
    • max()和min()
    • groupBy()把集合的元素按照key归类，key由传入的函数返回
    • shuffle()用洗牌算法随机打乱一个集合
    • sample()随机选择一个或多个元素

  • Arrays

    • _.first() _.last()取第一个和最后一个元素

    • _.flatten()接收一个Array，无论这个Array里面嵌套了多少个Array，最后都把它们变成一个一维数组

    • _.zip()把两个或多个数组的所有元素按索引对齐,unzip()则是反过

      var names = ['Adam', 'Lisa', 'Bart'];
      var scores = [85, 92, 59];
      _.zip(names, scores);
      // [['Adam', 85], ['Lisa', 92], ['Bart', 59]]

    • _.object(),为啥不把名字和分数直接对应成Object呢？object()函数就是干这个的.

    • _.range()快速生成一个序列

  • Function

    • _.bind() 类似bind

    • _.partial()为一个函数创建偏函数,固定一个参数

    • _.memoize()缓存一个函数的运算结果，如果参数不变直接返回结果。

      function factorial(n) {
          console.log('start calculate ' + n + '!...');
          var s = 1, i = n;
          while (i > 1) {
              s = s * i;
              i --;
          }
          console.log(n + '! = ' + s);
          return s;
      }
      
      factorial(10); // 3628800

    • _.once()保证某个函数执行且仅执行一次

      var register = _.once(function () {
          alert('Register ok!');
      });
      
      register();
      register();

    • _.delay()可以让一个函数延迟执行

      var log = _.bind(console.log, console);
      _.delay(log, 2000, 'Hello,', 'world!');

  • Object

    • _.keys()返回object自身所有的key，但不包含从原型链继承下来的
    • _.allKeys()除了object自身的key，还包含从原型链继承下来的
    • _.values()返回object自身但不包含原型链继承的所有值：
    • _.invert()把object的每个key-value来个交换，key变成value，value变成key
    • _.extend()把多个object的key-value合并到第一个object并返回。extendOwn()和extend()类似，但获取属性时忽略从原型链继承下来的属性
    • _.clone()：浅复制一个object对象
    • _.isEqual()对两个object进行深度比较

• 链式调用：underscore提供了把对象包装成能进行链式调用的方法

  • chain()函数

    _.chain([1, 4, 9, 16, 25])
     .map(Math.sqrt)
     .filter(x => x % 2 === 1)
     .value();

    ​

模板代码

• 网络访问

  // 工具方法：ajax函数将返回Promise对象:
  function ajax(method, url, data) {
      var request = new XMLHttpRequest();
      return new Promise(function (resolve, reject) {
          request.onreadystatechange = function () {
              if (request.readyState === 4) {
                  if (request.status === 200) {
                      resolve(request.responseText);
                  } else {
                      reject(request.status);
                  }
              }
          };
          request.open(method, url);
          request.send(data);
      });
  }
  // 注意访问地址不要跨域
  var p = ajax('GET', 'url address');
  p.then(function (text) { // 如果AJAX成功，获得响应内容
      console.log(text);
  }).catch(function (status) { // 如果AJAX失败，获得响应代码
      console.log('ERROR: ' + status);
  });

  ​