Web开发 项目 前后端分离 接口域名地址 优化

Html

Css

Js

不好意思没有html实例， 这次我给大家分享的是 js 概论上的内容！请看下面详情：

const QD = null; //前端接口域名 const HD = null; //后端接口域名 var DOMAIN = document.domain || window.location.host; //当前域名 switch(DOMAIN) { case 'http://xxxqddevxxxxxxx.com': QD = 'http://xxxqddevxxxxxxx.com'; HD = 'http://xxxqddevxxxxxxx.com'; break; case 'http://xxxqddevxxxxxxx.com': QD = 'http://xxxqddevxxxxxxx.com'; HD = 'http://xxxqddevxxxxxxx.com'; break; case 'http://xxxqddevxxxxxxx.com': QD = 'http://xxxqddevxxxxxxx.com'; HD = 'http://xxxhdforxxx.com'; break; }

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

概述：

在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;
}

然后就可以根据项目在当前所在的域名下，直接调用：

• alert(QD) //前端接口域名

• alert(HD) //前端接口域名

以上是我个的项目心得，和各们朋友们一起分享，如有更好的方法，希望多指教！