仿JQuery输写高效JSLite代码的一些技巧

前端技术 2023/09/01 JavaScript

讨论jQuery和javascript性能的文章并不罕见。然而，我计划根据他人对jQuery总结的一些速度方面的技巧和一些建议，来教你提升你的JSLite和javascript代码。好的代码会带来速度的提升。快速渲染和响应意味着更好的用户体验。

首先，在脑子里牢牢记住JSLite就是javascript。这意味着我们应该采取相同的编码惯例，风格指南和最佳实践。

首先，如果你是一个javascript新手，没有用过jQuery我建议您阅读最好先阅读官方文档的语法介绍，这是一篇高质量的javascript教程，表示您已经会jQuery用过一段时间了。

当你准备使用JSLite,我强烈建议你遵循下面这些指南:

缓存变量

DOM遍历是昂贵的，所以尽量将会重用的元素缓存。

复制代码 代码如下:

// 糟糕
h = $(\'#element\').height();
$(\'#element\').css(\'height\',h-20);
// 建议
$element = $(\'#element\');
h = $element.height();
$element.css(\'height\',h-20);

避免全局变量

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

复制代码 代码如下:

// 糟糕
$element = $(\'#element\');
h = $element.height();
$element.css(\'height\',h-20);
// 建议
var $element = $(\'#element\');
var h = $element.height();
$element.css(\'height\',h-20);

使用匈牙利命名法

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

复制代码 代码如下:

// 糟糕
var first = $(\'#first\');
var second = $(\'#second\');
var value = $first.val();
// 建议 - 在JSLite对象前加$前缀
var $first = $(\'#first\');
var $second = $(\'#second\'),
var value = $first.val();

使用 var 链（单 var 模式）

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

复制代码 代码如下:

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

请使用 on

在新版JSLite中，更短的 on(\"click\") 用来取代类似 click() 这样的函数。在之前的版本中 on() 就是 bind() 。 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\');
})

本文地址：https://www.stayed.cn/item/1862

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案