JQuery 命名空间的最佳实践 + 通用实用程序函数

     2023-02-23     304

关键词:

【中文标题】JQuery 命名空间的最佳实践 + 通用实用程序函数【英文标题】:Best practices for JQuery namespaces + general purpose utility functions 【发布时间】:2011-05-31 09:46:47 【问题描述】:

目前有哪些“经验法则”,用于实施 JQuery 命名空间 以托管通用实用程序功能?

我有许多分散在不同文件中的 JavaScript 实用程序方法,我想将它们整合到一个(或多个)命名空间中。最好的方法是什么?

我目前正在研究两种不同的语法,按优先顺序列出:

  //******************************
  // JQuery Namespace syntax #1
  //******************************
  if (typeof(MyNamespace) === "undefined")
  
     MyNamespace = ;
  

  MyNamespace.SayHello = function ()
  
     alert("Hello from MyNamespace!");
  

  MyNamespace.AddEmUp = function (a, b)
  
     return a + b;
  

  //******************************
  // JQuery Namespace syntax #2
  //******************************
  if (typeof (MyNamespace2) === "undefined")
  
     MyNamespace2 =
     
        SayHello: function ()
        
           alert("Hello from MyNamespace2!");
        ,

        AddEmUp: function (a, b)
        
           return a + b;
        
     ;
  

语法 #1 更冗长,但似乎以后更容易维护。我不需要在方法之间添加逗号,我可以左对齐我的所有函数。

还有其他更好的方法可以做到这一点吗?

【问题讨论】:

我认为语法 #1 更好,因为它允许您在多个文件中使用命名空间。我在我的项目中使用这种方法。 我还应该扩展这个问题以包括包含枚举的命名空间。对于枚举,我仍然更喜欢语法 #1。 注意:将开放的花括号放在自己的行上会招致灾难。开放卷发应始终与其“所有者”放在同一行,即 if()、= 等。 我不同意应该根据所谓的“Indian Hill”符号来使用开放花括号,因为它们出现在行尾。这纯粹是一种风格上的事情,并没有即将发生的灾难。使用一个不错的 IDE,您可以在较暗的背景颜色(我使用浅红色)上显示匹配的大括号,并且让它们沿着页面的左侧排列对我有很大帮助,尤其是对于深度嵌套的代码。 因为JS分号自动插入的技术问题。请参阅encosia.com/… - 如果在某个情况下很重要,最好谨慎行事,然后面对难以调试的错误。 【参考方案1】:

对于 jQuery 插件等模式,如果您希望它在元素上可用,则使用 $.fn.myPlugin,如果您只想使用命名空间,则使用 $.whatever。推荐阅读官方Plugins Authoring document和thesearticles。

但除了 jQuery,为你的 utils 命名空间的最简单方法是:

var utils = window.utils || ;
utils.method = function();

JS 中命名空间的基础知识最近并没有真正改变 - 您应该查看 snook's article、DED's elegant approach 和 this SO question。

使用自调用函数来声明命名空间的主要优点是您可以在返回对象之前私下执行内容。此外,该对象将准备好由您的控制台自动完成,您将在 $ 命名空间上错过它,因为 jQuery 返回的是函数而不是对象。

【讨论】:

最好是var utils = window.utils || jQuery 可能在这里用作 Javascript 的同义词 :) 无论如何,jQuery 插件语法并不真正支持命名空间(除了 trigger/bind 中的 'event.namespace'); - 相当可怕的 - 标准解决方案似乎对几乎所有事情都使用单个函数。【参考方案2】:

为了记录,我最终使用了第一种语法:

$(function ()

   //********************************
   // PREDIKT NAMESPACE
   //********************************

   if (typeof (Predikt) === "undefined")
   
      Predikt = ;
   

   //********************************
   // PREDIKT.TIMER NAMESPACE
   //********************************

   if (typeof (Predikt.Timer) === "undefined")
   
      Predikt.Timer = ;
   

   Predikt.Timer.StartTimer = function ()
   
      return new Date().getTime();
   ;

   Predikt.Timer.EndTimer = function ()
   
      return new Date().getTime();
   ;

);

【讨论】:

这是您的电话,但Predikt = window.Predikt || 效果很好,而且更短。只要您将新对象作为属性引用(例如 window.Predict 而不仅仅是 Predikt),您就不会得到 ReferenceError 而只是一个新的空对象。无论如何,您不需要对象名称周围的括号。

枚举类型的命名空间 - 最佳实践

】枚举类型的命名空间-最佳实践【英文标题】:namespacesforenumtypes-bestpractices【发布时间】:2010-10-0317:20:07【问题描述】:通常,需要同时使用多个枚举类型。有时,一个人有一个名字冲突。想到了两个解决方案:使用命名空间... 查看详情

用于 jQuery 选择器的 CSS 类命名的最佳实践

】用于jQuery选择器的CSS类命名的最佳实践【英文标题】:BestpracticeforCSSclassnamingforusewithjQueryselectors【发布时间】:2011-08-0616:00:23【问题描述】:在构建重Javascript的Web应用程序时,命名CSS类以保持Javascript代码和CSS样式表整洁以及U... 查看详情

XSLT 将命名空间前缀添加到元素最佳实践

】XSLT将命名空间前缀添加到元素最佳实践【英文标题】:XSLTAddnamespaceprefixtoelementbestpractice【发布时间】:2014-04-1708:33:00【问题描述】:出于验证目的,我需要为我的转换结果文件的每个元素添加命名空间前缀。我在下面写了转... 查看详情

最佳实践:C# 扩展方法命名空间和推广扩展方法

