概述：
在Web、APP、微信等网站开发过程中，当项目要进行前后端分离的时候，前后端的数据交互几乎都是调接口，目前用XMLHttpRequest（Ajax 局部刷新技术 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新 *jQuery插件封装了$.ajax方法很方面*）, 或者HTML5中 websocket API(实时用迅技术 当浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以实时的进行数据互相传送) 这两种数据传输方法比较常用。
问题：
但是在做项目时调用接口域名的地方很多，小项目可能就几十个，大的项目就上百或上千之多，再加上项目一般都会有开发环境，测试环境，正式环境共三套环境中，如果是写死的接口域名，那提么这时你可能就要哭了！哈哈，没事慢慢改吧！好了，开个玩笑！
解决办法：
办法1、将接口域名做成JS格式 或 JSON格式的配置文件,如JS格式：xxx.js文件，内容如下：
const net = {
"dev": "http://www.xxxhddevxxxxxx.com",
"test": "http://www.xxxhdtestxxxxxx.com",
"for": "http://www.xxxhdforxxxxxx.com"
}
一般项目都有全局公共的js文件（如public.js 没有就新建一个吧，每个页面都加载进去就OK了），然后将上面的xxx.js文件载入到这个公共的public.js文件中来（方法很多：如每个页面都把xxx.js加载进去【注意顺序，要放在公共public.js之前】，或者Ajax，【$.getscript（）、$.getjson()】方法等等）来获取到上面所配置好将接口域名的内容。
思路：
此时在这个公共的public.js文件中用一个全局常量或变量（建议用常量，因为常量是一经建立就不要随意修改，即便是要改也是一改全改），再根据通过判断各个环境的当前域名来赋予对应的接口域名即可，！
代码如下：
新建方式：const(是ES6中的常量)，var(是ES5中的变量，ES5中没有常量关键字) 这两个都可以，这里就用 ES6 中的 const吧
const HD = null; //后端接口域名
var DOMAIN = document.domain || window.location.host; //当前域名
switch(DOMAIN) {
case 'http://xxxqddevxxx.com':
HD = net.dev;
break;
case 'http://xxxqdtestxxx.com':
HD = net.test;
break;
case 'http://xxxqdforxxx.com':
HD = net.for;
break;
}
办法2、直接将接口域名写在公共的public.js文件中，并做判断和赋值对应的接口域名(这样就不用向上面那样去调用外部的xxx.js文件了)，
代码如下：
新建方式：const(是ES6中的常量)，var(是ES5中的变量，ES5中没有常量关键字) 这两个都可以，这里就用 ES6 中的 const吧
const QD = null; //前端接口域名
const HD = null; //后端接口域名
var DOMAIN = document.domain || window.location.host; //当前域名
switch(DOMAIN) {
case 'http://xxxqddevxxx.com':
QD = 'http://xxxqddevxxx.com';
HD = 'http://xxxhddevxxx.com';
break;
case 'http://xxxqdtestxxx.com':
QD = 'http://xxxqdtestxxx.com';
HD = 'http://xxxhdtestxxx.com';
break;
case 'http://xxxqdforxxx.com':
QD = 'http://xxxqdforxxx.com';
HD = 'http://xxxhdforxxx.com';
break;
}
然后就可以根据项目在当前所在的域名下，直接调用：
以上是我个的项目心得，和各们朋友们一起分享，如有更好的方法，希望多指教！
暂无评论内容