❮
❯
TOC
KINA

KINA-0

Start having fun with KINA right now!
分类 Web项目开发

JavaScript速成教程：基础语法、Vue、Ajax…

作者

本文全面介绍了JavaScript相关的前端开发知识，涉及基础语法、Vue框架、Ajax等重要内容，有助于Java Web开发者快速入门前端编程语言的使用。JavaScript的引入方式包括内部和外部脚本，基本语法强调了变量声明和数据类型。文章详细介绍了函数定义、对象操作，以及数组和字符串的处理方法，包含BOM和DOM的使用。对于Vue，讲解了核心对象创建、常用指令、生命周期、事件监听等。Ajax部分对原生XHR使用及Axios库的封装进行了说明。最后，涵盖了前端工程化及Vue-cli的使用，为开发者提供了实用的开发流程和组件管理建议。

1 JavaScript

1.1 引入方式

  1. 内部脚本：将JS代码定义在HTML页面中，可放于任何地方（一般置于<body>的底部，可改善显示速度）
<script>
    alert("Hello JavaScript");
<script>
  1. 外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中
<script src="js/demo.js"></script>

1.2 基础语法

与Java等语言类似

1.2.1 语句书写

  • 区分大小写
  • 每行结尾的分号可有可无
  • 大括号表示代码块
/* 输出语句 */
window.alert("浏览器弹出警告框"); // 浏览器弹出警告框
document.write("写入HTML，在浏览器显示");  // 写入HTML，在浏览器显示
console.log("写入浏览器控制台");  // 写入浏览器控制台

1.2.2 定义变量

  • var关键字声明变量
  • JS是弱类型语言，变量可以存放不同类型的值
  • 变量名规则
    1. 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
    2. 数字不能开头
    3. 建议使用驼峰命名
var myVariable = 2333;
myVariable = "akira37!!!";
  • let关键字声明的变量，只在let所在代码块内有效，且不允许重复声明
  • const关键字声明只读的常量

1.2.3 数据类型

使用typeof运算符获取数据类型

  • 原始类型
    1. number：数字（整数、小数、NaN Not a Number）
    2. string：字符串。单双引皆可
    3. boolean：布尔（true、false）
    4. null：对象为空（typeof null返回Object，因为null表示对象的占位符）
    5. undefined：声明的变量未初始化时的默认类型
  • 引用类型
    1. Object（对象）、Array（数组）、Function（函数）、RegExp（正则）、Date（日期）
    2. 三个基本包装类型：Boolean、Number、String
    3. 两个内置对象：Global、Math（数学计算）

1.2.4 运算符与流程控制

  • 运算符
    1. 算数运算符：+、-、*、/、%、++、--
    2. 赋值运算符：=、+=、-=、*=、/=、%=
    3. 比较运算符：>、<、>=、<=、!=、==（会进行类型转换）、===（不进行类型转换）
    4. 逻辑运算符：&&、||、!
    5. 三元运算符：条件表达式 ? true_value : false_value
  • 字符串类型转为数字：将字符串字面值转为数字，若字面值不为数字则转为NaN
  • 其他类型转为boolean：
    • Number：0和NaN为false，其他均为true
    • String：空字符串为false，其他均为true
    • Null、undefined：均为false
  • 流程控制：if ... else if ... else ...、switch、for、while、do ... while

1.3 函数

函数（方法）是执行特定任务的代码块。形参不需要类型，返回值也不需要定义类型。

函数调用可传递任意个数的参数，会从前往后按函数定义中形参的个数去选择。

/* 定义方法1 */
function functionName(arg1, arg2, ...) {
    /* codes */
}

/* 定义方法2 */
var functionName = function(arg1, arg2, ...) {
    /* codes */
}

1.4 对象

调用成员：obj.member
调用方法：obj.do()

1.4.1 Array

数组。长度可变，可以存储任意类型的数据。

/* 定义 */
var arr = new Array(1, 2, 3, 4);    // 方式1
var arr = [1, 2, 3, 4];             // 方式2

/* 访问：arr[index] = value */
arr[10] = "hello";

属性

  • length：设置或返回数组中元素的数量
/* 遍历数组中所有元素 */
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

方法

  1. forEach(func)：遍历数组中的每个有值的元素，并调用一次传入的函数
