大前端进阶

Node.js

Node.js就是运行在服务端的JavaScript，基于Google的V8引擎

httpserver服务

// 导入模块 require 类似与import Java.io
const http = require('http');

// 1、创建一个httpserver服务
http.createServer(function(requsest, response) {
    // 设置浏览器可以识别hello server!!!
    response.writeHead(200, {"content-type":'text/plain'});  // 以text-plain的方式解析
    //response.writeHead(200, {"content-type":'text/html'});  // 以text-html的方式解析
    // 给浏览器输出内容
    response.end("hello server!!!")
    //response.end("<strong>hello server!!!</strong>")
}).listen(8888);
// 2、监听一个端口  8888
console.log("你启动的服务是：http://localhost:8888，已启动成功");
// 3、启动运行服务 node httpserver.js
// 4、在浏览器访问http://localhost:8888

操作MYSQL数据库

// npm install mysql
// 1、导入mysql依赖包，mysql属于第三方的模块，相当于java.sql
var mysql = require("mysql");

// 2、创建一个mysql的Connection对象
// 3、配置数据连接的信息
var connection = mysql.createConnection({
    host: "127.0.0.1",
    user: "root",
    port: 3306,
    password: "w6b2y7",
    database: "testdb"
})
// 4、开启连接
connection.connect();
// 5、执行curd
connection.query("select * from kss_user", function(error, results, fields) {
    // 如果查询出错，直接抛出
    if (error)throw error;
    // 查询成功
    console.log("results= " + JSON.stringify(results));
    // results= [{"id":1,"name":"abc"},{"id":2,"name":"def"},{"id":3,"name":"ghi"}]
});
// 6、关闭连接
connection.end();
// 运行 node db.js

ES6

let 和 const

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo01</title>
</head>
<body>
    
    <script>
        //  传统定义变量和常量
        var name = "xiaoming";
        var link = "https://www.baidu.com";
        var PI = Math.PI;

        console.log(name);
        console.log(link);
        console.log(PI);

        //  ES6定义的方式
        let name2 = "xiaohong";
        let link2 = "https://www.bilibili.com"
        const PI2 = Math.PI;

        console.log(name2);
        console.log(link2);
        console.log(PI2);

        //  let 和 const的作用
        //  1、解决var穿透问题
        //  2、常量修改问题
        for(var i = 0; i < 5; i++) {
            console.log(i);
        }
        
        console.log(i);  //  这里就出现了变量穿透

    </script>

</body>
</html>

模板字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo02</title>
</head>
<body>
    <script>
        let name = "小明";

        let msg1 = "你好，" + name 
        console.log(msg1);  // 你好，小明
        let msg2 = `你好，${name}`;
        console.log(msg2);  // 你好，小明
    </script>
</body>
</html>

函数默认值参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo03</title>
</head>
<body>
    
    <script>
        //  函数默认参数
        function sum(a, b) {
            return a + b;
        }

        var result = sum(100, 100);
        console.log("result= " + result);  //  result= 200

        var result2 = sum(100);  //  a -> 100  b -> undefined
        console.log("result2= " + result2);  //  result2= NaN

        //  可以给a,b设定默认参数
        function sum2(a = 100, b = 50) {
            return a + b;
        }

        var result3 = sum2(200, 200);
        console.log("result3= " + result3);  //  result3= 400 

        var result4 = sum2(10);
        console.log("result4= " + result4);  //  result4= 60
    </script>
    
</body>
</html>

箭头参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo04</title>
</head>
<body>
    
    <script>
        //  箭头函数
        //  传统写法
        var sum = function(a,b) {
            return a + b;
        }

        //  ES6新写法1
        var sum = (a, b) => {
            return a + b;
        }

        //  ES6新写法2
        var sum = (a, b) => a + b;

        //  function可以去掉
        //  在形参后加箭头 =>
        //  如果形参只有一个变量，可以去掉括号 ()
        //  如果出return外没有其他结构体，可以去掉return
        var arr = [1, 2, 3, 4, 5, 6];
        var newarr = arr.map(function(obj) {
            return obj * 2;
        })
        console.log(newarr);

        var newarr2 = arr.map(obj => obj * 2);
        console.log(newarr2);
    </script>

