百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT知识 > 正文

你不知道的js技巧 你不知道的js技巧是什么

liuian 2024-12-30 05:16 25 浏览

JS进阶

说起这个应该算是老生常谈了吧。所谓的高级,其实就是讲了一些我们平常用不到(或许用了不知道),但是非常实在的东西。算是熟练掌握js的一个必经road吧。

检测函数类型

其实检测函数的类型应该算是js的一个痛点,因为js是一门弱类型的语言,对类型的检测不是那么看重。但随着JS的发展,类型变得更加丰富。而检测类型的复杂度,也变得复杂了~ (MD). 大致梳理一下吧。如果你想检测值类型(Number,String,Boolean,undefined,null,Symbol). 使用typeof就可以了

typeof 23; //"number"
typeof "webpack"; //"string"
typeof true; //"boolean"
typeof undefined;  //"undefined"
typeof symbol;  //"symbol"
//但是有个呆毛null.
typeof null; //"object" 如果理解原型链的话,那就无可厚非了

而检测自定义类型,或者原生的应用类型,则需要使用到instanceof

let obj = new Object;
obj instanceof Object; //true
...

但是有时候情况往往不是这么简单。 比如如果你想检测iframe里面的属性值的话,基本上是不可能的。因为检测的前提要求是在同一个全局作用于下。所以为了能够正常检测一些值的类型(排除在iframe的情况).那有没有什么万能的方法呢? 确实有,你可以使用调用toString的方法,得到相关的类型.

let value = new FormData;
console.log(Object.prototype.toString.call(value)); //"[object FormData]"

是不是感觉特别情切呢。 你也可以更进一步的提取。要知道,我们是有情怀的淫。

function getType(value){  //基本上可以返回所有的类型,不论你是自定义还是原生
    return Object.prototype.toString.call(value).match(/\s{1}(\w+)/)[1];
}
let obj = new Object;
console.log(getType(obj)); //"Object"

作用域安全的构造函数

关于函数的坑应该是无处不在(谁叫他是js里面最难懂的一个类型)。关于函数里面的this得说明一下。只有函数在运行的时候,函数里面的this才会真正的绑定.这就造成了一个问题,即,如果你在全局不小心运行了一个函数,那结果就呵呵了。 因为此时,你的this代表的window.这样你会污染到全局的相关属性,造成一个蜜汁bug. 所以,为了安全需要在创建时,对this指针做一个判断.

function Father(name){
    this.name = name;
}
var jimmy =  Father("jimmy");  //这样会污染全局变量window.name的属性。造成重写
console.log(window.name); //"jimmy"
console.log(jimmy.name); //"jimmy"
//修改过后
function Father(name){
    if(this instanceof Father){
        this.name = name;
    }else{
        return new Father(name);
    }
}
var jimmy =  Father("jimmy");  //保证了作用域的安全性
console.log(window.name); //"xxx" 
console.log(jimmy.name); //"jimmy"

惰性载入函数

这个应用最多的场景应该是兼容性判断吧。比如你写了一个判断绑定事件方法的检测函数

function bind(ele,fn,type){
    if(document.addEventListener){  //检测现代浏览器
        ele.addEventListener(type,fn,false);
    }else if(document.attachEvent){  //检测低版本的IE
        ele.attachEvent(type,fn);
    }
}
let ele = document.querySelector("#first");
bind(ele,function{console.log("hehe");},'click');  //执行一次判断
bind(ele,function{console.log("hehe");},'dbclick');  //第二次执行判断
bind(ele,function{console.log("hehe");},'mouseover');  //第三次执行判断
...

如果你绑定的事件越多,那么他每次绑定时都会执行一次判断. 为了减少判断次数,可以使用惰性载入函数,即,先判断再返回函数.

function bind{
    if(document.addEventListener){
        bind = function(ele,fn,type){
 ele.addEventListener(type,fn,false);
        }
    }else if(document.attachEvent){  //检测低版本的IE
        bind = function(ele,fn,type){
 ele.attachEvent(type,fn);
        }
    }else{
      throw "u browser is from outer space";
    }
}
bind;  //首先检测一遍,然后返回对应的检测版本
console.log(bind);  //可以检测一下现在bind里面的内容
//当然如果不爽的话可以直接使用匿名函数,直接执行
var bind = (function{
    if(document.addEventListener){
       return function(ele,fn,type){
 ele.addEventListener(type,fn,false);
        }
    }else if(document.attachEvent){  //检测低版本的IE
        return function(ele,fn,type){
 ele.attachEvent(type,fn);
        }
    }else{
      throw "u browser is from outer space";
    }
});
console.log(bind);

