大前端进阶

1. Node入门

1.1 Node实现请求响应

创建一个httpserver服务
监听一个端口8888
启动运行服务node httpserver.js(后缀可以不写
在浏览器访问http://localhost:8888

// 导入模块是用require   相当于import
const http = require('http');
// 创建一个httpserver服务
http.createServer(function(request,response){
    // 让浏览器认识hello server（是文本还是html语句）
    // 200是状态码(StatusCode)，代表ok请求成功，一般用于get和post请求
    response.writeHead(200,{'content-type':"text/plain"});
    // 给浏览器输出内容
    response.end("<strong>hello server</strong>");
}).listen(8888);
// 监听一个端口8888
console.log("你启动的服务是:http://localhost:8888已成功启动");

注意：当出现修改时，要重新启动服务然后刷新页面才可以看到更改

停止服务：ctrl + c

1.2 Node-操作MYSQL数据库

参考：https://www.npmjs.com/package/mysql（官方文档）

1：安装mysql依赖（放入到项目的node_modules文件中，并且项目内的所有原文都可以通过require 导入）

npm install mysql

2：定义db.js进行操作

// 导入mysql依赖包  mysql属于第三方的模块
var mysql = require("mysql");
// 创建一个mysql的数据库连接对象
// 配置数据库连接的信息
var connection = mysql.createConnection({
    host:'127.0.0.1',//表示这个账号只能本地使用，如果要远程登录则为%
    port:3306,//端口号
    user:'root',//用户名
    password:'141242',//密码
    database:'hotel'//要打开的数据库
})
// 开辟连接
connection.connect();
// zhi'x
connection.query('select*from worker',function(error,results,fields){
    // 如果查询出错，抛出异常
    if(error){
        throw error;
    }
    // 查询成功，打印内容
    console.log('results = ',results);
})
// 关闭连接
connection.end();

3.控制台运行 node db.js

如果想开发更复杂的基于Node.js的应用程序后台，需要进一步学习Node.js的Web开发相关框架 express，art-template、koa等

2. ES6语法

2.1 let和const

在ES6以前：

// 1： 在javascrit定义数据类型只有一种标识 - var
// 在以前只有变量定义只有var，会有作用域的问题和常量修改的问题 
var PI = Math.PI;
// 常量可以被修改
PI = 1245;
console.log(PI)
for(var i=0;i<5;i++){
    console.log(i);
}
//  var或造成变量穿透,可以在作用域外被使用
console.log(i);

所以ES6推出了let（局部变量）和const（常量）来解决上面的问题

const PI = Math.PI;
// 修改会报错
PI = 1245;
console.log(PI)

for(let i=0;i<5;i++){
    console.log(i);
};
//  这里再在外面打印就会报错
console.log(i)

小结：

let ：可变变量
const ：是常量
var：最原始。

使用建议：

再实际开发和生产中秒如果是小程序、uniapp或者一些脚手架中的，可以大胆使用let和const

但是如果是web开发中，最好还是使用var，因为有些低版本的刘阿龙拿起还是不支持let和const

2.2 模板字符串

以前：我们都是使用 ‘’ 或者 “” 来把字符串套起来

现在ES6： `` 【反引号】

第一个用途：基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。

//es5    
let name = 'itcast'    
console.log('hello ' + name)    
//es6    
const name = 'itcast'    
console.log(`hello ${name}`)

第二个用途：在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。

var username = "嘉嘉";
var age = 21;
// 原始的做法就是去拼接字符串
var str = "我名字叫 " + username+",年龄是: "+age;
console.log(str); 

// 用模板字符串来拯救 注意：这里是 `（飘键） (tab键盘的上面那个键)
var str2 = `我名字叫 ${username},年龄是: ${age}`;
var str2 = `我名字叫 ${username},
        年龄是: ${age}`;  
		// 支持换行
console.log(str2);

2.3 函数默认参数

就是在函数参数的后面加上一个默认值即可

<script>
//函数在定义的时候就加上默认参数
function sun(a=100,b=100) {
    return a + b;
}
//如果两个参数都赋值，那么便会使用给定的的值
var result1 = sun(1,1);
//如果只给其中一个参数赋值，那么没有被赋值的参数就会使用默认参数
var result2 = sun(1)
console.log('result1 = '+ result1);
console.log('result2 = '+ result2);
</script>

2.4 箭头函数（重点）

箭头函数主要是简化函数的写法，在小程序、uniapp和一些脚手架中大量被使用，属于学习理解的重点

首先观察一下传统函数的定义方法

var sum =function(a,b) {
            return a = b; 
        }

通过观察会发现每次定义的时候都要写function，所以箭头函数将其省略简写

//箭头函数
var sum =(a,b)=> {return a+b;}

如果函数体内只有一个return语句，则可以把return和中括号{}都去掉

var sum =(a,b)=> a+b;

如果除了return还有别的语句，则不能去掉return，如下：

var sum2 = (a,b)=>{
            var c = a+b;
            return c;
        }

另外，如果函数只有一个参数，那么箭头函数可以进一步简写

//省略了参数的括号
var sum = a=> a*2;

所以，我们总结了箭头函数的简化方法：

去掉function，在参数后面加箭头
如果逻辑代码仅有return，然后把中括号{}也去掉；但是如果逻辑代码出了return外还有别的语句则不能省略！！
如函数参数只有一个，那么包裹函数的括号也可以省去；但是如果有多个参数则不能省略！！！

再巩固一下

var arr = [1,2,3,4,5,6];
var newarr = arr.map(functi
                     on(obj){
    return obj*2;
})
//省略之后的写法 非常简洁
var newarr = arr.map(obj=>obj*2);
console.log(newarr);

2.5 对象简写

因为对象的属性是以

key：value的形式存在

所以如果对象的key和value的名字一致，就可以只定义一次

如果value是一个函数，可以把：function全部去掉，只剩下（）

var info = {
    title : '嘉嘉学ES6语法',
    link : 'www.jiajia.com',
    go:function(){
        console.log('我游泳去公司上班');
    }
}

//ES6简写
let title = '嘉嘉学ES6语法';
let link = 'www.jiajia.com';
let info2 = {
    title,
    link,
    go(){
        console.log("我游泳去公司上班");
    }

}

案例：

<!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>Document</title>
    </head>
    <body>
        <div>
            <form action="">
                <p>账号：<input type="text" name="" id="account"></p>
                <p>密码：<input type="password" name="" id="password"></p>
                <p><input type="button" value="登录" id="loginbutton"></p>
            </form>
			<script>
                $('#loginbutton').on('click',function(){
                    let account = $('#accound').val;
                    let password = $('#password').val;
                    //执行异步请求
                    $.ajax({
                        type : 'post',
                        url:"xxx",
                        data:{account:account,password:password},//对象的key和value相同，可以简写
                        success:function(){
                            xxx
                        }
                    })
                })
                //21-29行代码可以简写为以下形式 
                    var params ={account,password}
                    $.ajax({
                        type : 'post',
                        url:"xxx",
                        data:params,
                        success(){
                            xxx;
                        }
                    })
                })
            </script>
        </div>
    </body>
