Nodo.js入门（二）

最新推荐文章于 2023-11-27 00:47:49 发布

学习使我快乐——玉祥

最新推荐文章于 2023-11-27 00:47:49 发布

阅读量342

点赞数

分类专栏： js 文章标签： node.js

本文章作者主页，https://blog.csdn.net/qq_43319748，未经作者允许禁止转载，如有问题，欢迎指正！☺☺☺

本文链接：https://blog.csdn.net/qq_43319748/article/details/119496423

版权

js 专栏收录该内容

75 篇文章 3 订阅

订阅专栏

一、Webpack入门

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

安装命令：

npm install webpack -g

npm install webpack-cli -g

第一个命令安装webpack插件，第二个安装webpack脚手架

脚手架这个词我一开始不知道是什么，查了一下，脚手架是工地盖楼时用钢管搭出来的架子，供工人们工作或攀爬行走。按照这个道理，编程的脚手架就跟程序需要开发环境一样。

安装完成后，执行 webpack -v 可查看安装版本，结果如下

webpack 5.49.0
webpack-cli 4.7.2

二、webpack打包js文件

项目根目录，创建src 文件夹

1.在src中创建两个js文件

//test1.js

exports.info=function (str) {
    document.writeln(str);
}

//test2.js

exports.add=function (a,b) {
    return a+b;
}

2.在src中创建入口文件main.js

var test1=require("./test1");
var test2=require("./test2");
test1.info("100+200="+test2.add(100,200));

3.创建webpack的配置文件

与src平级创建webpack.config.js文件，文件名固定写法，内容如下：

var path=require("path");
module.exports={
    //入口文件
    entry:"./src/main.js",
    output:{
        //路径
        path: path.resolve(__dirname,"./dist"),
        filename:"bundle.js"
    }
}

里面入口文件，输出路径，输出文件名，都可以自定义，其他固定。

4.运行webpack命令

这里需要在项目根目录下，以系统管理员的身份执行命令 webpack

不是管理员身份打包会失败。

5.创建空的index.html页面引入生成的 bundle.js 进行测试，结果如下：

100+200=300

说明打包成功。

三、webpack打包css，less文件

src文件夹下创建一个css文件夹，在其中创建一个任意的css文件，如css1.css，加入如下测试内容：

body{
    background-color: yellow;
}

src文件夹下创建一个less文件夹，在其中创建一个任意的less文件，如less1.less，加入如下测试内容：

/**
混合调用
 */
.lab3{
  background-color:blue;
}

.lab4{
  .lab3;
}

然后在入口文件main.js中引入，

require("./css/css1.css");
require("./less/less1.less");

修改配置文件webpack.config.js

var path=require("path");
module.exports={
    //入口文件
    entry:"./src/main.js",
    output:{
        //路径//__dirname 是node的一个全局变量，获得当前文件所在目录的完整目录名
        path: path.resolve(__dirname,"./dist"),
        filename:"bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.css$/,   //使用正则表达式查找后缀为.css的文件
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.less$/,
                use: ["style-loader", "css-loader","less-loader"]
            }
        ]
    }
}

使用系统管理员在当前项目根目录执行 webpack 命令

打包成功。

创建index.html页面引入生成的 bundle.js 进行测试。源码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
<body>
<button class="lab3">你好</button>

<button class="lab4">我好</button>

<script src="dist/bundle.js"></script>
</body>
</html>

结果如下，发现js,css,less效果都生效了

四、ES6

什么是ECMAScript？

编程语言JavaScript是ECMAScript的实现和扩展。ECMAScript是由ECMA（一个类似W3C的标准组织）参与进行标准化的语法规范。

创建一个空的html文件，尝试一下ES6的一些规范。

五、模板字符串

var （全局变量），let （局部变量），const （常量，不可更改）。

在编程中涉及到多行字符串编写时，不再推荐使用加号+ 或者反斜杠\ 作为连接符了，应使用反单引号，即键盘的Tab键上方的那个键。例子如下：

   let happy="快乐";
        
        
        let str1="学习" +
            "使我" +happy;

        let str2="学习  \
            使我  "+happy;

        let str3=`学习
            使我${happy}`;

