大前端进阶

前端基础：HTML+CSS+jQuery+BootStrap...

所需软件：VsCode，nodejs，npm

VS Code界面

 

 

 

　　步骤：

1. 创建文件夹
2. 创建 xx.js 文件
3. 编码
4. 打开终端
5. 运行js程序：node 程序名.js

　　例：

1. 创建文件夹： nodejs
2. 创建文件： 01-控制台.js
3. 编码：console.log("hello,node")
4. 打开终端
5. 运行js程序：node 01-控制台.js

ES6语法

　　1.var与let的区别

// var 未声明也可以使用
// let 未声明不可以使用
{
    var a = 0;
    let b = 1;
}
console.log(a)
console.log(b) // b is not defined

// var 可声明多次
// let 只可声明一次
// var m = 1
// var m = 2
// let n = 3
// let n = 4
// console.log(m)
// console.log(n) // Identifier 'n' has already been declared

// var会提升变量作用域
// let不会提升变量作用域
// console.log(x) // undefined
// var x = 1
// console.log(y) // Cannot access 'y' before initialization
// let y = 2

 

　　2. const

// 声明了常量之后，不能再改变
// const PI = 3.1415926
// PI = 0 
// console.log(PI) //Assignment to constant variable.

// 声明常量必须初始化
const CON;
console.log(CON) // Missing initializer in const declaration

 

　　3.解构赋值

// 传统赋值
// let a = 1, b = 2, c = 3;
// console.log(a,b,c)
// // es6 赋值
// let [x,y,z] = [1,2,3]
// console.log(x,y,z)

// 对象定义
let user = {name: 'zhangsan',age: 20}
// 传统的
let name1 = user.name
let age1 = user.age
console.log(name1)
console.log(age1)

// es6 取值
let {name , age} = user
console.log(name,age)

 

　　4.模板字符串

let name = 'hello'
let age = 20
// 传统拼接字符串
let info = "name:"+name+",age:"+age

// es6 
let infoes6 = `name:${name},age:${age}`
console.log(info)
console.log(infoes6)

 

　　5.声明对象简写

const name = "zhangsan"
const age =20
// 传统写法
const person = {name: name,age: age}

// es6

const person_es6 = {name,age}
console.log(person)
console.log(person_es6) 

 

　　6.定义方法简写

// 传统
const person1 = {
    sayHi: function(){
        console.log("hello,111")
    }
}

// es6
const person2 = {
    sayHello(){
        console.log("hello,222")
    }
}

person1.sayHi()
person2.sayHello()

 

　　7.对象拓展运算符

let person = {name:"zhangsan",age: 20}
let one = person //引用赋值

// 对象拷贝
let two = {...person}
console.log(one)
console.log(two)
console.log(person)

one.name = "lisi"
console.log(one)
console.log(two)
console.log(person)

　　

　　8. 默认的参数

function showInfo(name, age = 3) {  
    console.log(name + ',' + age) 
}
// 测试 
showInfo('coding', 18)  //coding,18
showInfo('coding')  // coding,3
showInfo('coding', undefined)  // coding,3
showInfo('coding', null) // coding,null

 

　　9.箭头函数   参数 => 函数体  （类似λ表达式）

// let arr = [1 , 10 , 8 , 6 , 5]
// let arr1 =  arr.sort()
// console.log(arr1)

// let arr2 = arr.sort(function(a,b){
//     return a-b
// })
// console.log(arr2)

// () => {}

let f1 = function(a,b){
    let result = a+b
    return result
}

// let f2 = (a,b) => {
//     let result = a+b
//     return result
// }

let f2 = (a,b) => a+b

console.log(f1(1,2))
console.log(f2(2,3))

 

npm包管理

　　1.什么是npm？

　　　　NPM的全称是Node Package Manager，是一个NodeJS包管理和分发工具，已经成为了非官方的发布 Node模块（包）的标准。就好比maven，所有东西只要到导入依赖即可，npm 也是如此，npm install，好比Linux 的 yum 安装！

　　测试：

1. 创建文件夹 npm
2. 测试初始化项目，理解npm如何管理前端依赖！
3. 命令参数：
   1. npm init
   2. npm init -y　　# 直接生成默认值

　　修改 npm 镜像

1. npm config list  # 查看npm的配置信息
2. npm config set registry https://registry.npm.taobao.org/  # 配置 淘宝的镜像 ，这样下载依赖会比较快
3. npm install vue  # 下载vue测试一下
4. npm install vue@x.x.x #下载指定版本的vue
5. package.json 中管理了所有依赖版本控制，类似pom.xml
6. npm install -save-dev(等价于-D) eslint  # 指定只在开发时使用
7. npm install -g webpack  # 全局安装环境
8. npm update vue # 更新包
9. npm uninstall vue  # 卸载包

Babel

1. 安装Babel
   1. npm install -g babel-cli  # 安装babel-cli
   2. babel --version  # 查看版本信息
2. 测试使用
   1. 创建文件夹：babel>src
   2. 编写配置文件：.babelrc （可随意起名）
      1. {"persets":[  "es2015"  ], "plugins": [] }
   3. 安装babel依赖：npm install -D babel-preset-es2015
   4. 输出测试：babel .\src\example.js --out-file .\dist1\dist.js

 

Webpack前端资源打包工具

　　可将js、css、less、png等打包成  .js文件

　　webpack打包，可让我们的代码不是那么繁琐，可实现复用

1. 安装：npm install -g webpack webpack-cli
2. 查看版本信息：webpack -v
3. 创建配置文件：webpack.config.js
4. 初始化项目：webpack --mode=development

// webpack.config.js
const path = require('path') // Node.js 的内置模块
module.exports = {
    entry: '.\\src\\main.js',
    output: {
        path: path.resolve(__dirname,'./dist'), // 输入路径
        filename: 'bundle.js'
    }
}

 

// package.json
{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack --mode=development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}