/* 使用forEach遍历数组，不会遍历undefined元素 */
arr.forEach(function(e) {
    console.log(e);
})
/* 使用箭头函数简化语法：var functionName = (arg1, arg2, ...) => { ... } */
arr.forEach((e) => {
    console.log(e);
})
  1. push(elem1, elem2, ...)：将新元素添加到数组的末尾，并返回新的长度
  2. splice(pos, len)：从数组中删除元素
arr.splice(2, 2);   // 从下标2开始，删除2个元素

1.4.2 String

字符串。单双引皆可。

/* 定义 */
var str = new String("Akira37");
var str = "Akira37";

属性

  • length：字符串的长度

方法

  1. charAt(index)：返回在指定下标位置的字符
  2. indexOf(substr)：检索字符串，返回起始字符所在的下标位置
  3. trim()：去除字符串两边的空格
  4. substring(start, end)：提取字符串中两个指定索引start、end之间（左开右闭）的字符
var substr = str.substring(1, 5);   // 截取下标1~4的子串

1.4.3 JSON

/* 自定义对象 */
var name = {
    property1: "value1",
    property2: "value2",
    ...
    functionName: function(arg1, arg2, ...) { ... },
}

var user = {
    name: "Tom",
    age: 20,
    eat() {     // 可简化
        alert("EAT!"); 
    },
}
user.name
user.eat()

JSON（JavaScript Object Notation, JavaScript对象标记法）是通过Javascript对象标记法书写的文本（本质上是字符串）。形式上类似自定义对象，但要求所有的key需用双引号引起来。

value的数据类型有：数字（整数或浮点数）、字符串（在双引号""中）、逻辑值（true或false）、数组（在方括号[]中）、对象（在花括号{}中）、null（null）

/* 定义JSON字符串 */
var jsonStr = '{"name": "Akira", "age": 2024, "addr": ["北京", "上海", "西安"]}';

JS对象与JSON字符串互相转换：parse()、stringify()

/* JSON字符串转为JS对象 */
var jsObj = JSON.parse(jsonStr);
/* JS对象转为JSON字符串 */
var jsonStr = JSON.stringify(jsObj);

1.4.4 BOM

BOM（Browser Object Model，浏览器对象模型）允许Javascript与浏览器对话，JavaScript 将浏览器的各个组成部分封装为对象。

  1. Window：浏览器窗口对象
    • 获取：直接使用（其中window.可以省略）
    • 属性
      1. history：对History对象的只读引用
      2. location：用于窗口或框架的Location对象
      3. navigator：对Navigator对象的只读引用
    • 方法
      1. alert(msg)：显示带有一段消息和一个确认按钮的警告框
      2. confirm(msg)：显示带有一段消息以及确认按钮和取消按钮的对话框，根据点击确认或取消按钮返回true或false
      3. setInterval(func, time)：按照指定的周期（单位：毫秒）来调用函数
      4. setTimeout(func, time)：在指定的毫秒数后调用一次函数
/* 弹出警告框 */
window.alert("With window");
alert("Hello BOM!");  // 可省略window

/* 弹出确认框，返回选择 */
var flag = confirm("Are you sure?");

/* 定时器 */
var cnt = 0;
setInterval(() => {
    cnt++;
    alert("定时器执行了" + cnt + "次");
}, 2000);

/* 延时器 */
setTimeout(() => {
    alert("调用了该函数");
}, 2000);
  1. Navigator：浏览器对象
  2. Screen：屏幕对象
  3. History：历史记录对象
  4. Location：地址栏对象
    • 获取：window.location（同样window.可以省略）
    • 属性
      • href：设置或返回完整的URL
location.href = "https://blog.csdn.net/Akira37";

1.4.5 DOM

DOM（Document Object Model，文档时象模型）将标记语言的各个组成部分封装为对应的对象

  • Core DOM：所有文档类型的标准模型
    1. Document：整个文档对象
    2. Element：元素对象
    3. Attribute：属性对象
    4. Text：文本对象
    5. Comment：注释对象
  • XML DOM：XML文档的标准模型
  • HTML DOM：HTML文档的标准模型
    • Image：<img>
    • Button：<input type='button'>
    • 其他标签对象……

HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。Document对象中提供了以下获取Element元素对象的函数：

  1. 根据id属性值获取，返回单个Element对象（因为id不可重复）
var id37 = document.getElementById('id37');
  1. 根据标签名称获取，返回Element对象数组
var divs = document.getElementsByTagName('div');

