面向对象编程

Objects对象的原生要领分红两类：Object自身的要领(静态要领)和Object的实例要领。注重Object是JavaScript的原生对象，一切的其他对象都是继续自Object对象，故别的对象都是Object的实例。

Object的静态要领

Object.keys()要领与Object.getOwnPropertyNames()，参数是对象，返回一个数组，数组的值是改对象自身的一切属性名,——辨别在于keys返回可罗列的属性，getOwnPropertyNames返回不可罗列的属性值。

Object的实例要领

Object.prototype.valueOf():返回当前对象的对应值.
Object.prototype.toString():返回当前对象对应的的字符串情势.
Object.prototype.toLocaleString(): 返回当前对象对应的的当地字符串情势.
Object.prototype.hasOwnProperety(): 推断某个属性是不是为当前对象的自身属性,照样继续自原型对象
Object.prototype.isPrototypeOf(): 推断当对象是不是为另一个对象的原型.
Object.prototype.propertyIsEnumerable(): 推断某个属性是不是为罗列.

Array对象

<article>

对象是一个容器,封装一些属性(property)和要领的鸠合,属性是对象的状况,要领是对象的行动.JavaScript言语的对象系统,不是基于”类”的,
而是基于组织函数(constructor)和原型(prototype).
组织函数是对象的模板,特地用来天生实例对象的函数.组织函数的首字母大写,内部运用this关键字,天生对象的时刻
,必需运用new敕令.
new敕令: 实行组织函数,返回一个实例对象.
Object.create()建立实例对象.

this关键字: 属性和要领”当前”地点的对象,总返回一个对象.
绑定this的三种要领:
Function.prototype.call()
Function.prototype.apply()
Function.prototype.bind()
运用场所: 全局环境是运用this,指的是顶层对象window.在组织函数中的this,指的是实例对象

严厉形式: “use strict”; 严厉形式必需从代码的一最早就见效,即写在第一行.
异步操纵:
浏览器的JS引擎有多个线程,每一个剧本只能在一个线程上运转.采纳”事宜轮回”机制.

<p>

渣滓接纳机制:运用渣滓收集器.周期性接纳那些递次中,不被其他援用所实行的变量的内存资本,多是局部变量,用完就废.
罕见的二种体式格局: 标记消灭与援用计数,标记消灭,当变量进入实行环境,如声明一个变量,渣滓接纳机制将其标记进入”进入环境”,当这个变量脱离这个环境时,函数实行完毕将其标记为”脱离环境”,消灭.援用计数跟踪每一个值被运用的次数,该值取得赋值+1,该变量的值变成别的一个-1.
OOP:面向对象编程,对象是一个容器,封装了属性(Property)和要领(method).
JAVA和C++都有类的观点,而类是对象的模板,对象是类的实例,但JS不是基于”类”,基于”组织函数(constructor)”和”原型链(prototype).
组织函数:

     平常的函数,函数名首字母大写.天生对象就要运用new.new的作用就是实行组织函数,返回一个实例对象.
     <script>
        "use strict";
        var Cup = function(){ this.money= 77;};
        //
        let app = function() {this.money=100;};
      let Sun = new app(); Sun.money;//100 new 建立一个对象 用new this指向空对象,不必new this指向全局.

  //运用现有对象建立对象Object.create()
     var linyi = {
          naem: 'linyi',
          age:  '1000',
          do:function() {
           console.log("Hi"+this.name+".");
                         }
                  };
    let  linyi2 = Object.create(linyi);
    linyi2.name ;
     </script>

对象继续:

      A对象继续B对象,具有B对象一切的属性和要领.继续经由历程"原型对象prototype".

编程范例:

      行动与款式星散.定名法: 大骆驼式定名法:首字母大写.小骆驼定名法:首字母小写.
      文件资本定名: 文件名不得含有空格,悉数小写,多个单单词用- 运用相对途径.如src=”//img/s.jpg”
      变量,函数运用小骆驼,组织函数运用大骆驼.常量悉数大写加下划线_.只管不运用eval()函数.
      只管不运用var,运用const.优先运用箭头函数,只运用单引号包裹字符串,制止运用双引号,假如字符串中包含单引号字 符,应运用模板字符串.

