Javascript代码组织数据驱动应用程序
我目前正在研究中/大规模数据驱动的 Asp.net MVC应用程序的前端，我对遵循正确的代码组织/设计模式有些怀疑。Web应用程序由多个页面构成，其中包含许多使用Razor模板定义的Kendo UI MVC小部件。
对于那些不熟悉剑道的人来说，剃刀的语法会被翻译成Javascript，如下所示：
我在我的脚本文件夹中定义了两个主文件夹，并按照以下方式构建了我的js文件：
- 共享//包含共享的js文件-file1.js -file2.js
- 页面//每页一个文件
- page1.js
- page2.js
- ...
- Ticket.js //第4页:)
每个js文件都是用以下模式定义的单独模块：
注意：内部init函数将每个回调函数注册到窗口事件并偶尔会注册一个$(document).ready(function(){})块。
;(function () {
"use strict";
function Ticket(settings) {
this.currentPageUrls = settings.currentPageUrls;
this.currentPageMessages = settings.currentPageMessages;
this.currentPageEnums = settings.currentPageEnums;
this.currentPageParameters = settings.currentPageParameters;
this.gridManager = new window.gridManager(); //usage of shared modules
this.init();
}
Ticket.prototype.init = function () {
$("form").on("submit", function () {
$(".window-content-sandbox").addClass("k-loading");
});
...
}
Ticket.prototype.onRequestStart = function (e) {
...
}
//private functions definition
function private(a, b, c){
}
window.Ticket = Ticket;
}());
一旦我需要我在模块中定义的Javascript函数，我会在页面中包含关联的Javascript文件。我的对象的存储被存储在一个变量中，最重要的是，一个函数被绑定到小部件事件（参见：onRequestStart）。
HTML / JAVASCRIPT
@(Html.Kendo().DropDownList()
.Name("Users")
.DataValueField("Id")
.DataTextField("Username")
.DataSource(d => d.Read(r => r.Action("UsersAsJson", "User"))
.Events(e => e.RequestStart("onRequestStart"))))
var settings = {};
var ticket = new window.Ticket(settings);
function onRequestStart(e){
ticket.onRequestStart(e);
}
我觉得我的设计模式可能对我的其他前端删除器不友好，主要是因为我选择不在Jquery插件中实现Javascript模块。
首先，我做错了什么？ 其次，我的设计模式适合Javascript测试框架吗？ 第三，哪些是Jquery插件的必备场景？
通过上述Razor语法添加了Javascript输出。
Stack Overflow用户
发布于 2018-03-22 16:46:15
组织和模式似乎很好，但我有一些提示：
技巧1：
您可以不用在模块中设置特定的全局变量，而是可以返回对象。所以不要这样做：
;(function () {
"use strict";
function Ticket(settings) {
console.log("ticket created", settings);
}
...
window.Ticket = Ticket;
}());
你会这样做：
;window.Ticket = (function () {
"use strict";
function Ticket(settings) {
console.log("ticket created", settings);
}
...
return Ticket;
}());
这样做的原因是能够获取模块代码并在需要时为其提供不同的全局变量名称。如果存在名称冲突，则可以将其重命名为MyTicket或其他名称，而不实际更改模块的内部代码。
技巧2：
忘记提示1，全局变量发臭。为什么不为每个对象类型创建一个独立的全局变量，为什么不创建对象管理器并使用单个全局变量来管理所有对象：
window.myCompany = (function () {
function ObjectManager(modules) {
this.modules = modules || {};
}
ObjectManager.prototype.getInstance = function(type, settings) {
if (!type || !this.modules.hasOwnProperty(type)) {
throw "Unrecognized object type:";
}
return new this.modules[type](settings);
};
ObjectManager.prototype.addObjectType = function(type, object) {
if (!type) {
throw "Type is required";
}
if(!object) {
throw "Object is required";
}
this.modules[type] = object;
};
return new ObjectManager();
}());
现在，您的每个模块都可以使用这个附有公司名称的全局对象进行管理。
;(function () {
"use strict";
function Ticket(settings) {
console.log("ticket created", settings);
}
...
window.myCompany.addObjectType("Ticket", Ticket);
}());
现在，您可以轻松地为每个单一对象类型获取一个实例，例如：
var settings = {test: true};
var ticket = window.myCompany.getInstance("Ticket", settings);
而你只有一个全局变量需要担心。
https://stackoverflow.com/questions/-100004295
复制相似问题