</html>

2.6 对象解构

对象解构-- 就是 es6提供的获取对象属性和方法的更快捷的方式

先看一个例子

//以下代码经过了对象简写，详情看2.5
var title = '嘉嘉学ES6语法';
var link = 'www.jiajia.com';
let info2 = {
    title,
    link,
    go(){
        console.log("我游泳去公司上班");
    }
}

在ES6以前的版本获取对象的属性和方法有

通过 . 获取

console.log(info2.title);
console.log(info2.link);
info2.go();

通过 [] 获取

console.log(info2['title']);
    console.log(info2['link']);
    info2['go']()

注意：之所以会有两种方法取值，是因为：

用点号取值在key为变量的时候不可用，此时则可以采用中括号的形式来取值

而在ES6，新增了对象结构调用方法

//可以用冒号起个小名如link:link1
var {title,link:link1,go} = info2;
console.log(title);
console.log(link);
go();

2.7 对象传播操作符

传播操作符 ...

对象传播就是将一个对象被结构之后的剩余属性和方法

var info = {
    title : '嘉嘉学ES6语法',
    link : 'www.jiajia.com',
    phone:'15625962976',
    QQ:'1847949884',
    go:function(){
        console.log('我游泳去公司上班');
    }
}

var {title,link:link1,...info3} = info
console.log(title);
console.log(link);
console.log(info2);