for (let i = 0; i < divs.length; i++) {
    var elem = divs[i];
}
  1. 根据name属性值获取，返回Element对象数组
var kiras = document.getElementsByName('kira');

for (let i = 0; i < kiras.length; i++) {
    var elem = kiras[i];
}
  1. 根据class属性值获取，返回Element对象数组
var clss = document.getElementsByClassName('cls');

for (let i = 0; i < clss.length; i++) {
    var elem = kiras[i];
}

查询参考手册获取对象的属性、方法，执行后续操作。

例：查询可知，innerHTML 属性设置或返回元素的HTML内容（内部 HTML）

/* 获取 id="iKira" 元素的 HTML 内容 */
let html = document.getElementById("iKira").innerHTML;
/* 更改 id="qsort" 元素的 HTML 内容 */
document.getElementById("qsort").innerHTML = "So <font color='red'>f-ing</font> good!";   // 可识别标签

1.5 事件监听

事件：HTML事件是发生在HTML元素上的“事情”，比如：按钮被点击、鼠标移动到元素上、按下键盘按键。
事件监听：JavaScript可以在事件被侦测到时执行代码。

事件绑定：

  1. 通过HTML标签中的事件属性（如onclick）进行绑定
<input type="button" onclick="on()" value="button1">

<script>
    function on() {
        alert("I'm clicked!!!!!");
    }
</script>
  1. 通过DOM元素属性绑定
<input type="button" id="btn" value="button1">

<script>
    document.getElementById('btn').onclick = function() {
        alert("I'm clicked!!!!!");
    }
</script>

常见事件

事件名 说明
onclick 鼠标单击事件
onblur 元素失去焦点
onfocus 元素获得焦点
onload 某个页面或图像被完成加载
onsubmit 当表单提交时触发该事件
onkeydown 某个键盘的键被按下
onmouseover 鼠标被移到某元素之上
onmouseout 鼠标从某元素移开

2 Vue

2.1 概述

Vue（官网： https://v2.cn.vuejs.org/）是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上。

  • 引入vue.js文件
<script src="js/vue.js"></script>
  • 在JS代码区域，创建Vue核心对象，定义数据模型
<script>
    new Vue({
        el: "#app",       // Vue接管区域，"#"表示id（类似css选择器）
        data: {
            message: "Hello Vue!"
        }
    });
</script>
  • 编写视图：插值表达式 {{表达式}} 内容可以是变量、三元运算符、函数调用、算术运算
<div id="app">
    <input type="text" v-model="message"> <!--Vue的双向数据绑定模型-->
    {{message}} <!--插值表达式-->
</div>

2.2 常用指令

指令：HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义。

指令 作用
v-bind 为HTML标签绑定属性值，如设置href、css样式等
v-model 在表单元素上创建双向数据绑定
v-on 为HTML标签绑定事件
v-if
v-else-if
v-else		 条件性地渲染某元素，判定为true时渲染，否则不渲染
v-show 根据条件展示某元素，区别在于切换的是display属性的值
v-for 列表渲染，遍历容器的元素或者对象的属性

2.2.1 v-bind、v-model

v-bind：为HTML标签绑定属性值，如设置href、css样式等。可省略v-bind，只保留冒号:。

<!--动态绑定数据模型-->
<div id="app">
    <a v-bind:href="url">对顶堆</a>
    <a :href="url">可省略v-bind</a>  <!--可省略v-bind-->
</div>

v-model：在表单元素上创建双向数据绑定。

<!--将url变量与文本框内容双向绑定，修改文本框内容时同步修改url-->
<div id="app">
    <input type="text" v-model="url">
</div>

通过这两种方式绑定的变量，必须在数据模型中声明。

new Vue({
    el: "#app",
    data: {
        url: "http://t.csdnimg.cn/77RW6"  // 绑定的变量
    }
})

2.2.2 v-on

v-on：为HTML标签绑定事件。可省略为@。

<!--绑定单击事件，点击按钮触发函数handle()-->
<div id="app">
    <input type="button" value="按我" v-on:click="handle()">      <!--无参数时亦可省略小括号-->
    <input type="button" value="省略" @click="handle()">      <!--只写@-->
</div>
new Vue({
    el: "#app",
    data: {
        // ...
    },
    methods: {
        handle: function() {            // 绑定的函数
            alert("I'm clicked!!!!!");
        }
    }
})

2.2.3 v-if、v-else-if、v-else、v-show

