在ASP.NET MVC项目中使用RequireJS库的用法示例(asp.net mvc view)

发布时间：2024-02-27

推荐整理分享在ASP.NET MVC项目中使用RequireJS库的用法示例(asp.net mvc view)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:asp.net mvc教程,asp.net mvc工作原理,asp.net mvc 部署,asp.net mvc 部署,asp.net mvc怎么样,asp.net mvc运行流程,asp.net mvc运行流程,asp.net mvc工作原理,内容如对您有帮助，希望把文章链接给更多的朋友！

RequireJS 是一个前端模块化开发的流行工具，本身是一个Javascript的库文件，即require.js 。RequireJs的主要功能：

（1）实现js文件的异步加载，避免网页失去响应；

（2）管理模块之间的依赖性，便于代码的编写和维护。

前端模块化开发现在有好多的工具，大体上分为两类，一类是像dojo之类的高大全，dojo v1.8之后已经内置了模块化开发组件；另一类是像require.js，sea.js 这种专心做模块化开发的工具。

从模块化划分的规则来区分，主要分为AMD、CMD两类，dojo、require.js 遵从前者，而sea.js 依循CMD规范。

require在单页面应用中能够如鱼得水，然而对于传统的多页面应用，使用require多少会有些困惑和不方便。

本文讲解如何在ASP.NET MVC的结构中应用require，并且给出了压缩脚本，实现半自动化压缩。

将js代码分离一般而言ASP.NET MVC的一个路由对应一个视图，视图的文件结构可能如下：

这里假设_layout.cshtml是所有页面共享的。一般情况下，我们会在_layout中引用公共的js类库，比如jQuery，bootstrap等，这样的话其他的页面就不需要对这些类库再引用一遍，提高了编码的效率。然而，不同的页面终究会依赖不同的js，尤其是实现页面本身功能的自定义的js，这样我们不得不在其他页面中再引用特殊的js，甚至将js直接写在页面中，例如下面的代码经常会出现在View中：

在ASP.NET MVC项目中使用RequireJS库的用法示例(asp.net mvc view)

这样会导致页面比较混乱，而且页面<script>标签中代码不能被浏览器缓存，增加了页面代码的长度。更为重要的缺陷是，诸如jQuery之类的类库会在加载到页面后执行匿名函数，这需要一些时间，而如果有些页面根本不需要jQuery的话，只要页面把_layout作为布局页面，那么jQuery的初始化代码将不可避免的执行，这是一种浪费。事实上，javascript的模块化加载的思想就是为了解决这些问题的。

接下来我们来用require规划我们的js，构建诸如下面结构的js目录

把公共的类库级别的js模块直接放在js目录下，而把页面级别的js放在一个app的子目录下。注意，在app中，每个页面一个js文件，这意味着我们需要把页面各自的js提取出来，虽然这样增加了结构复杂度，但是避免了在页面中随手写<script>标签的陋习。另外，在js目录下的公共库，除了第三方的库，还包括自己开发的库，还有一个叫config.js的文件，这个文件很关键，稍后会说到。

然后，我们可以删除_layout中所有的js引用，并使用@RenderSection的命令要求子页面提供js引用，_layout.cshtml:

这样对js的需求就下放到每个view页面中了，根据require的用法，我们需要在各个子View中引用require.js，并指定主模块，而这些主模块就是上面app目录下的一个个js

所有的js代码都将写到app下的js中，这样规范了js，使得页面更干净，更为重要的是这些js还可以经过压缩，以及被浏览器缓存等，进一步提高执行效率

公共的config我们知道主模块除了使用require方法外，经常需要通过require.config来配置其他模块的路径，甚至需要shim，例如下面的代码经常会出现在主模块的开头：

对于单页面应用来说，主模块往往只有一个，所以上面的代码写一遍也就OK了。但是，在多页面的情况下，主模块有多个，每个主模块都要包含这样的代码，岂不是很不科学？于是，希望有一个统一配置的地方，但是应该如何来写呢？我们想到，将这些配置作为一个模块config.js，让其他的主模块对这个模块产生依赖就可以了，例如下面的config.js：

config.js的写法没有什么特别的，接下来只要在home.index.js中引用

不过这样写还是不对的，因为，被主模块依赖的模块(这里的config,jquery,bootstrap)，在加载的时候，加载顺序是不确定的，但是又需要config模块在其他模块之前加载，怎么办呢？一个折衷的方案是修改home.index.js，成为如下代码：

使用一个命名的模块home.index2作为过渡，在主模块中手动require，这样可以保证config在主模块执行之前加载，也就使得home.index2在加载的时候已经加载了config了。

压缩require提供一个压缩工具，用于压缩和合并js，详情请移步至

理解javascript中的with关键字说起js中的with关键字，很多小伙伴们的第一印象可能就是with关键字的作用在于改变作用域，然后最关键的一点是不推荐使用with关键字。听到不推荐with

仅行代码实现Javascript中的MVC 从年左右开始，MVC逐渐在前端领域大放异彩，并终于在刚刚过去的年随着ReactNative的推出而迎来大爆发：AngularJS、EmberJS、Backbone、ReactJS、RiotJS、VueJS

谷歌showModalDialog()方法不兼容出现对话窗口的解决办法 showModalDialog，在测试中，IE，Firefox中正常运行，但是在google中，点击后没什么反应，在网上看了一下，谷歌浏览器不支持showModalDialog模态对话框和无法

标签: asp.net mvc view

本文链接地址:https://www.jiuchutong.com/biancheng/381664.html 转载请保留说明！

上一篇：获取阴历（农历）和当前日期的js代码(查找阴历日历)

下一篇：理解javascript中的with关键字(对于javascript理解)