November 2019 issue front end of the fifth week Summary

2019-11-26

Self-executing function

//一般来说，我们在使用函数时，通常会分这样几步
//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 code execution order.

JavaScript code is executed in accordance with the single-threaded, that is a piece of code execution will begin after the completion of the next piece of code.

//例如：下面代码中，先执行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)
}

Function scope
- JavaScript within the target range in the window become global scope, variables declared in global scope as a global variable
- Variables declared inside a function scope only within the current function, called local variables.
- When accessing JavaScript variable scope to access the installation from the inside out. That is, if you want to access a variable in the current scope, use the variables in the current scope; if not, it will be to find a scope until the global scope.
```
var a = 1;
function fun(){
  console.log(a);  //此函数作用域内存在a变量，则访问当前函数内的a。但此时a未被定义，所以输出undefined
  var a = 2;
  console.log(a);  //2
}
```

How to achieve page load before achieving certain method?

$(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 () functions do not perform?

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

2019-11-27

闭包（closure）
- Lexical Environment ( lexical Environment )
- Lexical scoping
- Closure
In summary, the closure allows us to access from internal function to external function scope, but also allows us to read in external variables other internal functions. It is a function within the function definitions, function as a bridge between the internal and external.
( Single closure after opening a )

2019-11-28

npm i webpack given installation

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\nodeJs\nodejs\node_cache\_logs\2019-11-28T07_06_05_628Z-debug.log

name field detecting value package.json not the same as an installation package and

webpack reference bootstrap font style icon is not displayed

After the bootstrap 4.X icon isolated as a separate item open-iconic, so after the introduction of items needed to bootstrap program incorporated open-iconic
1. npm i https://github.com/iconic/open-iconic.git -D
2. Introducing inlet js file
```
import "bootstrap/dist/css/bootstrap.css"
import "open-iconic/font/css/open-iconic-bootstrap.css"
```
3. HTML style, which is
```
<span class="oi oi-account-login"></span>
<span class="oi oi-account-logout"></span>
```

2019-11-29

When webpack configuration babel, compiling Paul wrong Error: Plugin / Preset files are not allowed to export objects, only functions.

babel version conflict, the babel of all upgrade or downgrade to 6 to 7

//升级到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",

When webpack packaged vue, vue difference of runtime-only and runtime-compiler of
- When using webpack packaged vue, usually you need to use tools vue vue-loader code is precompiled assembly template will be compiled ahead to render function before running. runtime-only operation mode includes only the code phase vue.js, this time code size lighter. This mode is the default mode when vue package.
- If you did not pre-compiled vue code, the compiled code runs on the client. Vue-compiler is required pattern, so that the performance of the client will have a certain consumption.
```
//不需要使用runtime-compiler
new Vue({
  render(h){
  return h("div","hi")
  }
})

//需要使用runtime-compiler
new Vue({
  template:"hi"
})
```
- How to switch the default runtime-only
```
//webpack.config.js

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