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

Posted dairydeng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 onload="executeAfterLoadedBody()">
    //等待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!     <https://docs.npmjs.com/cli/install#limitations-of-npms-install-algorithm>
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     D:Apps
    odeJs
    odejs
    ode_cache\_logs2019-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中样式为

      <span class="oi oi-account-login"></span>
      <span class="oi oi-account-logout"></span>
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文件
          }
      }
    }

以上是关于2019年11月第五周前端问题汇总的主要内容,如果未能解决你的问题,请参考以下文章

2019-2020学年 20191327《信息安全专业导论》第五周学习总结

2018-2019-1 20165301 《信息安全系统设计基础》第五周学习总结

2019暑假第五周总结

20182305 2019-2020-1 《数据结构与面向对象程序设计》第五周学习总结

2019-2020学年 20191228《信息安全专业导论》第五周学习总结

CCF系列题解--2017年9月第五题 除法