- 博客(53)
- 收藏
- 关注
RSS订阅原创 事件冒泡和捕获的执行顺序
<div id="div1">我是div1 <div id="div2">我是div2 <div id="div3">我是div3 <div id="div4">我是div4</div> </div> </div> </div>var div1=document.getElementById("div1");var div2=document.getElementById("di
2021-09-14 08:47:30
1398
2
原创 forEach、map、for in、 for of
var arr = [0,0,0];arr.forEach(val => val = 1);console.log(arr); // (3) [0, 0, 0]for(var i of arr){i = 1};console.log(arr); //(3) [0, 0, 0]arr.map(val =>val = 1);console.log(arr); //(3) [0, 0, 0]for(var i in arr){ arr[i] = 1};console.log(
2021-09-12 09:15:51
234
原创 形参、函数提升、变量提升实例
(function (a){ console.log(a) var a=10; console.log(a)})(100);结果： 10010(function (a){ console.log(a) var a=10;})();结果：undefined(function (a){ console.log(a) var a=10; function a(){} console.log(a)})(100);结果： ƒ a(){}10(function (a){
2021-09-11 19:47:06
269
原创 JS版剑指offer
分类链表(8道)：剑指Offer（三）：从尾到头打印链表剑指Offer（十四）：链表中倒数第k个结点剑指Offer（十五）：反转链表剑指Offer（十六）：合并两个排序的链表剑指Offer（二十五）：复杂链表的复制剑指Offer（三十六）：两个链表的第一个公共结点剑指Offer（五十五）：链表中环的入口结点剑指Offer（五十六）：删除链表中重复的结点二叉树(12道)：剑指Offer（四）：重建二叉树剑指Offer（十七）：树的子结构剑指Offer（十八）：二叉树的镜像剑指Off
2021-09-09 16:16:36
512
原创 前端面试题
code runner快捷键：ctrl+alt+n正则表达式基本的正则表达式符号 【】正则表达式的先行断言(lookahead)和后行断言(lookbehind)传递参数JS是按值传递还是按引用传递左为引用传递，右为共享传递题目：var foo={n:1};(function (foo) { console.log(foo.n); foo.n=3; var foo={n:2}; console.log(foo.n);})(foo);conso
2021-05-06 14:26:35
377
原创 js this绑定机制
this的四种绑定规则默认绑定：规则：在非严格模式下，默认绑定的this指向全局对象，严格模式下this指向undefinedfunction foo() { console.log(this.a); // this指向全局对象}var a = 2;foo(); // 2function foo2() { "use strict"; // 严格模式this绑定到undefined console.log(this.a); }foo2(); // TypeError:a unde
2021-03-02 17:11:43
281
原创 js作用域和闭包
示例一：分析：示例二：分析：结果：示例三：分析：结果：分析：分析：分析：分析：视频学习地址学习Javascript闭包（Closure）闭包，看这一篇就够了——带你看透闭包的本质，百发百中...
2021-03-01 20:04:54
144
原创 Vue硅谷外卖笔记
引擎是如何工作的？引擎很复杂，但是基本原理很简单。引擎（如果是浏览器，则引擎被嵌入在其中）读取（“解析”）脚本。然后，引擎将脚本转化（“编译”）为机器语言。然后，机器代码快速地执行。引擎会对流程中的每个阶段都进行优化。它甚至可以在编译的脚本运行时监视它，分析流经该脚本的数据，并根据获得的信息进一步优化机器代码。对 babel polyfill 的一些理解Babel学习系列4...
2021-03-01 19:30:55
913
原创 async / await
async / await使用 async / await, 搭配 promise, 可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性异步回调callback hellpromise then catch链式调用，但也是基于回调函数async/await是同步语法，彻底消灭回调函数async / await和promise的关系async / await是消灭异步回调的终极武器但和promise互不相斥，反而，两者相辅相成执行async函数，返回的是promise对
2021-02-26 10:35:16
183
转载 同步执行、异步执行、及同步中的异步执行
同步和异步 (代码执行顺序)：同步代码执行顺序优先级高于异步代码执行顺序优先级；new Promise(fn)中的fn是同步执行；process.nextTick()>Promise.then()>setTimeout>setImmediate。同步执行、异步执行、及同步中的异步执行1.JS 执行机制是单线程。2.JS的Event loop是JS的执行机制例子1console.log("1");setTimeout(()=>{console.log("2"
2021-02-24 15:55:17
679
原创 vue自定义事件
父组件使用props传递数据给子组件，子组件怎么跟父组件通信呢？这时，Vue的自定义事件就派上用场了。子组件：子组件通过$emit可以触发事件，第一个参数为要触发的事件，第二个事件为要传递的数据父组件：父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件自定义组件的 v-model修改上述子组件的代码：.sync 修饰符它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 侦听器<comp :foo.sync="bar">&
2021-02-23 09:52:34
149
原创 ES6的计算属性名语法
计算属性名在JavaScript中，我们定义属性时，有两种方式：中括号[]或.的方式：// 方法一obj.foo = true;// 方法二obj['a'+'bc'] = 123;.运算符具有很大的局限性，比如first name这种属性只能通过中括号的方式来定义。中括号的方式允许我们使用变量或者在使用标识符时会导致语法错误的字符串直接量来定义属性。例如：var person = {}, lastName = "last name";person["first name"] =
2021-02-13 16:15:47
532
2
原创 Vue-element-admin开发后台管理系统
vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。官网地址运行工程和编译工程# 克隆项目git clone https://github.com/PanJiaChen/vue-element-admin.git# 进入项目目录cd vu
2021-02-07 10:42:50
1177
转载 Webpack
什么是WebpackWebpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。Webpack安装1、全局安装npm install -g webpack webpack-cli2、安装后查看版本号webpack -v初始化项目1、创建webpack文件夹npm init -y2、创建src文
2021-02-06 10:45:10
109
原创 模块化
模块化产生的背景随着网站逐渐变成”互联网应用程序”，嵌入网页的Javascript代码越来越庞大，越来越复杂。Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，Javascript不是一种模块化编程语言，它不支持”类”（class），包（package）等概念，也不支持”模块”（module）。模块化规范CommonJS模块化规范ES6模块化规范CommonJS规范每个文件就是一个模块，有自己的作用域
2021-02-05 16:28:55
149
原创 Babel
什么是 Babel？官方的解释 Babel 是一个 JavaScript 编译器，用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前版本和旧版本的浏览器或其他环境中。通俗来讲，Babel 是 Javascript 编译器 ,将 ES6,ES7 ,ES8 转换成 浏览器都支持的ES5 语法,并提供一些插件来兼容浏览器API的工具。简单说 Babel 的工作就是：语法转换通过 Polyfill 的方式在目标环境中添加缺失的特性JS
2021-02-04 21:21:20
115
转载 git 新建分支并将代码推送到远程
场景： 在分支1上新增了代码， 现在想切换一个新的分支，并将新增的代码提交到远程分支上，步骤如下1、新建一个分支git branch 2-2、切换到2-分支上git checkout 2-3、将本地代码添加到本地缓存区git add .4、将缓存区的代码提交到本地仓库git commit -m “注释”5、将本地仓库的代码提交到远程仓库git push --set-upstream origin 2-在步骤1-5 中都可以通过git status 查看状态， git diff 对比一个
2021-01-21 11:01:34
541
1
原创 互联网是如何运作的？
互联网是如何运作的？1. 网络协议(network protocol)简称为协议，是为进行网络中的数据交换而建立的规则、标准或约定。 网络协议通过分层明确每一层的工作职责，通过定义明确的接口来协同工作，每一层都可以使用下面各层的功能，而不必担心各层是如何实现的。2. TCP/IP的体系结构TCP/IP协议族分为四层：应用层：提供特定于应用程序的协议（比如负责浏览器和网络服务器相互通信的HTTP协议、负责文件传输的FTP协议、负责电子邮件客户端检索邮件的IMAP协议）TCP传输控制层：发送数据
2021-01-08 09:58:52
2238
1
原创 Python 将数据存入mysql及导出到excel
将数据存入MySQLimport pandas as pdfrom sqlalchemy import create_engineimport os# 初始化数据库连接，使用pymysql模块engine = create_engine("mysql+pymysql://root:密码@localhost:3306/数据库名", encoding="utf-8")# 读取本地Excel文件#prefix = os.getcwd() # 获取当前路径df = pd.read_excel(
2020-12-04 16:11:16
281
转载 React-状态提升
假设我们有这样一个需求，提供两个输入框（分别属于两个组件），保证输入框里面的内容同步下面我们先来封装一个输入框组件 Inputclass Input extends React.Component { constructor(props) { super(props) // 输入框里的内容保存在组件的 state 当中 this.state = { content: '' } this.handleChange = this.han
2020-11-22 10:03:36
121
原创 微信小程序页面间传参
1、app.js中的全局变量App({ globalData:{ userInfo:xxxx }})var app = getApp();app.globalData.userInfo = res.userInfo;2、页面跳转（重定向，页面导航）时，通过URL设定查询串wx.navigateTo({ url:'/Pages/page?x=1&y=2'})onLoad(options){ options.x options.y}注意：tab页面，只能用swi
2020-11-21 21:11:46
200
原创 php文件运行遇到的问题
php手动搭建环境解决the requested operation has failed解决办法：1.更换apache的监听端口；2.停止IIS或更换IIS的监听端口；首先找到问题原因：cmd–命令端–切换到apache的bin目录，执行如下命令：httpd.exe -w -n “apache2.2” -k start；PS：apache2.2为你的apache服务名称，有的为apache，以自己的为准。can’t locate api module structure php 解决方法
2020-11-17 23:41:36
120
原创 LeetCode习题整理（js）
1. 两数之和给定一个整数数组 nums 和一个目标值 target，请你在该数组中找出和为目标值的那 两个 整数，并返回他们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素不能使用两遍。示例:给定 nums = [2, 7, 11, 15], target = 9因为 nums[0] + nums[1] = 2 + 7 = 9所以返回 [0, 1]const twoSum = (nums, target) => { const prevNums = {};
2020-10-17 20:06:17
964
转载 promise宏任务队列与微任务队列实例
EXP1: 在主线程上添加宏任务与微任务执行顺序：主线程 => 主线程上创建的微任务 => 主线程上创建的宏任务console.log('-------start--------'); setTimeout(() => { console.log('setTimeout'); // 将回调代码放入另一个宏任务队列}, 0); new Promise((resolve, reject) => { for (let i = 0; i < 5; i++) {
2020-09-28 22:13:00
500
转载 微信小程序页面间的数据传递和数据共享
方法一：利用url如下代码所示，首先在.wxml文件中找到更多按钮并绑定相应方法，接着通过data-name指定所传参数的名字，如图所传参数名为：category。<view class="movie-header"> <text class="header-title">{{categoryTitle}}</text> <text class="header-more" catchtap="onMore" data-category="
2020-09-25 09:21:32
6809
3
原创 React-后台管理系统项目实战
项目描述：模块化：模块化是一种处理复杂系统分解为更好的可管理模块的方式。每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体，完成整个系统所要求的功能。（描述项目的开发方式）组件化：实现局部某一个功能界面所有代码的集合技术选型前端路由api接口...
2020-09-19 17:13:51
5078
3
原创 Vue面试题
1.vue优点？答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；双向数据绑定：保留了angular的特点，在数据操作方面更为简单；组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；虚拟DOM：dom操作是非常耗费性能的， 不再使用原生的dom操作节点，极大解放d
2020-09-04 11:40:18
179
原创 Vue.js实现简易的搜索功能
Demo1：输入框内容改变自动搜索HTML代码<div id="app"> <input type="text" placeholder="请输入您需要查询的内容" v-model="search"> <ul> <li v-for="item in searchList">{{item}}</li> </ul></div>VUE代码new Vue({ el: "#a
2020-09-02 16:53:36
1570
原创 html+css+js基础问答
css31.标签语义化顾名思义，合理的标签干合适的事情块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot行级（display：inline）：a、span、small、strong、em、i、code、行内块（display：inline-block）：img、input区别：1.
2020-08-26 11:14:44
5195
1
原创 vue-用户登录后才操作
一、先在路由文件里修改--------router / index.js 路由中加校验直接在路由配置的时候，给路由添加一个自定义的meta对象，在meta对象中可以设置一些状态，来进行一些操作。用它来做登录校验再合适不过了 { path: "/mengxiang", name: "Mengxiang", component: Mengxiang, meta: { needLogin: true //需要加校检判断的路由 },
2020-08-09 21:57:54
621
转载 node.js中session存储的数据为undefined问题
问题：当客户端通过一个接口在服务器session中存储数据后，通过另一个接口再次访问session，打印出来的结果是undefined分析：在保证服务器代码没问题的情况下，访问不到session中的数据，原因一定是：服务器把客户端的两次访问当成两个不同的客户端。解决方案1：前端一定要解决跨域问题！这里我距离vue-cli中的跨域问题解决方案：config文件里的index.js中的proxyTable修改为：proxyTable: { '/api': { targ
2020-08-07 22:26:01
740
转载 JS十进制转二进制
原生代码主要需求：十进制转二进制，可以控制指定的位数。转化显示后的二进制数为bin-bit中输入的数字宽度。dec-number为5，bin-bit为5，则转化后数字为00101。如果bin-bit小于转化后的二进制本身位数，则使用原本的位数，如dec-number为5，bin-bit为2，依然输出101，但同时在console中报个错。一、十进制转二进制，不控制位数。<!DOCTYPE html><html><head> <meta ch
2020-08-01 08:52:00
6329
原创 CSS margin:auto
margin:auto 的填充规则margin的’auto’可不是摆设，是具有强烈的计算意味的关键字，用来计算元素对应方向应该获得的剩余间距大小。但是触发margin:auto计算有一个前提条件，就是width或height为auto时，元素是具有对应方向的自动填充特性的。（1）如果一侧定值，一侧auto，则auto为剩余空间大小。（2）如果两侧均是auto，则平分剩余空间。margin：auto为什么只能实现水平居中，不能实现垂直居中块级元素即使设置了宽度，也会占满一行是因为默认的宽度规则是
2020-07-28 21:54:48
815
原创 css可替换元素
行内元素：１．设置宽高无效２．设置margin，左右有效，上下无效；设置padding，上下左右都有效，即会撑大空间３．不能自动换行块级元素：１．能够设置宽高２．margin，paddin上下左右都有效３．可以自动换行４．多个块级元素，从上到下排列但是问题来了～<img>是行内元素，为什么它可以设置宽高？img确实是行内元素，但它同时也是“可替换元素(replaced element)”，也就是“内联可替换元素(replaced inline element)”，它.
2020-07-28 16:19:34
457
原创 Vue中使用this.$set更新页面数据
应用场景当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.$set（）这个方法了，简单来说this.$set的功能就是解决这个问题的啦。官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hi’)，vue官网是vue.set的用法实例1.vue 中写在标签的代码2.e
2020-07-25 16:50:56
2684
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人