模块加载:

      AMD提早加载模块,不论是不是挪用,先剖析一切模块.CMD提早加载,在真正须要时,才剖析该模块
      AMD(Require.js) CMD(Sea.js) UMD(Commonjs+AMD) Common.js(Node.js) 

设想形式:

     设想形式有20多种,控制经常使用四种: 单例形式,工场形式,装潢器形式,观察者形式.

this指向:

    this是一个关键字,它用在差别的场所,但它老是返回一个对象.属性地点的当前对象是可变的,this的指向是可变的.

JavaScript的一切都是对象,运转环境也是对象,函数在某一个对象中运转时,this就是函数运转时地点的对象.但函数能够在差别实行环境运转,所以须要this执代当前的运转环境.

     三运用: 
             (1)全局环境: this执向顶层对象window.
             (2)组织函数: this执向实例对象.
             (3)对象的要领: 当对象的要领内里包含this,this的指向就是要领运转时地点的对象.该要领赋值给另一个对象时,就会转变this的指向.
     三防备:
             (1)防备多层this.
             (2)防备数组处置惩罚要领中的this.
             (3)防备回调函数中的this.
     三绑定:
             (1)call();绑定this到某对象.
             (2)apply();接收一个数组,转变this指向.
             (3)bind();绑定个某对象,返回一个新函数,

关键字: call,apply,bind this.

三个要领call,bind,apply用于将this绑定到函数,即转变this指向.辨别在于挪用的体式格局.call()马上实行函数,但须要把参数按递次传入 .apply()会马上实行函数,但须要把一切参数组合为一个数组传入.这两个差不多,但call函数会把数字作为一个参数.
.bind()传入参数的体式格局与.call()雷同,然则返回一个新的函数,以及对应的环境与和参数.
.toString :返回函数的字符串示意
    

实行高低文:

        当前代码的实行环境.注重当代码最早实行时,构成实行高低文栈,全局实行高低文永远在栈底,当前实行实行的函数在栈定.每一个实行高低文都有三个主要属性:变量对象,作用域链,this注重js引擎最早实行js代码时,最早进入的是一个全局的实行高低文,在全局的实行高低文中每挪用一个函数,就会建立一个实行高低文的内部对象(作用域),一个实行高低文定义一个函数实行环境,每次实行每次的实行高低文举世无双,屡次挪用建立多个.实行高低文逐次实行,直到回到全局高低文.每一个函数都有差别的高低文和作用域,作用域基于函数,高低文基于对象.

作用域链:

        一个函数,我们在内里再建立一段函数,父函数挪用子函数的变量叫做闭包,但构成了单个作用域链,从子函数最早不停往上查找,就是作用域链.在js中,函数也是对象,对象中有些属性我们能够接见,有些不能够.不能够接见的属性打击js引擎存取,如scope(作用域),存储了实行高低文的鸠合.个中实行高低文的对象鸠合,呈链式链接,叫做作用域链.

严厉形式:

      页面第一行声明 "use strict"; 作用:制止一些不合理与不严禁的语法,增添报错的场所, 进步编译器的效力.
      不可对只读属性赋值(字符串长度等),函数不能有重名的参数.制止隐式全局变量声明,制止this实行全局,制止删除变量.制止运用with语句,创设eval作用域,非函数代码块不可声明函数. 

AJAX 跨域.内置对象: Object对象(首字母大写),Array,Boolean,Number,String,Math,Date,RegExp,JSON.
异步操纵: 定时器和Promise对象.

异步操纵:

   JavaScript只在一个线程上运转,但js引擎是多个线程.内部运用"事宜轮回(Event Loop)"机制.一切的使命分为同步使命和异步使命.同步使命在主线程列队,一个接着一个.异步使命:被引擎放在一边,进入使命行列的使命,不必实行完就能够实行下一步.
   使命行列: 主线程以外,用来处置惩罚当前递次处置惩罚的异步使命.异步使命可变同步,且有回调函数.

定时器:定时实行代码.主要有两个函数setTimeout()和setInterval().向使命行列增加定时使命.

