learningProcess
learningProcess copied to clipboard
xxxgitone
:boom: 本仓库用于记录我的学习历程和学习笔记
有两天没有写这个日志了，因为将学习的东西写在博客上了。今天开始抢指导老师，做毕业设计，哈哈 :joy: ### 完成任务 - [x] 三小时英语学习 - [X] 创建对象和继承的方式 - [X] 完成vnpastiem登录模块 ### 知识点 关于原型的知识在博客里面写得很清楚了 记录一下在多登录模块的使用用到的两个拦截器，一个是vue的路由拦截器，另一个是axios的，两者配合可以发挥最大威力 用户登录后，不适用拦截器的话，一些需要权限才能访问的路由照样可以通过，使用`router.beforeEach`方法 [具体代码](https://github.com/xxxgitone/vn-pastime/blob/master/src/main.js) ```javascript router.beforeEach((to, from, next) => { if (to.meta.requireAuth) { // 如果需要权限...
终于又回到学校了，在家待了几天，每天就简单的写了点代码，也没有学习其他的知识。在家还是没那个气氛，回家见了很多朋友，暑假不打算在家，所以把要见的人，要做的事都做了，回学校安安心心学习。 任务： - [ ] vnpastime播放器增加功能 今天又重新用到很久以前学习到的知识点`getBoundingClientRect()` 这个方法返回一个矩形对象，包含六个属性，除了left、top、right和bottom，还包含自身的width和height 使用一个dom对象 ```javascript const clientRect = domObj.getBoundingClientRect() clientRect.top //元素上边距离页面上边的距离 clientRect.right //元素右边距离页面左边的距离 ...... //其他类似 ``` 
平时在学习过程中，经常会get到一些小知识点，一些小技巧，但是这些知识比较杂，不足以写一篇文章去详细讲解。不记下来的话，过一段时间估计又忘了，我可是吃了不少亏，以前学过的东西，用的时候死都想不起来，看到了才记起来 :joy: 看到很多人用Issues写博客，我为啥不用它来记录我的这些知识点。想了想，干脆将它写成我的学习日志，记录我每一天的学习情况，记录我今天完成的任务，学到的知识点，希望可以借此让自己学到更多的东西 :heart: ### 今日完成的任务 - [x] 两小时的英语学习,这个真难，希望有所收货 :sob: - [X] 重温flexbox布局，写了一篇博文 - [X] 继续vn-pastime项目的编写，完成视频数据的调用，播放器样式 ### 知识点记录 **1. margin-left: auto** 今天在网上找Flexbox布局资料的时候，意外发现这个个小魔法(在我这是)，以往经常用`margin: 0 auto`，却一直没有想到过，拆分这个属性使用。使用Flex布局制作导航，有时候会想要将一个链接放到另外一边。 MENU1 MENU2 MENU3 MENU4 CONTACT css代码...
今天依旧是常规学习，没有课了，有充足的时间学习 :fire: 除了代码编写，每天花很多时间来巩固基础知识，在编写代码和逻辑处理过程中发现基础知识还有很多并不是很清楚 - [x] 三个小时英语学习 - [X] 探索`_proto_`和`prototype`之间的关系，还在总结当中 - [X] vnpastime项目编写，密码加密，个人菜单模块 今天算是加深了对原型的理解了，可以用一张图来表示  ### 密码加密 密码常见的加密的方式有md5、bcrypt、sha1，我在项目中使用的是bcrypt加密 node有一个包[bcryptjs](https://github.com/dcodeIO/bcrypt.js),安装使用即可 ```JavaScript // 加密 var bcrypt = require('bcryptjs'); var salt = bcrypt.genSaltSync(10); var...
在移动端中提倡使用`tap`事件来代替`click`事件,因为在移动端中`click`事件有300ms的延迟,会导致用户体验很不好. 移动端两次触摸会使得页面缩放,所以当用户点击一次后,会有300ms间隔时间,在此时间内没有执行第二次点击,浏览器才会执行点击事件. 很多库可以处理此问题:比如[fastclick](https://github.com/ftlabs/fastclick),[zepto](https://github.com/madrobby/zepto) 自己也可以简单封装tap事件,利用`touchstart`和`touchmove`以及`touchend`,原理也很简单,看代码一目了然 ```javascript function tap (ele, cb) { var startTime = 0 var isMove = false var maxTime = 250 ele.addEventListener('touchstart', function (e) { startTime = Date.now() isMove...
在涉及到金额的时候经常会将金额格式化，小数之前部分，会变成每三个数字一组 #### 方法一：`toLocaleString` ```javascript (12546.32).toLocaleString('en-US') //"12,546.32" ``` #### 方法二：使用正则 ```javascript function format (num) { var str = num && num.toString() var result = str.split('.') var ret = result[1] ? '.'...
数组随机排列，一般用于随机播放，图片随机展示 ```javascript // 方法一 function shuffle (arr){ for(var i = 0; i < arr.length; i++ ){ var rand = parseInt(Math.random() * arr.length); var temp = arr[rand]; arr[rand] = arr[i]; arr[i]...
文字超出时显示省略号 一行文字省略号 ```css p { width: 200px; height: 36px; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; } ``` 两行文字省略号 ```css width: 100%; height: 2.3rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;...
# 收集几种数组去重的方法 ### indeOf ```javascript var array = [1, 1, '1', 2] function unique(array) { var res = [] for (var i = 0, len = array.length; i < len;...
```javascript var url = "https://www.example.com:80/user?query#hash" var parse_url = /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/g var names = ['url', 'scheme', 'slash', 'host', 'port', 'path', 'query', 'hash'] var res = parse_url.exec(url) names.forEach(function (name, index) { console.log(name +...