打印info2：

案例分析加深理解：

// =================场景分析 -----伪代码========================
// 模拟后台：异步查询返回用户数据 如下：
function findUsers(){
    $.get("xxxxx",function(res){
        var res = {
            pages:11,
            pageSize:10,
            pageNo:1,
            firstFlag:true,
            lastFlag:false,
            total:123,
            data:[{},{},{},{}],
        };
        // ==========================对象 ... 取值===============
        var {data:users,...pagesjon} = res;
        //等价于
        var users = res.data;
        /*var pagesjon = {
            res = {
            pages:11,
            pageSize:10,
            pageNo:1,
            firstFlag:true,
            lastFlag:false,
            total:123,
        };*/ 
    })
}

好好看，好好理解

2.8 对象融合

对象融合就是可以用传播操作...符把一个对象的所有属性和方法全部给一个新的对象

var info = {
    title : '嘉嘉学ES6语法',
    link : 'www.jiajia.com',
    phone:'15625962976',
    QQ:'1847949884',
    go:function(){
        console.log('我游泳去公司上班');
    }
}


var info3 = {
    ...info,
    wechat: '123456'
}
console.log(info3)

打印info3可以看到：

2.9 ES6数组新操作

2.9.1 数组map

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。----（ES6新语法）

map() 方法按照原始数组元素顺序依次处理元素。

注意： map() 不会对空数组进行检测。

注意： map() 不会改变原始数组。

let arr = ['1', '20', '-5', '3'];
var newarr = arr.map(value => parseInt(value) * 2);
console.log("原数组：", arr);
console.log("map的newarr数组：", newarr);

还可以用map处理对象数据

var users = [{age:10,name:'jiajia'},{age:11,name:'dating'},{age:9,name:'xiaoting'}]
var newusers = users.map(ele=>{
    ele.age += 1;
    //可以给数组对象临时增加一个属性
    ele.check = true;
    //注意这里返回的是数组对象，所以return ele.age++是不允许的，返回的是数组的属性
    return ele;
})
console.log(newusers);

注意：map() 方法和 foreach() 方法的区别：

map()会分配内存空间存储新数组并返回，forEach()不会返回数据。
forEach()允许callback更改原始数组的元素。map()返回新的数组。

2.9.2 数组reduce

let arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        // a = 1，b = 2   3
        // a = 3, b = 3   6
        // a = 6, b = 4   10
        // 以此类推
        var result = arr2.reduce((a, b) => a + b);
        console.log(result);

数组的reduce方法在实际应用中看需求使用

3. npm包管理器

3.1 简介

官方网站：https://www.npmjs.com/
NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于后端的Maven 。

3.2 使用npm init构建工程

创建项目文件夹
项目初始化 npm init（自己手动输入信息）

#建立一个空文件夹，在命令提示符进入该文件夹  执行命令初始化
npm init
#按照提示输入相关信息，如果是用默认值则直接回车即可。
#name: 项目名称
#version: 项目版本号
#description: 项目描述
#main：入口js
#keywords: {Array}关键词，便于用户搜索到我们的项目
#author: 开发者
#license: 授权协议
#最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml
#我们之后也可以根据需要进行修改。

快速生成package.json文件（一步到位）

npm init -y

3.3 npm淘宝镜像

NPM官方的管理的包都是从 http://npmjs.com下载的，但是这个网站在国内速度很慢。

这里推荐使用淘宝 NPM 镜像 http://npm.taobao.org/

淘宝 NPM 镜像是一个完整 npmjs.com 镜像，同步频率目前为 10分钟一次，以保证尽量与官方服务同步。

使用方法：(建议在npm不可用的时候再使用cnpm)