六、函数方法可以返回多个值

        function funES6(name,age) {
            let aaa=age;
            return{age,name,sss:age};
        }

系统会自动根据函数返回参数名作为key,内容作为value的格式，当然如果你不想要参数名，可为其指定一个名字，最后返回一个json对象。如

console.log(JSON.stringify(funES6("hello","yx")));

 {"age":"yx","name":"hello","sss":"yx"}

七、解构表达式

数组解构

let arr = [1,2,3]

const [x,y,z] = arr;// x，y，z将与arr中的每个位置对应来取值

console.log(x,y,z);

对象解构

const person = {
  name:"jack",
  age:21,
  language: ['java','js','css']
}



// 解构表达式获取值   //如果你不想要某个属性名，可以为其新命名，如lan的做法
const {name,age,language:lan} = person;
// 打印
console.log(name);
console.log(age);
console.log(lan);

拷贝对象属性

const person = {
  name:"jack",
  age:21,
  language: ['java','js','css']
}

/**
如果要拷贝第一个和第三个属性值到一个新对象中
那么，可以根据对象解构的方式，将第二个属性放在第一位
剩余的多个属性只需要用一个 ...obj 的方式声明
**/


 const {age,...obj}=person1;

console.log(obj.language);

console.log(obj.name);

console.log(obj.age); //会提示未定义，因为不存在

八、函数优化之箭头函数

单参数，单行代码

       var print1=function (obj) {
           console.log(obj);
       }
       print1("普通函数1");


       function print2(obj) {
           console.log(obj);
       }
       print2("普通函数2");


       var print=obj=>console.log(obj);
       print("单参数的箭头函数");

多参数，多行代码

       //普通函数
       var sum=function (a,b) {
           return a+b;
       }
       console.log(sum(1,2));



       //多参数，单行代码
       var sum2=(a,b)=>a+b;

       console.log(sum2(1,2));



       //多参数，多行代码
       var sum3=(a,b)=>{
           console.log("多行代码"+(a+b));
           return a+b;
       }

       console.log(sum3(1,2));

对象函数结合箭头函数

       let person={
           "name":"yxzheng",
           //普通函数
           learn1:function (course="java") {
               console.log(this.name+"在学习"+course)
           },
           
           //箭头函数内，无法使用   ”this.param“  调取内部参数，只能用   “对象名.param”
           learn2:(course)=>console.log(`${person.name}在学习${course}`),
           
           //超简函数
           learn3(course){
               console.log(`${this.name}在学习${course}`);
           }


       };

       person.learn1("java");

       person.learn2("c++");

       person.learn3("php");

这里值得注意的是，箭头函数内，无法使用 ”this.param“ 调取内部参数，只能用 “对象名.param” 。普通函数是可以使用this.param调用内部参数的。

解构表达式和箭头函数组合使用

        const person={
            name:"heima",
            age:13,
            language:["java","js","css"]
        };
        

        //普通
        function hello(person) {
            console.log("hello"+person.name);
        }
        hello(person);

        
        //箭头函数
        var hello2=(person)=>console.log("hello2"+person.name);
        hello2(person);
        

        //箭头函数与解构表达式
        var hello3=({name})=>console.log("hello3"+name);
        hello3(person);

九、map 和 reduce 的使用

map （作用：取出每个内容，处理得到每个结果，存放在一个新数组中，最后返回该新数组）

        let arr=[1,2,3];
        
        arr=arr.map(s=>{
            return s+"";
        });

        console.log(arr);

reduce

定义一个数组，它大概是从0往后这样执行

对于这个函数有些不容易理解，专门细看了一些。

JavaScript的reduce函数介绍

十、Promise的使用

对于异步操作，有时间不确定性的特点，无法让线程一直等到结果到来，因此常常要采用回调函数进行处理结果。

