包括与外部页面javascript冲突的页面javascript

Include page javascripts conflicting with outer page javascripts

本文关键字：javascript 冲突 外部 包括      更新时间：2023-09-26

我的问题有点难以解释，但我会尝试的。我有两个jsp页面Outer.jsp和Inner.jsp

Outer.jsp

脚本：src="tabs.js"

var PageTabs="Tab1"

@包括"Inner.jsp"

Inner.jsp

脚本：src="tabs.js"

var PageTabs="Tab2~Tab3~Tab4"

两个jsp页面都使用相同的tabs.js来呈现页面上的一些选项卡元素。"PageTabs"变量是tabs.js使用的许多常见变量之一。因此，在渲染时，tabs.jss会使用最新的"PageTabs"变量，即var PageTabs="Tab2~Tab3~Tab4"，即使在渲染Outer.jsp的选项卡时也是如此。

注意：页面变量和tabs.js是从客户端接收的标准元素的一部分。因此，它们必须用于为应用程序提供相同的外观和感觉。我需要的是一种将"Inner.jsp"与访问"Outer.jsp"脚本隔离开来的方法。这将防止tab元素在使用哪些变量时混淆。

我希望我有点清楚。如果我需要提供更多的澄清，请告诉我。谢谢

JavaScript在页面内从上到下进行解释，因此您的第二个PageTabs值将覆盖第一个值。一种选择是为变量使用不同的名称（并参数化tabs.js函数，而不是依赖于全局变量）

使用jsp include时，一个非常有用的技能是使.js代码模块化。这也是封装代码和避免冲突的重要方法。

tab.js:

var tabModule = (function(my){
   var model;
   return {
      setModel: function(model){/*....*/}
      //other api functions
   }
})(tabModoule||{});

Outer.jsp:

tabModule.setModel({PageTabs : "Tab1"});

Innder.jsp:

 tabModule.setModel({PageTabs : "Tab2~Tab3~Tab4"});
相关文章：