</body>
</html>

对象初始化简写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo05</title>
</head>
<body>
    
    <script>
        //  传统定义对象
        let info = {
            title: "标题",
            link: "https://www.baidu.com",
            go: function() {
                console.log("出去玩~");
            }
        };
        console.log(info);
        info.go();

        //  ES6简写对象
        let title = "标题";
        let link = "https://www.baidu.com";
        let info2 = {
            title,  //  如果对象内一个key和变量的命名相同，可以直接写变量名
            link,
            go() {  //  function可以去掉
                console.log("出去玩~");
            } 
        }
        console.log(info2);
        info2.go();

    </script>

</body>
</html>

对象解构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo06</title>
</head>
<body>

    <script>
        var title = "标题";
        var link = "https://www.baidu.com";
        let info = {
            title,  //  如果对象内一个key和变量的命名相同，可以直接写变量名
            link,
            go() {  //  function可以去掉
                console.log("出去玩~");
            } 
        }
        console.log(info);
        info.go();

        //  传统获取对象属性和方法
        //  通过 . 的方式
        console.log(info.title);
        console.log(info.link);
        info.go();

        //  通过 [] 的方式
        console.log(info["title"]);
        console.log(info["link"]);
        info["go"]();

        //  [] 和 . 的区别
        //  通过.的方式获取属性值 ，key是静态的
        //  通过[]的方式获取属性值，key是动态的，可以是字符串，也可以是数字，还可以是变量
        var obj = {name1:"张三", 2:"李四"};

        var v1 = obj.name1;  //张三，  使用点的方式

        //var v2 = obj.2  //报错，不能使用点的方式
        var v3 = obj[2];  //李四，使用中括号的方式

        var key = "name1"
        //var v4 = obj.key  //undefined，不能使用点的方式
        var v5 = obj[key]   //张三， key是一个变量，使用中括号的方式

        //  ES6对象解构 - 快速获取对象属性和方法
        var {title,link,go} = info;
        //  还原
        //  var title = info.title;
        //  var link = info.link;
        console.log(title,link);
        go();
    </script>

</body>
</html>

传播操作符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo07</title>
</head>
<body>
    
    <script>
        //  对象传播操作符
        var person = {
            name: "xiaoming",
            addres: "沈阳",
            link: "https://www.baidu.com",
            phone: 1234567,
            go() {
                console.log("运行~");
            }
        }
        //  解构  ...rest 代表除了已定义的参数（eg. name,addres）之外的所有参数，是一个数组
        var {name, addres, ...rest} = person;
        console.log(name);
        console.log(addres);
        console.log(rest);
    </script>

</body>
</html>

Map

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo08</title>
</head>
<body>
    
    <script>
        //  要对arr数组每个元素 *2
        var arr = [1,2,3,4,5,6,7];
        
        //  传统方法
        let newarr = [];
        for (let i = 0; i < arr.length; i++) {
            newarr.push(arr[i] * 2);
        }
        console.log(newarr);

        //  ES6 map方法
        //  自带循环，并把处理后的值回填到对应的位置
        var newarr2 = arr.map(ele =>  ele * 2);
        console.log(newarr2);

        //  map 处理对象的数据
        var users = [{age: 10, name: "xiaohong"},{age: 12, name: "xiaoming"},{age: 15, name: "xiaoli"}];
        users = users.map(ele => ele.age += 1)
        console.log(users);
    </script>

</body>
</html>

Reduce

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo09</title>
</head>
<body>
    
    <script>
        //  ES6 reduce
        //  reduce() 累加器，将一个数组中每项元素（由左至右）相加，將数组化为单一值（即总和）
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        //  total 已累加的和   num 待相加的元素
        var results = arr.reduce((total, num) => total + num);
        console.log(results);  //  55
    </script>

</body>
</html>

NPM包管理

NPM (Node Package Manager) ，相当于Java的Maven

作用：

快速构建node.js工程
快速安装和依赖第三方模块

