learningProcess
learningProcess copied to clipboard
xxxgitone
:boom: 本仓库用于记录我的学习历程和学习笔记
所谓数组扁平化，就是将内嵌数组转换成一层数组，这里有四种方式 ```javascript // 递归 function flatten1 (arr) { let res = [] arr.forEach((item) => { if (Array.isArray(item)) { res = res.concat(flatten1(item)) } else { res.push(item) } }) return res }...
```javascript function trim(str) { return str.replace(/^\s+/, '').replace(/\s+$/, '') } const str = ' string name ' trim(str) // "string name" ``` 正则表达式这块不怎么熟悉，后面要抽时间再重点学习一下
之前做随机字符串的获取，都是先定义好一些字符串，然后在其中随机获取一些拼接起来，这样有些麻烦。今天学到一种新的获取方式 ```javascript Math.random().toString(36) // "0.p1y8abl3of" // 所以可以进行截取, 比如截取长度为5的 Math.random().toString(36).substr(2, 5) // "a0jzl" // 如果不想包含数字，可以写正则表达式 Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5) // "iggav"
```javascript event.stopImmediatePropagation() ``` 这个方法和event.stopPropagation()类似，该方法一般用于当有多个事件绑定在同一个元素的时候 如果某个元素有多个相同类型事件的事件监听函数,则当该类型的事件触发时,多个事件监听函数将按照顺序依次执行. 如果某个监听函数执行了 event.stopImmediatePropagation()方法,则除了该事件的冒泡行为被阻止之外(event.stopPropagation方法的作用),该元素绑定的后序相同类型事件的监听函数的执行也将被阻止. ```html 按钮 ``` ```javascript document.querySelector('button').addEventListener('click', function(e) { console.log('button click1') e.stopImmediatePropagation() }) document.querySelector('button').addEventListener('click', function() { console.log('button click2') }) document.querySelector('div').addEventListener('click', function() { console.log('div click') })...
最近知乎前端圈又不太平，经常见到大牛们撕逼，而我这等小白默默观看，不敢做声 你们尽管撕，但小白还得继续活，梦想还是要有的，就是成为你们这样的大牛，也能向你们这样撕逼 :joy: 前端圈浮躁，刚学这个，就有人怼这个，学那个，又有人怼那个。也好，尽情的撕把，促进自己学更多的东西 zhe Deepin de sou guo pingying you chu wen ti le, da bu liao han zi ,bu xie le :hankey:
1. 当v-for和v-if一起使用的时候，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中，可以使用如下解决方案 ```javascript {{ todo }} ``` 2. 做聊天应用，每次发完消息，消息容器自动滚动到底部，可以使用watch监听数据的变化 ```javascript watch: { messages () { this.$nextTick(() => { const { chatMessage } =...
今天又发现一种新的居中方式，给父元素加相对定位，待居中元素，使用绝对定位 ```html ``` css样式 ```css .box { width: 200px; height: 200px; border: 1px solid red; position: relative; } .box div { width: 50px; height: 50px; background: red; position: absolute; top:...
好玩的`～`(字位操作"非")运算符，之前在《你不知道的JavaScript 中卷》看到过这个运算符的介绍，不过自己在写代码的过程中几乎没有用到过，就没有很在意它。最近经常看到别人在自己的项目中用到这个运算符，于是又特意再来感受这个运算符的神奇 用的比较多的就是使用`～～`来取整 ```javascript ~~ 53.6 //53 Math.floor(53.6) // 53 ``` 上面效果和`Math.floor()`一样，但是在处理负数的时候就会有区别 ```javascript ~~ -53.6 // -53 Math.floor(-53.6) // -54 ``` 使用运算符确实简洁不少，在使用第一个`~`的时候执行ToInt32并反转字位，然后第二个`~`再进行一次字位反转，即将所有的字位反转回原值，最后得到的仍然是ToInt32的结果
继续常规学习，充实，哈哈 :collision: 任务 - [x] 三小时英语学习 - [X] 一篇博文 [一篇文章看懂_proto_和prototype的关系及区别](https://xxxgitone.github.io/2017/06/08/%E4%B8%80%E7%AF%87%E6%96%87%E7%AB%A0%E7%9C%8B%E6%87%82-proto-%E5%92%8Cprototype%E7%9A%84%E5%85%B3%E7%B3%BB%E5%8F%8A%E5%8C%BA%E5%88%AB/) - [X] vnpastime项目登录模块，信息展示 ### 知识点 在使用token做登录验证的时候，将后来发送过来的token保存在cookie、sessionStorage或者localStorage中，想要获取用户信息的时候，先拿到token，载发送给后端，进行解析token，查找用户，返回用户信息即可 可以有多种方式向后端发送token(前端axios发送请求，后端node接收并验证) * 将token放在请求头信息中 前端：axios.get('/auth/user', {headers: {token: token}}) 后端：req.headers.toke * 将token作为路径的查询参数(`http://localhost:8080/auth/user?token=`) 前端： axios.get('/auth/user', {params: {token:...
今天算是比较充实的一天，在图书馆一整天了。今天学得东西比较多 ### 完成任务 - [X] 三小时英语学习 - [X] 一篇博文 [客户端数据存储——cookie和webStorage](https://xxxgitone.github.io/2017/06/07/%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%95%B0%E6%8D%AE%E5%AD%98%E5%82%A8%E2%80%94%E2%80%94cookie%E5%92%8CwebStorage/) - [X] vnpastime项目编写，实现基于token的简单登录，还有待完善 ### 知识点 cookie和webStorage 在博文里面写了很多，这里就不再多说了。 重点总结一下`json-web-token` 传统的登录验证方法是通过session和cookie，而这次我使用的是比较火的基于token验证登录。和传统的登录验证相比，token可以达到真正无状态，而且更加安全 基于token验证的大致流程 * 客户端使用用户名跟密码请求登录 * 服务端收到请求，去验证用户名与密码 * 验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端 *...