本人推荐下面哪种写法,因为言简意赅,不用显示调用~.

函数的绑定

这个坑应该大多数人都踩过.比如我使用单例,创建了一系列的函数和内容.然后再执行绑定.

let sendMsg = {
    ele: document.querySelector('#element'),
    change:function{
        this.ele.classList.toggle(".active"); //改变状态
    }
}
document.querySelector('#button').addEventListener('click',sendMsg.change,false);

意淫的效果是,点击#button元素,#element会改变状态。但实际是会报错。找不到你的ele.

原因出现在,绑定事件的回调函数是在全局作用域中执行的。 上面那种写法,就像当对于把change函数的代码给拷贝到第二个参数.

document.querySelector('#button').addEventListener('click',function{
    this.ele.classList.toggle(".active"); //改变状态
},false);

而执行的时候,是在window的全局环境里执行的。所以会抛出错误。解决办法就是创建一个闭包,来保存这个调用方法的作用域.

document.querySelector('#button').addEventListener('click',function{
    sendMsg.change;
},false);

这样就不会出错了。但这样写有悖我们作为一名代码艺术家的风格。 通常是不提倡使用闭包的(即不要让别人看出来你在使用闭包). 这时候可以自己创建一个绑定函数(I call it as 代理)

function bind(fn,context){
    return function{
        fn.apply(context,arguments);  //arguments是作为参数传入的
    }
}
//上面的闭包可以改为
document.querySelector('#button').addEventListener('click',bind(sendMsg.change,sendMsg),false);

在es5中,每个函数都自带了自已bind的方法,这样就更容易,让别人看不出,你在使用闭包了。

document.querySelector('#button').addEventListener('click',sendMsg.change.bind(sendMsg),false);

由于这个方法只兼容到IE9+,所以遇到IE8的时候你就呵呵了.

函数的Curry

函数的柯里化应该算是函数绑定的一个升级版。但他们两个有个共同点就是: 都是用了闭包并且返回了一个函数. 但是Curry 可以额外的传入参数,这是函数绑定所不具备的.关于Curry还有一个好处就是,实现自定义参数函数的重用性.

//这是JS高程上面的例子
function curry(fn){
    var args = Array.prototype.slice.call(arguments,1);
    return function{
        var innerArgs = Array.prototype.slice.call(arguments);  
        var final = args.concat(innerArgs);
    }
}
function add(num1,num2){
    return num1+num2;
}
var Cadd = curry(add,5);
console.log(Cadd(3)); //8
console.log(Cadd(5)); //10

可以重写上面的bind

function bind(fn,context){
    var args = Array.prototype.slice.call(arguments,2); //获取上面两个参数以外的其余参数
    return function{
        //获取你第二次传入的参数,并转化为数组
        var innerArgs = Array.prototype.slice.call(arguments);  
        var final = args.concat(innerArgs);
        fn.apply(context,final);  //使用apply解析参数并调用.
    }
}

这样我们就可以传入多个参数,而且还可以自定义参数. 当然也可以使用原来的调用方式。差不多了,觉得上面的如果你用到了,说明你的js水平应该有一些,如果没有用到的话,可以当做学习,万一以后踩坑了,应该知道自己是怎么屎的~

相关推荐

2023年最新微信小程序抓包教程(微信小程序 抓包)

声明:本公众号大部分文章来自作者日常学习笔记,部分文章经作者授权及其他公众号白名单转载。未经授权严禁转载。如需转载,请联系开百。请不要利用文章中的相关技术从事非法测试。由此产生的任何不良后果与文...

测试人员必看的软件测试面试文档(软件测试面试怎么说)

