问题标签 [revealing-module-pattern]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
146 浏览

javascript - 为什么在模块模式中将函数分配给变量?

Addy Osmani 的模块模式示例中,将私有函数分配给变量,如下例所示:

我会简单地将私有函数写为:

如果函数不用作委托,是否有任何理由将函数分配给变量?我正在查看一些始终使用这种模式的代码,但我发现它很难遵循。例如:

0 投票
1 回答
65 浏览

javascript - 在模块中重新声明变量还是引用单独的模块更好?

好的,假设我有一个在“显示模块模式”中设置的网络应用程序(Javascript),并且我有两个使用完全相同数据的模块。

例子:

(让我们假设这两个函数存在于不同的模块中是有原因的。毕竟这只是一个例子)

如您所见var foos,每个模块中都声明了一个相同的变量 ( )。这似乎是多余的,但是在另一个变量中引用该变量会使一个模块依赖于另一个模块。所以你不妨把它们结合起来。我看到的第三个选项是将共享变量创建为全局变量,这有点违背了拥有模块的目的。

因此,基于这三个选项,我会说在每个模块中单独定义变量将是最好的选择。

这个对吗?

0 投票
1 回答
339 浏览

javascript - 在 IE9 中未检测到视图模型函数绑定,但在 FF 和 Chrome 中有效

更新 我意识到这个问题在实施的情况下很难理解。要查看和测试工作示例,请下载解决方案。

测试必须使用IE9,开发工具不能打开。打开开发工具将使项目按预期工作。此解决方案适用于任何其他浏览器。为了进行测试,我在 IIS 中本地设置了解决方案,并在 VS /debug 之外运行它。


我有一个项目,我正在尝试将可观察到的淘汰赛保存回服务器。我在 IE9 中看到一些我无法解释的非常奇怪的事情,我希望有人能帮助我。我正在使用 Asp.NET Mvc 和淘汰赛,并为项目的这一部分实现了 JS 显示模块模式。我的js文件如下:

  • Reportwriter.js 与 html 的基本绑定以显示模式
  • ReportWriterEffects.js 这包含 UI 生成的任何事件,这些事件会传递给淘汰视图模型
  • ReportWriterUtilities.js。这包含 Viewmodel 中的数据/对象操作函数
  • ReportWriterViewModel.js ReportWriter 视图模型 Json 序列化/序列化。

我的 html 页面有以下元素

单击此按钮时,会从ReportWriterEffects.js

这应该反过来调用ReportWriterViewModel.js,看起来像

它将我的可观察报告传递给进行 ajax 调用的 reportWriterUtilities.js 文件

在 Firefox 和 Chrome 中,这一切都有效,并且报告已保存。但是在 IE 中,从不调用保存调用。我最初在<a>从未调用过的元素上设置了淘汰绑定。我认为浏览器缓存可能对此产生了影响,因为我使用的是 Mvc,所以我通过将以下属性添加到控制器构造函数来修饰控制器以不加载缓存

还是没有骰子。

如果您查看 ajax 调用,您还会看到我添加cache: false的想法可能会有所帮助。依然没有。

我添加了警报消息,它确实被调用了,但是 context.$root.Save(); 永远不会被调用。

现在这是真正奇怪的事情。当我在 IE9 中加载页面并按 F12 在 IE 中打开开发工具然后关闭开发工具时,会调用视图模型中的保存功能并且一切正常。如果我启动浏览器打开开发工具并导航到页面一切正常。控制台中不会生成任何错误或消息,并且在其他浏览器中一切正常。这似乎与 IE9 隔离,因为 IE 10 工作正常。

有没有人有任何建议或者你过去有没有经历过这样的事情。我会很感激任何洞察可能导致这种情况发生的原因。我希望下面的代码就足够了。我不能使用小提琴,因为我在这里使用了显示模式并且它没有给出代码的准确表示。

0 投票
4 回答
20898 浏览

javascript - 模块模式 - 如何将一个模块的代码拆分成不同的 js 文件?

对于模块模式,我正在做类似的事情:

