JQuery JavaScript设计：自执行函数或对象文字？ [英] JQuery JavaScript Design: Self Executing Function or Object Literal?

问题描述

通常，当我构建一个我喜欢封装的页面时，我很好奇，如果在构建封装的代码块时有与JQuery有关的最佳做法在该页面内的对象内的功能。这允许我在构建应用程序时进行一些封装。没有什么比我看到一个这样的一个JavaScript文件没有什么更多的

  function doSomethingOnlyRelevantOnThisPage（）{
 //做一些东西
} 
  

我这样做是混乱的设计，并没有真正封装功能很好。

通常在许多框架中，有一个用于执行此封装的标准。

在Mootools中，他们赞成对象字面符号：

  var Site = {
 //属性和方法
} 
  

在YUI中，他们赞成自我执行功能符号：

 （function（）{//属性和方法}）（）
  

第二个例子的好处是创建一个闭包，从而允许您定义私有属性和方法。

我的问题是：任何JQuery的爱好者都有任何最佳做法来创建这些干净的封装结构？他们使用的理由是什么？

解决方案

由于我一直在使用jQuery一段时间，我决定在一个标准的模式，对我有用的。

这是YUI模块模式与一些jQuery插件模式混合在一起的组合。 。我们最终使用自行执行的关闭模式。这有利于以下几种方式：

1. 将代码保持在最低限度


2. 它强制分离


3. 它提供了一个阻止命名冲突的关闭。

这是什么看起来像：

 ;（function（$）{
 var myPrivateFunction = function（）{
} ; 
 
 var init = function（）{
 myPrivateFunction（）; 
}; 
 
 $（init）; 
}） jQuery的）; 
  

我们意识到，分配与YUI模块模式类似的函数执行结果会暴露出代码可能会在演示代码中被调用。我们想防止这种情况，所以这种模式是适合的。

当然，我们可以在内部编写init方法，而不必定义函数的变量。我们同意明确定义init函数使代码更清晰。

如果我们要在页面/外部js文件之间共享功能，会发生什么？我们简单地介绍jQuery提供的扩展jQuery对象本身的扩展函数的现有机制。

如果函数是静态的，我们使用$ .extend，如果我们使用$ .fn.extend函数。

希望这可以帮助某人。

I'm curious as to if there are any best practices relating to JQuery when constructing encapsulated code blocks.

Generally, when I construct a page I like to encapsulate the functions used within that page inside an object. This allows me some encapsulation when building applications. There's nothing I hate more than seeing a JavaScript file with a bunch of this

function doSomethingOnlyRelevantOnThisPage() {
    // do some stuff
}

I this makes for messy design, and doesn't really encapsulate functionality nicely.

Commonly in many frameworks, there is a standard that is used to perform this encapsulation.

In Mootools they favor the Object Literal Notation:

var Site = {        
    // properties and methods
}

In YUI they favor the Self Executing Function notation:

(function() { // properties and methods })()

The nice thing about the second example is that a closure is created, thus allowing you to define private properties and methods.

My question is this: Do any JQuery aficionados have any best practices for creating these cleanly encapsulated structures? What is the rationale behind their use?

解决方案

Since I've been working with jQuery for a while now, I've decided on a standard pattern that works well for me.

It's a combination of the YUI module pattern with a bit of jQuery plugin pattern mixed in.. We ended up using the self executing closure pattern. This is beneficial in a few ways:

1. It keeps code to a minimum
2. It enforces separation of behavior from presentation
3. It provides a closure which prevents naming conflicts

This is what it looks like:

;(function($) {        
    var myPrivateFunction = function() {
    };

    var init = function() {
        myPrivateFunction();
    };

    $(init);
})(jQuery);

We realized that assigning the result of the function execution, similar to the YUI module pattern, exposes code that could potentially be called from within presentation code. We want to prevent this, so this pattern fits.

Of course we could have written the init method inline, without defining a variable for the function. We agreed that explicitly defining the init function made the code clearer to readers.

What happens if we want to share functions between pages/external js files? We simply hook into the existing mechanism that jQuery provides for extending the jQuery object itself - the extend function.

If the functions are static, we use $.extend, and if they operate over a wrapped set, we use the $.fn.extend function.

Hope this helps someone.

这篇关于JQuery JavaScript设计：自执行函数或对象文字？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！