2019-03-04 MSRA 面试

比较突然地接到了微软亚研院的电话面试。

1. 问如果新拿到电脑的话，会怎么配环境。

2. Webpack 中相关配置，贴出代码

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'demo.js'
  },
  plugins: [
    new HtmlWebpackPlugin({  // 问我这个是干嘛的
      title: 'vue',
      template: 'index.html'
    })
  ],
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {  // 为什么需要这个
    contentBase: './dist',
    host: 'localhost',
    port: 8099,
    open: true
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        loader: ['style-loader', 'css-loader']
      }
    ]
  }
};

问我有没有接触过 manify 相关的东西

3. 常用的 Babel presets、polyfill 相关配置

4. 手写代码，写出一个 LeetCode Problems 页面 这样的列表

// leetcode-page.vue
<template>
    <div class="leetcode-page">
        <div class="filter">
            <input class="filter-input" v-model="filterText" placeholder="type to filter">
        </div>
        
        <leetcode-table :data="filteredFakeData" :options="fakeOptions"/>
    </div>
</template>

<script>
import LeetcodeTable from './leetcode-table.vue';

export default {
    name: 'LeetcodePage',
    
    components: {
        LeetcodeTable
    },
    
    data() {
        return {
            fakeData: [{
                title: 'hah',
                solution: 'emm',
                acceptance: 'yy',
                difficulty: 'easy',
                isDone: false
            }, {
                title: 'hahasd',
                solution: 'emm',
                acceptance: 'yy',
                difficulty: 'easy',
                isDone: false
            }, {
                title: 'hahasd',
                solution: 'emm',
                acceptance: 'yy',
                difficulty: 'easy',
                isDone: false
            }],
            fakeOptions: [{
                tag: 'title',
                value: 'title',
            }, {
                tag: 'solution',
                value: 'solution'
            },
            // ...
            ],
            edit: {
                filterText: ''
            }
        }
    },
    
    computed: {
        filteredFakeData() {
            const vm = this;
            const {fakeData, edit: {filterText}} = vm;
            
            return fakeData.filter((line) => {
                return line.title.toLowerCase().indexOf(filterText.toLowerCase())  // 这个地方有问题
                    || line.id.toLowerCase().indexOf(filterText.toLowerCase())
                    || line.difficulty.toLowerCase().indexOf(filterText.toLowerCase());
            })
        }
    }
}
</script>

// leetcode-table.vue
<template>
    <div class="leetcode-table">
        <table>
            <tr>
                <th v-for="option in options" :key="option.value">
                    {{ option.tag }}
                </th>
            <tr>
            
            <tr v-for="line in data" :key="line.title">
                <td v-for="option in options" :key="option.value">
                    {{ line[option[tag]]] }}
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
export default {
    name: 'LeetcodeTable',
    
    props: {
       data: {
           type: Array,
           required: true
       },
       options: {
           type: Array,
           required: true
       }
    }
}
</script>

写的比较急，代码中有一些小问题

整个面试过程大约一个小时。