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

lcodecorex 发布于2019-08-30 15:44 / 484人阅读

摘要：浏览者点击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器，用来发送，等验证信息时不会有浏览器不支持，和用户禁用的烦恼。

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

一、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上没有任何效果。

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

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

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

//read
 Click Here 

var test = document.getElementById("test")
console.log(test.dataset.age) // 24

//write
 Click Here 

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的烦恼。

<持续更新中...>

GPU云服务器云服务器实用功能 php实用功能前端技术主要有那些 linux防火墙有那些功能

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116220.html

前端每周清单半年盘点之 Angular 篇

摘要：延伸阅读学习与实践资料索引与前端工程化实践前端每周清单半年盘点之篇前端每周清单半年盘点之与篇前端每周清单半年盘点之篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID：frontshow），及时获取前端每周清单；本文则是对于半年来发布的前端每周清单...

LeviDing 2019-08-20 18:54 评论0 收藏0
【长期更新】盘一盘那些 uTools 高质量插件，让你的工作效率瞬间提升N倍！

摘要：参考增强神器，文档搜索效率何止翻倍推荐系数图片展示快速获取文件文件夹名称插件来源开发者插件介绍如名，鼠标选中文件或者文件夹，点击鼠标中键激活插件即可将文件文件夹名称复制到剪切板。 ...

remcarpediem 2021-09-02 15:41 评论0 收藏0
前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

xiaolinbang 2019-08-29 14:14 评论0 收藏0
前端每周清单半年盘点之 Node.js 篇

摘要：前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。对该漏洞的综合评级为高危。目前，相关利用方式已经在互联网上公开，近期出现攻击尝试爆发的可能。前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢...

kid143 2019-08-21 11:59 评论0 收藏0