- 博客(69)
- 收藏
- 关注
RSS订阅原创 Promise,生成器Generator,async await
Generator函数形式上，Generator函数是一个普通函数，是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。有两个特征：1.function关键字与函数名之间有一个星号。2.函数体内部使用yield表达式，定义不同的内部状态。ES6没有规定，function关键字与函数名之间的星号，写在哪个位置，都正确。yield表达式yield表达式是暂停执行的标记。yield表达式后面的表达式，只有当调用next方法，内部指针指向该语句时才会执行。yiled表达式
2020-12-09 11:31:06
297
原创 redux
纯函数函数式编程中有一个概念叫纯函数，JS符合函数式编程的范式，所有也有纯函数的概念。确定的输入，一定会产生确定的输出；函数在执行过程中，不能产生副作用；Redux的核心理念-storeRedux的核心理念-actionRedux要求通过action来更新数据；所以数据的变化，必须通过派发(dispath)action来更新；action是一个普通的JS对象，用来描述这次更新的type和content；强制action的好处是可以清晰地知道数据到底发生了什么样的变化，所有的数据变化都是可追
2020-12-07 21:37:40
163
原创 React过渡动画-8
yarn安装 yarn add react-transition-groupreact-transition-group 介绍Transition该组件是一个和平台无关的组件（不一定要结合CSS）；CSSTransitionCSSTransition 是基于Transition组件构建的；在执行的过程中有三个状态：appear,enter,exit；三种状态需要定义对应的CSS样式：开始状态，对应的类是 -appear、-enter、-exit；执行状态，对应的类是 -appear-act
2020-12-07 17:14:38
185
原创 React中的样式
在组件化中选择合适的css解决方案应该符合以下条件：1.可以编写局部css，css具备自己的作用域，不会随意污染其他组件内的元素；2.可以编写动态的css，可以获取当前组件的一些状态，根据状态的变化生成不同的css样式；3.支持所有的css特性，伪类，动画，媒体查询等；4.编写起来简洁方便，最好符合一贯的css风格特点；内联样式style接受一个采用小驼峰命名属性的JS对象，而不是CSS字符串；并且可以引用state中的状态来设置相关的样式；优点：样式之间不会有冲突；可以动态获取当前st
2020-12-07 11:27:16
265
原创 setState的使用-7
我们并不能直接通过修改state的值来让界面发生更新：因为我们修改了state之后，希望React根据最新的State来重新渲染界面，但是这种方式的修改React并不知道数据发生了变化；React并没有实现类似于Vue2中的Object.defineProperty或者Vue3中的Proxy的方式来监听数据的变化；必须通过setState的方法，来告知React数据已经发生了变化；在组件开发中，并没有实现setState的方法，为什么可以调用呢？setState方法是从Component中继承过来
2020-11-21 16:25:10
313
原创 React渲染流程，更新机制，性能优化
React渲染流程jsx->虚拟DOM->真实DOMjsx --> createElement函数 --> 这个函数帮助我们创建ReactElement对象(对象树) --> ReactDOM.render函数 --> 映射到浏览器的真实DOMReact更新流程props/state改变 -> render函数重新执行 -> 产生新的DOM树(虚拟DOM) -> 新旧DOM树进行diff -> 计算出差异进行更新 -> 更新到真实
2020-11-21 16:24:57
922
原创 选项卡,插槽效果 阶段案例-6
选项卡案例style.css.tab-control{ display: flex; line-height: 44px; text-align: center;}.tab-item{ flex: 1;}.tab-item span{ padding: 5px 8px;}.tab-item.active{ color: red;}.tab-item.active span{ border-bottom: 3px solid red; }App.jsimport
2020-11-20 20:36:09
192
原创 react脚手架-4
脚手架是什么?一种工具，帮助快速生成项目的工程化结构,将所需要的工程环境配置好。每个项目作出完成的效果不同，但是它们的基本工程化结构是相似的；间接保证项目的基本结构的一致性，方便后期的维护。Vue的脚手架：vue-cliAngular的脚手架：angular-cliReact的脚手架：create-react-app这些脚手架需要依赖什么呢？这些脚手架都是用node编写的，都是基于webpack的；所以要安装node环境。安装node下载地址 推荐LTS，是长期支持版本，比较稳定。下
2020-11-19 20:13:18
403
原创 react 阶段案例-3
结构搭建<style> table{ border:1px solid #eee; border-collapse: collapse; /* 合并边框 */ } th,td{ border:1px solid #eee; padding: 10px 16px; text-align: center; } th{ background-color: #ccc; } .count{ margin:0 5px; }<.
2020-11-18 16:12:33
127
原创 邂逅react-1
reactreact是什么？用于构建用户界面的JS库。react的起源是2013年Facebook开源的JS框架。react的特点声明式编程允许我们只需要维护自己的状态，当状态改变时，react可以根据最新的状态去渲染UI界面。UI=f(state) state改变，通过function函数重新渲染UI组件化开发如何合理的进行组件的划分（复用性）和设计是重点。多平台适配reactreact-nativereactVR开发react必须依赖三个库这三个库各司其职，目的是让每
2020-11-16 21:27:45
154
原创 解构赋值
数组的解构赋值let [a, b, c] = [1, 2, 3];从数组中提取值，按照对应位置，对变量赋值。本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。let [a, [b], d] = [1, [2, 3], 4]; // a=1,b=2,d=4如果解构不成功，变量的值就等于undefined。foo的值是undefined。let [foo] = [];l
2020-10-30 15:55:30
268
原创 数组中数字出现的次数——剑指offer 56-II
在一个数组 nums 中除一个数字只出现一次之外，其他数字都出现了三次。请找出那个只出现一次的数字。var singleNumber = function(nums) { var map={}; var arr=[]; for(var i=0;i<nums.length;i++){ if(map[nums[i]]==null){ map[nums[i]]=1; }else{ map[nums[i
2020-10-11 15:34:58
160
原创 数组中数字出现的次数——剑指offer 56-I
一个整型数组 nums 里除两个数字之外，其他数字都出现了两次。请写程序找出这两个只出现一次的数字。要求时间复杂度是O(n)，空间复杂度是O(1)。如果我们可以把所有数字分成两组，使得：两个只出现一次的数字在不同的组中；相同的数字会被分到相同的组中。那么对两个组分别进行异或操作，即可得到答案的两个数字。这是解决这个问题的关键。那么如何实现这样的分组呢？var singleNumbers = function(nums) { var tmp = 0; for(var
2020-10-11 15:25:25
183
原创 数组中出现次数超过一半的数字——剑指offer 39
数组中有一个数字出现的次数超过数组长度的一半，请找出这个数字。你可以假设数组是非空的，并且给定的数组总是存在多数元素。方法1 hash表统计法var majorityElement = function(nums) { var map={}; var len=Math.floor(nums.length/2); for(var i=0;i<nums.length;i++){ if(map[nums[i]]==null){ map[
2020-10-11 10:56:20
177
原创 0~n-1中缺失的数字——剑指offer 53-II
一个长度为n-1的递增排序数组中的所有数字都是唯一的，并且每个数字都在范围0～n-1之内。在范围0～n-1内的n个数字中有且只有一个数字不在该数组中，请找出这个数字。方法1var missingNumber = function(nums) { for(var i=0;i<=nums.length;i++){ if(i!=nums[i]) return i; }};方法2 二分法利用二分查找，整体流程是：left 指向 0，rig
2020-10-10 20:03:35
208
原创 在排序数组中查找数字 ——剑指offer 53-I
统计一个数字在排序数组中出现的次数。方法1从数组左侧向右遍历，遇到目标数字 target，停止，记录下标 left从数组右侧向左遍历，遇到目标数字 target，停止，记录下标 right如果 right 小于 left，那么说明没出现，返回 0；否则返回 right - left + 1var search = function(nums, target) { var left=0; var right=nums.length-1; if(nums.length==0)
2020-10-10 19:31:49
115
原创 顺时针打印矩阵——剑指offer29
输入一个矩阵，按照从外向里以顺时针的顺序依次打印出每一个数字。循环的条件是 top <= bottom && left <= right 。每遍历完一条边，下一条边遍历的起点被“挤占”，所以要更新相应的边界。因为要在循环过程中更新边界，所以可能出现：循环的条件在中途不再满足，即 top > bottom || left > right ，其中一对边界彼此交错了。这代表此时所有项都遍历完了，如果不马上 break，就会重复遍历，造成元素重复地进入结果数组。
2020-10-09 16:21:08
198
原创 调整数组顺序使奇数位于偶数前面——剑指offer21
输入一个整数数组，实现一个函数来调整该数组中数字的顺序，使得所有奇数位于数组的前半部分，所有偶数位于数组的后半部分。方法1var exchange = function(nums) { var arr1=[]; var arr2=[]; for(var i=0;i<nums.length;i++){ if(nums[i]%2==0){ arr1.push(nums[i]); }else{ ar
2020-10-09 11:32:37
146
原创 旋转数组中的最小数字——剑指offer11
把一个数组最开始的若干个元素搬到数组的末尾，我们称之为数组的旋转。输入一个递增排序的数组的一个旋转，输出旋转数组的最小元素。例如，数组 [3,4,5,1,2] 为 [1,2,3,4,5] 的一个旋转，该数组的最小值为1。方法1 暴力关键点：1.正常排序的情况下，最小就是第一个；2.旋转过的，则找出第一个数字小于前一个数字。从下标为0的元素开始遍历；每次进行比较，如果当前元素比相邻的下一元素大，则对应的下一个元素即为最小值；如果遍历到最后一个元素都没有出现过上述情况，则下标为0的元素为最小元素
2020-10-08 19:25:55
327
原创 二维数组中的查找——剑指offer04
在一个 n * m 的二维数组中，每一行都按照从左到右递增的顺序排序，每一列都按照从上到下递增的顺序排序。请完成一个函数，输入这样的一个二维数组和一个整数，判断数组中是否含有该整数。方法1暴力遍历var findNumberIn2DArray = function(matrix, target) { var rowLength=matrix.length; if(rowLength==0) return false; var colLength=matrix[
2020-10-08 15:51:45
183
原创 数组中重复的数字——剑指offer03
数组中重复的数字。在一个长度为 n 的数组 nums 里的所有数字都在 0～n-1 的范围内。数组中某些数字是重复的，但不知道有几个数字重复了，也不知道每个数字重复了几次。请找出数组中任意一个重复的数字。方法1哈希表的结构是：key-value，key 就是数组中的数字，value=1 代表数字出现过。整体的流程是：遍历数组中的数字，检查是否出现过，如果出现过，那么返回此数字。代码实现如下：var findRepeatNumber = function(nums) { const map
2020-10-08 14:53:40
115
原创 axios
axios功能特点:在浏览器中发送 XMLHttpRequests 请求支持 Promise API拦截请求和响应转换请求和响应数据在 node.js 中发送 http请求支持多种请求方式:axios(config)axios.request(config)axios.get(url[, config])axios.post(url[, data[, config]])axios.delete(url[, config])axios.head(url[, config])axi
2020-09-25 16:29:24
103
原创 vuex
如果想要在子组件中使用祖先组件中的数据，那么就必须一层一层的传递兄弟组件之间不能直接传递数据，如果兄弟组件之间想要传递数据，那么就必须借助父组件解决方案：使用vuex什么是vuex?vuex 是 vue配套的 公共数据管理工具，我们可以将共享的数据保存到vuex中，方便整个程序中的任何组件都可以获取和修改vuex中保存的公共数据。...
2020-09-25 16:21:21
145
原创 理解Array.prototype.slice.call(arguments)
1、基本讲解1.在js里Array是一个类 slice是此类里的一个方法 ，那么使用此方法应该Array.prototype.slice这么去用slice这方法如何使用呢?arrayObj.slice(start, [end]) 很显然是截取数组的一部分。2.我们再看callcall([thisObj[,arg1[arg2[[argN]]]]])thisObj是一个对象的方法arrg1~argN是参数那么Array.prototype.slice.call(arguments,1);这句话
2020-09-24 12:46:28
274
原创 商城webpack配置
路径相关resolve:{ extensions:['.js','.vue','.json'], // 可以省略 // 别名 alias:{ '@':resolve('src'), }}在vue.config.js中module.exports = { configureWebpack: { // 解决路径相关的东西 resolve: { alias: { components: "@/components", conte
2020-09-14 16:00:18
75
原创 C++ 电话号码的字母组合——leetcode(回溯)
首先使用哈希表存储每个数字对应的所有可能的字母，然后进行回溯操作。回溯过程中维护一个字符串，表示已有的字母排列（如果未遍历完电话号码的所有数字，则已有的字母排列是不完整的）。该字符串初始为空。每次取电话号码的一位数字，从哈希表中获得该数字对应的所有可能的字母，并将其中的一个字母插入到已有的字母排列后面，然后继续处理电话号码的后一位数字，直到处理完电话号码中的所有数字，即得到一个完整的字母排列。然后进行回退操作，遍历其余的字母排列。回溯算法用于寻找所有的可行解，如果发现一个解不可行，则会舍弃不可行的解..
2020-09-13 20:03:03
400
1
原创 vue-router
什么是vue-router和v-if/v-show一样，是用来切换组件的显示的。v-if/v-show 是标记来切换（true/false）；vue-router 是通过哈希来切换（#/xxx）,不仅能够切换组件的显示，还能在切换的时候传递参数。哈希：在url后面加上#abc,这个abc就是哈希vue-router使用1.导入import VueRouter from "vue-router";2. 安装插件Vue.use(VueRouter);3. 定义路由规则（定义切换规则）数组里
2020-09-13 15:23:52
149
原创 vue商城底部导航栏功能
底部导航栏TabBar的实现自定义TabBar组件，在APP中使用让TabBar处于底部，并设置相关样式。TabBar中显示的内容由外界决定定义插槽，flex布局平分TabBar。自定义TabBarItem，可以传入图片和文字定义props属性，存放路径link,实现路由动态跳转；定义TabBarItem，并且定义两个插槽，图片和文字；给两个插槽外层包装div,用于设置样式；填充插槽，实现底部TabBar的效果；TabBar的封装<template> <di
2020-09-13 15:15:24
701
原创 C++ 矩阵中的路径——剑指Offer（回溯）
当前处理的问题是：判断字符串str[0 … length-1]是否在matrix中匹配，显然下一次递归处理的问题是:如果str[0]已经匹配，则判断字符串str[1 … length-1]是否在matrix中匹配。首先考虑dfs()的参数是什么，返回值是什么。// i, j 表示在matrix中的位置，// pos表示当前正在匹配的字符串str的下标// 找到整个字符串str, 则返回true, 否则返回falsebool dfs(int i, int j, int pos, char *s..
2020-09-09 18:19:03
178
原创 回溯法
回溯法从根节点出发，按照深度优先遍历解空间树，搜索满足约束条件的解。在搜索至树中任一节点时，先判断该节点对应的部分解是否满足约束条件，是否超出目标函数的界，也就是判断该节点是否包含问题的（最优）解，如果肯定不包含，则跳过对以该节点为根的子树的搜索，即所谓剪枝；否则，进入以该节点为根的子树，继续按照深度优先搜索。回溯法的基本行为是搜索，搜索过程使用剪枝函数来为了避免无效的搜索。剪枝函数包括两类：使用约束函数，剪去不满足约束条件的路径；使用目标函数，剪去不能得到最优解的路径。问题的关键在于如何.
2020-09-09 16:52:08
200
原创 C/C++求字符串长度
C/C++求字符串长度strlen(str)str.length()str.size()sizeof(str)strlen(str)是用于求字符数组的长度，其参数是char*str.length()、str.size()、sizeof(str)是用于求string类对象的成员函数
2020-09-09 16:48:56
1234
原创 ajax-jquery的使用
$(function(){ $("button").click(function (ev1) { $.ajax({ type: "get", url: "ajax-jquery.php", data: { "userName": "123", "userPwd": "abc" }, timeout:3000, success: function (msg) { alert("Data Saved: " + msg); }, err
2020-08-24 23:52:38
94
原创 ajax-post的使用
只能写在open()和send()之间<script> window.onload = function(e){ var oBtn = document.querySelector("button"); oBtn.onclick = function(ev1){ // 1.创建一个异步对象 var xmlhttp; if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); }else{..
2020-08-24 22:53:32
354
原创 ajax-get的使用
1.创建一个异步对象2.设置请求方式和请求地址3.发送请求4.监听状态的变化5.处理返回的结果<script> window.onload = function(e){ var oBtn = document.querySelector("button"); oBtn.onclick = function(ev1){ // 1.创建一个异步对象 var xmlhttp; if(window.XMLHttpRequest){ xmlhttp = n.
2020-08-24 22:33:04
532
原创 post文件上传
文件上传<form action="postFile.php" method="post" enctype="multipart/form-data"> <input type="file" name="upFile" value=""><br> <input type="submit" name="" value="上传"></form><?php// print_r($_FILES);// echo "<br&
2020-08-24 17:51:20
2320
原创 get,post请求
get<form action="get.php" method="get"> <input type="text" name="userName" value=""><br> <input type="password" name="userPwd" value=""><br> <input type="submit" name="" value="提交"></form><?php//print_r
2020-08-24 16:48:52
128
原创 末尾0的个数——C语言
解题思路计算n的阶乘，n的阶乘:n！=1×2×3×…×n那么我们在计算n的阶乘时，实际上就是把所有小于等于n的正整数分解成质因数，然后再将其乘到一起，那么末尾0的个数实际上就是2* 5的个数，而2的个数明显是很多很多的，所以问题就转化成了5的个数。 而只有5的倍数才有5这个因数，所以，问题就进一步简化为小于等于n的数中有多少个数是5的倍数，当然25的倍数，125的倍数，625还要单独考虑，比如拿25来说，25=5*5 ，里面有两个5，提供两个0.代码实现#include<stdlib.h&g
2020-08-21 13:53:11
2251
原创 jQueryDOM操作相关方法——学习5
DOM操作内部插入append(content|fn) 会将元素添加到指定元素内部的最后appendTo(content)prepend(content|fn) 会将元素添加到指定元素内部的最前面prependTo(content)var $li = $("<li>新增的li</li>");$("ul").append($li);$li.appendTo("ul")$("ul").prepend($li);$li.prependTo("ul")外部插入aft
2020-08-15 17:54:32
90
原创 jQuery——QQ音乐案例
结构头部<div class="header"> <h1 class="logo"><a href="#"></a></h1> <ul class="login"> <li>登录</li> <li>设置</li> </ul></div>.header{ width: 100%; height: 45px; background: #31
2020-08-15 17:53:54
2023
原创 jQuery事件——学习4
事件click([[data],fn])blur([[data],fn])change([[data],fn])dblclick([[data],fn])error([[data],fn])focus([[data],fn])focusin([data],fn)focusout([data],fn)keydown([[data],fn])keypress([[data],fn])keyup([[data],fn])mousedown([[data],fn])mouseenter([
2020-08-08 19:17:33
107
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人