js小技巧和常见问题总结----2022-3-3更新

本篇文章是我平时工作中遇到的一些常见问题以及一些小技巧，可能比较简单，但是比较实用，记录一下，也是方便后续查找

1.判断一个方法是否存在

function funExists(funName){
        try{ 
            if(typeof eval(funName)=="undefined"){return false;} 
            if(typeof eval(funName)=="function"){return true;}
        }catch(e){
            return false;
        }
    } 

 if(funExists("jsCopyTextData")) {
       //true
  }else{
       //false
 }

2.内存泄漏常见案例

案例一：多重循环引起的内存泄漏

$(".proList_name").each(function(){
     var proListBox = $(this).parents(".proList_box");
     if($(this).text()==_name){
        if(preType=="app_install_start"||preType=="app_upgrade"||proListBox.find(".openBtn").css("display")==='block'){
                 $(this).parents("li").find(".progressbar #fill").css("transform","translateX(-100%)");
                 var addArr = {
                     g_name : proListBox.find(".proList_name").text(),
                     version: proListBox.find(".pro_v").text()
                 }
                 var searchSign;
                 for(var i = 0;i<searchList.length;i++){
                     if(searchList[i].g_name==addArr.g_name){
                         searchSign = false;
                         searchList[i].version = replaceString((addArr.version).toString());
                         break;
                     }else{
                         searchSign = true;
                     }
                 }
                 if(searchSign==true){
                     searchList.push(addArr);
                 }
             }
         }else if(downMsg=="ng"){
             // var that = $(this).parents(".proList_box");
             setTimeout(function () {
                 // that.parents(".proList_box").find(".downloadBtn").show();
                 // that.parents(".proList_box").find(".pro_download").hide();
             }, 4000);
         }
         
     }
 })

找到结果应跳出循环

案例二：意外的全局变量

function weige(){
	a = "猛男曾";
	this.b = "江下第一猛男";
}

类似这样定义变量都是全局变量，需注意，那些用来临时存储大量数据的变量，应该确保处理完毕后，将此变量设置为 null 或者重新赋值

案例三：被遗忘的计时器和回调函数

setInterval(() => {  
    //dosomething
    var weige = "猛男";
    var btn = document.getElementById("weige");
}, 1000);

在定时器结束之前，weige和btn一直存在，若没有clear，会一直存在

案例四：闭包
这个就没啥好说的

3.base64加密解密补充

一般与php通信用的是我之前文章写的base64加密解密，而与c++通信需要用以下方式（防止特殊字符解析失败）

var Base64 = {
     //解密
    decode:function(e) {
        return decodeURIComponent(escape(window.atob(e)));
    },
    //加密
    encode:function(e) {
        return window.btoa(unescape(encodeURIComponent(e)))
    }
    
}

4.clipboard.js 复制

该库依赖于 Selection 和 execCommand API，几乎所有的浏览器都支持 Selection API，然而 execCommand API 却存在一定的兼容性问题：

Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。如果要获取用于检查或修改的 Selection 对象，可以调用 window.getSelection 方法。
document.execCommand API 允许运行命令来操作网页中的内容，常用的命令有 bold、italic、copy、cut、delete、insertHTML、insertImage、insertText 和 undo 等。

系统ctrl+c复制与clipboard.js复制的区别：
系统复制：

clipboard.js复制 格式只有一种

注意复制图片时，图片src需是，http 或是file 协议的路径

5.图片展示问题

（1）图片名中带有#问题，js会将#后内容解析为参数，导致图片显示不出来
（2）当图片不存在或者显示错误时，onerror方法不建议使用，原因：当错误图片也不存在时，图片会一直显示错误，此方法会无限循环。解决方法：先验证图片是否存在，存在则进行替换，否则不进行操作

//判断图片是否存在
function checkImgExists(imgurl) {
    return new Promise(function(resolve, reject) {
        var ImgObj = new Image()
        ImgObj.src = imgurl
        ImgObj.onload = function(res) {
            resolve(res)
        }
        ImgObj.onerror = function(err) {
            reject(err)
        }
    })
}

// 图片错误方法
function imgExists(e) {
    //默认图片
    var imgUrl = "images/img_error.png";
    checkImgExists(imgUrl).then(() => {
        e.src = imgUrl;
    }).catch(() => {
        // alert("插入图片错误")
    })
}

6.判断一个字符串中某个字符串的数量

// 计算字符串中某个字符串出现的次数
function getCharCount(str,char){
    var regex = new RegExp(char, 'g'); // 使用g表示整个字符串都要匹配
    var result = str.match(regex);          //match方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
    var count=!result ? 0 : result.length;
    return count;
}