Object:顶层对象是Window对象,但一切的对象都继续Object对象,即一切的对象都是Object的实例.Object的原生要领,分Object自身要领(静态要领)和实例要领.<script>
//自身的要领,直接定义在自身.
Object.print= function () {console.log(0)};
//实例要领是定义在Object的原型对象Object.prototype上的要领,它能够被Object实例直接运用.
Object.prototype.print = function (){console.log(this);}; var obj = new Object;obj.print;();
//作为东西函数
var obj = Object();//转换为对象
//作为组织函数,天生新对象.
var Obja = new Object();
//此为有一些静态要领和实例要领.</script>

Array:

原生对象(内置对象之一),也是一个组织函数,也可用他它天生新的数组.一个静态要领和二十个实例要领.<script>
 var apple = new Array(2); arr.length;//2
 apple.isArray(arr);//true;推断是不是是数组.
 var apple = [1,2,3];
 apple.valueOf();//[1,2,3]返回该值.
 apple.toString();//"1,2,3"返回数组的字符串情势.
 apple.push(1);//再数组末端增加一个或多个元素.
 apple.pop();//删除末了一个元素.
 apple.shift();//删除数组末了一个元素. 
 apple.join();//以制订参数作为分开符,分开数组.
 ['a'].concat(['world']);//兼并数组.
 apple.reverse();//倒置数组递次.
 apple.slice(2,3);//提取数组返回,新数组.
 apple.splice();//删除原数组的一部分红员.
 apple.sort();//数组从新排序.
 apple.map();//将数构成员顺次传入参数函数.
 apple.forEach();//将数构成员顺次传入参数,但不返回值.
 apple.filter();//用于过滤数构成员.
 apple.some();//一真则真.
 apple.every();//全真才真.
 apple.reduce();//从左到右相加.
 apple.reduceRight();//从右到左想加.
 apple.indexOf();//指定数组第一次涌现的位置.
 apple.lastIndexOf();//制订数组末了一次涌现的位置.
</script>

JSON: 一种数据交换文本花样,每一个JSON对象是一个值.JSON的对值的范例和花样有严厉的划定.null,空对象,空数值都是正当的JSON值
javascript内置对象JSON对象,用来处置惩罚JSON花样数据,有两个静态要领.JSON.stringify()和JSON.parse()
<script>
//JSON.parse()将JSON字符串转换成对应的值.
JSON.parse(‘{}’)//{}
//JSON.stringify()将一个值转为JSON字符串.
JSON.stringify(‘abc’)//””abc””
</script>
RegExp对象:
一种表达文本形式的要领.新建有二种.运用字面量用/包含.运用RegExp组织函数.
Date对象:
javascript原生的时候库,它以1970.1.1.00:00:00作为零点,高低可示意一亿天.
用法: 作为平常函数和组织函数 三种静态要领: Date.now() Date.parse() Date.UTC()
实例要领: ValueOf和toString,以外另有三类: to类,get类,set类.
<script>
//平常函数
Date()//直接运用,返回当前时候,加参数也没用.
//组织函数
let Today = new Date();
Today; //这里返回的实例即是Today.toString()
Today.valueOf() //返回间隔零点的毫秒数===getTime
Date.now()//返回间隔零点的毫秒数
Date.parse()//剖析日期字符串.一样返回间隔零点的毫秒数.剖析失利,返回NaN.
Date.UTC() //接收年,月,日等变量作为参数,返回该时候间隔零点的时候.
</script>
Math对象:

内置对象,该对象不是组织函数,不能天生实例,供应种种数学功用.内置一些静态数学和要领.<script>
//返回常数e ,2的自然对数,10的自然数,以2为底的e的对数,以10为底的e的对数,常数PI.0.5和2的平方根.
Math.E; Math.LN2; Math.LN10; Math.LOG2E;Math.LOG10E;Math.PI;Math.SQRT1_2;Math.SQRT2;
//上面的数学都是只读的,不可修正.
//静态要领
Math.abs(); Math.ceil(); Math.floor();Math.max();Math.min();Math.pow();Math.sqrt();
Math.log();Math.exp();Math.round();Math.random();
//一些三角函数要领
Math.sin();Math.cos();Math.tan();Math.asin();Math.acos();Math.atan();</script>

