今天分享提高工作幸福感的知识点，希望大家不要错过这些好文~1.JS文件base64、File、Blob、ArrayBuffer、二进制转换、文件对象转base64letreader=newFileReader();reader.readAsDataURL(file[0])console.log(reader)base64intoblobuploadfunctiondataURItoBlob(dataURI){varbyteString=atob(dataURI.split(',')[1]);varmimeString=dataURI.split(',')[0].split(':')[1].split(';')[0];varab=newArrayBuffer(byteString.length);varia=newUint8Array(ab);for(vari=0;i输入过滤器提供一个按钮来上传一个或多个文件。默认情况下，它使用操作系统的本机文件浏览器上传单个文件。上传成功后，FileAPI可以使用简单的JS代码读取File对象。要读取File对象，我们需要监听change事件。首先通过id获取上传文件的实例：constfileUploader=document.getElementById('file-uploader');然后添加一个change事件监听器来读取上传完成后的文件对象，我们从event.target.files属性中获取上传的文件信息：fileUploader.addEventListener('change',(event)=>{constfiles=event.target.files;console.log('文件',文件);});观察控制台中的输出，这里是FileList数组和File对象，其中包含有关上传文件的所有元数据信息。如果看到这里有点激动，可以玩玩CodePen，地址：https://codepen.io/atapas/pen...2.多文件上传如果我们要上传多个文件，我们需要在标签中添加multiple属性：现在，我们可以上传多个文件了。在前面的例子的基础上，选择多个文件上传后，观察控制台变化：如果看到这个有点激动，想玩玩，可以用CodePen玩玩，地址：https://codepen.io/atapas/pen...3.了解文件元数据每当我们上传文件时，文件对象都有元数据信息，比如文件名、大小、最后更新时间、类型等等。此信息可用于进一步验证和特殊处理。constfileUploader=document.getElementById('file-uploader');//监听变化并读取元数据fileUploader.addEventListener('change',(event)=>{//获取文件列表数组constfiles=event.target.files;//遍历并获取元数据(constfileoffiles){constname=file.name;consttype=file.type?file.type:'NA';constsize=file.size;constlastModified=file.lastModified;console.log({文件,名称,类型,大小,lastModified});}});下面是单个文件上传的输出：如果看到这里有点激动，可以玩玩CodePen，地址：https://codepen.io/atapas/pen...4.理解accept属性我们可以使用accept属性来限制要上传的文件类型。如果要上传的文件格式只有.jpg,对于.png,可以这样做：,只能选择后缀为.jpg和.png的文件。如果看到这里有点激动，可以玩玩CodePen，地址：https://codepen.io/atapas/pen...五、管理文件内容文件上传成功后，显示文件内容,而网站站在用户的角度来看，如果上传后没有预览，就很奇怪，很不体贴。我们可以使用FileReader对象将文件转换为二进制字符串。然后添加一个加载事件监听器来获取文件上传成功时的二进制字符串。//FileReader实例constreader=newFileReader();fileUploader.addEventListener('change',(event)=>{constfiles=event.target.files;constfile=files[0];reader.readAsDataURL(file);reader.addEventListener('load',(event)=>{constimg=document.createElement('img');imageGrid.appendChild(img);img.src=event.target.result;img.alt=file.name;});});看到这里有点激动又想玩贱的，可以玩CodePen，地址：https://codepen.io/atapas/pen...文末还有5个小技巧分享文章，它们是：6.验证文件大小并显示文件上传进度如何上传目录上传？拖拽上传使用objectURL处理文件可以点击标题链接浏览原文章中的所有tips~3.前端优秀实践指南不全这篇文章应该叫，Web改善用户体验设计指南。一个网页，一个app，想要别人用好，也就是所谓的用户体验好，我觉得可能包括但不限于：快速的打开速度，醒目的UI设计，酷炫的动画效果，丰富的个性用户体验设计其实是一个比较空洞的概念，是一种秉承以用户为中心思想的设计方法。设计时考虑到用户需求。设计过程注重以用户为中心，用户体验的理念从开发的最初阶段就进入全过程，并贯穿始终。一个好的用户体验设计是产品各个环节共同努力的结果。排除一些一蹴而就的东西，本文将从页面展示、交互细节、无障碍三个方面入手，列举一些在实际开发过程中积累的有用经验。通过本文，您将能够获得：了解一些小细节如何影响用户体验了解如何以尽可能少的开发改动来提升页面的用户体验了解一些优秀的交互设计细节了解基本的无障碍功能以及什么页面辅助功能意味着学习提高页面辅助功能的基本方法4.13顶级免费所见即所得文本编辑器工具CKEditor拥有超过10年的CKEditor开发经验，您可以放心这款文本编辑器的质量。它支持70多种语言，我认为这是您网站的不错选择。它还可以在许多不同的浏览器上运行，并且可以很好地与大多数前端框架（如reat、vue、angular...您可以使用CDN直接嵌入到您的HTML页面中......。目前它有两个版本的CKEditor4和CKEditor5并行运行，根据使用目的，选择适合自己的编辑器。TrumbowygTrumbowyg是一个HTML5优化的代码编辑器，支持大多数流行的浏览器，如IE9+、Firefox、Chrome等。据我所知，它包括所有文本编辑工具，只有20Kb，它是轻量级的，将帮助您的网站运行更顺利。此外，它还有其他支持插件，帮助您更好地工作，例如插入表情符号、支持其他国家的语言、添加声音、插入特殊字符……TinyMCETTinyMCE5是一个编辑器，可以让您灵活地编辑、添加或删除部分程序。除了基本的编辑器，然后我发现它还提供了很多支持，更好的用户体验，比如添加评论，测试检查路径，提供高质量的图标和界面，检查内容的拼写......但是，这个这也是它的弱点，因为如果你想使用高级工具，你必须每月支付大约25美元。QuillQuill是一个开源编辑器，因此您可以将它用于所有类型的商业或非商业网站。它有很多功能，比如添加链接、图像、视频或添加内容的代码片段……我最喜欢Quill的地方是它易于设置和显示，在浏览器上显示的多设备屏幕上的所有现代和响应式网络，以及以及有关使用它的常见问题的详细说明。TrixTrix是一个开源编辑器，让您可以轻松地在网络上写消息、写评论、写帖子……并被编程良好的平板电脑使用。如果你只需要创作内容所需要的功能，那么Trix也是一个不错的选择。JoditEditor3JoditEditor3是一个用纯TypeScript编写的开源github编辑器，不使用任何其他库。它允许您以多种方式设置它，例如通过npm、使用CDN...。我喜欢它的地方在于，除了详细的说明外，还有一个程序可以让我们自由选择要附加的工具Jodit编辑器通过代码。SummernoteSummernote是GitHub上的开源编辑器，拥有超过9K颗星。它是通过Bootstrap框架设计的，具有在您的网站上创建内容所需的所有功能。你只需要下载它的源文件css、js，加上Bootstrap框架（也支持版本3和4）来服务你的网站。Editor.jsEditor.js是一个开源的块编辑器，它不像普通编辑器那样使用标签HTML，而是将内容以JSON的形式输出，更易于管理。它还通过使用API支持插件，因此任何开发人员都可以为该程序贡献更多有趣和有用的插件。MediumEditorMediumEditor是Medium的内置开源编辑器，用于人们的博客。它仅包含编辑器所需的基本实用程序，因此只有大约28kB，这将有助于您的网站优化。同时，如果我们要添加其他功能，为了优化编辑，MediumEditor还提供了额外的外部实用程序，这些实用程序会定期更新。WysihtmlWysihtml是由Voog团队构建的开源编辑器。它功能齐全，可帮助您轻松编辑文本，并支持大多数现代屏幕浏览器的设备图像。有很多我喜欢的工具是不合适的HTML标签的自动转换率，自动分析来自Word，PDF的内容，将内容显示为HTML......ContentToolsContentTools是一个内置的开源编辑器，可以帮助您轻松编辑HTML内容以一种方式。它提供了各种用于编辑内容的实用程序，您还可以轻松地将MessageInstitute和其他实用程序添加到程序中（请参阅离线API部分）。我还找到了有关如何在程序中设置、添加或删除功能的文章……都非常详细。FroalaFroala是一款可以轻松为网站设置的编辑器，您可以根据预期用途启用各种功能。由于它是用纯JavaScript编写的，因此您可以将它与当今大多数现代前端框架一起使用。它还提供了许多有用的工具，以及编辑图像、添加或编辑视频、添加图标、管理面板等。但是，如果您想将该工具用于商业目的，则必须购买许可证。RedactorRedactor是一款功能齐全的编辑器，设计美观简洁。9年多的开发，包括很多配套的插件，我觉得是个好产品。此外，对于程序员在使用程序过程中遇到的每一个常见问题，它都有极其详细的示例。但是，它也有一个缺点，当您将其用于商业用途时，您必须购买许可证。5.奇葩知识-bitmask假设我们有一个权限系统，通过JSON记录用户的权限激活（假设权限集是CURD）：constpermission={create:false,update:false,read:true,delete:false,}如果我们把false写成0，true写成1，那么这个权限对象可以简写为0b0010。constpermission={create:false,update:false,read:true,delete:false,}//从左到右，分别对应create,update,read,delete的值constpermissionBinary=0b0010JSON对象的权限集合，如果我们想查看或者修改用户的一些权限，只需要通过permission.craete这样的普通对象进行操作即可。那么我们应该如何查看或修改二进制形式的权限集呢？然后我们开始使用奇怪的知识——位掩码。位掩码先解释一下这个名词，什么是“位掩码”。位掩码（BitMask）是“位（Bit）”和“掩码（Mask）”的组合。“位”是指二进制数据中的二进制位，“掩码”是指用来对目标数据进行按位运算的一串二进制数。合起来就是“用一串二进制数（掩码）来操作另一串二进制数”。了解了位掩码的作用后，我们就可以用它来对权限集的二进制数进行操作了。1.查询用户是否有一定的权限。已知用户权限集的二进制数为permissionBinary=0b0010。如果我想知道用户是否有更新权限，我可以先给一个位掩码mask=0b1。由于update位于右数第三项，因此只需要将位掩码向左移动两位，其余位置用0填充即可。最后与权限集二进制数进行按位与运算为得到结果。最后计算出来的结果是0b0000，可以用Boolean()函数处理得到一个false的结果，也就是说用户的更新权限是false。//从左到右，create、update、read、delete对应的值为constpermissionBinary=0b0010//由于update在右起第三个位置，所以只需要将掩码向左移动2bitsconstmask=0b1<<2constresult=permissionBinary&maskBoolean(result)//false2.修改用户的某个权限我们了解了如何使用位掩码查询权限后，修改相应的权限就很容易了。无非就是改变一个位运算。假设更新权限还在，如果我想把它改成true，我们可以这样做：把按位AND改成按位异或，代码如下：//从左到右分别是create，update,读取对应的值,deleteconstpermissionBinary=0b0010//由于update是从右起第三个位置，所以只需要将mask向左移动2位constmask=0b1<<2constresult=permissionBinary^maskparseInt(result).toString(2)//0b0110经过上面的内容，相信你已经基本掌握了位掩码的知识。同时，你一定还有很多问号。比如，这么复杂难读的代码真的有意义吗？脏数据记录前面例子中的权限系统只处理4个数据，位掩码技术复杂，大材小用。那么有没有真正适合使用位掩码的场景呢？脏数据记录就是其中之一。假设我们有一段原始数据，它的值如下：letA='a'letB='b'letC='c'letD='d'给定一个二进制数，从左到右分别对应A/B/C/D的状态：设O=0b0000//十进制0，一旦数据被修改，就可以用对应的位来表示//当且仅当A被修改过O=0b1000//十进制8//当且仅当B已修改O=0b0100//十进制4//当且仅当C已修改O=0b0010//十进制2//当且仅当D已修改O=0b0001//十进制1是一样的，当修改多个数据时，可以同时表示//A和B修改时O=0b1100//十进制12//A/B/C修改时O=0b1110//十进制14通过这个思路，应用排列组合的思想，我们可以很快知道只需要4位就可以表达16种数据的变化。由于二进制和十进制可以相互转换，所以只需要16位十进制数就可以完整表达A/B/C/D这四种数据的变化，即脏数据跟踪。例如，给定一条脏数据记录14，二进制翻译为0b1110，从而表明A/B/C的数据被修改了。Svelte的框架通过这样的思想来实现响应式：if（A数据发生变化）{更新A对应的DOM节点}if（B数据发生变化）{更新B对应的DOM节点}/**变成假代码**/if(dirty&8){//8===0b1000更新A对应的DOM节点}if(dirty&4){//4===0b0100更新B对应的DOM节点}RatsdrinkpoisonexceptIn除了用于脏数据记录外，位掩码还可用于处理经典的“老鼠喝毒药”问题。有1000瓶水，其中一瓶是有毒的，老鼠尝了一点毒水，24小时内就会死去。问至少有多少只老鼠能在24小时内辨别出哪瓶水是有毒的？我们把问题简化一下，假设只有8瓶水，它们的数量用二进制表示：然后按照图示将水瓶中的水混合，得到样品A/B/C/D，取4只小鼠并编号为a/b/c/d分别喝对应的水，得到下表：24小时内，统计小白鼠的死亡情况，汇总后可得到表格和结果：答案准备好了出来吧，由于8瓶水可以混合成4个样品，所以24小时后只需要4只老鼠就可以判断出哪瓶水有毒。回到正题，如果有1000瓶水，只需要知道第1000个二进制数0b1111101000即可。二进制数一共有10位，也就是说1000瓶水可以混合10个样品，也就是说只需要10只小白鼠就可以完成测试任务。位掩码技术的探索到此结束。相信大家在仔细阅读完本文后，已经在脑海中建立了位掩码技术的概念。这是一种很特别的解题方式，说不定将来哪天你真的会用到呢。
