巩义网站建设,久久建筑网平台,jsp商业网站开发,网站开发教程高阶函数的定义在《javascript设计模式和开发实践》中是这样定义的。函数可以作为参数被传递#xff1b;函数可以作为返回值输出。结合这两个特点#xff0c;首先想到的肯定是回调函数#xff0c;回调函数也是高阶函数的一种#xff0c;除了回调函数#xff0c;还有很多的…高阶函数的定义在《javascript设计模式和开发实践》中是这样定义的。函数可以作为参数被传递函数可以作为返回值输出。结合这两个特点首先想到的肯定是回调函数回调函数也是高阶函数的一种除了回调函数还有很多的高阶函数这篇文章主要是惰性函数、柯里化函数、compose函数这三种。一、惰性函数概念懒执行过一遍的东西如果第二遍执行还是一样的效果则我们就不想让其重复执行第二遍了 栗子我们要封装一个获取元素属性的方法因为低版本的ie浏览器不支持getComputedStyle方法做了一个容错处理function getCss(element, attr) {if (getComputedStyle in window) {return window.getComputedStyle(element)[attr];}return element.currentStyle[attr];
}但是每次进这个方法都要做一下判断为了提高性能我们可以存一个变量然后每次进去判断变量就好了var flag getComputedStyle in window
function getCss(element, attr) {if (flag) {return window.getComputedStyle(element)[attr];}return element.currentStyle[attr];
}这样每一次还是需要判断有没有更好的方法呢惰性函数的思想就可以完美解决这个问题function getCss(element, attr) {if (getComputedStyle in window) {getCss function (element, attr) {return window.getComputedStyle(element)[attr];};} else {getCss function (element, attr) {return element.currentStyle[attr];};}// 为了第一次也能拿到值return getCss(element, attr);
}getCss(document.body, margin);
getCss(document.body, padding);
getCss(document.body, width);第一次执行如果有getComputedStyle这个方法getCss就被赋值成function (element, attr) {return window.getComputedStyle(element)[attr];
};而后的每一次就会执行上面这个函数否则则相反总结惰性载入函数有两个主要优点 1、是显而易见的效率问题虽然在第一次执行的时候函数会意味赋值而执行的慢一些但是后续的调用会因为避免的重复检测更快 2、是要执行的适当代码只有当实际调用函数是才执行很多JavaScript库在在加载的时候就根据浏览器不同而执行很多分支把所有东西实现设置好而惰性载入函数将计算延迟不影响初始脚本的执行时间。二、函数柯理化定义利用闭包保存机制把一些信息预先存储下来预处理的思想 function fn() {}
let res fn(1, 2)(3);
console.log(res); //6 123封装一个方法调用以后求出和两次执行的传参个数都不固定解题思路函数第二次执行第一个函数的返回值一定是一个函数,第二个函数的返回值应该是求和的数值function fn(...outerArgs) {return function anonymous(...innerArgs) {// args:外层和里层函数传递的所有值都合并在一起let args outerArgs.concat(innerArgs);return args.reduce((n, item) n item);};
}第二个函数使用了第一个函数的值所以函数1不会被释放利用闭包的保护机制将值预先保存起来三、compose函数定义组合函数把多层函数嵌套调用扁平化栗子下面四个方法每种方法都会把参数0进行处理给x传一个值如果要得出四种方法以后的和const fn1 (x, y) x y 10;
const fn2 x x - 10;
const fn3 x x * 10;
const fn4 x x / 10;let res fn4(fn2(fn3(fn1(20))));
let res1 compose(fn1, fn3, fn2, fn4)(20, 30);res得出的值可以实现这个需求但是需要函数套函数现在可以定义一个compose函数使得res和res1的值相等将函数实现扁平化function compose(...funcs) {// FUNCS:存储按照顺序执行的函数(数组) [fn1, fn3, fn2, fn4]return function anonymous(...args) {// ARGS:存储第一个函数执行需要传递的实参信息(数组) [20]if (funcs.length 0) return args;if (funcs.length 1) return funcs[0](...args);return funcs.reduce((N, func) {// 第一次N的值:第一个函数执行的实参 func是第一个函数// 第二次N的值:上一次func执行的返回值作为实参传递给下一个函数执行return Array.isArray(N) ? func(...N) : func(N);}, args);};
}完美实现compose函数不用再函数套函数react中的redux源码中的compose函数用的是另外思想实现的四、单例设计模式定义var obj1 {name: wanghuahua
}
var obj2 {name: jerry
}
console.log(obj1.name)
console.log(obj2.name)上面的两个obj就是最基础的单例单例模式就是用单独的实例来管理当前事物的相关特征[属性和方法]类似于实现一个分组的特点而此时obj1/obj2不仅仅叫做一个对象也被成为命名空间特点类只有一个实例全局可访问该实例自行实例化主动实例化可推迟初始化即延迟执行与静态类/对象的区别虽然全局变量可以实现单例但因其自身的问题不建议在实际项目中将其作为单例模式的应用特别是中大型项目的应用中全局变量的维护该是考虑的成本。高级单例设计模式基于闭包管控的单例模式称为高级单例设计模式以此来实现模块划分最早的模块化思想let wanghuahua (function () {function query() {}function tools() {}return {name: AREA,tools};
})();
wanghuahua.tools();let jerry (function () {function fn() {meimei.getXxx();}function query() {}return {query}
})();let meimei (function () {function fn() {}function getXxx() {}jerry.query();return {getXxx}
})();
// 每个模块都可以有自己私有的方法想要暴露给全局的就return出去// es6的export已经不需要这么写了公众号