// 查看版本信息
cnpm -v
// 使用cnpm镜像安装依赖包
cnpm install jquery
#以下所有的npm命令都可以使用cnpm替代

3.4 npm install 安装依赖

模块安装的位置：项目目录\node_modules
安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本
同时package.json 文件中，依赖包会被添加到dependencies节点下，类似maven中的

#使用 npm install 安装依赖包的最新版，
npm install jquery

#同时安装多个
npm install jquery vue mysql redis

#如果安装时想指定特定的版本
npm install jquery@2.1.x

#devDependencies节点：开发时的依赖包，项目打包到生产环境的时候不包含的依赖
#使用 -D参数将依赖添加到devDependencies节点
npm install --save-dev eslint
#或
npm install -D eslint

#全局安装
#Node.js全局安装的npm包和工具的位置：用户目录\AppData\Roaming\npm\node_modules
#一些命令行工具常使用全局安装的方式
npm install -g webpack

此外，npm管理的项目在备份和传输的时候一般不携带node_modules文件夹（过于庞大）所以导入项目的时候可以直接执行 npm install 然后会根据package.json中的配置下载依赖，初始化项目

npm install #根据package.json中的配置下载依赖，初始化项目

3.5 npm其它命令

#更新包（更新到最新版本）
npm update 包名

#全局更新
npm update -g 包名

#卸载包（可同时卸载多个）
npm uninstall 包名

#全局卸载
npm uninstall -g 包名

3.6 依赖包的使用以及运行

导入模块（依赖）

// 导入模块redis
const redis = rquire('redis');
// 导入模块mysql
const mysql = rquire('mysql');

// 能成功导入的前提是要导入的模块已经使用npm命令进行安装并且存在于项目的node_modules目录中

运行

node xxx.js
#后缀.js可以省略 如下
node xxx

4. Babel

4.1 简介

ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。

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

这就意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。

4.2 Babel安装

#全局安装
npm install -g babel-cli
#全局安装  淘宝镜像
cnpm install -g babel-cli

4.3 Babel的使用

首先要确定自己是否安装了babel

babel --version

创建项目（就是新建一个文件夹）
初始化项目

npm init -y

新建一个文件夹src，然后新建一个js文件，写一段ES6语法的代码

// 转码前
// 定义数据
let input = [1, 2, 3]
// 将数组的每个元素 +1
// 下列语句中的箭头函数为ES6语法 
input = input.map(item => item + 1)
// 打印数组
console.log(input)

在项目根目录下新建一个后缀.babelrc文件，这个就是babel的配置文件

基本格式如下：

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

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

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

然后在项目中安装转码器

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

转码

# npm install --save-dev csv-loader xml-loader
# 转码结果写入一个文件
mkdir dist1
# --out-file 或 -o 参数指定输出文件
babel src/example.js --out-file dist1/compiled.js
# 或者
babel src/example.js -o dist1/compiled.js
# 整个目录转码
mkdir dist2
# --out-dir 或 -d 参数指定输出目录
babel src --out-dir dist2

# 或者（记住这个即可）
babel src -d dist2

4.4 自定义脚本

改写package.json

{
    // 其实就是一个统一集中管理命令的入口
    "scripts": {
        // 这里的build可以随意命名
        "build":  "babel src -d dist"
    },
}

执行

mkdir dist #作用是创建一个ming空目录
npm run build

5. 模块化开发

5.1 简介

随着网站逐渐变成”互联网应用程序”，嵌入网页的Javascript代码越来越庞大，越来越复杂。

Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，Javascript不是一种模块化编程语言，它不支持”类”（class），包（package）等概念，也不支持”模块”（module）。

模块化规范

CommonJS模块化规范
ES6模块化规范

说了那么多，实际上就是让js能像java一样封装一些类和方法并且可以导出使用。

5.2 CommonJS规范（使用较少）

每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

CommonJS只是在node.js中有出现，实际使用很少了解即可

关键字：

module.exports 导出
require 导入

首先新建一个文件四则运算.js文件，作为导出模块