】最佳实践:C#扩展方法命名空间和推广扩展方法【英文标题】:Bestpractices:C#Extensionmethodsnamespaceandpromotingextensionmethods【发布时间】:2010-11-1614:32:52【问题描述】:我知道已经存在一个post,描述几乎相同,但我认为我的有点不同... 查看详情

节点的通用日志记录,快速应用程序——最佳实践?

】节点的通用日志记录,快速应用程序——最佳实践?【英文标题】:Commonloggingfornode,expressapplication--bestpractice?【发布时间】:2012-11-2519:22:24【问题描述】:我正在开发一个带有几十个模块并使用bunyan进行日志记录的node.js应用... 查看详情

实现mysqli连接的最佳实践/最实用的方法

】实现mysqli连接的最佳实践/最实用的方法【英文标题】:Bestpractices/mostpracticalwaystoimplementmysqliconnections【发布时间】:2020-09-1814:49:56【问题描述】:我正在努力简化我们的数据库助手和实用程序,我看到我们的每个功能,例如fin... 查看详情

实现mysqli连接的最佳实践/最实用的方法

】实现mysqli连接的最佳实践/最实用的方法【英文标题】:Bestpractices/mostpracticalwaystoimplementmysqliconnections【发布时间】:2020-09-0402:38:12【问题描述】:我正在努力简化我们的数据库助手和实用程序,我看到我们的每个功能,例如fin... 查看详情

kubernetes资源命名约束和最佳实践(代码片段)

kubernetes资源命名约束名称和UIDUID:一个非空的、不透明的、系统生成的值,保证在时间和空间上是唯一的;旨在区分类似实体的历史事件。Name:保证在特定时间在给定范围内唯一的非空字符串;用于资源URL&#x... 查看详情

构建自动化 - 命名最佳实践

】构建自动化-命名最佳实践【英文标题】:BuildAutomation-NamingBestPractices【发布时间】:2018-07-3100:14:49【问题描述】:相对于构建定义名称,我在TeamFoundationServer中有这个构建设置系列>迭代(分支)>应用程序我正在尝试为构... 查看详情

Spring Transactions 和通用 DAO 和服务的最佳实践

】SpringTransactions和通用DAO和服务的最佳实践【英文标题】:BestpracticesforSpringTransactionsandgenericDAOs&Services【发布时间】:2013-06-0813:17:38【问题描述】:我使用Spring和JPA(EclispeLink)开发JavaEE应用程序。我们开发了一个用户友好的界... 查看详情

Windows 上的 MySQL 命名管道——更快的最佳实践,还是坏主意?

】Windows上的MySQL命名管道——更快的最佳实践,还是坏主意?【英文标题】:MySQLnamedpipesonWindows--fasterbestpractice,orbadidea?【发布时间】:2009-05-0703:03:41【问题描述】:最近我一直喜欢在Windows上运行的MySQL中使用命名管道(选项--ena... 查看详情

C++ 唯一类名与命名空间

】C++唯一类名与命名空间【英文标题】:C++UniqueClassNamesvs.Namespace【发布时间】:2014-09-0817:27:46【问题描述】:由于C++不像Java那样具有反射功能,因此我构建了一组通用数据容器,可用于将数据格式化为各种格式(JSON、XML、CSV等... 查看详情

在应用程序中使用 jQuery 表单绑定代码的最佳实践

】在应用程序中使用jQuery表单绑定代码的最佳实践【英文标题】:BestpracticeswithjQueryformbindingcodeinanapplication【发布时间】:2010-09-0706:36:43【问题描述】:我们有一个应用程序,其中包含大量对服务器端代码的jQueryJSON调用。因此,... 查看详情

最佳实践。通过支持 iOS 5、iOS 6 和 iOS 7 UI 使 iOS 应用程序通用

】最佳实践。通过支持iOS5、iOS6和iOS7UI使iOS应用程序通用【英文标题】:Bestpractice.MakeiOSappuniversalwithsupportingiOS5,iOS6andiOS7UI【发布时间】:2013-10-2811:40:45【问题描述】:我想我可以为不同的iOS版本使用不同的故事板。由于UI的差异... 查看详情

命名空间命名约定

】命名空间命名约定【英文标题】:namespacenamingconventions【发布时间】:2010-10-2911:12:47【问题描述】:对于那些编写可重用组件的人,如果您要扩展.NET框架的功能,您认为最佳实践是什么?例如,我目前正在创建一个Pop3库,因... 查看详情

Perl 中带有输出参数的子例程的最佳实践命名约定

】Perl中带有输出参数的子例程的最佳实践命名约定【英文标题】:BestpracticenamingconventioninPerlforsubroutinewithoutputarguments【发布时间】:2016-06-0819:16:37【问题描述】:简介:我通常不使用输出参数(作为输入和输出值或仅作为输出... 查看详情

C# GUI 命名约定的最佳实践? [关闭]

】C#GUI命名约定的最佳实践?[关闭]【英文标题】:BestpracticesforC#GUInamingconventions?[closed]【发布时间】:2010-11-1719:23:12【问题描述】:无论是用WinForms还是XAML编写的GUI,我所看到的项目之间的命名约定似乎都存在最大差异。对于一... 查看详情

jquery-$()函数的用法及一些常用的选择器

一、$()函数【jquery()函数的简写形式】的常见用途(1)包装DOM元素,以便于操作(jquery选择器)(2)作为几个通用的实用工具函数的命名空间前缀,例如,删除字符串前后空格的实用函数,其调用方法如下所示:  &nbs... 查看详情