2020年12月_火星飞鸟

原创 JavaScript中的变量提升

当执行 JS 代码时，会生成执行环境。如果代码写在函数中，会产生函数执行环境，否则就是在全局执行环境中。只有这两种执行环境。看下面一段代码：b(); // call bconsole.log(a); // undefinedvar a = 'Hello world';function b() { console.log('call b');}这是因为函数和变量提升的原因，通常提升的解释是说将声明的代码移动到了顶部。但更准确的解释是，在生成执行环境时，会有两个阶段：第一个阶段

2020-12-29 16:38:25 220 4

原创 JavaScript 实现一个sleep()延迟函数

实现效果实现一个sleep()延迟函数，例如，sleep(2000)表示等待2000毫秒，再执行后面的操作。实现过程利用Promise：const sleep = (time) => { return new Promise(resolve => setTimeout(resolve, time));}验证console.log(1);sleep(2000).then(() => { console.log(2);});console.log(3)

2020-12-20 18:22:40 1465

原创 JavaScript 实现(4).add(2).minus(1)功能

实现效果// 4+2-1=5console.log((4).add(2).minus(1)); // 5实现过程使用Number对象的prototype属性，为对象添加方法即可。Number.prototype.add = function(n) { // this为 Number {4} 实例对象 // this.valueOf()为Number {4}的基本数字值4 return this.valueOf() + n;};Number.prototype.minu

2020-12-16 12:49:05 637

原创 JavaScript 实现Array.isArray

实现效果：实现原生 JavaScript 中的Array.isArray()方法，使用如下：console.log(Array.isArray([])); // trueconsole.log(Array.isArray({})); // falseconsole.log(Array.isArray(123)); // falseconsole.log(Array.isArray('123')); // false实现过程：通过Object.prototype.toString.call()

2020-12-15 11:57:59 1995

原创 JavaScript 实现一个判断数据类型的函数

实现效果：console.log(getType(123)); // numberconsole.log(getType('string')); // stringconsole.log(getType(true)); // booleanconsole.log(getType(undefined)); // undefinedconsole.log(getType(null)); // nullconsole.log(getType({})); // objectconsole.log(ge

2020-12-14 21:28:39 1242 3

原创学习记录——Vue单文件组件

文章目录1. `Vue`单文件组件的基本用法2. `webpack`中配置`vue`组件的加载器3. 在`webpack`项目中使用`vue`4. `webpack`打包发布1. Vue单文件组件的基本用法单文件组件的组成结构：template：组件的模板区域script：业务逻辑区域style：样式区域<template> </template><script> // 这

2020-12-10 20:47:27 255

原创学习记录——Webpack的配置

1. webpack概述webpack是一个流行的前端项目构建工具（打包工具），可以解决当前web开发中所面临的困境。webpack提供了友好的模块化支持，以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能，从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。2. webpack基本使用2.1 创建列表隔行变色案例新建项目空白目录，并运行npm init –y命令，初始化包管理配置文件package.json新建src源代码目录新建src -> inde

2020-12-10 20:36:38 477

原创学习记录——前端模块化相关规范

1. ES6模块化（大一统的模块化规范）在ES6模块化规范诞生之前，Javascript社区已经尝试并提出了AMD、CMD、CommonJS等模块化规范。但是，这些社区提出的模块化标准，还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准，例如：AMD和CMD适用于浏览器端的Javascript模块化CommonJS适用于服务器端的Javascript模块化因此，ES6语法规范中，在语言层面上定义了ES6模块化规范，是浏览器端与服务器端通用的模块化开发规范。ES6模块化

2020-12-10 19:52:19 203

原创学习记录——前端路由Vue-Router

文章目录1. 路由的基本概念与原理1.1 后端路由1.2 `SPA`（`Single Page Application`）1.3 前端路由1.4 `Vue Router`2. `vue-router`的基本使用2.1 基本使用步骤（1）引入相关的库文件（2）添加路由链接（3）添加路由填充位（4）定义路由组件（5）配置路由规则并创建路由实例（6）把路由挂载到`Vue`根实例中2.2 路由重定向3. `vue-router`嵌套路由3.1 嵌套路由功能3.2 具体实现4. `vue-router`动态路由匹

2020-12-10 19:18:01 670 1

原创学习记录——async和await

async作为一个关键字放到函数前面任何一个async函数都会隐式返回一个promiseawait关键字只能在使用async定义的函数中使用await后面可以直接跟一个Promise实例对象await函数不能单独使用async/await让异步代码看起来、表现起来更像同步代码// 1. async 基础用法// 1.1 async作为一个关键字放到函数前面async function queryData() { // 1.2 await关键字只能在使用async定义的函.

2020-12-09 22:30:44 223

原创学习记录——axios

