仿效jQuery怎样高效的写JSLite

2024年1月12日 206次阅读 来源: 小弟调调

议论jQuery和javascript机能的文章并不稀有。但是，我设计依据别人对jQuery总结的一些速率方面的技能和一些发起，来教你提拔你的JSLite和javascript代码。好的代码会带来速率的提拔。疾速衬着和相应意味着更好的用户体验。

起首，在脑子里紧紧记着JSLite就是javascript。这意味着我们应当采用雷同的编码通例，作风指南和最好实践。

起首，假如你是一个javascript新手，没有用过jQuery我发起您浏览最好先浏览官方文档的语法引见，这是一篇高质量的javascript教程，示意您已经会jQuery用过一段时间了。

当你预备运用JSLite,我强烈发起你遵照下面这些指南:

缓存变量

DOM遍历是高贵的，所以只管将会重用的元素缓存。

js// 蹩脚
h = $('#element').height();
$('#element').css('height',h-20);

js// 发起
$element = $('#element');
h = $element.height();
$element.css('height',h-20);

防止全局变量

JSLite与javascript一样，一般来说,最好确保你的变量在函数作用域内。

js// 蹩脚
$element = $('#element');
h = $element.height();
$element.css('height',h-20);

js// 发起
var $element = $('#element');
var h = $element.height();
$element.css('height',h-20);

运用匈牙利定名法

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

js// 蹩脚
var first = $('#first');
var second = $('#second');
var value = $first.val();

js// 发起 - 在JSLite对象前加$前缀
var $first = $('#first');
var $second = $('#second'),
var value = $first.val();

运用 var 链（单 var 形式）

将多条var语句兼并为一条语句，我发起将未赋值的变量放到背面。

jsvar $first = $('#first'),
    $second = $('#second'),
    value = $first.val(),
    k = 3,
    cookiestring = 'SOMECOOKIESPLEASE',
    i,
    j,
    myArray = {};

请运用 on

在新版JSLite中，更短的 on("click") 用来庖代相似 click() 如许的函数。在之前的版本中 on() 就是 bind() 。 on()附加事宜处置惩罚顺序的首选要领。但是，出于一致性斟酌，你能够简朴的悉数运用 on() 要领。

js// 蹩脚
$first.click(function(){
    $first.css('border','1px solid red');
    $first.css('color','blue');
});

$first.hover(function(){
    $first.css('border','1px solid red');
})

js// 发起
$first.on('click',function(){
    $first.css('border','1px solid red');
    $first.css('color','blue');
})

$first.on('hover',function(){
    $first.css('border','1px solid red');
})

精简javascript

一般来说,最好只管兼并函数。

js// 蹩脚
$first.click(function(){
    $first.css('border','1px solid red');
    $first.css('color','blue');
});

js// 发起
$first.on('click',function(){
    $first.css({
        'border':'1px solid red',
        'color':'blue'
    });
});

链式操纵

JSLite完成要领的链式操纵是异常轻易的。下面应用这一点。

js// 蹩脚
$second.html(value);
$second.on('click',function(){
    alert('hello everybody');
});
$second.fadeIn('slow');
$second.animate({height:'120px'},500);

js// 发起
$second.html(value);
$second.on('click',function(){
    alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);

保持代码的可读性

伴随着精简代码和运用链式的同时，能够带来代码的难以浏览。增加缩紧和换行能起到很好的结果。

js// 蹩脚
$second.html(value);
$second.on('click',function(){
    alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);

js// 发起
$second.html(value);
$second
    .on('click',function(){ alert('hello everybody');})
    .fadeIn('slow')
    .animate({height:'120px'},500);

挑选短路求值

短路求值是一个从左到右求值的表达式，用 &&（逻辑与）或 || （逻辑或）操纵符。

js// 蹩脚
function initVar($myVar) {
    if(!$myVar) {
        $myVar = $('#selector');
    }
}

js// 发起
function initVar($myVar) {
    $myVar = $myVar || $('#selector');
}

挑选捷径

精简代码的个中一种体式格局是应用编码捷径。

js// 蹩脚
if(collection.length > 0){..}

js// 发起
if(collection.length){..}

沉重的操纵中星散元素

假如你盘算对DOM元素做大批操纵（一连设置多个属性或css款式），发起起首星散元素然后在增加。

js// 蹩脚
var 
    $container = $("#container"),
    $containerLi = $("#container li"),
    $element = null;

$element = $containerLi.first(); 
//... 许多庞杂的操纵

js// better
var 
    $container = $("#container"),
    $containerLi = $container.find("li"),
    $element = null;

$element = $containerLi.first().detach(); 
//... 许多庞杂的操纵
$container.append($element);

熟记技能

你能够对运用JSLite中的要领缺乏履历,一定要检察的文档，能够会有一个更好或更快的要领来运用它。

js// 蹩脚
$('#id').data(key,value);

js// 发起 (高效)
$.data('#id',key,value);

运用子查询缓存的父元素

正如前面所提到的，DOM遍历是一项高贵的操纵。典范做法是缓存父元素并在挑选子元素时重用这些缓存元素。

js// 蹩脚
var 
    $container = $('#container'),
    $containerLi = $('#container li'),
    $containerLiSpan = $('#container li span');

js// 发起 (高效)
var 
    $container = $('#container '),
    $containerLi = $container.find('li'),
    $containerLiSpan= $containerLi.find('span');

防止通用挑选符

将通用挑选符放到子女挑选符中，机能异常蹩脚。

js// 蹩脚
$('.container > *'); 

js// 发起
$('.container').children();

防止隐式通用挑选符

通用挑选符偶然是隐式的，不轻易发明。

js// 蹩脚
$('.someclass :radio'); 

js// 发起
$('.someclass input:radio');

优化挑选符

比方，Id挑选符应当是唯一的，所以没有必要增加分外的挑选符。

js// 蹩脚
$('div#myid'); 
$('div#footer a.myLink');

js// 发起
$('#myid');
$('#footer .myLink');

防止多个ID挑选符

在此强调，ID 挑选符应当是唯一的，不须要增加分外的挑选符，更不须要多个子女ID挑选符。

js// 蹩脚
$('#outer #inner'); 

js// 发起
$('#inner');

对峙最新版本

新版本一般更好：更轻量级，更高效，要领更多，更全面的掩盖jQuery要领。明显，你须要斟酌你要支撑的代码的兼容性。比方，项目是不是跑在优越的支撑 HTML5/CSS3

必要时组合JSLite和javascript原生代码

如上所述，JSLite就是javascript，这意味着用JSLite能做的事变，一样能够用原生代码来做。原生代码的可读性和可维护性能够不如JSLite，而且代码更长。但也意味着更高效（一般更靠近底层代码可读性越差，机能越高，比方：汇编，固然须要更壮大的人材能够）。切记没有任何框架能比原生代码更小，更轻，更高效（注：测试链接已失效，可上网搜刮测试代码）。

末了忠言

末了，我纪录这篇文章的目标是进步JSLite的机能和其他一些好的发起。假如你想深切的研讨对这个话题你会发明许多兴趣。记着，JSLite并不是不可或缺，仅是一种挑选。思索为何要运用它。DOM操纵？ajax？模版？css动画？照样挑选器？jQuery重度开发者？

    原文作者：小弟调调
    原文地址: https://segmentfault.com/a/1190000002478263
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