javascript - javascript揭示具有多个文件/模块和全局变量的模块模式
问题描述
如果在其他地方问过这个问题,我深表歉意,但我所看到的所有信息并不能真正帮助我理解答案和最佳实践。
我正在尝试对 javascript 使用显示模块模式。我有一个基本 js 文件,其中包含应用程序每个页面所需的方法和属性。
然后每个页面都有自己的js文件,有自己独特的函数和变量,但还需要引用基础js文件中的变量。
我似乎真的误解了变量范围,或者我如何设置它在某种程度上非常糟糕,因为我得到了令人困惑的结果。
问题:
- 如果我的结构是错误的,那么正确的方法是什么?
- 如何跨模块正确访问变量?
- 我是否正确初始化文档准备好的模块?
我现在正在做的是这样的:
var base = (function() {
init = function() {
url = $(location).attr('href');
url = url.substr(-1) === '/' ? url.slice(0, -1) : url;
segments = url.split('/');
baseUrl = this.segments[0] + '//' + this.segments[2] + '/';
resource = this.segments[3];
this.segments = segments; //need access to this across all pages
this.resource = resource; //need access to this across all pages
this.baseUrl = baseUrl; //need access to this across all pages
}
}
doStuffGlobally = function() {
//do stuff for all pages
}
return {
init: init,
baseUrl: this.baseUrl,
segments: this.segments,
resource: this.resource
};
}());
$(document).ready(function() {
base.init();
}
在另一个页面上,我正在这样做:
var otherPage = (function() {
init = function() {
//do otherPage stuff;
}
}
doStuff = function() {
base.doStuffGlobally(); //need to access this.
console.log(base.segments); //need to access this.
}
return {
init: init
};
}());
$(document).ready(function() {
otherPage.init();
}
解决方案
您的模块不需要init
方法base
,它不需要等待 domready 但可以(并且应该)立即运行。所以写
var base = (function() {
var url = $(location).attr('href');
if (url.substr(-1) === '/') url = url.slice(0, -1);
var segments = url.split('/');
var baseUrl = this.segments[0] + '//' + this.segments[2] + '/';
var resource = this.segments[3];
function doStuffGlobally() {
//do stuff for all pages
}
return {
baseUrl,
segments,
resource,
doStuffGlobal,
};
}());
推荐阅读
- mysql - mysql 8 on redhat 6.8 全新安装
- javascript - which one is more effecient by sending request through axios and then dynamically building html or through res.render method in nodejs app
- python - How to get pass error : TypeError: addtrans() missing 1 required positional argument: 'self'
- angular - Angular 11 Purple/Green Material Theme Not Working Correctly
- c++ - How to define function with arbitrary precision (Eigen/MPRealSupport)
- php - 如何在php中生成二维码和可下载链接
- deep-learning - 输入神经元数量的标准是什么
- html - 如何将网格中的元素从右向左移动
- elasticsearch - Logstash 模糊端口定义
- php - 如果更新时间超过 2 小时,如何使用 PHP 存储获取的 JSON 数据并更新它?