jsJavaScript

JavaScript/JQuery高级开发技巧

2019-03-10  本文已影响5人  Aniugel

在MVVM框架兴起的时代，了解JQ的都知道，JQ是比较老的技术了，但是如果需要对dom操作简单开发工作又不大的情况下，JQ确实是一个不错的选择，下面是本人多年来对JS/JQ运用的一些心得和方法，希望可以帮到有需要的朋友，喜欢的朋友可以点下喜欢和关注，有不对的地方望斧正。
参考地址：https://www.cnblogs.com/sunshq/p/4250380.html

1.查找DOM元素实际上有不小的内存开销，使用选择器的次数应该越少越好，并且尽可能缓存选中的结果，便于以后反复使用。记住，永远不要让相同的选择器出现多次;
var liNode = $(".contain .listBox li");
liNode.find('span').addClass('show');
liNode.find('i').addClass('show');
2.使用has()或者（hasClass（））来判断一个元素是否包含特定的class或者元素；
//has()方法
<style>
    .red {color: red;}
</style>
<body>
    <button>
        <p class="show">9999</p>
    </button>
</body>
<script>
    $("button").has('.show').addClass('red');
    $("button").has('p').addClass('red');//or
</script>
//hasClass()方法
<body>
    <div class="box show">
    </div>
</body>
<script>
    // var isShow = $('.box').attr('class') != 'box';
    var isShow = $('.box').hasClass('show')
    if (isShow) {
        console.log('isShow')
    }