如何拆分代码?我可以想到几种方法,比如使用命名空间的层次结构,或者将对象扩展为window.myGlobalNamespace.additionalFunc = function () {//blabla}. 还有哪些方法?优缺点都有什么?哪一个被认为是更好的做法?

这两个答案都建议使用RequireJS。您能否解释一下 RequireJS 如何解决这些问题:

第一个.js:

第二个.js:

主.js:

人们可以做到

改变我的代码的行为!

这里有两个问题:

  1. 我们不能有一个儿童可以访问但外部公众不能访问的字段(即受保护的)。有没有办法做到这一点?

  2. 如果不是,这意味着如果我们想要让 eparentPrivate 可访问,我们需要将其公开。然后用户将能够修改它!

更重要的是,所有公共功能都可以更改和替换。我不希望这种情况发生。

我不明白 RequireJS 是如何解决这些问题的。有人可以阐明一下吗?

0 投票
1 回答
289 浏览

knockout.js - 显示原型模式数组中的“this”

好的,伙计们-一直在敲我的头。在使用从显示原型模式构建的一系列类时,我觉得这是一个“指针”问题。另外,我正在使用 knockoutjs 进行绑定。

问题:我的网站上通常有非常复杂的页面。因此,我倾向于拥有包含其他类数组的类。我一直使用显示原型模式,并且通常在init函数中有一个“ self ”变量指向“ this ”,这样事件处理程序调用的该类中的其他函数将有一个指向this的指针(它不会失败——它似乎知道什么是“自我”)。

但是......当我有一个类(模型)的数组时,它不能正常工作......我的MailModel类(我的视图模型)有一个People 类的数组...... People 类中self”被指出到"this",但是当原型的其他函数调用 "self" 时,它似乎指向数组中的最后一个 "person" 项??-我是否以某种方式将“self”公开为它实例化的所有类的共享函数......并以某种方式指向“this”的最后一个实例?

我试图做一个包含“Person”类数组的视图模型的简单模型。请有人帮我解决这个问题。我尝试了在“Person”类上使用这个“this”指针的不同方法,但无济于事。

一探究竟!

http://jsfiddle.net/N8vxr/

更新:

我看到评论想知道为什么我不会在我的调用中只使用“this”-在我的情况下,我还有其他东西调用了这些不是 person 实例的原型函数(所以“this”不起作用)-我已经更新了我的 jsFiddle 用 totalNums KnockoutJS 计算函数来显示 Person 原型,如果我把“this”放在那个函数中,它会失败,因为“this”是“Window”对象——和以前一样,你可以看到使用“self " 只是指数组中的最后一个人(注意每个人的“totalNums”是 80​​ (Suzy Chapstic)

如果我将“totalNums”向上移动到构造函数中,那很好,但我希望我的函数在原型中向下。那么......我怎样才能在原型上的计算函数中获得对“this”实例的引用?

这是这个 KnockoutJS 计算函数的更新小提琴:

http://jsfiddle.net/Sj25M/

0 投票
2 回答
896 浏览

javascript - JavaScript 揭示模块模式公共变量未更新

我正在使用带有显示模块模式的 Angular 服务。该服务在内部从 Web 服务中提取字符串资源,并通过“字符串”公共变量使它们可用。我必须初始化私有“字符串”变量,因为它在进行服务调用之前被引用。

我从服务中获取正确的字符串数据并将其复制到私有“字符串”变量。但是,当客户端引用公共“字符串”时,它仍然保留其原始值。

知道我做错了什么,或者如何让公共“字符串”更新吗?

服务调用将返回的数据设置为私有“字符串”变量

私有“字符串”现在显示以下内容(通过 Chrome 开发人员工具):

然而,当在 Angular 控制器中引用公共“字符串”时,“字符串”仍在引用私有“字符串”的原始值。

资源.字符串:

有什么建议么?

0 投票
1 回答
719 浏览

javascript - 为什么 this.set 在剑道的这个 Javascript 函数中不起作用

我有一个 Kendo Mobile 应用程序并尝试使用 Revealing Module Pattern 编写 ViewModel。

在我的 HTML 中,我将列表绑定到 gamesListDataSource。OnInit,我获取数据,然后我需要告诉我 HTML 数据源已更改。这段代码一切正常(尽管我认为我在这里做了很长的路,因为我可以以某种方式直接公开数据源)。

1)如果我注释掉这一行: GamesListViewModel.refreshGamesList(dataSource); 并取消注释这一行: this.set("gamesListDataSource", dataSource); 以便在 loadGamesList 函数中直接调用它,然后它会因“未捕获的类型错误:对象 [对象对象] 没有方法 'set'”而崩溃

我认为这与 fetch() 是异步的事实有关,但我不明白为什么调用另一个函数可以正常工作?

游戏列表.js

游戏列表.html

0 投票
1 回答
459 浏览

javascript - 与 angularjs 一起使用的正确模式

我正在使用以下 angularjs 项目结构:

换句话说,我不是按照文件的类型(例如服务/控制器/指令),而是按照它们的逻辑目的(例如用户/共享/购物车等)对文件进行分组。我读到这是大型项目的正确方法。

主 application.js 文件包含如下模块:

然后,每个模块包括相关的控制器/指令/服务/任何东西。

例如 SharedModule.js

然后我在每个单独的文件中实现逻辑。我的问题是:我应该使用什么设计模式来实现每个单独的服务/控制器的逻辑?

我读了这本书: http: //www.addyosmani.com/resources/essentialjsdesignpatterns/book/ 到目前为止,我心爱的设计模式是“显示模块模式”,这是一种通用设计模式。我在其他项目中多次使用它(没有 angularjs)。

但似乎我不能将它与 angularjs 一起使用。

如何将 $rootScope/$http 之类的所有内容传递给模块?

这就是它现在对我有用的方式:

但我不确定它是否完全正确。你能请教一下吗?

0 投票
2 回答
3123 浏览

javascript - Java Script Revealing Module Pattern 创建多个对象

我需要有关以 Revealing Module Pattern 方式编写更好代码的建议。我已经按照教程http://weblogs.asp.net/dwahlin/archive/2011/09/05/creating-multiple-javascript-objects-when-using-the-revealing-module-pattern.aspx这对我有很大帮助了解此模式的基础知识。我正在尝试创建基本的图像滑块。请检查 jsfiddle 链接,

http://jsfiddle.net/sWtDf/

我想知道的是——

1)有没有更好的方法在代码审查后编写相同的轮播功能

2)如何创建多个对象(实例)我试过 -

导致错误 TypeError: Slider is not a function

3)保持全局和私有功能是正确的方法吗

4) 如果有建议

感谢您抽出宝贵的时间来解决这个问题 :)

0 投票
3 回答
1972 浏览

javascript - “如果需要补丁,则不能覆盖公共功能”是什么意思。在 Addy 对 Revealing Module Pattern 的描述中?

这种模式的一个缺点是,如果一个私有函数引用一个公共函数,那么如果需要补丁,这个公共函数就不能被覆盖。这是因为私有函数将继续引用私有实现,并且该模式不适用于公共成员,仅适用于函数。

有没有人举例说明他的意思?

链接到上面提到的显示模块模式