Question

我想知道在对象表示法中组织JS函数是一种好的还是坏的做法。目的是保持js井井有条/易于维护。

示例：

var helper = {
    myAlert: function(){
    return alert('Alert from helper');
},
    toLowerCase: function(){
    var str = document.getElementById("txt").innerHTML;
    return alert(str.toLowerCase());
}
}

HTML：

<body>
    <h1 onclick="helper.myAlert()">Hello Plunker!</h1>

    <p id="txt" onclick="helper.toLowerCase()">Testing LowerCaseFunction</p>
</body>

Plunker

提前致谢!!!

Answer 1

代码组织是一个战略主题，当涉及到使软件存活超过几年时，这也是一个非常固执的地形。

你可以通过将语义相关的函数保持在相同的命名空间下彼此靠近，甚至使它与正在解决的用户故事相关，可以通过多种方式完成。

如果你想知道这种方法是否足够好，可以在其上模拟迭代，添加新功能并查看代码会发生什么。

代码避免重复？它可以重复使用？是否容易找到并与用户需求相关联？如果是这样，那么它会对你有帮助。

最后，如果适用，请考虑使用某些模块构建器，webpack或browserify，这样您不仅可以逻辑地分离模块，还可以“物理”分离模块。

Answer 2

对我来说这是一个很好的做法。在处理小项目时，你确实看到它很重要，但在大型项目中，你几乎不得不这样做。

简单地想象你正在建立一个聊天网站，你将需要创建将删除消息，添加消息的功能。你可以按照自己的意思去做。

   var messages = {
       remove:function{//remove code},
       add:function{//add code}
      }

通过这种方式，您可以将联系人管理对象定义为

       var contacts = {
             remove:function{//remove code},
             add:function{ //add code},
             block:function{//block code}
         }

Answer 3

这本身并不是一个答案，但评论的时间太长了：

由于您在询问最佳做法，我想在您的示例中指出一些内容：

onclick。只是......不要＆＃39;吨。你不想通过你的JS试图诊断一个行为问题只是为了实现8小时，因为它是从HTML调用的。这是一场等待发生的维护噩梦。
innerHTML再次，只是......不要。除非您使用HTML。 10次中有9次，textContent会执行，您可以分配给它而没有安全风险。 Google的内部HTML安全风险＆＃39;了解更多信息。
alert提醒阻止。阻止整个浏览器，直到您单击恼人的框。它的50个打开标签中的哪一个？封锁很糟糕。使用console.log。你是一个开发者，你确实开放了devtools吗？
您的toLowerCase功能。您将数据访问（获取DOM元素的文本）与数据转换混合在一起。馊主意。

请注意，这些都不是JavaScript特有的，它们适用于几乎所有的UI编码：不要将业务逻辑与表示层混合，不要阻止用户交互，使用最小特权原则，不要将数据访问与数据处理等混合在一起。所有上述问题都比你命名某些函数更大的问题。

如何使用对象组织JS函数

3 个答案: