- 博客(14)
- 收藏
- 关注
RSS订阅原创 浏览器中JS的执行机制
变量提升 先看段代码，你觉得下面这段代码输出的结果是什么？ showName() console.log(myname) var myname = '张三' function showName() { console.log('函数 showName 被执行'); } 使用过 JavaScript 开发的程序员应该都知道，JavaScript 是按顺序执行的。若按照这个逻辑来理解的话，那么： 当执行到第 1 行的时候，由于函数 showName 还没有定义，所以执行应该会报错； 同样执行第 2
2021-09-23 17:23:06
261
原创 Vue深入学习之手写一个简单的Vuex
实现一个简单的vuex 上篇文章 我们实现了一个i 拿单的vue-router，这一篇 我们趁热打铁 实现一个简单的vuex 通过vuex的官网 我们知道vuex的作用 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 关键词 集中式 状态 可预测 使用方法 import Vue from 'vue' import Vuex from '../utils/gvuex' Vue.use(Vue
2021-07-29 13:52:28
147
原创 Vue深入学习之手写一个简单的Vuerouter
参照vue-router的使用方法 // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter) import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) // 1. 定义 (路由) 组件。 // 可以从其他文件 import 进来 const Foo = { template: '<div>foo</div>' } const Bar
2021-07-18 00:42:46
104
原创 webpack 分享
webpack5.0 简介：webpack是一个基于node.js的模块打包工具 安装/卸载 初始化目录（创建一个node的包文件） npm init //npm init -y 直接跳过询问 全局安装 cnpm install webpack webpack-cli -g 查看是否安装成功 webpack -v 局部安装 cnpm install webpack webpack-cli --save-dev 查看是否安装成功 npx webpack -v 或者 ./node_modules/
2021-06-22 10:31:13
218
原创 2021-04-30
npm相关 在这里插入代码片 npm是一个包管理工具，开源作者可以把开源包发布在平台上供其他人下载使用。前端的同学基本都使用过npm，这里就不做过多介绍。日常工作中npm的主要用途就是根据项目的package.json使用npm install去安装依赖。 npm install可以说是我们使用最频繁的一个指令。在npm5版本之前,npm install会根据package.json指定的依赖版本去进行安装。但往往package.json中指定的是一个版本范围，例 “dependencies”: { “p
2021-04-30 10:10:14
72
原创 防抖和节流
一、前言 以下场景往往由于事件频繁被触发，因而频繁执行DOM操作、资源加载等重行为，导致UI停顿甚至浏览器崩溃。 window对象的resize、scroll事件 拖拽时的mousemove事件 射击游戏中的mousedown、keydown事件 文字输入、自动完成的keyup事件 实际上对于window的resize事件，实际需求大多为停止改变大小n毫秒后执行后续处理；而其他事件大多的需求是以一定的频率执行后续处理。针对这两种需求就出现了debounce和throttle两种解决办法.
2021-02-23 23:09:21
140
1
原创 This 指向问题
this指向问题 事件调用 谁触发事件，this指向谁 let content = document.getElementById('content'); let content1 = document.getElementById('content1'); let move = function(){ console.log(this) } content.onclick = move content1.onclick = move 全局环境 浏览器 :window
2021-02-21 00:49:00
79
原创 BFC/IFC
BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文"。 它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 A block formatting context contains everything inside of the element creating it that is not also inside a descendant element t
2021-01-08 20:32:44
316
1
原创 2021-01-06
CSS Grid 网格布局 网格布局（Grid）是最强大的 CSS 布局方案。 它将网页划分成网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。 上图这样的布局，就是 Grid 布局的拿手好戏 Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。 Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指
2021-01-08 19:49:02
105
原创 2020-12-30
web 安全 跨站脚本攻击XSS 简介 Cross-Site Scripting（跨站脚本攻击）简称 XSS，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如 Cookie、SessionID 等，进而危害数据安全。 原理 危害 获取页面数据 获取cookie 改变页面逻辑 发送请求 获取用户数据 获取用户登录态 分类 类型 位置 危害 存储型 URL 大 反射型 后端数据库 小 反射型 http:/
2021-01-07 19:37:10
65
原创 webpack4.0从入门到入门（02-1常用loader）
loaders webpack不能识别非js结尾的文件，loader是一种打包方案，定义不同的文件应该如何打包。 常用loader file-loader 作用：用来处理图片字体等文件 原理：将文件移动到打包后的文件夹（dist）中，并返回文件名称。 module.exports = { module: { rules: [ { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'file-loader',
2020-06-28 20:27:48
191
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人