v-if、v-else-if、v-else：条件性地渲染某元素，判定为true时渲染，否则不渲染。应连用。

<!--文本框中的内容与age变量绑定，根据条件表达式渲染元素-->
<div id="app">
    年龄<input type="text" v-model="age">，经判定为：
    <span v-if="age <= 35">年轻人</span>
    <span v-else-if="age > 35 && age < 60">中年人</span>
    <span v-else>老年人</span>
</div>

v-show：根据条件展示某元素，区别在于切换的是display属性的值

<!--文本框中的内容与age变量绑定，根据条件表达式选择是否显示内容-->
<div id="app">
    年龄<input type="text" v-model="age">，经判定为：
    <span v-show="age <= 35">年轻人</span>
</div>

2.2.4 v-for

v-for：列表渲染，遍历容器的元素或者对象的属性

<!--遍历数组addrs-->
<div id="app">
    <div v-for="addr in addrs">{{addr}}</div>
    <div v-for="(addr, index) in addrs">{{index + 1}} : {{addr}}</div>    <!--可获取索引-->
</div>
new Vue({
    el: "#app",
    data: {
        addrs: ['北京', '上海', '广州', '杭州']
    }
})

2.3 生命周期

生命周期指一个对象从创建到销毁的整个过程。Vue对象的生命周期分为八个阶段，每触发一个生命周期事件，会自动执行一个生命周期方法（钩子方法）。

状态 阶段周期
beforeCreate 创建前
created 创建后
beforeMount 挂载前
mounted 挂载完成
beforeUpdate 更新前
updated 更新后
beforeDestroy 销毁前
destroyed 销毁后

主要掌握一个钩子方法即可：mounted 挂载完成，因为将来需要在mounted这个钩子方法当中来发送请求到服务端来获取数据。

new Vue({
    el: "#app",
    data: {
        // ...
    },
    mounted() {
        console.log("Vue挂载完毕，发送请求获取数据");
    },
    methods: {
        // ...
    },
})

3 Ajax

3.1 概述

Ajax（Asynchronous JavaScript And XML）：异步的JavaScript和XML

  • 作用
    • 数据交换：通过Ajax可以给服务器发送清求，并获取服务器响应的数据。
    • 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。

同步与异步

3.2 原生Ajax

  1. 准备数据地址（例如http://yapi.smart-xwork.cn/mock/169327/emp/list）
  2. 创建XMLHttpRequest对象：用于和服务器交换数据
  3. 向服务器发送请求
  4. 获取服务器响应数据
<body>
    <input type="button" value="获取数据" onclick="getData()">
    <div id="div1"></div>
</body>

<script>
    function getData() {
        //1.创建XMLHttpRequest
        var xmlHttpRequest = new XMLHttpRequest();

        //2. 发送异步请求
        xmlHttpRequest.open('GET', 'http://yapi.smartxwork.cn/mock/169327/emp/list');
        xmlHttpRequest.send():      //发送请求

        //3.获取服务响应数据
        xmlHttpRequest.onreadystatechange = function() {
            if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200)
                document.getElementByld('div1').innerHTML = xmlHttpRequest.responseText;
        }
    }
</script>

可在W3C官网内查看Ajax使用的详细规则等内容。

XMLHttpRequest 对象属性

XHR（XMLHttpRequest）代表一次异步请求。

繁杂，现基本使用封装后的版本。

3.3 Axios

Axios（官网：https://www.axios-http.cn/）对原生的Ajax进行了封装，简化书写，快速开发。

  • 引入Axios的js文件
<script src="js/axios-0.18.0.js"></script>
  • 使用Axios发送请求，并通过成功回调函数获取响应结果
/* 发起GET请求 */
function get() {
    axios ({
        method: "get",
        url: "http://yapi.smart-xwork.cn/mack/169327/emp/list?id=1&age=2024"  // GET请求在url最后附加数据
    }).then((result) => {
        console.log(result.data);
    })
}
/* 发起POST请求 */
function post() {
    axios ({
        method: "get",
        url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteByid",
        data: "id=1"      // POST请求的数据在请求体中传递，使用data属性指定
    }).then((result) => {
        console.log(result.data);
    })
}
  • 请求方式别名
    • axios.get(url [, config])
    • axios.delete(url [, config])
    • axios.post(url [, data [, config]])
    • axios.put(url [, data [, config]])