// 以下代码使用了ES6的箭头函数语法
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
}
//如果不想另外再写导出的语句 可以使用下面的方法
exports.sum = (a,b) => a + b;

然后新建一个text.js文件，导入模块

const four = require('./四则运算');
console.log(four.sum(1,2));
console.log(four.sub(1,2));
console.log(four.mul(1,2));
console.log(four.di(1,2));

运行程序

node text.js

5.3 ES6模块化规范

关键字：

export default
import

首先新建一个ES6Api.js文件，作为导出模块

// 这种写法才是常用的 比如vue等
export default{
    getList() {
        console.log('获取数据列表');
    },
    save() {
        console.log('保存数据');
    }
}


// 以下写法不够简洁方便  不建议使用
// export function getList() {
//     console.log('获取数据列表');
// }

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

然后新建一个ES6text.js，导入模块

// import { getList,save } from "./ES6Api";
import ES6Api from './ES6Api'
ES6Api.getList();
ES6Api.save();

//默认不支持ES6的  import
//需要通过babel降级

注意：这时的程序无法运行的，因为ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5后再执行。

使用bable降级（[详细查看4.3和4.4的操作](#4.3 Babel的使用)）
运行

node ./dist/ES6text

6. webpack打包

6.1 什么是webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

6.2 webpack安装

全局安装webpack

npm install -g webpack webpack-cli

安装后查看版本号

webpack -v

6.3 wenpack的使用

创建一个webpack项目并且初始化

npm init -y

创建sec目录并且新建一个common.js文件

const info = function (str) {
    document.write(str);
}
module.exports = {
    info
}

继续在sec目录新建一个until.js文件

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

注意，common.js和until.js分别代表了commonJS模块化规范的两种不同写法，自行分辨选择

在src目录下新建一个main.js作为入口函数

// 导入until
const until = require("./until");
// 导入common
const common = require("./common");

common.info('hello world !' + until.add(100,100));

6.4 JS打包

webpack根目录下创建配置文件webpack.config.js

// node.js内置模块
const path = require("path");
module.exports = {
    // 配置入口文件
    entry:"./src/main.js",
    output:{
        // 输出路径，__dirname:当前文件所在的路径,注意dir前面是两个_
        path: path.resolve(__dirname,"./dist"),
        // 输出文件名
        filename: "bundle.js"
    }
}

以上配置的意思是：读取当前项目目录下src文件夹中的main.js（入口文件）内容，分析资源依赖，把相关的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js

命令行执行编译命令

#编译一次
webpack
#编译并且监听（一发现更改立刻重新编译）
webpack -w

也可以配置项目的npm运行命令，修改package.json文件

"scripts": {
    //...
    "dev" : "webpack -w"  //这里的dev可以根据自己的喜好命名
  }

运行npm命令执行打包

npm run dev

webpack目录下创建index.html ，引用bundle.js

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

在浏览器查看运行结果

6.5 CSS打包

安装style-loader和 css-loader

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

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

首先我们需要安装相关Loader插件

css-loader 是将 css 装载到 javascript

style-loader 是让 javascript 认识css

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

修改webpack.config.js

const path = require("path"); //Node.js内置模块
module.exports = {
    //...,
    output:{
        //其他配置
    },
    module: {
        rules: [  
            {  
                test: /\.css$/,    //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }
}

在src文件夹创建style.css

body{
    background:pink;
}

修改main.js，在第一行引入style.css

require('./style.css');

浏览器中查看index.html ，发现背景变成粉色了

6.6 小结

其实在现在很多的项目和脚手架比如vue-cli，uniapp，微信小程序已经自动集成了webpack打包工具，所以不用我们自己配置了。虽然我们在这些项目看不到webpack，但webpack无处不在，所以还是需要多加了解webpack打包的原理，有助于我们的理解。

7. 浏览项目&总结

7.2 安装学习vue-elemen-admin

地址：vue-element-admin (panjiachen.github.io)

好好学习吧嘉~

posted @ 2022-04-08 02:02 闫池阅读(63) 评论(0) 收藏举报

刷新页面返回顶部

jia-wink