包装对象:三种原始范例的值(数值,字符串,布尔值)封装的对象.内置了一些属性和要领.包装对象都从Object对象继续两个要领valueOf和toString.valueOf()要领返回包装对象实例对应的原始范例的值.toString()要领返回对应的字符串情势.

Bollean对象:

JavaScript对象作为JavaScript的三个包装对象(Number,String)之一.
用法: 作为组织函数和一样平常运用.<script>
  //作为组织函数
  let a = new Boolean(true);
  typeof a;
  a.valueOf() //true
  //一样平常零丁运用
  Boolean(null)//false;
  Boolean(1)//true;
  !!0//false
  !![]//ture;</script>

Number对象:

包装对象之一,用法二种:组织函数和东西函数.封装了一些静态属性和要领.也可自定义要领.<script>
   //用于组织函数
   let a = new Number(1); //a为天生值为数值的对象.
   //东西函数
   Number(true) //1 将true转为1 将任何数据范例的值转为数值.
   Number.NaN//NaN
   //实例要领
   (100).toString();//"10"数字转字符串
   (100).toFixed();//转换为对应的字符串
   (222).toExponential();//转换为科学计算法
   (333).toPrecision(1);//转换为指定位数的有用数字.
                                           </script>

String对象
包装对象之一,用来天生字符串对象(很像数组的对象,但不是数组).一个静态要领,一个实例属性,十六个实例要领.<script>
//作为东西要领运用,将恣意范例的值转为字符串
String(true);//”trye”
String.fromCharCode(104,101,108,108,111);//将参数值代表的Unicode码点转为字符串.
‘abcdegf’.length; //7
let rain = new String(“abcdefg”);
rain.charAt(1);//”b”返回指定位置的字符==’abcdefg'[1]
rain.charCodeAt(1)//98返回指定位置字符串的Uniocde码点.无参返回首字符的码点.参数为负数或大于时,返回NaN.
let b = new String(‘0101’);
rain.concat(b)//”abcdefg0101″衔接两个字符串,返回一个新字符串.
rain.slice(0,1)//”ab”返回参数截取的字符,参数为负时,倒计数.一参大二参时,返回空字符串””.
rain.substring(0,1)//”ab”类似与slice,划定规矩不好记,只管不要用,用slice.
rain.substr()//”ab”大抵与slice雷同,二参为截取的长度,为负时转为0.
rain.indexOf(‘c’)//3字符涌现的位置.
rain.lastIndexOf(‘c’)//4从尾部最早计数位置.
rain.trim()//去除字符串的两头的空格.
rain.toLowerCase();//将字符串悉数转为小写.
rain.toUpperCase();//全局字符串转为大写.
rain.math(‘abc’);//abc返回婚配到的字符,无则null.
rain.search(‘ab’);//1返回婚配的第一个符合字符的位置.
rain.serach(‘a’,’1′);//’1bcdefg’替代字符
rain.spilt(‘|’);//[“a”,”b”,”c”,”d”,”e”,”f””g]返回支解的字符串
rain.localeComparse(‘banana’)//比较二个字符,一大二,返回值大于0,相称返回0,小于返回小于0 </script>要领:
parseInt()将字符串转为整数 parseFloat()将字符串转为浮点数 isNaN()推断一个值是不是为NaN.
isFinite()返回布尔值,示意某个值是不是为平常的数值.false有+/-Infinity NaN undefined
split() 把字符串支解为字符串数组.
Math.ceil();向上取整. Math.round();四舍五入.Math.floor();向下取整.
valueOf() 返回某个字符串对象的原始值。
concat() 衔接两个或更多的数组，并返回效果。
pop() 删除并返回数组的末了一个元素
push() 向数组的末端增加一个或更多元素，并返回新的长度。
reverse() 倒置数组中元素的递次。
shift() 删除并返回数组的第一个元素
sort() 对数组的元素举行排序
<script>

  //正则表达式
  //磨练基本日期花样
  var reg1 = /^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$/;
  var reg2 = /^(^(\d{4}|\d{2})(\-|\/|\.)\d{1,2}\3\d{1,2}$)|(^\d{4}年\d{1,2}月\d{1,2}日$)$/;
  //效验暗码强度,必需是包含大小写字母和数字的组合，不能运用特别字符，长度在8-10之间。
  var reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/;
  //校验中文,字符串仅能是中文
  var reg = /^[\\u4e00-\\u9fa5]{0,}$/;
  //由数字、26个英文字母或下划线构成的字符串
  var reg = /^\\w+$/;
  //校验E-Mail 地点
  var reg = /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/;
  //. 校验身份证号码 15或18
  var reg = /^[1-9]\\d{7}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}$/;
  var reg = /^[1-9]\\d{5}[1-9]\\d{3}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}([0-9]|X)$/;
  //效验日期
  var reg = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/;
  //. 校验金额,准确到2位小数
  var reg = /^[0-9]+(.[0-9]{2})?$/;
  //推断IE的版本
  var reg = /^.*MSIE [5-8](?:\\.[0-9]+)?(?!.*Trident\\\/[5-9]\\.0).*$/;
  //校验ipv6地点
  var reg = /(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))/;
  //校验IP-v4地点
  var reg = /\\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\b/;
  //搜检URL的前缀,运用开辟中许多时刻须要辨别要求是HTTPS照样HTTP，经由历程下面的表达式能够掏出一个url的前缀然后再逻辑推断。
  if (!s.match(/^[a-zA-Z]+:\/\//)) {
      s = 'http://' + s; }
  //提取url链接
  var reg = /^(f|ht){1}(tp|tps):\/\/([\w-]+\.)+[\w-]+(\/[\w- ./?%&=]*)?/;
  //文件途径与扩展名效验,考证windows下文件途径和扩展名（下面的例子中为.txt文件）
  var reg = /^([a-zA-Z]\\:|\\\\)\\\\([^\\]+\\)*[^\\/:*?"<>|]+\\.txt(l)?$/;
  //提取Color Hex Codes,偶然须要抽取网页中的颜色代码，能够运用下面的表达式。
  var reg = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
  //提取网页图片,倘使你想提取网页中一切图片信息，能够运用下面的表达式。
  var reg = /\\< *[img][^\\>]*[src] *= *[\\"\']{0,1}([^\\"\'\ >]*)/;
  //提取页面超链接,提取html中的超链接
  var reg = /(<a\\s*(?!.*\\brel=)[^>]*)(href="https?:\/\/)((?!(?:(?:www\\.)?'.implode('|(?:www\\.)?', $follow_list).'))[^"]+)"((?!.*\\brel=)[^>]*)(?:[^>]*)>/;
  //查找CSS属性
  var reg = /^\\s*[a-zA-Z\\-]+\\s*[:]{1}\\s[a-zA-Z0-9\\s.#]+[;]{1}/;
  //抽取解释,假如你须要移除HMTL中的解释，能够运用以下的表达式。
  var reg = /<!--(.*?)-->/;
  //转换千分位分开符
  return total.toString().replace(/\B(?=(\d{3})+$)/g, ',');

</script>
跨域 :一个域下的文档或剧本试图去要求另一个域下的资本.(广义).浏览器同源战略限定的一类要求场景(狭义).

如: 资本跳转: A链接,重定向,表单提交.资本嵌入:<link><script></script><img><frame>等dom标签
款式中:background:url().@font-face()等文件外链.剧本要求:js提议的ajax要求,dom和js对象的跨域操纵等.

跨域限定:

 服务器的一个行动,当开启对某些域名的接见限定后,只要同域或指定域名下的页面能够挪用.平常情况下只在用浏览器端存在,关于服务器/ios/andriod等客户端是不存在的.

同源战略(SOP)

 它是一种商定,即"协定/域名/端口"必需雷同.防备XXS,CSRF等进击.限定了Cookie,LocalStorage和IndexDB没法读取.DOM和JS对象没法取得.AJax要求不能发送.

get要求与post要求:

  实质都是tcp协定,http的划定和浏览器与服务器的限定,在运用的历程有所差别,get发生一个tcp数据包,post发生两个数据包,GET求,浏览器会把http的header和data一并发送出去.服务器相应200(返回数据),关于post,浏览器先发header,服务器相应100 浏览器再送data,服务器相应200(返回数据).

前后端通信中ajax只支撑同源战略,websocket不受同源战略影响,CRO新标准,都支撑.
9种跨域解决方案
(1)jsonp跨域(2)document.domain + iframe跨域 (3)location.hash + iframe (4)window.name + iframe跨域
(5)postMessage跨域(6)跨域资本分享(CROS)(7)nginx代办跨域 (8)node中间件代办跨域(9)WebSocket协定跨域
json: javascript对象示意法,轻量级的文本数据交换花样.具有层级构造,可运用AJAX举行传输.json语法是js语法的子集,
JSONP:是json的一种”运用形式”,能够让网页从别的域名猎取材料.只支撑GET要求,CORS支撑一切范例的HTTP要求.JSONP上风在于支撑先生浏览器,以及能够向不支撑CORS的网站要求数据.道理是script src 实质就是一个回调函数,然后在长途服务器上挪用这个函数而且将json数据情势作为参数通报,完成回调.对象花样的字符串,轻量的数据传输花样. 注重:键值须要””包起来.

 两个要领:JSON.parse 和 JSON.stringify  JSON.parse，将背景传来的字符串转化为对象。其字符串的内容就是对象才须要这个转化.
 JSON.stringify，将背景传来的对象转化为字符串。

<script>

  //原生完成
  var script = document.createElement('script');
  script.type = 'text/javascript';
  //传参并指定回调实行函数为onBack
  script.src = "http://www.domain2.com:8080/login?user=admin&callback=onBack"
  document.head.appendChild(script);
  //回调函数
  function onBack(res) {
     alert({JSON.stringify(res)});
  }
  //服务器返回以下(返回时即实行全局函数)
  onBack({"status":true,"user":"admin"})
 //jqery ajax
  $.ajax({
    url: 'http://www.domain2.com:8080/login',
    type: 'get',
    dataType: 'jsonp', //要求体式格局为jsonp
    jsonpCallback: "onBack" //自定义回调函数
    data: {}
  });

//要领document.domain +iframe 仅限于主域雷同,子域差别的跨域运用场景
//两个页面都经由历程js强迫设置document.domain为基本主域,完成同域.

 //父
 <iframe id="iframe" src="http://child.domian.com/b.html"><iframe>
   document.domain = "domain.com";
   var user = 'admin';
 //子
  document.domain = 'domain.com';
  alert('get js data from paretn --->' + window.parent.user)
 //增加<script>标签的要领
function addScriptTag(src) {
    var script = document.createElement('script');
    script.setAttribute("type", "text/javascript");
    script.src = src;
    document.body.appendChild(script);
}

// 向背景提议要求（链接是胡乱写的）
addScriptTag('http://www.qq.com/getJsonp?callback=jsonCallback')
 
//jQuery ajax,逐步退出历史舞台,基于原生的XHR开辟.Ajax是用JS向服务器发送要求,并猎取服务器返回的内容,全部页面并没有革新.通经常使用Ajax要求JSON的花样的数据
 $.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
});

//axios现在主力将军,promise完成版本
axios({
method: 'post',
url: '/user/12345',
data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
        }
    })
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

//Fetch 将来的娇子 还需生长
try {
  let response = await fetch(url);
  let data = response.json();
  console.log(data);
} catch(e) {
  console.log("Oops, error", e);
}

//原生跨域要求

var script = document.createElement('script');
script.type = "text/javascript";
//传参数并指定回调实行函数为onBack
script.src = "http://www.baidu.com:8080/login?user=admin&callback=onBack;"
document.head.appendChild(script);
//回实行函数
function onBack(res) {
  alert(JSON.stringify(res));
}

$.ajax({
  url: 'http://www.baidu.co:8080/login',
  type; 'get',
  dataType: 'jsonp', //要求体式格局为jsonp
  jsonCallback: "onBack",
  data: {}
});
//Vue
this.$http.jsonp('http://www.baidu.com:8080/login',{
   params: {},
   jsonp: 'onBack'
}).then((res) => {
 console.log(res);
})

</script>