构建node.js工程
 - npm init  (初始化)  / npm init -y
    - 得到package.json
      相当于 pom.xml 文件，管理依赖
    ——————————————————————————————————————————————————————————————————
    {
        "name": "npm",                  //  工程名
        "version": "1.0.1",             //  版本
        "description": "node工程",      //  描述
        "main": "index.js",             //  入口js
        "scripts": {                    //  运行脚本
            "test": "echo \"Error: no test specified\" && exit 1"
        },
        "keywords": [
            "node"
        ],
        "author": "BY0627",             //  开发者
        "license": "ISC"                //  授权协议
    }
    ——————————————————————————————————————————————————————————————————

快速安装和依赖第三方模块

npm install xxxx  或者  npm i xxxx

安装的模块会放入项目的node_modules文件夹中
导入模块

const redis = require("redis");
const mysql = require("mysql");

模块和package.json的关系

"dependencies": {
    "jquery": "^3.6.0",
    "mysql": "^2.18.1",
    "redis": "^4.0.4",
    "vue": "^3.2.31"
}

通过npm install xxx 安装的模块会记录在package.json这个文件中

作用：复用

通过npm install可以直接自动下载全部package.json依赖的模块，避免重复下载

通过cnpm加快模块安装速度

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install xxx

卸载

npm uninstall xxx

Babel

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行

手动转码

安装

npm install -g babel-cli

# 检查版本号
babel --v

初始化项目

项目文件夹 > npm init -y

创建文件 src/example.js ，示例代码（ES6）：

//  example.js
//  转码前
//  ES6

let name = "xiaoming";
const title = "标题";
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let newarr = arr.map(a => a * 2);
console.log(name);
console.log(title);
console.log(newarr);  //  [2,  4,  6,  8, 10, 12, 14, 16, 18, 20]

配置 .babelrc

Babel的配置文件是.babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件，基本格式如下

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

presets字段设定转码规则，将es2015规则加入 .babelrc

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

安装转码器，在项目文件夹中安装

npm install --save-dev babel-preset-es2015

转码

# 转码单个js文件
# babel 原目录/原文件 -o 目标目录/目标文件
babel src/example.js -o dist/example_babel.js

# 转码整个文件目录
# babel 原文件夹 -d 目标文件夹
babel src -d dist   # src\example.js -> dist\example.js

# 转换单个文件可以重命名，转换整个文件夹只会按原文件名输出

//  example_babel.js
//  转码后
//  ES2015

"use strict";

var name = "xiaoming";
var title = "标题";
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var newarr = arr.map(function (a) {
  return a * 2;
});
console.log(name);
console.log(title);
console.log(newarr); //  [2,  4,  6,  8, 10, 12, 14, 16, 18, 20]

自定义脚本转码

改写package.json

{
    // ...
    "scripts": {
        // ...
        "dev":  "babel src -d dist"
    },
    // ...
}

执行

项目文件夹 >npm run dev

模块化规范

CommonJS

//  Demo01.js
//  定义工具类
const sum = (a, b) => a + b;
const sub = (a, b) => a - b;
const mul = (a, b) => a * b;
const di = (a, b) => a / b;

//  导出
module.exports = {
    sum,
    sub,
    mul,
    di
}

//  Demo02.js
//  导入并使用Demo01.js写好的工具类
//  require
const tool = require('./Demo01.js');

console.log(tool.sum(1,2));  //  3
console.log(tool.sub(1,2));  //  -1
console.log(tool.mul(1,2));  //  2
console.log(tool.di(1,2));  //  0.5

ES6

常规写法

//  src/userApi.js
export function getList() { 
    console.log("获取数据列表"); 
};

export function save() { 
    console.log("保存数据"); 
};

//  src/userTest.js
import {getList, save} from './userApi.js' 

getList();
save();

//  直接 node userTest.js无法运行
//  因为默认不支持ES6语法的import

//  ==需要通过babel转码==

转码后

//  dist/userApi.js
"use strict";

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.getList = getList;
exports.save = save;
function getList() {
    console.log("获取数据列表");
};

function save() {
    console.log("保存数据");
};

//  dist/userTest.js
'use strict';

var _userApi = require('./userApi.js');

(0, _userApi.getList)();
(0, _userApi.save)();

//  直接 node userTest.js无法运行
//  因为默认不支持ES6语法的import
//  需要通过babel转码

