大前端

一、nodejs

---

• 进入交互式环境：node
• 执行js文件：node index.js，.js后缀可以省略。

console.log("hello node");

• node 支持很多模块，如http、mysql，使js可以像后端语言一样工作。

传统上JS代码只能在浏览器上运行，Node.js 是一个基于 Google的Chrome上的V8引擎封装的一个运行环境，使得JS程序可以摆脱浏览器，像其他程序一样运行在操作系统上。

1. npm

1. NPM是随同NodeJS一起安装的包管理工具，包含两个功能：1.来初始化node工程；2.安装第三方模块。相当于js的maven。
2. 模块是Node.js 应用程序的基本组成部分，类似java的包。 一个js 文件就是一个模块，使用 require 指令来载入 Node.js 模块。
3. 如果要用import导入模块等es6语法，需要安装babel将es6语法转换成低版本的语法。

• npm config list：检查npm配置。
• 构建node工程：npm init ，添加-y选项可以自动通过，执行完毕会在当前目录生成一个package.json文件。默认会把index.js作为node项目入口文件，如果当前目录有js文件，会将第一个js文件作为入口文件。
• npm i，安装模块到本地项目，会将模块下载到node工程根目录下的node_modules目录里，并在package.json的dependencies里添加安装的包记录。等于npm i -S，等于npm install --save
• npm i -D：npm install xx --save-dev的简写，对模块进行局部安装，模块写入到 devDependencies 里，生产环境不会被安装。
• npm i -g 会将模块进行全局安装，而不是当前项目，不会也不能记录到当前package.json，加-S/--save也不行。

{
  "name": "node",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.6.0"
  }
}

• 执行脚本：npm test 会执行scripts里面对应的脚本。
• 将package.json里记录的所有模块全部下载到本地：npm i
• 卸载模块：npm uninstall + 包名
• node.js利用common.js模块标准，,exports 是模块向外部公开的接口，require 用于从外部获取一个模块的接口。

var hello = require('./hello');
hello.world();

exports.world = function() {
  console.log('Hello World');
}

2. Babel

某些ES6的高级语法，node.js/V8引擎不支持，babel用来将es6语法转换成es5语法。

• 安装bable：npm i -g babel-cli
• 安装转换器：npm i -D babel-preset-es2015
• 查看：babel -V
• 在node根目录创建.babelrc文件

{
    "presets": ["es2015"],
    "plugins": []
}

• 转换：babel src -d dist，执行成功后，src内的ES6语法文1件转换成ES5之后，放在了dist目录。
• 或者：package.json修改如下内容，执行npm build

  "scripts": {
    "build": "babel src -d dist" 
  },

3. 模块化

node 使用common.js规范，vue等前端框架使用ES6规范。

common.js规范

# 导入模块：
const m = require ( '.\test.js')
var x = m.a
# 使用模块：
m.get()
x()

# 导出模块：
const get = function(){
    console.log("get")
 }
const post = function(){
    console.log("post")
}

model.exports={
    get，post
}
# 或者
model.exports={
    g: get，
    p: post
}

# 或者
exports.info = function(){
    console.log("info")
}

ES6规范

# 分别导出模块的函数
    export function get(){
        console.log("get")
    }
    export function post(){
        console.log("post")
    }

# 导入模块：
import get from './test.js'
import {get,post} from './test.js'
import * from './test.js'

# 使用模块
get()
post()

# 一次导出模块的所有函数：
export default{
    get(){
        console.log("get")
    }
    post(){
        console.log("post")
    }
}
# 将模块导入成一个对象
import x from './test.js'
x.get()
x.post()

4. webpack打包

---

全局安装webpack：npm i -g webpack webpack-cli
查看版本号：webpack -v
对入口文件进行打包：webpack
实时进行打包更新：webpack -w

Webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。webpack可以将js、cs、less等多种静态资源转换成一个静态文件。

webpack

4.1 js打包

js打包合并4.0之前的版本需要webpack.config.js配置文件，4.0之后的不需要，默认将index.js作为入口文件。

const path = require('path');

