关于jQuery 代码的书写形式

2024-11-27 00:23:44

推荐回答（3个）

回答1：

1、定义jQuery变量的时候添加var关键字

　　这个不仅仅是jQuery，所有javascript开发过程中，都需要注意，不要定义成如下：

  $loading = $('#loading'); //这个是全局定义

2、使用一个var来定义变量

　　如果使用多个变量的话，如下方式定义：

var page = 0,
  $loading = $('#loading'),
  $body = $('body');

不要给每一个变量都添加一个var关键字

3、定义jQuery变量

　　申明或者定义变量的时候，请记住如果定义的是jQuery的变量，添加一个$符号到变量前，如下：

var$loading = $('#loading');

这里定义成这样的好处在于，可以有效的提示自己或者其它阅读代码的用户，这是一个jQuery的变量

4、DOM操作请务必记住缓存（cache）

在jQuery代码开发中，常常需要操作DOM，DOM操作是非常消耗资源的一个过程，而往往很多人都喜欢这样使用jQuery：

$('#loading').html('完毕');
$('#loading').fadeOut();

代码没有任何问题，也可以正常运行出结果，但是这里注意每次定义并且调用$('#loading')的时候，都实际创建了一个新的变量，如果需要重用的话，记住一定要定义到一个变量里，这样可以有效的缓存变量内容，如下：

var $loading = $('#loading');
$loading.html('完毕');$loading.fadeOut();

这样性能会更好。

5、使用链式操作

　　上面那个例子，可以写的更简洁一些：

var $loading = $('#loading');
$loading.html('完毕').fadeOut();

6、精简jQuery代码

　　尽量把代码都整合到一起，请勿这样编码：

// ！！反面人物$button.click(function(){
    $target.css('width','50%');
    $target.css('border','1px solid #202020');
    $target.css('color','#fff');
});

应该这样书写：

$button.click(function(){
    $target.css({'width':'50%','border':'1px solid #202020','color':'#fff'});
});

7、避免使用全局类型的选择器

　　请勿如下方式书写：
　　    $('.something > *');
　　这样书写更好：
　　    $('.something').children();

8、不要叠加多个ID

　　请勿如下书写：
　　    $('#something #children');

　　这样书写更好：
　　    $('#children');

9、多用逻辑判断||或者&&来提速

　请勿如下书写：
if(!$something) {
    $something = $('#something ');
}
　　这样书写性能更好：
$something= $something|| $('#something');

10、尽量使用更少的代码

    与其这样书写：if(string.length > 0){..}

　　不如这样书写：if(string.length){..}

11、尽量使用 .on方法

　　如果使用比较新版本的jQuery类库的话，请使用.on，其它任何方法都是最终使用.on来实现的

12、尽量使用最新版本的jQuery

　　最新版本的jQuery拥有更好的性能，但是最新的版本可能不支持ie6/7/8，所以大家需要自己针对实际情况选择

13、尽量使用原生的Javascript

　　如果使用原生的Javascript也可以实现jQuery提供的功能的话，推荐使用原生的javascript来实现

回答2：

为什么这样定义，其主要的原因是避免变量声明

你知道其实
(function(){
var _jQuery = window.jQuery,
var jQuery = window.jQuery = window.$ = function(selector, context) {
return new jQuery.fn.init(selector, context);
};
....

})();
完全可以写成

var _jQuery = window.jQuery,
var jQuery = window.jQuery = window.$ = function(selector, context) {
return new jQuery.fn.init(selector, context);
};

但是这样会出现什么问题呢？
在这段代码执行的过程中，作为this的变量（如果你直接放在script标签中，或者js文件中，那么这个this对象就是window）会多出一个_jQuery的属性，还有一个jQuery属性，因为var声明的变量其实就是给this的属性赋值，但是如果包裹在function中的时候，这时候的var变量声明会给function的参数栈对象中（关于这个参数栈的解释，你可以参考javascript权威手册，里面讲得很详细），所以这样可以避免在window中声明奇怪的属性。

而包裹在function中，只会定义一个function，而不会执行，所以就用（）包裹function，使其成为一个函数对象，然后直接在后面加入（）调用，其实就是在定义一个function的同时执行它，然后丢弃这个函数。

不知道我说的你是否能听懂。关于更多的细节，希望你能读一读javascript权威手册这本书，别的关于javascript基础书都属于垃圾级别的，连看都不用看。希望对你有帮助，谢谢。

回答3：

(function(){xxxx})();

前半部分(function(){xxxx}):匿名函数
后半部分（）调用该匿名函数
主要目的是形成一个作用域是该作用域中的变量无法被外界访问