运行

node .\dist\userTest.js

常用写法

//  src/userApi.js
export default {
    getList() { 
        console.log("获取数据列表"); 
    },

    view() { 
        console.log("查看数据"); 
    }
}

//  src/userTest.js
import user from './userApi.js' 

user.getList();
user.view();
//  直接 node userTest.js无法运行
//  因为默认不支持ES6语法的import
//  需要通过babel转码

转码后

//  dist/userApi.js
"use strict";

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.default = {
    getList: function getList() {
        console.log("获取数据列表");
    },
    view: function view() {
        console.log("查看数据");
    }
};

//  dist/userTest.js
'use strict';

var _userApi = require('./userApi.js');

var _userApi2 = _interopRequireDefault(_userApi);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

_userApi2.default.getList();
_userApi2.default.view();
//  直接 node userTest.js无法运行
//  因为默认不支持ES6语法的import
//  需要通过babel转码

运行

node .\dist\userTest.js

Webpack

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

安装

cnpm install -g webpack webpack-cli
# 查看版本号
webpack -v

打包JS

创建src目录，在src下创建以下三个JS文件

//  src/common.js
//  输出
exports.info = function(str) {
    //  控制台输出
    console.log(str);
    //浏览器输出
    document.write(str);
}

//  src/util.js
//  相加
exports.add = (a, b) => a + b;

//  src/main.js
//  导入 util.js common.js
const util = require('./util.js');
const common = require('./common.js');

common.info("Hello World, " + util.add(1011, 1011));

创建webpack配置文件webpack.config.js

const path = require("path"); //Node.js内置模块
module.exports = {
    entry: './src/main.js', //配置入口文件
    output: {
        path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
        filename: 'bundle.js' //输出文件
    }
}

手动编译打包

项目文件夹 >webpack

自定义脚本打包

改写package.json

{
    // ...
    "scripts": {
        // ...
        "dev":  "webpack"
    },
    // ...
}

执行

项目文件夹 >npm run dev

在src下创建index.html，引用bundle.js，查看效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
</head>
<body>
    
    <script src="bundle.js"></script>

</body>
</html>

打包CSS

安装style-loader和 css-loader

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

Loader 可以理解为是模块和资源的转换器

css-loader 是将 css 装载到 javascript

style-loader 是让 javascript 认识css

npm install --save-dev style-loader css-loader

安装后package.json会显示已安装两个转换器

{
  "name": "webpack",
  // ...
  // ...
  "devDependencies": {
    "css-loader": "^6.7.1",
    "style-loader": "^3.3.1"
  }
}

修改webpack.config.js

const path = require("path");
module.exports = {
    // ...
    // ...
    module: {
        rules: [{
            test: /\.css$/,  //  把项目中所有的.css结尾的文件进行打包
            use: ["style-loader", "css-loader"]
        }]
    }
}

在src下创建style.css

body{
    background: yellow;
}

修改main.js，引入style.css

//  导入 util.js common.js
const util = require('./util.js');
const common = require('./common.js');

//  导入css
require('./style.css');

common.info("Hello World, " + util.add(1011, 1011));

执行

项目文件夹 >npm run dev

在浏览器中打开index.html，查看效果

上一篇node的内置常量 __dirname和 __filename

下一篇cookies、sessionStorage和localStorage的区别

本文作者：伏月廿柒

本文链接：https://www.cnblogs.com/by0627/p/16020819.html

posted @ 2022-03-18 10:58 伏月廿柒阅读(31) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· node的内置常量 __dirname和 __filename

· webpack常见问题

· 前端进阶学习笔记

· [03] Node.js

· 大前端学习笔记

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？

伏月廿柒

大前端进阶

大前端进阶

Node.js

ES6

let 和 const

模板字符串

函数默认值参数

箭头参数

对象初始化简写

对象解构

传播操作符

Map

Reduce

NPM包管理

Babel

手动转码

自定义脚本转码

模块化规范

CommonJS

ES6

常规写法

常用写法

Webpack

安装

打包JS

打包CSS

公告

常用链接

最新随笔

随笔分类 (81)

随笔档案 (39)

阅读排行榜