module.exports = {
    entry: './src/scripts/index.js',   // 打包入口
    output: {   
        path: __dirname + '/dist',   // 输出路径
        filename: 'scripts/index.js'    //  输出文件名
    },
}

执行webpack命令，就会将入口文件引用到的所有文件，打包成一个bundle.js文件。不使用配置文件，默认将index.js文件和依赖打包到dist下的main.js文件。将打包后的js引入html和未打包之前效果一样。

4.2 css打包

• 执行css打包需要安装额外两个插件，style-loader、css-loader。ss-loader只是用于加载css文件（并没有添加到页面），而style-loader则是将打包后的css代码以<style>标签形式添加到页面头部。

npm i -D css-loader style-loader

• css文件要在index.js里以模块的方式引入

body{
    background: yellow;
}

require("./css/style.css")

• 配置文件：webpack.config.js

module.exports = {
    entry: './src/scripts/index.js',   // 打包入口
    output: {   
        path: __dirname + '/dist',   // 输出路径
        filename: 'scripts/index.js'    //  输出文件名
    },
    module: {
        rules: [  
            {
                test: /\.css$/,   // 正则表达式，表示.css后缀的文件
                use: ['style-loader','css-loader']   // 针对css文件使用的loader，注意有先后顺序，数组项越靠后越先执行
            }
        ]
    }
};

• 打包：webpack

二、 ES6

---

1. let和const

传统定义变量使用var，let定义的变量只能作用在当前代码块，const用来定义常量消除了var定义常量能被修改的毛病。它们解决了var存在的变量穿透和常量能被修改的问题。

2. 箭头：函数

        # 传统定义函数
        var sum = function(a,b){
            return a+b;
        }
        #1. 箭头函数，去掉function，增加箭头
        var sum = （a,b)=>{
            return a + b;
        }
        #2. 箭头函数，如果函数体只有return语句，可以把大括号也去掉。
        var sum = （a,b)=> return a + b;

        #3. 若果只有一个形参，形参的小括号也可以省去
        var arr = [1,2,3]
        var newarr = arr.map(function(obj){
            return obj * 2;
        };

        var newarr = arr.map(obj=>obj*2);

3. 函数：默认参数

• 函数有形参时，当调用函数不传参数，形参默认值是undefined。而ES6可以给形参赋予默认值。

4. 字符串拼接

• 传统：var address = "我叫："+person.name+"，今年："+person.age+"了。"
• 现在：`var address = `我叫：${person.name}，今年：${person.age}了。`
• 效果：我叫：吴彦祖，今年28岁了。

var person = {
    name : "吴彦祖",
    age : 28
}

5. 对象：初始化简写

        var title = "中华人民共和国万岁"
        var link = "http://www.baidu.com"
        # 常规写法
        var info = {
            title: title,
            link: link,
            body: function(){
                console.log("世界人民大团结万岁")
            }
        }
        # 简写：如果key和value的名字一致，且value已经被定义过，则可省略 键值对中的: value。如果value是一个函数，可以把：function去掉。
        var info = {
            title,
            link,
            body(){
                console.log("世界人民大团结万岁")
            }

6. 对象：解构

• 对象解构：快速获取对象值的新方法

        var info = {
            title: "中华人民共和国万岁",
            link: "http://www.baidu.com",
            body: "中国梦"
        }
        
        # 传统方法
        var title = info.title;
        var link = info["link"]
        
        # 新方法
        var {title, link} = info

7. 对象：传播操作符...配合对象解构使用

        var info = {
            title: "中华人民共和国万岁",
            link: "http://www.baidu.com",
            body: "中国梦"
        }
      
  
        # 对象传播操作符的含义
        var {title, ...data} = info
        title："中华人民共和国万岁",
       data: {body: "中国梦", link: "http://www.baidu.com"}

8. 数组：map

        var arr = [1, 2, 3]
        var newarr = arr.map(obj => obj * 2);

        var users = [{age: 11, name: "小明"}, {age: 12, name: 小芳}, {age: 13, name: 小萌}]

        var newuser = users.map(function(obj){
            obj.age = obj.age+1;
            obj.sex=man; // 给数组的每个对象增加一个键值对
            return obj;
        })