- 博客(23)
- 收藏
- 关注
RSS订阅原创 @符号实现重定向至src的原理
@符号实现重定向至src的原理Webpack底层实现，实现代码如下：文件：build\webpack.base.conf.jsresolve: { // 自动补全的扩展名 extensions: ['.js', '.vue', '.json'], // 默认路径代理 // 例如 import Vue from 'vue'，会自动到 'vue/dist/vue.common.js'中寻找 alias: { '@': resolve('src'),
2021-01-26 16:20:09
183
原创 Component和PureComponent的区别
Component和PureComponent的区别几乎完全相同，但 React.PureComponent 通过props和state的浅对比来实现 shouldComponentUpate()。即是否需要重新渲染。因此，在PureComponent中如果包含比较复杂的数据结构，可能回因为深层的数据不一致而导致产生错误的否定判断。说明：如果定义了shouldComponentUpdate(),无论组件是否是PureComponent，它都会执行shouldComponentUpdate()的结果来判
2021-01-26 16:18:14
272
原创 ReactDemo-----tab标签切换按钮
tab标签切换按钮效果：点击哪个标签，哪个标签的样式发生变化核心思想：1）需要在state中保存一个当前选中的标签的id，当用户选择的标签发生变化就来改变它2）需要给标签的样式style属性绑定一个事件，用来改变它的样式3）代码：...
2020-12-16 20:57:17
366
原创 字符串-----获取字符串的最后一位
1.charAt()str.charAt(str.length-1)该方法返回指定位置的字符不传值的话返回首字符2.substr（a，b）str.substr(str.length-1,1)str.substr(str.length-1)返回在字符串中抽取从a下标开始的b个字符只穿一个参数的话，默认取到从a到最后的字符3.split（）var str = 'shxbj'var arrStr = str.split('')arrStr[arrStr.length-1] /
2020-11-28 15:14:50
3115
原创 ReactDemo-----路线小组件
1.实现效果：2.实现代码：js代码：<div className={styles.way}> { data.map((val,index)=>{ //拿到代表每一条路线的数组val // console.log(val) return ( //给每一条路线匹配一个虚拟dom， //====
2020-11-27 20:44:12
157
原创 Flex布局-----flex布局的详细用法总结
一、基本概念tips：行内元素也可以使用 Flex 布局.box{ display: inline-flex;}注意：Flex 布局以后，子元素的float、clear和vertical-align属性将失效概念：采用 Flex 布局的元素，称为 Flex 容器，简称"容器"它的所有子元素自动成为容器成员，称为 Flex 项目，简称"项目"二、容器六个属性：flex-direction: row | row-reverse | column | column-revers
2020-11-26 21:23:30
865
原创 react生命周期-----demo实现字体透明度的渐变
实现字体透明度的渐变，并且点解按钮让组件消失<!DOCTYPE html><html><head> <meta charset="UTF-8"> <!--引入react核心库--> <script type="text/javascript" src="./bulid/react.development.js"></script> <!--引入操作react操作DOM库-->
2020-11-25 21:27:18
290
原创 git-----拉取github项目到本地
拉去github项目到本地1、新建文件夹2、进入文件夹，空白处右键，选择gitbash here,键入git init会生成 .git文件3、配置本地仓库的账号邮箱git$ git config --global user.name “Your Name”$ git config --global user.email “email@example.com”4.获取github上的项目，需找到项目地址$ git clone 项目地址...
2020-11-24 09:37:47
365
原创 数组-----合并两个有序数组
总结一下合并有序数组的方法法一：let arr1 = [1,3,5,7,9,11,13]let arr2 = [2,4,6,8,10,12,14,16]function merge(arr1,arr2) { let newArr = [] while(arr1.length>0 & arr2.length>0){ let item1 = arr1.shift() let item2 = arr2.shift() if( item1>
2020-11-10 11:15:28
143
原创 数组-----输出 出现次数最多的元素和出现次数
法一：详见注释function jishu(arr) { let obj = {} arr = arr.sort() //将元素重排，使得相同元素相邻 //此时arr = [ 1,2,2,2,2,2,2,2,23,23,33,45 ] for(var i=0; i<arr.length; ){ let num = 0; for(var j=i; j<arr.length; j++){ if(arr[i]===arr[j]){
2020-11-06 09:51:32
874
原创 三角形-----用css实现
1. 用边框实现：将一个div的宽度和高度设置为0，然后设置边框样式，border都设置成50px粗，（此时显示出来的是风车状正形），然后将不需要的三个方向的颜色设置为透明transparent。将div设置了宽高，也可以实现梯形。计算机处理时，在边框交接处，一边占用一半的面积。.triangle{ width: 0; height: 0; border-top: 50px solid black; border-right: 50px solid transpa
2020-11-05 10:33:58
98
原创 数组-----for和forEach如何跳出循环
for1.break语句break语句可以跳出整个循环2. continue循环跳出当前元素，继续后面的循环forEach除了forEach()引发异常外，没有其他方法可以停止或中断循环。如果您需要这种行为，该forEach()方法是错误的工具。——引自：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach1. return效果和continue同，跳
2020-11-05 09:57:30
526
原创 数组-----扁平化（多维数组变为一维数组）
数组扁平化问题：var arr = [2, [3, 4], [5, [6,7], 8], 9, 0]输出为[2,3,4,5,6,7,8,9,0]方法1：利用for-in的遍历机制，和递归调用var newArr = []function f(arr){ for(val of arr){ // console.log(val,"val") if(typeof(val)=='number'){ newArr.push(val) // console.
2020-11-03 09:12:54
794
原创 ES6-----for循环中setimeout，var与let的区别
for (var i = 0; i < 5; i++) { setTimeout(function () { console.log(i) }, 2000) } for (let i = 0; i < 5; i++) { setTimeout(function () { console.log(i) }, 2000) }输出：5 5 5 5 51 2 3 4 5
2020-10-30 23:54:42
254
转载 函数-----箭头函数的this指向
在箭头函数中，this与封闭词法环境的this保持一致。在全局代码中，它将被设置为全局对象：var globalObject = this;var foo = (() => this);console.log(foo() === globalObject); // true注意：如果将this传递给call、bind、或者apply来调用箭头函数，它将被忽略。不过你仍然可以为调用添加参数，不过第一个参数（thisArg）应该设置为null。// 接着上面的代码// 作为对象的一个方法调用
2020-10-29 11:30:18
145
原创 ES6-----Set实现交并差集
set实现交集，并集，差集let a = new Set([1,2,3])let b = new Set([3,4,5])//并集let union = new Set([...a,...b])console.log(Array.from(union))console.log([...new Set([...a,...b])])//交集let intersection = [...a].filter(function callback(item) { return b.has(i
2020-10-29 11:11:16
115
原创 函数-----普通函数，箭头函数，回调函数的this分析
今天来总结一下this在不同情况下的this的指向问题：var name = 'window';var bar = { name: 'bar' };var foo = { name: 'foo', say: function () { console.log(this.name); }, say2: () => { console.log(this.name); }, say3: function () {
2020-10-29 09:44:31
561
原创 数组-----数组中的迭代方法（every，some，filter，map）
今天来总结一下数组中的遍历方法：every，some，map，filterevery和some先看every和some，他们是来判断整个数组的信息特点的，用来判断整个数组是否满足条件：var arr=[{ name : "terry",gender: "male"},{ name:"larry",gender: "male" },{ name :"vicky" ,gender: " female" }]let result1 = arr.some(func
2020-10-28 11:08:19
245
原创 个人学习篇（一）——“JS”
一、同源策略是一种安全策略和安全机制，用来保护用户的信息，防止恶意网站盗取信息。它限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。实现方法：1.限制接口请求：防止cookie中存储的信息第二次无需验证就被通过使用登陆成功。2.限制dom查询：防止钓鱼网站去拿别的网站的信息。二、跨域问题描述：不同域的客户端脚本在无明确授权的情况下，不能获取对方的资源，访问不同源的就是跨域。浏览器中的域名包括以下部分：协议，域名，端口，三者任何一个不同都是跨域。限制范围：也就是同源策略的限制范围
2020-10-23 15:17:17
75
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人