文章目录1. `axios`基本使用2. `axios`全局配置3. `axios`拦截器1. axios基本使用get和delete请求传递参数传统形式：url以?的形式传递参数restful形式：通过params形式传递参数post和put请求传递参数通过选项传递参数通过URLSearchParams传递参数 # 1. 发送get 请求 axios.get('http://localhost:3000/adata').then(function(ret){

2020-12-09 22:26:49 146

原创学习记录——Fetch

文章目录1. `fetch`基本使用2. `fetch API`中的`HTTP`请求3. `fetchAPI`中响应格式1. fetch基本使用fetch API是新的ajax解决方案，Fetch会返回Promisefetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象fetch(url, options).then() <script type="text/javascript"> /* Fetch API 基本用法

2020-12-09 22:19:36 245 1

原创学习记录——Promise

1. Promise基本使用主要解决异步深层嵌套的问题 <script type="text/javascript"> /* 1. Promise基本使用我们使用new来构建一个Promise Promise的构造函数接收一个参数，是函数，并且传入两个参数： resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数 */ var p = new Promise(functio

2020-12-09 22:12:54 151

原创学习记录——Vue的组件化开发

1. 组件注册1.2 全局注册Vue.component('组件名称', { })全局组件注册后，任何vue实例都可以用<div id="example">  <my-component></my-component></div><script> // 注册组件 // 1、 my-component 就是组件中自定义

2020-12-09 21:52:05 168

原创 JavaScript 数组方法

1. 数组变异方法变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展push()往数组最后面添加一个元素，成功返回当前数组的长度pop()删除数组的最后一个元素，成功返回删除元素的值shift()删除数组的第一个元素，成功返回删除元素的值unshift()往数组最前面添加一个元素，成功返回当前数组的长度splice()有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除后想要在原位置替换的值s

2020-12-09 21:36:19 277 1

原创学习记录——Vue常用特性

1. 表单基本操作1.1 获取单选框中的值通过v-model  <input type=

2020-12-09 21:33:26 182

原创 webpack配制自动打包报错Cannot find module ‘webpack-cli/bin/config-yargs‘

运行npm run dev提示报错：解决办法：依次输入一下命令：npm uninstall webpacknpm uninstall webpack-clinpm uninstall webpack-dev-servernpm i webpack@4.32.2 -Dnpm i webpack-cli@3.3.2 -Dnpm i webpack-dev-server@3.5.1 -D尝试运行：npm run dev成功解决！...

2020-12-09 14:24:56 322 1

原创 JavaScript 查找字符串中出现最多的字符和个数

思路：利用charAt()遍历这个字符串把每个字符都存储给对象，如果对象没有该属性，就先幅值为1，如果存在了就+1遍历对象，得到最大值和该字符在遍历的过程中，把字符串中的每个字符作为对象的属性存储在对象中，对应的属性值是该字符出现的次数代码实现：var str = 'abdgdbcaethbganmugthaesqszaphfdvwd';// 1.统计次数// 创建了一个空的对象，存储字符串中的每个字符。属性：每个字符，属性值：该字符出现的次数var obj = {};for (

2020-12-08 20:21:12 1920

原创基于vue-router的小练习——后台管理系统

1. 练习到的技术点路由的基础用法嵌套路由路由重定向路由传参编程式导航2. 实现效果3. 实现代码<!DOCTYPE html><html lang="Zh"><head> <meta charset="UTF-8" /> <title>基于vue-router的案例</title> <style> html, body, #

2020-12-08 19:49:27 558

原创 JavaScript 实现数组去重的几种方法

原始数组：[1, 1, 1, 2, 2, 3, 3]去重后数组：[ 1, 2, 3 ]1. 双重for循环function distinct(arr) { for (let i = 0, len = arr.length; i < len; i++) { for (j = i + 1; j < len; j++) { if (arr[i] === arr[j]) { arr.splice(j, 1);

2020-12-07 20:16:32 230 1

原创基于Vue组件化开发的购物车小练习

实现效果：实现代码：<!DOCTYPE html><html lang="Zh"><head> <meta charset="UTF-8"> <title>Document</title> <style> .container .cart { width: 300px; margin: auto; }

2020-12-02 19:45:26 276 1

原创 JavaScript 使用链表指针获取JSON的节点值

代码：const json = { a: { b: { c: 1 } }, d: { e: { f: { h: 2 }, g: { i: 3 } } }}// 遍历json对象的路径const path1 = ['a',

2020-12-01 20:46:18 411

原创基于Vue的增、删、改小练习——图书管理

实现效果：实现对图书的增、删、改等操作页面刷新，编号输入框自动获取鼠标焦点当点击修改按钮时，禁止修改图书的编号计算图书的总数，动态显示在页面添加或修改图书，图书名重复时，禁止提交格式化显示时间实现代码：<!DOCTYPE html><html lang="Zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w

2020-12-01 20:18:05 337

火星基地