关于SPA网页应用程序 如何解决函数 变量命名冲突

Question

在做单页应用的时候，是如何保证各个页面的函数和变量 不重复不覆盖的！函数之间如何进行通信！比如react 和 angular它们是如何做到的，请各位大大帮忙解惑！感激不尽

Answer 1

看看“命名空间”这关键词相关的文章。

Answer 2

构建自己的命名空间函数

var mySPA=(function(reactMoudle,angularModule,jqueryModule){
    //使用reactMoudle调用react的API
    //使用angularModule调用angular的API
    //使用jqueryModule调用jquery的API
    
    //定义一些类内部函数
    
    //可以返回一个自己SPA的调用API供外部调用
    return {
        myAPI:function(){
            //利用闭包调用定义的内部函数
        }
    }
}(react,angular,jquery));

mySPA.myAPI();//调用自己SPA模块的接口函数

Answer 3

拆分模块。

例如 es 2015 里的模块构建方式:

// m1.js
export function clone(obj) {
    return JSON.parse(JSON.stringify(obj));
}

// main.js
import * as obj from './m1.js';

var o = {
    foo: 'bar'
};

obj.clone(o);

然后 rollup 或者别的什么工具来编译成目前可用的版本提供给浏览器即可。