zoukankan      html  css  js  c++  java
  • web最佳实践

    1.使用索引代替数组遍历

    数组遍历方法,查找用户信息

     var userInfo = {};
     users.forEach(function(item){
     	if(item.name === 'reamd') {
        	userInfo = item;
        }
     });
    

    索引方法,查找用户信息(推荐)

     var userInfo = {},
     	scopeUser = {};
     user.forEach(function(item) {
     	scopeUser['name'] = item;
     });
     userInfo = scopeUser['reamd'];
    

    2.使用Array.prototype.join方法代替字符串拼接

    字符串拼接方法

     var htmlTemplate = '<li><img src="' + user.avatar + '"/><span>' + user.name + '</span></li>';
     $('ul').append(htmlTemplate);
    

    join方法(推荐)

    var tempArray = ['<li><img src="', user.avatar, '"/><span>', user.name, '</span></li>'];
    $('ul').append(tempArray.join(''));
    

    注:是不是以后字符串拼接就一律使用数组join呢?这个要看你的实际需求了,就普通的几个或者K级的字节的组合就没有必要使用数组法了,因为开数组变量也是有消耗的。若有几K以上的字符串组合,那就是数组的效率高了。

    3.在繁重的执行上使用Web Workers

    定义: web worker是运行在后台的JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker在后台运行。
    web worker 实例:

    <html>
    <title>Test webWorkers</title>
    <body>
    <div id="result"></div>
    <script language="javascript">
        var worker = new Worker("worker.js");
        worker.onmessage = function(event) {
            document.getElementById("result").textContent = event.data;
        };
        worker.onerror = function(event) {
            throw event.data;
        };
        worker.postMessage(2);
    </script>
    </body>
    </html>
    

    worker.js

    onmessage = function(event) {
        var n = parseInt(event.data);
        postMessage(n + 3);
        return;
    };
    

    4.事件委托

    背景:如果你有一个无序列表,里面有一堆<li>,每一个<li>点击都能触发某种行为。此时,你通常会在每个<li>元素上添加一个事件监听,但是如果你添加监听的这个对象会被频繁的移除添加呢?你不得不在移除添加元素的同时需要处理事件监听的移除和添加。这个时候,我们就需要引入事件委托了。


    定义:事件委托是在父级元素上添加一个事件监听,来替代在每一个子元素上添加事件监听。当事件被触发时,event.target会评估相应的措施是否需要被执行。


    事件委托是在父级元素上添加一个事件监听,来替代在每一个子元素上添加事件监听。当事件被触发时,event.target会评估相应的措施是否需要被执行。

        // 获取元素,添加事件监听 
        document.querySelector('#parent-list').addEventListener('click', function(e) { 
            // e.target 是一个被点击的元素! 
            // 如果它是一个列表元素 
            if(e.target && e.target.tagName == 'li') { 
                // 我们找到了这个元素,对它的操作可以写在这里。 
            } 
        }); 
    
  • 相关阅读:
    28、vSocket模型详解及select应用详解
    27、通过visual s'tudio 验证 SOCKET编程:搭建一个TCP服务器
    26、TCP服务器原理
    8、字符串操作
    9、内存操作
    ESP32作为接入点AP
    ·通过wifi_scan学习esp32wifi程序编写
    10、指针变量基础
    关于wifi网络基本原理了解
    开发团队中命名规范的重要性
  • 原文地址:https://www.cnblogs.com/reamd/p/5203195.html
Copyright © 2011-2022 走看看