原生js循环展示dom_web前端教程：JS高阶编程技巧-惰性函数

框架(framework)是一个框子--指其约束性，也是一个架子--指其支撑性。是一个基本概念上的结构，用于去解决或者处理复杂的问题。

Web前端教程

框架这个广泛的定义使用的十分流行，尤其在软件概念。框架也能用于机械结构。

在vue、react等框架大量应用之前，我们需要使用jQuery或者原生js来操作dom写代码，在用原生js进行事件绑定时，我们可以应用DOM2级绑定事件的方法，即：元素.addEventListener()，因为兼容性，还有：

元素.attachEvent()。所以我们需要封装成一个方法：

functionemit(element,type,func){

if(element.addEventListener){

element.addEventListener(type,func,false);

}elseif(element.attachEvent){

element.attachEvent('on'+type,func);

}else{//如果不支持DOM2级事件

element['on'+type]=func;

}

这个时候，如果一个元素需要通过一个行为添加多个点击事件，如：

emit(div,'click',fn1);

emit(div,'click',fn2);

在第一次给div进行fn1事件绑定时，已经知道浏览器可以执行哪种绑定方式，执行绑定fn2时，就没有必要再次进行判断，那么代码可以进行修改：

functionemit(element,type,func){

if(element.addEventListener){

emit=function(element,type,func){

element.addEventListener(type,func,false);

};

}elseif(element.attachEvent){

emit=function(element,type,func){

element.attachEvent('on'+type,func);

};

}else{

emit=function(element,type,func){

element['on'+type]=func;

};

}

emit(element,type,func);

}

也就是说，我们在进行第一次判断后，对函数进行重新定义，这样在之后再进行绑定时不需要再进行判断，从性能角度讲，虽然创建了闭包，但由于后续进行多次同一个的判断。

这就是函数的惰性思想，对于同一个判断，我们只需要进行一次就好。

框架(Framework)是构成一类特定软件可复用设计的一组相互协作的类。框架规定了你的应用的体系结构。它定义了整体结构，类和对象的分割，各部分的主要责任，类和对象怎么协作，以及控制流程。

框架预定义了这些设计参数，以便于应用设计者或实现者能集中精力于应用本身的特定细节。

以上是酷仔今日整理的“web前端教程：JS高阶编程技巧-惰性函数”一文，希望为正在学习Web前端的同学提供参考。

原生js循环展示dom_web前端教程：JS高阶编程技巧-惰性函数相关推荐

原生js循环展示dom_为什么说JS的DOM操作很耗性能
想问这样的问题,其实是自己心中没有个谱,一直用 js 计算性能来衡量浏览器dom 操作性能.js性能和浏览器性能其实是两码事. 这个问题很抽象,它里面涉及挺多个小的知识点. 重申一点,js 操作 D ...
java web js加版本号_[Java教程]js 比较版本号（一）
[Java教程]js 比较版本号(一) 0 2016-07-03 15:00:13 最近群了有人问如何比较版本号,我好奇的试了一下. 比较版本号,怎么办?懒人的方法是借鉴,先查网上的资料,看看有木有直 ...
js最简单的几个特效_高阶函数不会用?教你JS中最实用的几个高阶函数用法
不废话,先来看下什么是高阶函数高阶函数函数可以作为参数传递函数可以作为返回值输出函数作为参数传递回调函数在ajax异步请求的过程中,回调函数使用的非常频繁在不确定请求返回的时间时,将ca ...
map 长度_Python实用教程系列——高阶函数Map、Filter、Reduce
点击上方蓝色文字关注我们吧有你想要的精彩作者 | 那个百分十先生出品 | Python知识学堂上次推文我们介绍了python中的<Logging日志模块>的相关知识,这次推文我们将学 ...
【高阶循环谱】基于FPGA的高阶循环谱的调制识别算法开发
1.软件版本 matlab2013b,quartusii12.1 2.本算法理论知识参考文献<基于高阶循环累积量的 OFDM 子载波盲估计> 3.部分源码 `timescale 1ns ...
原生js循环展示dom_【前端面试】用一道题讲 js 的事件循环队列
昨天去面了滴滴,一口气面了三面,考了 promise 和事件循环.之前的猿辅导也考察了这些,几乎所有的大厂中厂都一定会考原生 js 的事件循环队列. 今天,我把昨天考察的原题拿出来分析一下. setT ...
js循环解析html标签,riot.js教程【六】循环、HTML元素标签
循环可以通过each属性来达到标签循环,如下: { title } this.items = [ { title: 'First item', done: true }, { title: 'Sec ...
js基础到精通全面教程--JS教程(转载)--推荐
基础知识:HTML JavaScript就这么回事1:基础知识 1 创建脚本块 1: <script language="JavaScript"> 2: JavaS ...
Web 图集应用，属于非游戏类的图集/雪碧图对象/JS雪碧图/前端图集/JS图集
在非游戏领域其实也是存在很多细小的图标需求的.但是找遍全网却没有方便简洁的图集插件. 所以在此特写一个属于前端的图集插件,该插件使用非常简单. 首先准备需要打成图集的小图标若干再使用国际标准的图集打 ...

原生js循环展示dom_web前端教程：JS高阶编程技巧-惰性函数

原生js循环展示dom_web前端教程：JS高阶编程技巧-惰性函数相关推荐

最新文章

热门文章