使用Razor语法的Javascript名称空间？

Question

I use this "Javascript namespace" pattern a lot in my script snippets embedded within .cshtml files (partial views):

 <script type="text/javascript"> (function (MyNamespace) { MyNamespace.PublicFunc1 = function (p1, p2) { localFunc1('abc'); MyNamespace.PublicFunc2(p1, p2, 'abc'); } MyNamespace.PublicFunc2 = function (p1, p2, p3) { // ... } localFunc1(p1) { // ... } }(window.MyNamespace = window.MyNamespace || {})); </script> 

It works like a charm and I can call these MyNamespace.PublicFunc1 and MyNamespace.PublicFunc2 functions from outside that script snippet.

The problem arises when two or more of those partial views need to be rendered at the same time, so any external JS code making calls to, say, MyNamespace.PublicFunc1 will no longer be able to do so, because there would be two or more instances of that function.

To solve this, I tried using server-side unique namespace IDs/names for those scripts via Razor syntax, ie:

 @{ // server-side variable with a unique namespace identifier/name string _namespace = Model.MyUniqueNamespace; } <script type="text/javascript"> (function (@_namespace) { @_namespace.PublicFunc1 = function (p1, p2) { @_namespace.PublicFunc2(p1, p2, 'abc'); } @_namespace.PublicFunc2 = function (p1, p2, p3) { // ... } localFunc1(p1) { // ... } }(window.@_namespace = window.@_namespace || {})); </script> 

The problem with this approach is that the entire @_namespace.PublicFunc1 part is treated by Razor and server-side -- which makes sense, but is not what I need; I only need the @_namespace part to be server-side and everything else around it to be client-side/JS.

My questions are:

1. Is there a way to solve this using Razor syntax?
2. Is there another/better way to handle these scenarios (via Javascript magic), without having to write a full-fledged JS plugin/widget/library (would seem like too much for each such localized/page-specific script snippet)?

Answer 1

Changing it to @(_namespace) should work for question 1. For question 2, it's important to note that the variable name you pass into the function doesn't... really... matter. ie:

(function(foo) {
  foo.func1 = function() { ... }
})(window.bar = window.bar || {});

this will still set window.bar.func1 .