/* 简化后的GET和POST请求 */
axios.get("http://yapi.smart-xwork.cn/mack/169327/emp/list?id=1&age=2024").then((result) => {
    console.log(result.data);
});
axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteByid", "id=1").then((result) => {
    console.log(result.data);
});

3.4 案例：通过Axios获取数据并遍历展示

<!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>Ajax-Axios-案例</title>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>图像</th>
                <th>性别</th>
                <th>职位</th>
                <th>入职日期</th>
                <th>最后操作时间</th>
            </tr>

            <tr align="center" v-for="(emp, index) in emps">  <!-- 遍历展示数组，由插值表达式来输出每一项数据 -->
                <td>{{index + 1}}</td>
                <td>{{emp.name}}</td>
                <td>
                    <img :src="emp.image" width="70px" height="50px">
                </td>
                <td>
                    <span v-if="emp.gender == 1">男</span>
                    <span v-if="emp.gender == 2">女</span>
                </td>
                <td>{{emp.job}}</td>
                <td>{{emp.entrydate}}</td>
                <td>{{emp.updatetime}}</td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({   // 当加载本html页面时，会自动创建Vue对象
        el: "#app",
        data: {
            emps:[] // Vue中的数据模型
        },
        mounted () {        // Vue对象创建完毕并且挂载完成以后，会自动触发mounted钩子函数
            axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {  // 发送异步请求,加载数据
                this.emps = result.data.data;   // this代表当前Vue对象
            })
        }
    });
</script>
</html>

效果图

4 前端工程化简述

4.1 前后端分离

前后端分离开发

接口文档管理平台：YAPI

实际的前端开发

4.2 Vue脚手架：Vue-cli

Vue-cli是Vue官方提供的一个脚手架，用于快速生成Vue项目模板。提供了如下功能：统一的目录结构、本地调试、热部署（应用程序的代码变动了，但不需要再次运行就可以加载最新的程序）、单元测试、集成打包上线。
依赖环境：NodeJS

  • 创建Vue项目
    • 命令行：vue create 项目名称
    • 图形化界面：vue ui，在图形化界面中一步步创建新项目即可
  • 项目目录结构

项目目录结构

  • 修改端口号：在vue.config.js中添加devServer属性
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true;
    devServer: {
        port: 7000      // 修改端口为7000（默认为8080）
    }
})

4.3 Vue项目开发流程简述

import、export

Vue项目开发流程

Vue项目开发流程2

在data中定义数据模型，在methods中定义方法
进行Vue项目开发时，其实很少去操作index.html及main.js文件，主要操作的是一些组件文件(也就是.vue这样的文件)

4.4 Element-UI

Element（官网：https://element.eleme.cn/#/zh-CNListener）是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库（组件：组成网页的部件，例如超链接、按钮、图片、表格、表单、分页条等）

  • 安装Element组件库：在当前工程的目录下，在命令行执行指令
npm install element-ui@2.15.3
  • 引入ElementUl组件库
/* main.js */
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI)；
  • 访问官网，复制组件代码，调整。例：
<!--src/views/element/ElementView.vue-->
<template>
    <div>
        <!--button按钮-->
        <el-row>  <!--带有"el-"前缀的即为Element提供的标签-->
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
        </el-row>
</template>
...
<!--src/App.vue-->
<template>
    <div>
        <element-view></element-view>   <!--直接用文件名作为标签名（原文件名需为大驼峰）-->
    </div>
</template>

<script>
    import ElementView from './views/element/ElementView.vue' // 自动import、export
    export default {
        components: { ElementView },
        data() {
            // ...
        },
        methods: {
            // ...
        }
    }
</script>
...

Element-UI效果图

常用组件

4.5 Vue路由

前端路由：URL中的hash（#号）与组件之间的对应关系

Vue Router是Vue的官方路由

  1. VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件
  2. <router-link>：请求链接组件，浏览器会解析成<a>
  3. <router-view>：动态视图组件，用来渲染展示与路由路径对应的组件

Vue Router

  • 安装（创建Vue项目时应已选择）
npm install vue-router@3.5.1
  • 配置路由
/* src/router/index.js */
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
    {
        path: '/emp',
        name: 'emp',
        component: () => import('../views/tlias/EmpView.vue')
    },
    {
        path: '/dept',
        name: 'dept',
        component: () => import('../views/tlias/DeptView.vue')
    }
]

const router = new VueRouter({
    routes
})

export default router

发表评论