# 添加自定义函数

当项目中经常需要用的一个功能，但是 jQuery 没有提供简化版函数
其实就是定义一个函数，保存在 jQuery 类的原型对象中

jQuery 原型对象中的方法，可用 this 获得将来调用该函数的.前的 jq 对象。且不用在 $() 封装 this，应为 this 已经是 jQuery 子对象

简写: 其实 jQuery.fn = jQuery.prototype

所有: jQuery.prototype.sum = function() { ... }
可简写为: jQuery.fn.sum = function() { ... }

# 封装 jQuery 插件

# 什么是 jQuery 插件

拥有独立的 HTML，css，js 甚至是数据的可重用页面独立区域
以代码重用和简化开发
只要在项目中发现反复使用的页面功能区域，都需要封装插件，在反复使用欧冠插件

# 封装插件

jQuery 官方插件: jQuery UI

去官网 jQueryui.com 下载 jQueryUI 库

引入 jquery-ui.css
引入 jquery.js
引入 jquery-ui.js

按照插件要求编写 html 代码，一个 css 都不用加
在自定义 <script> 找到插件的父元素，对父元素调用插件函数

原理:

侵入性: 不需要开发人员干预，插件函数可自动根据自身需要添加 class 和自定义扩展属性
  优点: 省事
  缺点: 可维护性差

封装插件

1. 提取插件的 css 到一个独立的 css 文件中
  笔试题: 如何避免组件样式之间的冲突
    属于一个组件内的 class，都要统一以这个组件的父级 class 名开头，写完整路径

2. 定义独立的 js 文件
  向 jQuery 类型的原型对象中添加一个插件函数

  1. 自动侵入 class
  2. 自动绑定事件: 只需要将原来的 js 代码剪切到插件函数中，换一下主语

使用插件

1. 引入插件 .css
2. 引入 jquery.js
    引入插件 .js
3. 按照插件要求编写 html 内容，不用加 class
4. 在自定义的 script 中，找到插件的父元素，为其调用插件函数

# Ajax

$ajax({
    url: "服务端接口地址",
    type: "get或post",
    data: {参数1: 值1, 参数2: 值2, ....},
    dataType: "json", // 请 ajax 函数帮忙自动将 json 字符串转换为 js 对象或数组，可直接调用(自动调用JSON.parse())
    success: function(result) { // 回调函数: 在请求成功后并成功接收到响应后，自动执行   // result 自动获得服务端返回的结构 }
});

// 不用自己封装 ajax

# 跨域

# 什么是跨域

一个网站下载的网页，请求/使用了另一个网站下的资源 Ajax 不允许发送跨域请求

# 原理

一个网站的网页中发送的 ajax 请求，只能访问自己网站下提供的数据。不能访问别的网站提供的数据

允许发送请求
也能成功收到请求
浏览器会检查响应头，中的来源地址，如果来来源地址和当前网页所在的地址不同则禁止使用该数据，报错

# 跨域请求包括

1. 域名不同 http://www.a.com 下的网站
  ajax 请求 -> http://www.b.com

2. 子级域名不同 http://oa.tedu.cn 下的网页
  ajax 请求 -> http:hr.tedu.cn

3. 端口不同 http://localhost:5500 下的网页
  ajax 请求 -> http://loaclost:3000

4. 协议不同 http://12306.com 下的网页
  ajax 请求 -> https://12306.com
  因为协议不同，其实就是端口号不同
    http 协议默认是 80 端口
    https 协议默认就是 443 端口

5. 即是同一台机器，相同的端口协议，ip 和域名之间互相访问，也算跨域
  http://localhost:3000 下的页面
  ajax 请求 -> hpp://127.0.0.1:3000

以上五中情况，都不允许 ajax 请求数据

# 解决跨域 2 种方法

CORS

只需要服务端在返回数据时，在响应头中伪造来源地址，和客户端浏览器地址中的地址保持一致

伪装响应头: {
  "Access-Control-Allow-Origin": "地址"
}

伪装响应头时，之写死一个客户地址，如果将来多个客户地址需要这个服务端数据，就不可兼得
  解决: "Access-Control-Origin": "*"
    可伪装成任意客户端地址，允许任意客户端都能访问这个服务端的数据

每个接口，都需要伪装响应头，每个接口在返回数据前，都要写 res.writeHead(200, {...})

解决: nodejs 中
  安装 cors 模块  npm install cors
  并为 app.js 配置 cors 中间件
  凡是进入 app.js 的请求，统一先伪装响应头，在进入路由处理数据

JSONP:

暂未添加文档

# 前后端分离

将来的项目都是前端和后端两个项目独立开发两个项目之间的练习，仅仅靠接口地址

后端: 只负责编写服务程序，并抛出接口地址
前端: 通过 ajax 请求，请求服务端接口地址，提交/获取服务端数据，实现页面交互功能

前后端分离核心技术: ajax 和跨域请求

← 事件操作