我怎样才能使这个 Javascript 代码不显眼？答案

【问题标题】：How can I make this Javascript code unobtrusive?我怎样才能使这个 Javascript 代码不显眼？
【发布时间】：2011-05-15 09:22:34
【问题描述】：

<div id="detailed">
    @foreach (var item in Model.Result.Items)
    {                
        <div id="movie_@(movie.UserMovieID)" class="movie border-gray">
            <!-- Some html code -->
        </div>
        <script type="text/javascript">    
            new InitMovieWicket(@(MvcHtmlString.Create(movie.ToJSon())),"movie_@(movie.UserMovieID)");    
        </script>
    }
</div>

我正在从 ASP.NET MVC 服务器端获取电影对象列表并像上面一样生成 html。如您所见，我还使用电影的 JSON 数据和脚本标签为每部电影初始化 javascript wickets。

我想从 html 和 javascript 代码中删除这些脚本标签以不显眼，但我不知道该怎么做，因为对于每部电影创建检票口我需要 JSON 数据并且没有渲染时间脚本标签我看不到做的方法这。你有什么主意吗？谢谢..

更新我希望我的 html 代码看起来像这样。

<div id="detailed">
    @foreach (var item in Model.Result.Items)
    {                
        <div id="movie_@(movie.UserMovieID)" class="movie border-gray">
            <!-- Some html code -->
        </div>            
    }
</div>

我希望我的 Javascript 代码看起来像这样。

 $(document).ready(function() {                
    //init all movie wickets               
 });

【问题讨论】：

你的javascript代码的职责是什么？不显眼的版本应该是什么样的（例如禁用 javascript）？
@Groo ：我已经更新了。你可以看看我的代码是什么样子的。

标签： javascript asp.net-mvc json unobtrusive-javascript

【解决方案1】：

对于没有启用 JavaScript 但仍希望查看每个项目的电影详细信息的用户来说，一种可能更好的方法是将这些详细信息实际呈现为 HTML 元素，然后在 JavaScript 可用时隐藏它们。

例如，您可以将 HTML 呈现为如下所示：

<div id="detailed">
    <div id="movie_@1234" class="movie border-gray">
        <div class="wicketData title">Some title</div>
        <div class="wicketData year">Year</div>
        <div class="wicketData synopsis">Some other stuff</div>
    </div>            
</div>

然后遍历元素并将 div 替换为您喜欢的任何内容：

$(doument).ready(function() {                

    // get the parent div
    var $detailedParent = $("#detailed");

    // get a list of all movie class divs
    var $items = $detailedParent.find(".movie");

    $.each($items, function(i) {

        // get the movie div
        var movie = $items[i];

        // get all wicket data
        var data = movie.find(".wicketData");

        // prepare the JSON data using DOM
        var movieData = {
             title = data.children("title").text(),
             year = data.children("year").text(),
             synopsis = data.children("synopsis").text()
        };

        // remove or hide dummy elements
        data.remove();

        // init your wicket
        new InitMovieWicket(movieData, movie.attr('id'));
    };

});

这将允许没有 JavaScript 的用户获得一些降级的演示文稿，但所有数据仍然存在。

【讨论】：

我也喜欢你的想法，但是当电影中有大量数据时，这会导致 html 快速增长，你不认为获取大量 html 并消耗带宽是不必要的吗？一个高流量的网站？
@mcaaltuntas：但这不是您现在在 JSON 对象中传递的相同数据吗？
是的，但是在 html 版本中，有很多额外的 html 标签，例如 div、class 等，对吗？
@mcaaltuntas：没错，与 HTML 相比，JSON 非常紧凑。如果实际内容通常很小，则可能会产生很大差异（同样，取决于您希望在一页上显示的电影数量）。最后，这一切都取决于您真正想向这部分用户展示多少；也许您需要显示一些标签，也许没有。但这就是渐进增强的意义所在。

【解决方案2】：

我会这样做：

在<head></head> 部分中只放置一个脚本标签，您可以在其中初始化一个包含所有电影的 JSON 数组（在服务器端），例如：

var movies = '[{"userMovieID": "123", ...}, {"userMovieID": "432", ...}]';
文档准备好后，您应该开始构建小部件，首先解析 json 数组，然后遍历电影数组，然后为每部电影创建一个小部件并插入
```
<div id="movie_@(movie.UserMovieID)" class="movie border-gray">
    
</div>
```

到你的<div id="detailed">..</div>，也许你想使用像jquery-tmpl这样的Javascript模板

最好的解决方案是您的小部件类“InitMovieWicket”创建<div id="movie_"..>...</div> 条目。

【讨论】：

如果我在 Javascript 中创建 wicket html 代码不会违反优雅降级吗？如果用户关闭 javascript 会怎样？
你是对的，如果它应该在关闭 javascript 的情况下工作，然后像现在一样插入 div，但仍然创建 json 数组并遍历它。因为您可以通过电影的 ID 轻松查找关联的电影
标签。这可能会更好，因为您在 DOM 文档准备就绪时开始初始化小部件，这意味着您可以确保在初始化电影小部件类时存在电影
标签。