如何在javascript / jquery中限制函数的范围


How to limit scope of a function in javascript/ jquery

本问题已经有最佳答案，请猛点这里访问。

我在页面上链接了多个.js文件，这些文件具有相同名称的函数，如下面的模型

first.js

1
2
3
4
function DisplayContent(data,$target) // data is string
{
     $target.html('<span>'+ data +'</span>')
}

second.js

1
2
3
4
function DisplayContent(data,$target) // data is string
{
     $target.html(''+ data +'')
}

上述两个文件都被引用到该页面。

如何在不重命名功能的情况下解决上述问题。

如果接近错误，请更正。

谢谢

相关讨论

您可以在JavaScript文件中使用命名空间：

first.js:

1
2
3
4
5
6
7
var first= {
  DisplayContent: function DisplayContent(data,$target)
  {
     $target.html('<span>'+ data +'</span>')
  },
     [additional methods in the first object]
};

second.js

1
2
3
4
5
6
7
var second= {
  displayContent: function DisplayContent(data,$target)
  {
      $target.html(''+ data +'')
  },
  [additional methods for the second implementation]
};

然后调用Namespace.method之类的方法，即first.DisplayContent()

如果您只在该文件中调用这些函数，那么您可以限制范围如下：

First.js

1
2
3
4
5
6
7
8
9
10
11
12
(
  function(){
    function DisplayContent(data,$target) // data is string
    {
         //$target.html('<span>'+ data +'</span>')
         alert("first file");
    }

    DisplayContent('test','test');

    //here you can place other code
}());

Second.js

1
2
3
4
5
6
7
8
9
10
11
12
13
(
  function(){
    function DisplayContent(data,$target) // data is string
    {
         //$target.html(''+ data +'')
         alert("Second file");
    }

    DisplayContent('test','test');

    //here you can place other code
  }()
);

看演示

我猜这会更好

1
2
3
4
function DisplayContent(data,$target,htmltag) // data is string
{
     $target.html('<' + htmltag + '>' + data + '</' + htmltag + '>')
}

多种方式。

  • 你可以在你的second.js中执行此操作，如果你不想让它们混淆的话。这将允许您在页面中独立使用second.js，此功能将触发。

    1
    2
    3
    4
    5
     if(typeof DisplayContent !=='function'){
        function  DisplayContent(){

      }
     }

  • 你可以像曼瓦尔一样正确地关闭。

    • 但是，具有两个具有相同名称的功能并没有多大意义。你应该避免这种情况。

    如果将两个JS文件添加到单个页面，则两个文件将在单个javascript上下文中运行，并且将替换这些函数，使得结果不可接受。因此，制作是不可能满足您的要求的。