博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript招式总结
阅读量:7236 次
发布时间:2019-06-29

本文共 4541 字,大约阅读时间需要 15 分钟。

前言

在平时的开发中,经常会遇到一些特殊情况,就需要一些招式来应对。这里总结一下自己常用到的一些小招式,有不足欢迎大家指出。

模块

var fuc1 = (function() {        var a = 'hello ';        return function(str) {            return a + str;        }    })()    fuc1('world'); // hello world

模块模式的一般形式是:一个定义了私有变量和函数;利用闭包创建可以访问私有变量和函数的特权函数;最后返回这个特权函数,或者把它们保存到一个可访问的地方。

该招式有以下应用场景

协调异步

代码需要在两个异步fuc1fuc2都执行结束后再执行,

var manager = (function() {    var count = 0;    return function() {        if(++count === 2){            // logic 3        }    }})()function fuc1() {    //...}function fuc2() {    //...}setTimeout(function() {   fuc1();   manager();}, 10)setTimeout(function() {   fuc2();   manager();}, 10)

兼容测试

var createXHR = (function () {    if(typeof XMLHttpRequest != "undefined") {        return function () {            return new XMLHttpRequest();        }    }else if(typeof ActiveXObject != "undefined") {        return function () {            if(typeof arguments.callee.activeXString != "string") {                var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],                    i,len;                for(1 = 0, len = versions.length; i < len; i++){                    try{                        new ActiveXObject(versions[i]);                        arguments.callee.activeXString = versions[i];                        break;                    }catch(ex){                        // ...                    }                }            }            return new ActiveXObject(arguments.callee.activeXString);        }    }else{        return function() {            throw new Error("NO XHR object available.");        }    }})();

利用私有变量

var parse = (function() {    var config = ['I', 'II', 'III', 'IV'];    return function(num) {        return config[num - 1]    }})()parse(1); // Iparse(4); // IV

柯里化

柯里化听起来很高大上,然而也就是Currying的音译,千万别被名称吓跑了。

它是把接受多个参数的函数中的参数拆分成两次调用来传递并返回结果的新函数。
举一个简单的例子理解一下:

var add = function(a, b) {    return a + b}add(1, 2) // 3var currying = function(a) {    return function(b) {        return a + b    }}currying(1)(2) // 3

add 为 接受多个参数的函数,currying是将add中的参数分两次调用传入并返回结果的新函数。

仔细想想,它其实是模块的衍生招式。模块的私有变量是预先定义好的,而柯里化是保存第一次调用时传入的参数为私有变量。因此它俩的区别是私有变量定义时机不同

下面是一个利用柯里化实现的累加方法

var currying = function (fn) {    var args = [];    return function () {        var innerArgs = Array.prototype.slice.call(arguments);        if(innerArgs.length === 0){            return fn.apply(null, args)        }        args = args.concat(innerArgs);        return arguments.callee;    }}var mutil = function () {    var num = 0, i = 0;    while(arguments[i]){        num += arguments[i++]    }    return num}var add = currying(mutil);add(1,2)(3);add(4);add();  // 10

函数节流

某些代码不可以在没有间断的情况下连续重复执行,所有就需要节流。比如:拖动某DOM元素时,需要动态改变元素的 x y ,就需要用到节流函数了。

function throttle(method, delay) {    var timer = null;    return function () {        var that = this, args = arguments;        clearTimeout(method.tId);        timer = setTimeout(function () {            method.apply(that, args);            clearTimeout(timer);        }, delay);    }}window.onresize = throttle(resizeHandle, 50)

使用该函数时你会发现一个问题:不断拖动元素的过程中元素是不动的,只有停顿一下元素才跟着动。

这样的体验很糟糕,为了提高性能、改善体验,需要升级一下节流函数。设置一个最大时间间隔来确保在拖动的过程中,元素可以跟随移动。

function throttle(method, context, delay, maxInterval) {    var _start,_diff,timer;    return function () {        var that = this,            args = arguments,            _now  = +new Date();        clearTimeout(timer);        _start || (_start = _now);        if(_now - _start >= maxInterval){            method.apply(that, args)        }else{            timer = setTimeout(function () {                method.apply(that, args)            }, delay)        }    }}window.onresize = throttle(resizeHandle, 50, 100)

延迟加载处理

在业务中经常会遇到一些不需要同步处理的,又比较耗时的逻辑。对于这些逻辑可以采用数据分块(array chunking)的技术,小块小块地处理数组,通常每次一小块。可以创建一个“待办事项”队列,然后使用定时器逐个取出“事项”,接着设置另一个定时器。

function chunk(array, process, context) {    setTimeout(function() {        var item = array.shift();        process.call(context, item);        if(array.length > 0){            setTimeout(arguments.callee, 100);        }    }, 100)}

记忆函数

函数可以将先前操作的结果记录在某个对象里,从而避免重复运算,比如计算阶乘函数。

function memoizer(memory, handle) {    return function (n) {        var result = memory[n],            recur  = arguments.callee;        // 已运算过则直接返回        if(!result){            result = handle(recur ,n);            memory[n] = result;        }        return result;    }}var memory    = [1, 1],    factorial = memoizer(memory, function (recur, n) {        return n * recur(n - 1)    });factorial(4);console.log(memory);  // [1, 1, 2, 6, 24]

(未完待续......)

转载地址:http://vogfm.baihongyu.com/

你可能感兴趣的文章
解决maven的依赖总是无法下载完成
查看>>
【Python3 爬虫】15_Fiddler抓包分析
查看>>
【备忘】EntityFramework 6 升级到 EntityFrameworkCore 注意点
查看>>
xilinx uboot网卡驱动分析
查看>>
Spring Boot系列之配置日志输出等级
查看>>
Java 底层机制(JVM/堆/栈/方法区/GC/类加载)
查看>>
原 在windows上创建文件名以“.”开头的文件
查看>>
实时流处理Storm、Spark Streaming、Samza、Flink孰优孰劣
查看>>
e297: write error in swap file
查看>>
并发错误:事务(进程 ID )与另一个进程已被死锁在 lock 资源上,且该事务已被选作死锁牺牲品...
查看>>
Ubuntu下搭建Hyperledger Fabric v1.0环境
查看>>
EventBus 3.0使用详解
查看>>
Linux curl 一例
查看>>
【docker】【redis】1.docker安装redis【单点redis服务】
查看>>
Oracle数据库导入导出 imp/exp备份还原
查看>>
react-native-storage + AsyncStorage 实现数据存储
查看>>
Cobaltstrike、armitage联动
查看>>
pandas set_index和reset_index的用法
查看>>
[Bash] View Files and Folders in Bash
查看>>
PEACHPIE 0.9.11 版本发布,可以上生产了
查看>>