前端面试整理

AJAX

基本流程特点

1. 创建异步对象：var xmlHttp = new XMLHttpRequest();
2. 设置请求方式和地址：xmlHttp.open(method, URL, async);
3. 发送请求：xmlHttp.send();
4. 监听状态变化：xmlHttp.onreadystatechange = function(ev2){}
   0: 请求未初始化
   1: 服务器连接已建立
   2: 请求已接收
   3: 请求处理中
   4:请求已完成，且相应已就绪
5. 处理返回结果

不使用ajax更新数据，会重新加载整个页面；使用ajax更新数据， 不会重新加载整个页面，只更新某些部分

项目优化策略

• 生成打包报告
  • 通过命令行参数形式生成报告=>vue-cli-service build --report
  • 通过可视化ui面板直接查看报告(通过控制台和分析面板)
• 通过vue.config.js修改webpack的默认配置
  • 通过vue-cli 3.0工具生成的项目,默认隐藏了所有webpack的配置项,目的是为了屏蔽项目的配置过程,让开发人员把工作的 重心,放在具体功能和业务逻辑的实现上
• 为开发模式与发布模式指定不同的打包入口
  • 默认情况下,vue项目的开发与发布模式,共用同一个打包的入口文件(即src/main.js),为了将项目的开发过程与发布过程分离,可以为两种模式,各自指定打包的入口文件,即开发模式入口文件 src/main-dev.js ；发布模式入口文件 src/main-prod.j
  • 方案：configureWebpack(通过链式编程形式)和chainWebpack(通过操作对象形式) ：在vue.config.js导出的配置文件中,新增configureWebpack或chainWebpack节点,来自定义webpack的打包配置

// 代码示例
module.exports = {
   
    chainWebpack: config => {
   
        // 发布模式
        config.when(process.env.NODE_ENV === 'production', config => {
   
            config.entry('app').clear().add('./src/main-prod.js'