2019年11月第五周前端问题汇总

2019-11-26

• 自执行函数

  //一般来说，我们在使用函数时，通常会分这样几步
  //1、定义一个函数
  function func(){
    console.log(1)
  } 
  //2、定义一个变量接受func函数 或直接调用
  var a = func();
  //2、函数调用
  a()  //输出1
  
  //自执行函数就是将上面综合，定义时直接调用
  var b = function (i){
    console.log(i)
  }(2)   //输出2
  //理论上来说，自执行的匿名函数可以写为 function(x){return x*x}(3),但是由于JavaScript的语法解析问题，这么写会报syntaxError错误，所以需要用括号把整个函数定义起来，即
  (function (x){return x*x})(3)

• JavaScript代码执行顺序。

  • JavaScript的代码都是按照单线程执行的，即一段代码执行完成后才会开始下一段代码。

    //例如：下面代码中，先执行for循环，执行到循环内部的定时函数时，因为时间设置为0，此时应该立即输出i的值。但是由于当前for循环未执行完毕，所以定时函数会留在循环函数执行完毕后再执行，此时i为4，所以会输出三个4
    for(var i=1;i<=3;i++){
      setTimeout(function(){
        console.log(i); //输出：4,4,4
      },0)
    }
    //想要实现定时函数被立即输出，可采用以下方法
    
    //ES6中新增了let命令，使用类似于var。但是let所声明的变量，仅在let命令所在的代码块内有效。
    //在下面这个for函数中，let声明的变量i仅在本轮循环内有效，下一轮即为一个新变量
    //这里我把它理解为在每轮for循环中let声明的变量i只有一个值即为定义时的赋值，所以当本轮循环结束后默认当前执行函数已经完成，所以会去执行之前未执行的定时函数，然后在执行下一轮循环。
    for(let i=1;i<=3;i++){
      setTimeout(function(){
        console.log(i); //输出：1,2,3
      },0)
    }
    
    //使用自执行函数包裹定时函数
    //顾名思义，自执行函数会在函数定义时被立即执行
    for (var i = 1; i <= 3; i++) {
        var fun = function (i) {
            setTimeout(function () {
                console.log(i);
            }, 0)
        }(i)
    }

  • 函数作用域

    • JavaScript中window对象范围内成为全局作用域，在全局作用域中声明的变量为全局变量

    • 函数内部声明的变量作用域仅在当前函数内部，称为局部变量。

    • JavaScript访问变量时，安装作用域从内到外访问。即若当前作用域内存在要访问的变量，则使用当前作用域内的变量；若不存在，这会到上一作用域内寻找，直到全局作用域。

      var a = 1;
      function fun(){
        console.log(a);  //此函数作用域内存在a变量，则访问当前函数内的a。但此时a未被定义，所以输出undefined
        var a = 2;
        console.log(a);  //2
      }

• 如何实现页面加载完成后再实现某些方法？

  $(document).ready(
    function(){}
  )
  //或简写为
  $(function(){})
  //两者都是在DOM元素绘制完毕后执行方法
  //一个js文件中可以编写多个该方法，并且都会得到执行
  //该方法总是优于其余两种方法进行，同类方法谁在上方谁先执行

  $(window).on('load',function(){})  //使用dom对象
  window.onload=function(){}   //使用jQuery对象
  //两者都是在整个window即页面所有元素加载完成后执行方法
  //一个js文件中只会执行一个该方法
  //优于body的onload方法执行，同类方法谁在上方谁先执行

  
  //等待body加载完成后，就会执行executeAfterLoadedBody()函数
  //总是最后执行

  • window.onload()函数不执行？

    window.addEventListener('load',fun,false)
    //监听window对象下的load事件，并在该事件触发时调用fun函数（此处函数不能加括号）
    //第三个参数可选

2019-11-27

• 闭包（closure）

  • 词法环境（lexical environment）
  • 词法作用域
  • 闭包

  总结来说，闭包可以让我们从内部函数访问到外部函数作用域，也可以让我们在外部读取到其他函数内部的变量。它是一个定义在函数内部的函数，是连接函数内部和外部的桥梁。
  （闭包以后单开一页）

  2019-11-28

• npm i webpack 安装报错

  npm ERR! code ENOSELF
  npm ERR! Refusing to install package with name "webpack" under a package
  npm ERR! also called "webpack". Did you name your project the same
  npm ERR! as the dependency you're installing?
  npm ERR! 
  npm ERR! For more information, see:
  npm ERR!     
  
  npm ERR! A complete log of this run can be found in:
  npm ERR!     D:\Apps\nodeJs\nodejs\node_cache\_logs\2019-11-28T07_06_05_628Z-debug.log

  检测package.json下的name字段值不能与和安装包重名

• webpack引用bootstrap字体图标样式不显示

  bootstrap 4.X以后把icon分离出来作为一个单独的项目open-iconic，所以在引入bootstrap项目之后还需引入open-iconic项目

  1. npm i https://github.com/iconic/open-iconic.git -D

  2. 入口js文件中引入

     import "bootstrap/dist/css/bootstrap.css"
     import "open-iconic/font/css/open-iconic-bootstrap.css"

  3. HTML中样式为

2019-11-29

• webpack配置babel时，编译保错Error：Plugin/Preset files are not allowed to export objects, only functions.

  babel版本有冲突，将babel全部升级到7或降级到6

  //升级到7
  "@babel/core": "^7.0.0-beta.40",
  "@babel/cli": "^7.0.0-beta.40",
  "babel-loader": "^8.0.0-beta.0",
  "babel-plugin-lodash": "^3.3.2",
  "babel-plugin-react-transform": "^3.0.0",
  "@babel/preset-react": "^7.0.0-beta.40",
  "@babel/preset-stage-0":'^7.0.0'
  
  //还要修改.babelrc文件
  query: {
     presets: ['@babel/react', '@babel/stage-0'],
     plugins: ['']
   }
  
  //降级到6
  "babel-core": "^6.26.0",
  "babel-loader": "^7.1.2",
  "babel-plugin-transform-runtime": "^6.23.0",
  "babel-preset-env": "^1.6.1",
  "babel-preset-stage-0": "^6.24.1",

• webpack打包vue时，vue的runtime-only和runtime-compiler的区别

  • 在使用webpack打包vue时，通常需要借助vue-loader工具对vue代码进行预编译，组件中的模板会在运行前被提前编译成render函数。runtime-only模式中只包含运行阶段的vue.js代码，此时代码体积更轻量。此模式也是vue打包时的默认模式。
  • 如果未对vue代码进行预编译，需要在客户端运行时编译代码。则需要使用vue-compiler模式，这样对客户端的性能会有一定的消耗。

  //不需要使用runtime-compiler
  new Vue({
    render(h){
    return h("div","hi")
    }
  })
  
  //需要使用runtime-compiler
  new Vue({
    template:"hi"
  })

  • 如何切换默认的runtime-only

  //webpack.config.js
  
  module exports = {
    ...
    resolve:{
        alias:{
            "vue$":"vue/dist/vue.js"  //将以vue结尾的文件导入指向vue.js文件
        }
    }
  }