Promise是个很不错的工具类，它不需要我们自己写复杂的回调函数，可以将异步操作直接交给它进行执行处理，并返回结果，它提供了统一的回调，为开发人员提供处理执行结果的入口。

        const  promise=new Promise(function (resolve,reject) {



            /**  自定义异步操作开始        **/
            setTimeout(()=>{
                let num=Math.random();
                if(num<0.5){
                    resolve("操作成功！num="+num);
                }else{
                    reject("操作失败！num="+num);
                }
            },300);

            /**  自定义异步操作结束       **/



        })

然后回调结果入口：

        promise.then(function (msg) {
            console.log(msg);
        }).catch(msg=>{
            console.log(msg);
        });

十一、Object对象扩展方法使用

先定义好测试的东西

         let arr1={name:"arr1",age:13,sex:"男"};
         let arr2={name:"arr2"};
         let arr3={sn:"4546",sex:"女"};

然后开始测试Object的方法

Object.keys()

//Object.keys() 拿到arr1所有的key合成一个新数组
         let arr1_key=Object.keys(arr1);
         console.log(arr1_key);
         document.write(arr1_key+"<br>");

Object.values()

        //Object.values() 拿到arr1所有的value合成一个新数组
         let arr1_value=Object.values(arr1);
         console.log(arr1_value);
         document.writeln(arr1_value+"<br>");

Object.entries()

//Object.entries() 将每一个属性名和属性值合成一个数组，最后返回一个二维数组
         let arr1_arr=Object.entries(arr1);
         console.log(arr1_arr);
         document.writeln(arr1_arr+"<br>");

Object.assign()

         // 将第二个及之后的所有对象属性都合并进arr1
         // 如果有与arr1重名的属性，去掉arr1的，用新的属性。
         Object.assign(arr1,arr2,arr3);
         console.log(arr1);
         document.writeln(JSON.stringify(arr1)+"<br>");

十二、数组自带函数的使用

创建一个数组：

let arr=[1,20,5,3];

arr.find（）

//返回能被2整除的值        
        arr.find(i=>{
            return i%2===0;
        });

结果为：20

arr.findIndex（）

 //返回能被2整除的值的索引

        arr.findIndex(i=>{
            return i%2===0;
        });


结果为：1

arr.includes( 值 ) arr.includes( 值 , 索引 )

//返回是否包含某个值
        console.log(arr.includes(5));
        console.log(arr.includes(5,2));
        console.log(arr.includes(5,3));


结果： true
       true
       false

十三、安装babel

babel是JavaScript 语法的编译器，可以将es6的语法转换并执行。

npm install babel-preset-es2015

npm install babel-cli -g

使用这两条命令安装babel 。

十四、export和import联合应用

命名导出

创建一个export1.js文件

// 方式一
export let name="yx"
export let age=13;
export let gender="男";
export let say=function (str){
    console.log(str);
}

或

//方式二
 let name="yx"
 let age=13;
 let gender="男";
 let say=function (str){
    console.log(str);
};
 export {name,age,gender,say};

两种方式一样，第二种更方便一些。

创建import1.js文件

//导入指定名字的内容，必须用{}括起来
import {name,age,gender,say} from "./export1"

//打印导入的参数
console.log(name,age,gender);

//name="test";导入的变量，对象等都是只读的，不可更改，会报错
//测试导出函数
say("hello yx");

//可以对导入的变量起别名
import {name as abc,say as hello} from  "./export1"

console.log(abc);
say("hello  name");

注释中有一些要求要注意。

控制台执行如下命令

babel-node import1.js

结果

yx 13 男
hello yx

默认导出

创建export2.js

//将所需变量，方法都写入default中
export default {
    test1(str){
        console.log(str);
    },
    test2(str){
        console.log(str);
    }
}

创建import2.js文件

//由于导入的内容是default默认形式，因此可以任意起名，名字不需要用{}
import abc from "./export2"

abc.test1("hello test1");

abc.test2("hello test2");

控制台执行命令

babel-node import2.js

结果：

hello test1
hello test2

学习使我快乐——玉祥

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录