web前端面试第一天

今天去了中兴面试，中兴下属子公司，专给中兴做外包的，别的都没什么特别的，跟面试管聊了一下。回来检讨了下自己，可能有三个问题回答的不理想。

1. 浅拷贝与深拷贝有什么区别
2. 做一下自我简介
3. webpack有些什么参数

第一个问题，其实这个问题是知道的，不知道怎么当时就短路了。虽然当时只知道assign和object.create这个能拷贝，递归可能不会写，但只要答出来与引用类型或是值类型相关的基础知识点，是没问题的。延伸问题包括如何实现深拷贝

对象只有一层的话：

最简单粗暴的就是直接写属性，但这样很麻烦，要一个一个自己复制；

var obj1 = { a: 10, b: 20, c: 30 };
var obj2 = { a: obj1.a, b: obj1.b, c: obj1.c }

可以使用：Object.assign()函数，ES6

Object.assign({}, obj1)

意思是先建立一个空对象{}，接着把obj1中所有的属性复制过去

第三种方式，转成 JSON 再转回来

ar obj1 = { body: { a: 10 } };
var obj2 = JSON.parse(JSON.stringify(obj1));

这种方法只有可以转成JSON格式的对象才可以这样用，像function没办法转成JSON。

第四种递归

deepCopy (o, c) {
   c = c || {}
   for (let i in o) {
     if (typeof o[i] === 'object') {
       // 需要深拷贝
       if (o[i].constructor === Array) {
         // 数组
         console.log('是数组')
         c[i] = []
       } else {
         // 对象
         console.log('是对象')
         c[i] = {}
       }
       this.deepCopy(o[i], c[i])
     } else {
       c[i] = o[i]
     }
   }
   return c
 }

第五种方法 object.create

function deepClone(initalObj, finalObj) {    
  var obj = finalObj || {};    
  for (var i in initalObj) {        
    var prop = initalObj[i];        // 避免相互引用对象导致死循环，如initalObj.a = initalObj的情况
    if(prop === obj) {            
      continue;
    }        
    if (typeof prop === 'object') {
      obj[i] = (prop.constructor === Array) ? [] : Object.create(prop);
    } else {
      obj[i] = prop;
    }
  }    
  return obj;
}

第二个问题，没来的急准备，临时发挥，最好的应该是提前准备好，以此来引导面试官，而不是让面试官来问一个一个问你

第三个问题答的也不太好，简单的回答了一下，说有什么entry，output，这些，还配置一些babel，一般是用cli。

回来做了下功课，这个题目其实又设计到了前端工程化和构建自动化的相关问题，延伸到怎么实现前端工程化的相关问题。

1. 提升开发效率

webpack-dev-server 热加载

数据mock

2. 优化性能

代码合并压缩，混淆加密

减少小图片请求

部署静态文件缓存管理

3. 提高代码质量

模块化

CSS 预处理

ES6 + babel 编译

代码检查

单元测试

UI 自动化测试

web组件化

webpack 的最大特点是一切皆为模块，一切全包，最适和应用在SPA一站式应用场景。只有简单几个页面的情况下使用 webpack 反而可能会增加不必要的配置成本，反而直接用gulp或者其他工具处理代码压缩，css 预处理之类的工作会更加快捷易用。

一些常见的配置
比如

entry: {                 // 入口文件，打包通过入口，找到所有依赖的模块，打包输出
        main: resolve(webRootDir, './src/main.js'), 
    },
    output: {
        path: resolve(webRootDir, './build'),  // 输出路径
        publicPath: '/build/',     // 公共资源路径
        filename: '[name].js'      // 输出文件名字，此处输出main.js, babel-polyfill.js ,  视情况可以配置[name].[chunkhash].js添加文件hash, 管理缓存
    },
    module: {//模块化的loader，有对应的loader，该文件才能作为模块被webpack识别
    },
    resolve: {
        extensions: ['.js'],  // 定义后缀名 ，import时可以省略“.js”后缀
        alias: {   // 别名。 如 import "./src/style/common.css"  ==> import "style/common.css"
            'components': resolve(webRootDir, './src/components'),
            'page': resolve(webRootDir, './src/page'),
            'style': resolve(webRootDir, './src/style'),
            'script': resolve(webRootDir, './src/script'),
            'static': resolve(webRootDir, './static')
        }
    },
    devServer: { // webpack-dev-server 热加载的配置
        host: '127.0.0.1',   //本地ip, 如需局域网内其他及其通过ip访问，配置"0.0.0.0"即可
        port: 8080,
        disableHostCheck: true,
        historyApiFallback: true,
        noInfo: true
    }
    
    /*插件*/
module.exports.plugins = (module.exports.plugins || []).concat([
    // webpack 变量定义，，可在其他模块访问到该变量值，以便根据不同环境来进行不同情况的打包操作。
    //  例如，在main.js 下 console.log( process.env.Node_ENV ) 输出 development字符串
    new webpack.DefinePlugin({
        'process.env': {     
            NODE_ENV: `"development"`
        }
    }),

])
    

这只是其中一些，还有非常多的东西等着去发现。