盘点前端开发中那些用得少却很实用的功能

盘点一些用得不多却非常有用的前端知识,靠个人收集,如有缺漏,请同学们一起补充

一、DocumentFragment文档碎片
当我们用JS的DOM创建很多节点时,在加入节点到DOM树上时,节点需要一个个渲染,这样节点数较多时就会影响浏览器的渲染效率,这个时候我们将创建的节点都放在DocumentFragment这样的节点上 ,然后把插入至DOM,只需要完成一次渲染就可以达到之前很多次的效果。把DocumentFragment节点插入文档树时,插入的不是DocumentFragment自身,而是它的所有子孙节点。这使得DocumentFragment成了有用的占位符,暂时存放那些一次插入文档的节点,类似vue中的template。

// 效率上 createElement < innerHTML < documentFragment
 var ul = document.createElement('ul');
 var flag = document.createDocumentFragment();
 for(var i=1; i<101; i++){
     var li = document.createElement('li')
     li.innerHtml = `我是第${i}个li`
     flag.appendChild(li)
 }
 ul.appendChild(flag)
 document.body.appendChild(ul)

二 a标签herf属性中的Javascript:伪协议
伪协议不同于因特网上所真实存在的如http://,https://,ftp://,而是为关联应用程序而使用的.如:tencent://(关联QQ),data:(用base64编码来在浏览器端输出二进制文件),还有就是javascript:
我们可以在浏览地址栏里输入"javascript:alert('JS!');",点转到后会发现,实际上是把javascript:后面的代码当JavaScript来执行,并将结果值返回给当前页面类似,我们可以在a标签的href属性中使用javascript伪协议。
以下四种写法作用相同,阻止了a标签的默认行为,即点击a标签后不会发生跳转了。void是javascript的操作符,意思是只执行表达式,但没有返回值,不会在当前文档处装入任何内容,void(0)计算为0,则在JavaScript上没有任何效果。

<a href="javascript:void(0);"></a>
<a href="javascript:void(0)"></a>
<a href="javascript:;"></a>
<a href="javascript:"></a>

三、src属性中的data:伪协议

<img src="data:image/jpeg;base64,这里放的是经过转换的base64图片代码" />

data表示取得数据的协定名称,image/png 是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/png文件base64编码后的数据。目的是将一些小的数据,比如小头像,小图标,通过编码后直接嵌入到网页中,从而不用再从外部文件载入。

四、HTML5中的 data-* 自定义属性
大家都知道html标签可以自定义属性,并通过getAttribute/setAttribute方法对自定义属性进行读取和写入,但是混乱无管理的自定义属性让html5下定决心推出data-*的方式来管理自定义属性,并自带一套读写方法。

//read
<div id="test" data-age="24"> Click Here </div>

var test = document.getElementById('test')
console.log(test.dataset.age) // 24
//write
<div id="test" data-age="24"> Click Here </div>

var test = document.getElementById('test')
test.dataset.age = 18
console.log(test.dataset.age) // 18

以上操作可以用getAttribute/setAttribute完全代替,dataset内容只是attribute的一个子集,最大的好处是我们可以把所有自定义属性在dataset对象中统一管理。

五、input输入框的type="hidden"属性
隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用。浏览者点击发送按钮发送表单的时候,隐藏域的信息也被一起发送到服务器,用来发送cookie,token等验证信息时不会有浏览器不支持,和用户禁用cookie的烦恼。

盘点前端开发中那些用得少却很实用的功能

<持续更新中...>

相关推荐