面试总结

面试的web前端，问到的一些基础问题出乎意料，然后面试官还给耐心解释， 总体来说面试很失败，分享一下自己的经验。

面试题：

1、<div>a<span>b</span></div> 改变a的值。考察点：对js node节点基础知识的考察，使用nodeType来判断该node节点是否为所需要的节点。nodeType了解 

实现方法：

var str = $('div').contents().filter(function (index, content) {

    return content.nodeType === 3;

}).text();

 $('div').contents().forEach(function (index, content) {

    if( content.nodeType === 3) {
       content.nodeValue === 'b'
    }

})

2、js function中传的参数是值类型还是引用类型 ？（值类型）

https://www.cnblogs.com/leiting/p/8081413.html  两个类型的区别

3、css3中的translate比top/left性能高

调用translate，会启动硬件加速，即在GPU层对该元素进行渲染。这样，CPU就会相对解放出来进行其他的计算，GPU对样式的计算相对较快，且保证较大的帧率。我们可以通过2d和3d的transform来启用GPU计算。

4、ts引入js中的模块的方法（其实应该想要问挺多关于ts的内容的，但是因为不够熟悉，所以就没有继续问）

      // 为simple/index.js写全局类型声明，在types.d.ts中添加如下代码
declare module "simple" {
  let a: number;
  export function geta(): void;
  export function seta(n: number): void;
  export default a;
}

5、webpack打包和相关插件的引入方法

6、使用input file上传图片的时候怎么实现预览功能(主要想了解是否知道 base64 转 url 和 url 转obj Api)

    $("#inputImage").change(function () {
        var objUrl = $(this)[0].files[0];
        var reader = new FileReader();//新建一个FileReader
        reader.readAsDataURL(objUrl);//读取文件,保存为base64 格式
        reader.onload = function (evt) { //读取完文件之后会回来这里
            imageString = evt.target.result;
            //获得一个http格式的url路径:mozilla(firefox)||webkit or chrome
            var windowURL = window.URL || window.webkitURL;
            //createObjectURL创建一个指向该参数对象(图片)的URL
            var dataURL = windowURL.createObjectURL(objUrl);
            $("#showImage").attr("src", dataURL );
        }
    });

function dataURLtoBlob(dataurl) {
        var arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: mime });
    }