前言又到了毕业季,我们将会迎来许多需要面试的小伙伴,在这里呢笔者给从事软件测试的小伙伴准备了一份顶级的面试文档。1、什么是bug?bug由哪些字段(要素)组成?1)将在电脑系统或程序中,隐藏着的...

复活,视频号一键下载,有手就会,长期更新(2023-12-21)

视频号下载的话题,也算是流量密码了。但也是比较麻烦的问题,频频失效不说,使用方法也难以入手。今天,奶酪就来讲讲视频号下载的新方案,更关键的是,它们有手就会有用,最后一个方法万能。实测2023-12-...

新款HTTP代理抓包工具Proxyman(界面美观、功能强大)

不论是普通的前后端开发人员,还是做爬虫、逆向的爬虫工程师和安全逆向工程,必不可少会使用的一种工具就是HTTP抓包工具。说到抓包工具,脱口而出的肯定是浏览器F12开发者调试界面、Charles(青花瓷)...

使用Charles工具对手机进行HTTPS抓包

本次用到的工具:Charles、雷电模拟器。比较常用的抓包工具有fiddler和Charles,今天讲Charles如何对手机端的HTTS包进行抓包。fiddler抓包工具不做讲解,网上有很多fidd...

苹果手机下载 TikTok 旧版本安装包教程

目前苹果手机能在国内免拔卡使用的TikTok版本只有21.1.0版本,而AppStore是高于21.1.0版本,本次教程就是解决如何下载TikTok旧版本安装包。前期准备准备美区...

【0基础学爬虫】爬虫基础之抓包工具的使用

大数据时代,各行各业对数据采集的需求日益增多,网络爬虫的运用也更为广泛,越来越多的人开始学习网络爬虫这项技术,K哥爬虫此前已经推出不少爬虫进阶、逆向相关文章,为实现从易到难全方位覆盖,特设【0基础学爬...

防止应用调试分析IP被扫描加固实战教程

防止应用调试分析IP被扫描加固实战教程一、概述在当今数字化时代,应用程序的安全性已成为开发者关注的焦点。特别是在应用调试过程中,保护应用的网络安全显得尤为重要。为了防止应用调试过程中IP被扫描和潜在的...

一文了解 Telerik Test Studio 测试神器

1.简介TelerikTestStudio(以下称TestStudio)是一个易于使用的自动化测试工具,可用于Web、WPF应用的界面功能测试,也可以用于API测试,以及负载和性能测试。Te...

HLS实战之Wireshark抓包分析(wireshark抓包总结)

0.引言Wireshark(前称Ethereal)是一个网络封包分析软件。网络封包分析软件的功能是撷取网络封包,并尽可能显示出最为详细的网络封包资料。Wireshark使用WinPCAP作为接口,直接...

信息安全之HTTPS协议详解(加密方式、证书原理、中间人攻击 )

HTTPS协议详解(加密方式、证书原理、中间人攻击)HTTPS协议的加密方式有哪些?HTTPS证书的原理是什么?如何防止中间人攻击?一:HTTPS基本介绍:1.HTTPS是什么:HTTPS也是一个...

Fiddler 怎么抓取手机APP:抖音、小程序、小红书数据接口

使用Fiddler抓取移动应用程序(APP)的数据接口需要进行以下步骤:首先,确保手机与计算机连接在同一网络下。在计算机上安装Fiddler工具,并打开它。将手机的代理设置为Fiddler代理。具体方...

python爬虫教程:教你通过 Fiddler 进行手机抓包

今天要说说怎么在我们的手机抓包有时候我们想对请求的数据或者响应的数据进行篡改怎么做呢?我们经常在用的手机手机里面的数据怎么对它抓包呢?那么...接下来就是学习python的正确姿势我们要用到一款强...

Fiddler入门教程全家桶,建议收藏

学习Fiddler工具之前,我们先了解一下Fiddler工具的特点,Fiddler能做什么?如何使用Fidder捕获数据包、修改请求、模拟客户端向服务端发送请求、实施越权的安全性测试等相关知识。本章节...

fiddler如何抓取https请求实现手机抓包(100%成功解决)

一、HTTP协议和HTTPS协议。(1)HTTPS协议=HTTP协议+SSL协议,默认端口:443(2)HTTP协议(HyperTextTransferProtocol):超文本传输协议。默认...