代码编辑器：本地JS文件上传并加载到页面

最近在做在线代码编辑器的时候，有个需求是使用者可以上传引用本地的 js 文件，进而在编辑器中使用这个文件定义的变量或方法。后来经过摸索，选择使用 FileReader 对象解决问题。

FileReader MDN:
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

思路

• 通过 <input> 控件获取用户上传的文件对象
• 利用 FileReader 对象的 readAsDataURL(file) 方法获取文件以数据URI形式保存的一串字符串。
• 生成 <script> 标签。
• 将字符串赋值到 <script> 标签的 src 属性，标签动态加载到页面。

实现

<input id="file" type="file" onchange="handler()"/>

function handler(){
    let file = document.getElementById("file").files[0]
    let r = new FileReader()
	r.readAsDataURL(file, 'UTF-8')
	r.onload = () => {//读取操作完成回调方法 加载script标签
    	    let script = document.createElement('script')
    	    let head = document.getElementsByTagName('head')[0]
    	    script.src = r.result//内容保存在result中
    	    head.appendChild(script)
	}
}