前端
半夜追风人
梦不追,不可为
展开
-
webpack5搭建vue3全家桶环境配置
1.配置文件const path=require('path')const {VueLoaderPlugin}=require('vue-loader')const HtmlWebpackPlugin=require('html-webpack-plugin')module.exports={ entry:'./src/app.js', mode:'development', devtool:'source-map', output:{ path:pa原创 2021-09-25 15:24:59 · 338 阅读 · 0 评论 -
19.js对象拷贝
直接上代码 function copy(obj){ //是对象进行递归拷贝 if (typeof obj ==='object' && obj!==null){ let Constructor=obj.constructor if (Constructor===Date){ return new Date(obj.getTime()) } if (Constructor===R原创 2021-09-24 12:15:24 · 71 阅读 · 0 评论 -
10.JS数组常用方法
第一类:修改原数组的方法:1.push:向数组末尾追加一个或多个元素2.pop:从数组末尾取出一个元素3.unshift:向数组前面添加一个或多个元素4.shift:从数组前面取出一个元素5.sort:将数组排序6.splice:截断并加入0个或多个元素第二类:不修改原数组的方法:1.slice:截取原数组,并返回2.join:以特殊符号连接数组元素,返回字符串3.find(fn):返回满足fn返回值条件的第一个元素4.findIndex(fn):返回满足fn返回值条件的第一个元素索原创 2021-09-21 21:55:46 · 61 阅读 · 0 评论 -
9.this是什么?为什么有this?以及call、apply、bind修改this
1.this是什么?答:this是执行上下文中的一个属性,在编写代码时,可以动态底让他指向我们需要的对象。2.为什么要有this?答:为了让代码更加灵活,在运行时可以让其变化指向3.执行上下文是什么?答:执行上下文可理解为 在执行某一段代码时,所生成的用于记录当前代码执行环境的对象。4.什么是执行环境?答:执行环境是代码在执行过程中某一刻计算机的状态【比如说:寄存器,cpu,内存 当前有哪些数据,状态是怎样的】5.JS执行环境有哪几种?答:1.全局上下文 2.函数上下文 3.eval上原创 2021-09-18 09:30:37 · 102 阅读 · 0 评论 -
5.JS实现简单拖拽效果
1.拖拽步骤描述:鼠标按下–>鼠标移动—>鼠标抬起(停止移动)2.实现步骤:监听鼠标在目标元素内的按下事件,按下就设置鼠标移动事 件,开始拖拽,当鼠标抬起时,取消移动事件3.代码如下://用到事件:onmousedown、onmousemove、onmouseup<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS实现简原创 2021-09-16 15:51:07 · 183 阅读 · 0 评论 -
4.Web Worker解决了什么问题?怎么使用?
1.什么是web worker?为什么会出现web worker?有什么用途?答:1.web worker是用于在浏览器里开启一个JS线程的类2. 由于浏览器中的JS线程和UI线程是互斥的,JS线程执行的时候, UI线程会阻塞等待;而JS又是单线程语言,因此当有大量计算的时候, 可能会出现页面渲染速度很慢或者卡死的情况,此时UI线程是在阻塞当中; 因此,出现了web worker,它可以开启一个不会阻塞UI渲染的JS线程, 我们就可以用它去做大量的计算,计算结果通过事件的方式传递给JS主原创 2021-09-16 12:20:37 · 441 阅读 · 0 评论 -
3.手写Promise简单功能
1.Promise有三个状态 pending待决议 fulfilled成功 rejected失败,一旦改变不能再修改2.Promise构造函数接受一个函数,参数分别未resolve、reject两个函数,用于修改状态3.有一个then方法,接受两个回调,状态变化时调用相应的函数,并返回新的promise对象4.有一个catch方法,接收一个失败回调const PENDING="pending"const FULFILLED="fulfilled"const REJECTED="rejecte原创 2021-09-11 15:48:55 · 61 阅读 · 0 评论 -
webpack 动态链接库基础配置
1.webpack.config_dll.jsconst path=require('path')const DllPlugin=require('webpack/lib/DllPlugin')module.exports={ entry:{ vendors:['jquery'] }, mode:'development', output:{ filename:'[name]webpack.config.js', pat原创 2021-08-20 16:25:51 · 209 阅读 · 0 评论 -
webpack+vue3 入口文件实例化Vue,打包后白屏,不报错
’将 import Vue from 'vue'换成import Vue from 'vue/dist/index.js'即可,原因是 前者打包时打包的是vue的runtime文件原创 2021-08-16 18:50:31 · 184 阅读 · 0 评论 -
webpack5+vue3环境搭建/附自动化脚本(一键生成)
0.本案例目录如下1.安装webpack webpack-clinpm install webpack webpack-cli --save-dev2.编写webpack.config.js配置文件const path=require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const { VueLoaderPlugin } = require('vue-loader')module.exports原创 2021-08-15 16:54:43 · 869 阅读 · 0 评论 -
webpack配置文件常用配置项
const path=require('path')const HtmlWebpackPlugin=require('html-webpack-plugin')module.exports={ //context替换路径 context:path.join(__dirname,'/src'), //入口文件地址 entry:{ detail:'./js/detail.js', index:'./js/index.js', },原创 2021-08-11 16:30:04 · 285 阅读 · 0 评论 -
涉及async、awit的浏览器事件循环
代码执行过程: 1.从上到下执行,同步代码立即执行 2.遇到宏任务丢到宏任务队列 遇到微任务丢到微任务队列 遇到async函数先执行await之前的代码 再执行await那一行的同步代码,接着跳出函数往下执行外部同步代码 3.执行完外部同步代码,回到async函数。 如果await后面执行完毕,则执行该函数内剩余的同步代码 4.扫描微任务队列 5.扫描宏任务队列 【注意点:async函数会返回一个promise】下面做两道题: //第一题:原创 2021-07-27 20:52:45 · 103 阅读 · 0 评论 -
JS ES5继承
//JS的继承//1.继承:将父类的 “特点”传给 子类,例如 方法,属性/*1.1类式继承 弊端:1.不能让父类的引用类型的资源分别赋值给子类, 导致所有子类共享父类同一资源,谁修改了都会影响全局 2.不能不能复用父类代码 3.构造父类时 父类函数调用了两次 4.不能直接用instanceof 判断 console.log(Son instanceof Father)//false */function Father(name原创 2021-06-03 10:43:52 · 86 阅读 · 0 评论 -
let obj={} 和 let obj=Object.create(null)
//Obj2比Obj1更空let obj1={};let obj2=Object.create(null);console.log(obj1);console.log(obj1.__proto__);console.log(obj2);console.log(obj2.__proto__);原创 2021-06-01 11:13:38 · 879 阅读 · 0 评论 -
部分JS作用域本质【读书有感】
JS作用域的本质:谈谈JS作用域的本质之前,先谈一下编程语言的功能是什么;编程语言的功能是什么,用来操作计算机,那么怎样操作计算机呢?无非就是让计算机按照我们的想法,去进行计算,然后得到结果;那么计算又是计算什么呢?当然是数据呀,那么数据存在哪里呢,当然是内存;因此,我将编程语言的功能理解为两部分:1.存取数据(将数据存入内存或者从内存中读出) 2.根据内存中的数据指导计算机做运算现在我们谈一下JS的作用域:上面说到:编程语言的剧本功能之一就是数据的存取,比如 var a=10,可以理解为在内原创 2021-05-31 17:53:23 · 96 阅读 · 0 评论 -
js类型转换 之 引用类型+引用类型=???
//判断下面语句的输出结果console.log({}+{});console.log([]+[])console.log({}+[])console.log(function(){}+function(){})首先淡定地来句:卧槽,怎么还有这些奇奇怪怪的操作,对象相加?没错,我也哭了!那么我们先来解析一下;先把这类题的规律丢在这儿:两个引用类型相加,会将操作数一个一个转为数字或者字符串再做加法运算;可能你会问,这怎么转?没错,我也问过,哈哈哈是这样的:js里的引用类型默认继承了Obj原创 2020-11-26 14:57:22 · 178 阅读 · 1 评论 -
前端:webpack常用插件
插件:1.什么是插件:用于扩展webpack的功能【每个插件的详细请自己去看文档】 注: loader其实也是一种插件,但它只专注于处理文件这一块 使用步骤:下载插件----->在webpack.config.js中的plugins[]中实例化----->配置插件[可选] ---->配置文件中导入require("插件名称")2.HtmlWebpackPlugin: 作用:自..原创 2020-11-16 22:55:17 · 257 阅读 · 0 评论 -
前端:带你入门Sass
1.SASS:一套利用Ruby语言编写的 最早最成熟 的 CSS预处理器 它扩展了CSS 语言,增加了 变量 混合 嵌套 函数 运算 等特性2.SASS有两种文件后缀 .sass(不需要写大括号,通过缩进来表示层级结构) 和 .scss(需要写大括号,以表示层级结构)3.sass中的变量: 3.1定义变量:$变量名:值;例如 $w:300px; 3.2使用变量: 例如:width:$w; 3.3特点:...原创 2020-11-16 15:55:41 · 203 阅读 · 0 评论 -
前端:Webpack入门
前端:webpack 基础0.ES6模块化 原生js:①export {需要暴露的数据} 和 import {需要导入的数据} from "模块路径" 【注意点:接收和暴露的名称必须一样】 注意:如果需要改变暴露数据名称 可用 import{暴露名称 as 需要名称} from '模块路径' ②export default 导出数据; import 接收数据 from '模块路径'【接收和导出名称可以不一样】 注意..原创 2020-11-16 15:53:39 · 71 阅读 · 0 评论 -
前端:Webpack常用loader
6.webpack loader 6.1默认情况下 webpack 只能对js进行打包,因为只有js有模块的概念 6.2开发过程中,我们可能会打包css 图片等文件,那么就得使用相应的loader,让这些文件也被 模块化 以便于webpack能够识别并打包7.file-loader:【注:简单拷贝的文件都可以用。例如:字体图标,只需要改变正则表达式即可】 作用:将require()或者import导入的文件 输出到目标文件夹,并将打包后 的..原创 2020-11-16 15:51:19 · 247 阅读 · 0 评论