</script>
3. jQuery速度再快，也无法与原生的javascript方法相比，而且建立的jQuery对象包含的信息量很庞大。所以有原生方法可以使用的场合，尽量避免使用jQuery。
$("a").click(function(){
    alert($(this).attr("id"));$("a").click(function(){
    alert($(this.id);//优化
});
});
4.许多jQuery方法都有两个版本，一个是供jQuery对象使用的版本，另一个是供jQuery函数使用的版本。由于后者不通过jQuery对象操作，所以相对开销较小，速度比较快;
var $text = $("#text");
var $ts = $text.text();
　　改良后↓
var $text = $("#text");
var $ts = $.text($text);
这里是用了“$.text()”的内置函数，其他类似的还有“$.data()”等。
5.如果要多次改动DOM结构，就先把要改动的部分先取出来，改动完成后再放回去。这里的基本思想是在内存中建立你确实想要的东西，最后做一次最有效的更新DOM操作
一般方法  可以对比log输出的时间，可以看出第二种方法 时间明显减少
console.time('测试时间')
    for (var i = 0; i < 100; i++) {
        $('ul').append(
            `<li>${i}</li>`
        )
    }
    console.timeEnd('测试时间')
优化后
console.time('测试时间')
    var liNode = '';
    for (var i = 0; i < 100; i++) {
        liNode += `<li>${i}</li>`;
    }
    $('ul').append(liNode);
    console.timeEnd('测试时间')
6.链式写法

采用链式写法时，jQuery会自动缓存每一步的结果，比非链式写法（手动缓存）要快。

// 糟糕
$second.html(value);
$second.on('click',function(){
    alert('hello everybody');
});

$second.fadeIn('slow');
$second.animate({height:'120px'},500);
// 建议
$second.html(value);
$second.on('click',function(){
    alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);
7.循环总是一种比较耗时的操作，javascript原生循环方法for和while，要比jQuery的“.each()”快。并且关于for循环，以下这种写法效率最高。
for (var i = 0, len = array.length; i < len; i++) {
  // alert(i);
}

先声明变量，再进行循环操作，效率远比遍历数组“for (var i in arr)”高得多，也比循环取得数组长度“for (var i = 0; i < arr.length; i++)”的效率高！

8.字符串拼接

字符串的拼接在开发中会经常遇到，用“+=”的方式来拼接字符串的效率非常的低，我们可以利用数组的“.join()”方法。

console.time('测试时间')
    var arr = [];
    for (var i = 0; i < 100; i++) {
        arr[i] = `<li>${i}</li>`;
    }
    $('ul').html(arr.join(''));
console.timeEnd('测试时间')
以前我很喜欢用数组的原生的方法“.push()”，其实直接用arr[i]或者arr[arr.length]的方式要快一点，但是差别不是很大。
9.缓存变量,DOM遍历是昂贵的，所以尽量将会重用的元素缓存。
// 糟糕
$element = $('#element');
h = $element.height();
$element.css('height',h-20);
// 建议
var $element = $('#element');
var h = $element.height();
$element.css('height',h-20);
10.使用匈牙利命名法

在变量前加$前缀，便于识别出jQuery对象。

// 糟糕
var first = $('#first');
var second = $('#second');
var value = $first.val();
// 建议 - 在jQuery对象前加$前缀
var $first = $('#first');
var $second = $('#second'),
var value = $first.val();
11.使用 Var 链（单 Var 模式）

将多条var语句合并为一条语句，我建议将未赋值的变量放到后面。

var 
  $first = $('#first'),
  $second = $('#second'),
  value = $first.val(),
  k = 3,
  cookiestring = 'SOMECOOKIESPLEASE',
  i,
  j,
  myArray = {};
12.请使用’On’,在新版jQuery中，更短的 on(“click”) 用来取代类似 click() 这样的函数。在之前的版本中 on() 就是 bind()。自从jQuery 1.7版本后，on() 附加事件处理程序的首选方法。然而，出于一致性考虑，你可以简单的全部使用 on()方法。
// 糟糕
$first.click(function(){
    $first.css('border','1px solid red');
    $first.css('color','blue');
});
$first.hover(function(){
    $first.css('border','1px solid red');
})
// 建议
$first.on('click',function(){
    $first.css('border','1px solid red');
    $first.css('color','blue');
})
$first.on('hover',function(){
    $first.css('border','1px solid red');
})
13.维持代码的可读性，伴随着精简代码和使用链式的同时，可能带来代码的难以阅读。添加缩紧和换行能起到很好的效果。
// 糟糕
$second.html(value);
$second.on('click',function(){
    alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);

// 建议
$second.html(value);
$second
    .on('click',function(){ alert('hello everybody');})
    .fadeIn('slow')
    .animate({height:'120px'},500);
14.选择短路求值,短路求值是一个从左到右求值的表达式，用 &&（逻辑与）或（逻辑或）操作符。
// 糟糕
function initVar($myVar) {
    if(!$myVar) {
        $myVar = $('#selector');
    }
}

// 建议
function initVar($myVar) {
    $myVar = $myVar || $('#selector');
}

选择捷径
精简代码的其中一种方式是利用编码捷径。

// 糟糕
if(collection.length > 0){..}

// 建议
if(collection.length){..}
15.你可能对使用jQuery中的方法缺少经验,一定要查看的文档，可能会有一个更好或更快的方法来使用它。同4

// 糟糕
$('#id').data(key,value);

// 建议 (高效)
$.data('#id',key,value);

16.优先使用===，而不是==，不等号也是

因为==会自动将类型转成一样的

17.少用Eval函数

对于那些不熟悉JavaScript的人来说，函数"evel"让我们能够访问JavaScript编译器。我们可以通过给"eval"传递一个字符串参数来得到该字符串执行的结果。这不仅会极大地降低你的脚本的性能，也会造成一个巨大的安全隐患，因为这赋予传递进来的纯文本太多的能力。要尽可能地避免eval函数的使用。

18.慎用简写

if (true) console.log("少用我");

19.构建字符串的最快方式比案例8更加好

当需要遍历一个数组或者对象之时，不要总是使用你能信手粘来的"for"语句。创造性地找个能够完成工作的最快速的方案。

var arr = ['item 1', 'item 2', 'item 3', ...]; var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';

20.减少全局变量

"通过将全局的东西封装进单个命名空间，能够大大降低与其他应用、部件、代码库交互混乱的概率。

var name = 'jeffrey'; var lastname = 'Way';
function doSomething() {...}
console.log(name); 

更好的做法
var DudeNameSpace = { name: 'Jeffrey', lastname: 'Way', doSometing: function() {...} } console.log(DudeNameSpace.name);
上一篇下一篇

猜你喜欢

热点阅读