blog
blog copied to clipboard
大前端技术为主,读书笔记、随笔、理财为辅,做个终身学习者。
![vue](https://upload-images.jianshu.io/upload_images/12890819-7820bc20092c4c40.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) **前言** 本文内容讲解的内容:**一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构**。 项目地址:[https://github.com/biaochenxuying/vue-family-mindmap](https://github.com/biaochenxuying/vue-family-mindmap) [markdown 文字版](https://github.com/biaochenxuying/vue-family-mindmap/blob/master/Vue-family.md) [pdf 版](https://github.com/biaochenxuying/vue-family-mindmap/blob/master/Vue-family.pdf) 先来张 Vue 全家桶 总图: ![](https://upload-images.jianshu.io/upload_images/12890819-f7a2788fbc61e68a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ## 1. 项目目录 ![](https://upload-images.jianshu.io/upload_images/12890819-41efc5a9eec040f8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) scripts: 构建相关的文件,一般情况下我们不需要动。 - git-hooks:存放git钩子的目录 - alias.js:别名配置 -...
## 1. 需求 如果要你实现一个前端路由,应该如何实现浏览器的前进与后退 ? ## 2. 问题 首先浏览器中主要有这几个限制,让前端不能随意的操作浏览器的浏览纪录: - 没有提供监听前进后退的事件。 - 不允许开发者读取浏览纪录,也就是 js 读取不了浏览纪录。 - 用户可以手动输入地址,或使用浏览器提供的前进后退来改变 url。 所以要实现一个自定义路由,解决方案是**自己维护一份路由历史的记录**,从而区分 前进、刷新、回退。 下面介绍具体的方法。 ## 3. 方法 目前笔者知道的方法有两种,一种是 **在数组后面进行增加与删除**,另外一种是 **利用栈的后进先出原理**。 ### 3.1 在数组最后进行...
![JavaScript 数据结构与算法之美](https://upload-images.jianshu.io/upload_images/12890819-9f08a1abed2d7caf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ## 1. 前言 > 算法为王。 **想学好前端,先练好内功,只有内功深厚者,前端之路才会走得更远**。 笔者写的 **JavaScript 数据结构与算法之美** 系列用的语言是 **JavaScript** ,旨在入门数据结构与算法和方便以后复习。 之所以把`归并排序、快速排序、希尔排序、堆排序`放在一起比较,是因为它们的平均时间复杂度都为 **O(nlogn)**。 请大家带着问题:`快排和归并用的都是分治思想,递推公式和递归代码也非常相似,那它们的区别在哪里呢 ?` 来阅读下文。 ## 2. 归并排序(Merge Sort) **思想** 排序一个数组,我们先把数组从中间分成前后两部分,然后对前后两部分分别排序,再将排好序的两部分合并在一起,这样整个数组就都有序了。 归并排序采用的是`分治思想`。 分治,顾名思义,就是分而治之,将一个大问题分解成小的子问题来解决。小的子问题解决了,大问题也就解决了。 ![merge-sort-example.png](https://upload-images.jianshu.io/upload_images/12890819-a186be41b62d6f65.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) > 注:x...
> “如果你没找到一个当你睡觉时还能挣钱的方法,你将工作到死。” ——巴菲特 ![image](http://upload-images.jianshu.io/upload_images/12890819-06ff4b26a5037481?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 上图是北京早上 8 点钟挤地铁上班的人们。不知图上有没有你的缩写。 ## 前言 **金钱是有规律的,只要掌握了一定的规律,虽说不能一夜暴富,但是把掌握的规律用于生活中,至少是可以让挣钱变得轻松一些。** 不知道他们有没有想过:**生活中,单靠增加工时获得的收入永远无法让你摆脱贫穷。用青春来换钱的交易也绝对不可取。** **绝大多数的人**,都是非常勤奋的,不然也不能坚持每天定时去上班,但又是懒惰的,从来没有想过学习掌握金钱的规律。 ## 要点 最近笔者在看作者博多·令费尔写的一篇小作《小狗钱钱》,这本《小狗钱钱》是根据作者根据他写的《财务自由之路》,把其中的方法与策略编成这么一个小故事的。《小狗钱钱》讲的是一个 11 岁的小女孩捡到一条会说人话的狗(名为 钱钱),然后钱钱教会了这个小女孩与钱打交道的方法,怎样理解钱与一步步轻松地挣钱,最后小姑娘不仅自己掌提了钱的使用方法,而且还帮助自己的父母走出了财务危机的故事。 看完这篇小作,做点笔记与写自己下看完后的一些感悟。 里面讲到一个故事: “从前有一个农家小伙儿,他每天的愿望就是从鹅笼里拣一个鹅蛋当早饭。有一天,他竟然在鹅笼里发现了一只金蛋。一开始他当然不敢相信自己的眼睛。他想,也许是有人在捉弄他。为了谨慎起见,他把金蛋拿去让金匠辨别,可是金匠向他保证说,这只蛋完完全全是金子铸成的。于是,这个农家小伙儿就卖了这只金蛋,举行了一个盛大的庆祝会。” “第二天清晨,他起了一个大早,赶到鹅笼里一看,那里果真又放着一个金蛋,这样的情况延续了好几天。可是这个农家小伙儿是一个贪婪的人,他抱怨自己的鹅,因为鹅没法向他解释是怎么下出这个蛋的,否则他也许自己就可以制造金蛋了。他还气乎乎地想,这只懒惰的鹅每天至少应该下两只金蛋。他觉得现在这样的速度太慢了。他的怒火越来越大,最后,他终于怒不可遏地把鹅揪出笼子劈成了两半。自那以后,他再也得不到金蛋了。” > 假如我没有了我的“鹅”,我就总是得为了赚钱而工作,但是一旦我有了属于自己的“鹅”,我的钱就会自动为我工作了。 > 金钱有一些秘密和规律,要想了解这些秘密和规律,前提条件是,你自己必须真的有这个愿望。 必须真的有这个愿望的意义在于,如果足够的动力,没有足够的决心去做某些事情,终究很难成事。 > 如果你只是带着试试看的心态,那么你最后只会以失败而告终,你会一事无成。尝试纯粹是一种借口,你还没有做,就已经给自己想好退路了。不能试验。你只有两个选择: **做,或者不做**。...
![JavaScript 数据结构与算法之美](https://upload-images.jianshu.io/upload_images/12890819-9f08a1abed2d7caf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ## 1. 前言 > 算法为王。 **想学好前端,先练好内功,只有内功深厚者,前端之路才会走得更远**。 笔者写的 **JavaScript 数据结构与算法之美** 系列用的语言是 **JavaScript** ,旨在入门数据结构与算法和方便以后复习。 之所以把 **计数排序、桶排序、基数排序** 放在一起比较,是因为它们的平均时间复杂度都为 **O(n)**。 因为这三个排序算法的时间复杂度是线性的,所以我们把这类排序算法叫作 **线性排序**(Linear sort)。 之所以能做到线性的时间复杂度,主要原因是,这三个算法不是基于比较的排序算法,都不涉及元素之间的比较操作。 另外,请大家带着问题来阅读下文,问题:如何根据年龄给 100 万用户排序 ? ## 2. 桶排序(Bucket Sort)...
![JavaScript 数据结构与算法之美](https://upload-images.jianshu.io/upload_images/12890819-9f08a1abed2d7caf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ## 前言 > 想写好前端,先练好内功。 栈内存与堆内存 、浅拷贝与深拷贝,可以说是前端程序员的内功,要知其然,知其所以然。 笔者写的 **JavaScript 数据结构与算法之美** 系列用的语言是 **JavaScript** ,旨在入门数据结构与算法和方便以后复习。 ## 栈 ![栈](https://upload-images.jianshu.io/upload_images/12890819-6110623f40c1ad86.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) **定义** 1. 后进者先出,先进者后出,简称 **后进先出**(LIFO),这就是典型的`栈`结构。 2. 新添加的或待删除的元素都保存在栈的末尾,称作`栈顶`,另一端就叫`栈底`。 3. 在栈里,新元素都靠近栈顶,旧元素都接近栈底。 4. 从栈的操作特性来看,是一种 `操作受限`的线性表,只允许在一端插入和删除数据。 5. 不包含任何元素的栈称为`空栈`。...
![JavaScript](https://upload-images.jianshu.io/upload_images/12890819-d3e3d25d20095b54.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) # 前言 只有深入学精一门语言,学其他语言才能更好地举一反三,触类旁听。 从接触前端开发到现在已经将近 2 年了,最近又看了阮一锋写的: [《JavaScript 语言入门教程》](https://wangdoc.com/javascript/index.html) 一书,重温 JavaScript 。 小汪将工作和面试遇到过的,没多少人知道的 JavaScript 技巧,却十分实用的技巧都总结在这里面,分享给大家 。 温故而知新,我们对技术应该有的态度是: Stay hungry ! Stay young ! # 1. 标签(label) JavaScript 语言允许,语句的前面有标签(label),相当于定位符,用于跳转到程序的任意位置,标签的格式如下。 ``` label:...
![BiaoChenXuYing](https://upload-images.jianshu.io/upload_images/12890819-80fa7517ab3f2783.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) # 前言 需求:获取当前日期的前一个月份 **当月有 31 天时,JS 日期对象 setMonth 问题** ## 1. 一般做法 当前日期如果不是 31 号, 是没问题的,是 31 号就会有问题: ``` // 比如今天是 2018-09-30 号,前一个月应该是 2018-08-30 let now = new Date(new...
![首页](https://upload-images.jianshu.io/upload_images/12890819-8420689b7238972a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) # 前言 此项目是用于构建博客网站的,由三部分组成,包含前台展示、管理后台和后端。 此项目是基于 react + node + express + ant + mongodb 的,项目已经开源,项目地址在 github 上,喜欢的,欢迎给个 star 。 **项目地址:** > [前台展示: https://github.com/biaochenxuying/blog-react](https://github.com/biaochenxuying/blog-react) > [管理后台:https://github.com/biaochenxuying/blog-react-admin](https://github.com/biaochenxuying/blog-react-admin) > [后端:https://github.com/biaochenxuying/blog-node](https://github.com/biaochenxuying/blog-node) # 1. 效果图...
![主页](https://upload-images.jianshu.io/upload_images/12890819-8420689b7238972a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) # 前言 此 blog 项目是基于 react 全家桶 + Ant Design 的,项目已经开源,项目地址在 github 上。 # 1. 效果 ![首页](https://upload-images.jianshu.io/upload_images/12890819-77a83e7ccd563d16.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 完整效果请看:[http://biaochenxuying.cn/main.html](http://biaochenxuying.cn/main.html) # 2. 功能描述 ## 2.1 已经实现功能 - [x] 登录 - [x]...