├── .gitignore ├── README.md ├── 刷题 ├── 2017-78.md ├── 2017-9.md ├── README.md ├── leetcode │ └── 简单 │ │ └── 7.整数反转.md ├── lintcode算法 │ ├── 中等 │ │ └── 119.编辑距离算法（Edit Distance）.md │ └── 简单 │ │ └── 1.动态规划.md ├── 动态规划 │ ├── 1.js │ └── 1.md └── 算法基础 │ ├── index.html │ ├── sort.js │ └── 排序.md ├── 原创 ├── css │ ├── 伪类的几种常见操作.md │ └── 伪类的几种高端操作.md ├── git │ └── git commit自动化与规范化.md ├── 收藏 │ ├── awesome js 2017-10.md │ ├── awesome js 2017-11.md │ ├── awesome js 2017-12.md │ ├── awesome js 2017-9.md │ ├── awesome js 2018-01.md │ ├── awesome js 2018-02.md │ ├── awesome js 2018-03.md │ ├── awesome js 2018-04.md │ ├── awesome js 2018-0506.md │ ├── awesome js 2018-0910.md │ ├── awesome js 2018-11.md │ ├── awesome js 2018-12.md │ ├── awesome js 2018-7.md │ ├── awesome js 2018-8.md │ ├── awesome js 2019-01.md │ ├── awesome js 2019-0203.md │ ├── awesome js 2019-0405.md │ ├── awesome js 2020-0203.md │ ├── awesome js 2020-03.md │ ├── awesome js 2021-03.md │ ├── awesome js 2023-02.md │ ├── awesome js 2023-04.md │ ├── awesome js 2023-08.md │ └── 分类 │ │ ├── AI │ │ ├── ChatGPT.md │ │ ├── LLM.md │ │ └── 人工智能.md │ │ ├── CLI.md │ │ ├── PWA.md │ │ ├── RN.md │ │ ├── Vue相关.md │ │ ├── canvas.md │ │ ├── chrome插件.md │ │ ├── css相关.md │ │ ├── devops.md │ │ ├── docker.md │ │ ├── electron.md │ │ ├── graphql.md │ │ ├── linux.md │ │ ├── low_code.md │ │ ├── nextjs.md │ │ ├── node相关.md │ │ ├── react相关.md │ │ ├── webgl.md │ │ ├── 代码格式化.md │ │ ├── 优化.md │ │ ├── 其他工具 │ │ ├── hack.md │ │ ├── 办公.md │ │ ├── 大牛博客.md │ │ ├── 数据收藏.md │ │ ├── 文件处理.md │ │ ├── 文本处理.md │ │ ├── 有趣的开发工具.md │ │ ├── 游戏.md │ │ ├── 生涯相关.md │ │ ├── 网络相关.md │ │ ├── 聊天室.md │ │ ├── 量化.md │ │ └── 面试题.md │ │ ├── 动画.md │ │ ├── 区块链.md │ │ ├── 图形学&视觉&图像&数据可视化相关.md │ │ ├── 地理相关.md │ │ ├── 娱乐 │ │ └── 视频.md │ │ ├── 学习的文档.md │ │ ├── 建站.md │ │ ├── 微信小程序.md │ │ ├── 控件.md │ │ ├── 数据分析.md │ │ ├── 架构.md │ │ ├── 框架.md │ │ ├── 桌面.md │ │ ├── 测试.md │ │ ├── 状态管理.md │ │ ├── 编辑器.md │ │ ├── 网络通信.md │ │ ├── 脚手架相关.md │ │ ├── 视频音频.md │ │ └── 调试相关.md └── 教程 │ ├── react native │ └── react-native-linear-gradient 基础教程.md │ └── 小程序 │ └── taro初探.md ├── 学习笔记 ├── css │ ├── css实现饼图.md │ └── mix-blend-mode.md ├── es6 │ ├── ES6 TDZ.md │ ├── ES6 将类中的方法暴露给外部.md │ ├── ES6 标签模板字面量.md │ ├── ES6 正则表达式-定点标识.md │ ├── ES6 自定义迭代器.md │ ├── Symbol.md │ ├── es7 Decorator.md │ ├── generator 异步处理.md │ ├── generator生成值过程.md │ └── 自定义事件.md ├── flutter │ └── 初探flutter.md ├── js基础 │ ├── 5种继承方法.md │ ├── Promise完全详解.md │ ├── details.md │ ├── react扫码枪事件.md │ ├── this的完全详解.md │ ├── 关于对象属性你应该知道的事.md │ ├── 关于防抖和节流的区别和实现.md │ ├── 冷知识.md │ ├── 大清都亡了，你还用for...in...遍历对象呢.md │ ├── 强制类型转换.md │ └── 深度了解闭包.md ├── linux │ └── 3主机规划与磁盘分区 │ │ └── 3.2.4开机流程与主引导分区.md ├── node │ ├── In three day learn NODE - day1.md │ ├── In three day learn NODE - day2.md │ ├── In three day learn NODE - day3.md │ ├── node命令行上传阿里oss.md │ └── promise解决node端口占用问题.md ├── react-native │ ├── 使用jest测试rn组件.md │ └── 如何在react-native中实现饼图和环形图——victory-native基础教程.md ├── react │ ├── 90% Cleaner React.md │ ├── flux和redux的前世今生.md │ ├── hoc妙用.md │ ├── react diff算法详解.md │ ├── react事件系统.md │ ├── redux middleware.md │ ├── redux中间件.md │ ├── reselect.md │ └── virtual-dom.md ├── three │ ├── readme.md │ ├── threejs-basic-1.md │ ├── threejs-basic-2.md │ ├── threejs-basic-3.md │ └── threejs-basic-4.md ├── 安全 │ └── 防运营商劫持.md ├── 小程序 │ └── 小程序命令行上传代码.md ├── 布局 │ ├── viewport的理解和使用.md │ └── 圣杯布局和双飞翼布局.md ├── 思维导图 │ ├── css │ │ └── css揭秘.xmind │ └── js │ │ ├── 2019react学习路线.png │ │ ├── ES6 & Beyond.xmind │ │ ├── 掘金面试题 │ │ └── 1.xmind │ │ └── 深入react技术栈.xmind ├── 机器学习 │ └── coursea笔记 │ │ └── 1.导学：监督学习和无监督学习.md ├── 框架 │ └── taro的坑.md ├── 浏览器 │ ├── event loop宏任务、微任务.md │ └── performance与浏览器渲染.md ├── 红宝书 │ └── 自动切换焦点翻页.md └── 设计模式 │ ├── 代理.md │ ├── 单例.md │ └── 策略.md ├── 常用 ├── awesome hoc │ └── withContextMenu.js └── common.less ├── 研报 └── 202003_猪肉.md ├── 翻译 ├── README.md ├── WTF JavaScript.md ├── react refs and dom(v16.3.1).md └── react组件生命周期（v16.3.1）.md ├── 自我提升 ├── 学习方法 │ └── 单核工作法图例.webp └── 收录文章列表 │ └── 2017.md ├── 遇到的问题 ├── css-tips.md ├── flutter.md ├── git-tips.md ├── python │ └── 命令行.md ├── 常用命令行总结.md ├── 我的工具集.md ├── 汇总 │ ├── RN踩坑填坑记录.md │ ├── axios发送json后台接收不到的问题.md │ ├── eslint.md │ ├── mongodb安装.md │ ├── vim.md │ ├── xx-net.md │ └── 开发node时的tips.md └── 编辑器的一些tips.md ├── 量化 └── 收藏的库 │ └── 库.md ├── 附件 └── 各大算法复杂度图示.png └── 面试题 ├── js ├── js内存泄漏.md ├── prototype.md ├── 内部api实现.md └── 模拟bind.md ├── 其他 ├── Cookie、session和localStorage、以及sessionStorage之间的区别.md └── 页面从输入URL到展现发生了什么.md └── 目录.md /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | 原创/issue中的文章/ 3 | test/ 4 | 5 | -------------------------------------------------------------------------------- /刷题/README.md: -------------------------------------------------------------------------------- 1 | # 目录 2 | ## 2017 3 | [7~9月](https://github.com/mytac/blogs/blob/master/%E5%88%B7%E9%A2%98/2017-789.md) 4 | -------------------------------------------------------------------------------- /刷题/leetcode/简单/7.整数反转.md: -------------------------------------------------------------------------------- 1 | 6 | 今天无聊刷leetcode，居然在这道简单题上折了腰： 7 | ## 整数反转 8 | 给出一个 32 位的有符号整数，你需要将这个整数中每位上的数字进行反转。 9 | ``` 10 | 输入: 123 11 | 输出: 321 12 | 13 | 输入: -123 14 | 输出: -321 15 | 16 | 输入: 120 17 | 输出: 21 18 | ``` 19 | 20 | ## 解题思路 21 | 开始我看这不简单吗，先转字符串，然后首尾交换不就成了，然后提交后发现，有一个测试样例没通过，如下： 22 | ``` 23 | 执行结果： 24 | 解答错误 25 | 26 | 输入: 27 | 901000 28 | 输出 29 | 1009 30 | 预期结果 31 | 109 32 | ``` 33 | 然后我拿纸自己算了一遍，自己的输出没有问题，才发现题目有注意事项： 34 | >假设我们的环境只能存储得下 32 位的有符号整数，则其数值范围为 [−231, 231 − 1]。请根据这个假设，如果反转后整数溢出那么就返回 0。 -------------------------------------------------------------------------------- /刷题/lintcode算法/中等/119.编辑距离算法（Edit Distance）.md: -------------------------------------------------------------------------------- 1 | ## 题目 2 | [lintcode题目链接](http://www.lintcode.com/zh-cn/problem/edit-distance/) 3 | 4 | 给出两个单词word1和word2，计算出将word1 转换为word2的最少操作次数。 5 | 6 | 你总共三种操作方法： 7 | 8 | 插入一个字符 9 | 删除一个字符 10 | 替换一个字符 11 | ## 解析 12 | 编辑无非就是三种情况，字符的插入、删除以及编辑： 13 | 14 | 插入一个字符为进行了一次操作，如：`fat`->`fait`; 15 | 16 | 删除一个字符也视为进行一次操作，如：`haven`->`have`; 17 | 18 | 替换字符也视为进行一次操作，如：`let`->`lit`。 19 | 20 | 这个算法的原理不太好理解，但放到矩阵中实现的过程很简单，我们把两个字符串放到矩阵里进行解析，这里用到了动态规划： 21 | ``` 22 | 在相同位置上两个字符串不同:cost=1；反则为0 23 | 24 | matrix[m][n]=Math.min(matrix[m-1][n]+1,matrix[m][n-1]+1,matrix[m-1][n-1]+cost) 25 | ``` 26 | 其中`matrix[m-1][n]+1`代表删除操作，`matrix[m][n-1]+1`代表新增，`matrix[m-1][n-1]+cost`代表字符的替换，然后求出他们三个值的最小值。 27 | ### 图解 28 | 我们举个例子，看下图解： 29 | 30 | 计算`ivan1`和`ivan2`两个字符串的最小操作次数： 31 | #### 1.矩阵初始化 32 | 先构建一个首行首列都从0增长的矩阵，长度为`(s1.length+1)*(s2.length+1)`。 33 | ![矩阵初始化](https://img-blog.csdn.net/20161231203819568?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hpY2hveGlhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast) 34 | #### 2.计算最小值 35 | 之后开始对比两个字符串的每个位置，按照上一节的公式取最小值。 36 | 37 | ![计算最小值](https://img-blog.csdn.net/20161231211607676?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hpY2hveGlhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast) 38 | #### 3.类推完成，取右下角的值，即为最短编辑距离 39 | ![类推完成](https://img-blog.csdn.net/20161231211830683?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hpY2hveGlhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast) 40 | ## 代码 41 | ```js 42 | function minDistance(s1, s2) { 43 | const len1 = s1.length 44 | const len2 = s2.length 45 | 46 | let matrix = [] 47 | 48 | for (let i = 0; i <= len1; i++) { 49 | // 构造二维数组 50 | matrix[i] = new Array() 51 | for (let j = 0; j <= len2; j++) { 52 | // 初始化 53 | if (i == 0) { 54 | matrix[i][j] = j 55 | } else if (j == 0) { 56 | matrix[i][j] = i 57 | } else { 58 | // 进行最小值分析 59 | let cost = 0 60 | if (s1[i - 1] != s2[j - 1]) { // 相同为0，不同置1 61 | cost = 1 62 | } 63 | const temp = matrix[i - 1][j - 1] + cost 64 | 65 | matrix[i][j] = Math.min(matrix[i - 1][j] + 1, matrix[i][j - 1] + 1, temp) 66 | } 67 | } 68 | } 69 | return matrix[len1][len2] //返回右下角的值 70 | } 71 | 72 | minDistance('jary','jerry') // 2 73 | ``` 74 | ## 参考文档 75 | 1. [编辑距离算法（Edit Distance）](https://blog.csdn.net/chichoxian/article/details/53944188) -------------------------------------------------------------------------------- /刷题/lintcode算法/简单/1.动态规划.md: -------------------------------------------------------------------------------- 1 | ## 114. 不同的路径 2 | [题目链接](https://www.lintcode.com/problem/unique-paths/description) 3 | 有一个机器人的位于一个 m × n 个网格左上角。 4 | 5 | 机器人每一时刻只能向下或者向右移动一步。机器人试图达到网格的右下角。 6 | 7 | 问有多少条不同的路径？ 8 | ``` 9 | Example 1: 10 | Input: n = 1, m = 3 11 | Output: 1 12 | 13 | Explanation: 14 | Only one path to target position. 15 | 16 | Example 2: 17 | Input: n = 3, m = 3 18 | Output: 6 19 | 20 | Explanation: 21 | D : Down 22 | R : Right 23 | 1) DDRR 24 | 2) DRDR 25 | 3) DRRD 26 | 4) RRDD 27 | 5) RDRD 28 | 6) RDDR 29 | ``` 30 | 动态规划方程为：某个点的路径总为他上边或左边的路径之和！！ 31 | 这里要注意一维数组路径数总为1 32 | ```js 33 | const uniquePaths = function (m, n) { 34 | if (m === 0 || n === 0) return 0 35 | if (m === 1 || n === 1) return 1 36 | const arr = Array(m).fill(Array(n).fill(0)) 37 | arr[0][0] = 0 38 | arr[0][1] = 1 39 | arr[1][0] = 1 40 | const validPosition = (x, y) => { 41 | if (x < 0 || y < 0 || x >= m || y >= n) return 0 42 | return arr[x][y] 43 | } 44 | for (let i = 0; i < m; i++) { 45 | for (let j = 0; j < n; j++) { 46 | if ((i + j) < 2) { continue } 47 | arr[i][j] = validPosition(i - 1, j) + validPosition(i, j - 1) 48 | } 49 | } 50 | 51 | return arr[m - 1][n - 1] 52 | } 53 | ``` 54 | ### 254.丢鸡蛋 55 | 有 n 层高，鸡蛋若从 k 层或以上扔，就会碎。从 k 层以下扔，就不会碎。 56 | 57 | 现在给两个鸡蛋，用最少的扔的次数找到 k。返回最坏情况下次数。 58 | 59 | 样例 60 | 样例 1： 61 | 62 | 输入：100 63 | 输出：14 64 | 样例 2： 65 | 66 | 输入：10 67 | 输出：4 68 | 说明 69 | 对于 n = 10， 一种找 k 的初级方法是从 1、2 ... k 层不断找。但最坏情况下要扔 10 次。 70 | 71 | 注意有两个鸡蛋可以使用，所以可以从 4、7、9 层扔。这样最坏就只需要 4 次 (例如 k = 6 时)。 72 | 73 | [漫画：动态规划解决扔鸡蛋问题](https://blog.csdn.net/csdnsevenn/article/details/80971550) -------------------------------------------------------------------------------- /刷题/动态规划/1.js: -------------------------------------------------------------------------------- 1 | /*** 2 | * @Description: 3 | * @Author: mytac 4 | * @Date: 2020-07-13 08:22:34 5 | */ 6 | const data=[ 7 | {start:1,len:3,value:5}, 8 | {start:3,len:2,value:1}, 9 | {start:0,len:6,value:8}, 10 | {start:4,len:3,value:4}, 11 | {start:3,len:6,value:6}, 12 | {start:5,len:4,value:3}, 13 | {start:6,len:4,value:2}, 14 | {start:8,len:3,value:4}, 15 | ] 16 | 17 | // 创建prev 18 | const prev={} 19 | data.forEach((d,idx)=>{ 20 | const currentStart=d.start 21 | let currentPrev=-1 22 | for(let i=currentStart-1;i>=0;i--){ 23 | const item=data[i] 24 | if((item.start+item.len)<=currentStart){ 25 | currentPrev=i; 26 | break; 27 | } 28 | } 29 | prev[idx]=currentPrev 30 | }) 31 | 32 | 33 | console.log('prev',prev) 34 | 35 | // OPT[i]=max(data[i].value+prev[i],OPT[i-1]) 36 | const opt={} 37 | for(let i=0;i 6 | ![demo](https://wx2.sinaimg.cn/mw690/6f8e0013ly1ggp0ct5dbwj20ed096glv.jpg) 7 | 8 | 如何挣到最多的钱？ 9 | 10 | 一组数据包含任务开始时间，持续时间，和任务能挣到的钱，如何规划最优解，使我在这11个小时里获取更多的钱？ 11 | ```js 12 | const data=[ 13 | {start:1,len:3,value:5}, 14 | {start:3,len:2,value:1}, 15 | {start:0,len:6,value:8}, 16 | {start:4,len:3,value:4}, 17 | {start:3,len:6,value:6}, 18 | {start:5,len:4,value:3}, 19 | {start:6,len:4,value:2}, 20 | {start:8,len:3,value:4}, 21 | ] 22 | ``` 23 | 对于一个任务只有，选和不选两种状态，如果选择他的时候，他当前的报酬为： 24 | ```js 25 | OPT[i]=data[i].value+prev[i] 26 | ``` 27 | prev[i]为第i个任务之前可以做的**最近**任务，比如对于任务8来说，任务6、7都和时间冲突，那么`prev[8]=prev[5]` 28 | 29 | 而不选择某个任务时，那么就要选前一个任务的最优解，即： 30 | ```js 31 | OPT[i]=OPT[i-1] 32 | ``` 33 | 这时，可以列出方程为： 34 | ```js 35 | OPT[i]=max(data[i].value+OPT[prev[i]],OPT[i-1]) 36 | ``` 37 | ## 代码实现 38 | 构造prev： 39 | ```js 40 | const prev={} 41 | data.forEach((d,idx)=>{ 42 | const currentStart=d.start 43 | let currentPrev=-1 44 | for(let i=currentStart-1;i>=0;i--){ 45 | const item=data[i] 46 | if((item.start+item.len)<=currentStart){ 47 | currentPrev=i; 48 | break; 49 | } 50 | } 51 | prev[idx]=currentPrev 52 | }) 53 | 54 | // prev { '0': -1, '1': -1, '2': -1, '3': 0, '4': -1, '5': 1, '6': 2, '7': 3 } 55 | ``` 56 | 构造动态方程： 57 | ```js 58 | // OPT[i]=max(data[i].value+prev[i],OPT[i-1]) 59 | const opt={} 60 | for(let i=0;i 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /刷题/算法基础/排序.md: -------------------------------------------------------------------------------- 1 | 6 | 7 | 全文以升序为例 8 | 9 | ## 1. 快排（mid） 10 | 11 | 前后两个指针，以第一个元素为基准，后面的指针先走向前移动，一直与基准值比较，直到遇到比基准值小的数，与前面的指针进行交换；交换后前面的指针向后移动，直到遇到比基准值大的数，然后与后面的指针的值交换，之后后面的指针继续走，直到两指针相遇，基准值置于该位置，再以该位置划分为前后两段继续上面的操作。 12 | 13 | ```js 14 | const quickSort = (arr, low, high) => { 15 | if (low >= high) return; 16 | let i = low, 17 | j = high, 18 | pivot = arr[low]; 19 | while (i < j) { 20 | while (i < j && arr[j] > pivot) j--; 21 | if (i < j) arr[i++] = arr[j]; 22 | while (i < j && arr[i] < pivot) i++; 23 | if (i < j) arr[j--] = arr[i]; 24 | } 25 | arr[i] = pivot; 26 | quickSort(arr, low, i - 1); 27 | quickSort(arr, i + 1, high); 28 | }; 29 | ``` 30 | 31 | ## 2. 选择排序(low) 32 | 33 | 永远是 O(n^2)。从带排序数列中找到最小值放在已排序列的队尾 34 | 35 | ```js 36 | const ss = (arr) => { 37 | for (j = 0; j < arr.length; j++) { 38 | let min = arr[j], 39 | k = j; 40 | for (let i = j + 1; i < arr.length; i++) { 41 | if (arr[i] < min) { 42 | min = arr[i]; 43 | k = i; 44 | } 45 | } 46 | const temp = arr[j]; 47 | arr[j] = min; 48 | arr[k] = temp; 49 | } 50 | }; 51 | ``` 52 | 53 | ## 3. 归并排序 54 | 55 | ```js 56 | const ms = (arr) => { 57 | let final = null; 58 | const merge = (myArr) => { 59 | if (myArr.length < 2) return myArr; 60 | const midLen = Math.floor(myArr.length / 2); 61 | const left = merge([...myArr.slice(0, midLen)]); 62 | const right = merge([...myArr.slice(midLen)]); 63 | const res = mergeSort(left, right); 64 | return res; 65 | }; 66 | 67 | const mergeSort = (left, right) => { 68 | const res = []; 69 | while (left.length && right.length) { 70 | if (left[0] <= right[0]) { 71 | res.push(left.shift()); 72 | } else { 73 | res.push(right.shift()); 74 | } 75 | } 76 | 77 | while (left.length) { 78 | res.push(left.shift()); 79 | } 80 | while (right.length) { 81 | res.push(right.shift()); 82 | } 83 | return res; 84 | }; 85 | final = [...merge(arr)]; 86 | return final; 87 | }; 88 | ``` 89 | 90 | ## 4. 冒泡排序 91 | 92 | 就是两两对比，值大的往后排，O(n^2) 93 | 94 | ```js 95 | const bubbleSort = (arr) => { 96 | for (let i = 0; i < arr.length; i++) { 97 | let j = 0; 98 | while (j < arr.length - i) { 99 | if (arr[j] > arr[j + 1]) { 100 | const temp = arr[j + 1]; 101 | arr[j + 1] = arr[j]; 102 | arr[j] = temp; 103 | } 104 | j++; 105 | } 106 | } 107 | }; 108 | ``` 109 | 110 | ## 5. 插入排序 111 | 112 | 前面为已排序序列，后面为代排序序列，代排序插入到已排序序列的合适的位置 113 | 114 | ```js 115 | const is = (arr) => { 116 | if (arr.length < 2) return arr; 117 | for (let i = 1; i < arr.length; i++) { 118 | let j = i - 1; 119 | const current = arr[i]; 120 | while (j >= 0 && current < arr[j]) { 121 | arr[j + 1] = arr[j]; 122 | arr[j] = current; 123 | j--; 124 | } 125 | } 126 | return arr; 127 | }; 128 | ``` 129 | 130 | ## 6. 希尔排序 131 | 132 | ## 7. 堆排序 133 | 134 | 构建堆，这里是降序排的，堆顶元素比孩子大，每次堆的构建要从最小的非叶子结点开始，即（arr.length-1/2）-1。构建完毕之后，将堆顶元素与最后一个叶子节点交换（这里图方便，直接交换后弹出），然后再构建堆。。。直到所有元素都交换完毕（这里是都弹出） 135 | 136 | ```js 137 | const heapSort = (myArr) => { 138 | // 构造大顶堆 139 | const buildHeap = (arr) => { 140 | for (let i = Math.floor(arr.length / 2) - 1; i >= 0; i -= 1) { 141 | heapify(arr, i); 142 | } 143 | }; 144 | 145 | const heapify = (arr, i) => { 146 | let left = i * 2 + 1, 147 | right = i * 2 + 2, 148 | largest = i; 149 | // 注意下面typeof 这行，如果某节点有零会false。。造成包含0的用例测试不过的原因 150 | if (typeof arr[left] !== "undefined" && arr[left] > arr[largest]) { 151 | largest = left; 152 | } 153 | if (typeof arr[right] !== "undefined" && arr[right] > arr[largest]) { 154 | largest = right; 155 | } 156 | 157 | if (largest !== i) { 158 | // 改变了 159 | swap(arr, largest, i); 160 | heapify(arr, largest); 161 | } 162 | }; 163 | 164 | const swap = (arr, a, b) => { 165 | const temp = arr[a]; 166 | arr[a] = arr[b]; 167 | arr[b] = temp; 168 | }; 169 | 170 | const sort = (arr) => { 171 | const res = []; 172 | buildHeap(arr); 173 | while (arr.length) { 174 | swap(arr, 0, arr.length - 1); 175 | const item = arr.pop(); 176 | res.push(item); 177 | heapify(arr, 0); 178 | } 179 | return res; 180 | }; 181 | 182 | return sort(myArr); 183 | }; 184 | ``` 185 | -------------------------------------------------------------------------------- /原创/css/伪类的几种高端操作.md: -------------------------------------------------------------------------------- 1 | # 前言 2 | 对于伪类来说，大家都很熟悉，但通常都是用`:hover`做一些样式的更改和`:before`，`:after`也是常用在给元素添加一些东西之类。原理上都是这样的，我将在这篇文章中总结一些伪类的使用技巧。 3 | # 基础操作 4 | ## 1. 清除浮动 5 | 6 | ```html 7 |
8 | 9 |
10 | ``` 11 | 图片设置了左浮动后，由于包裹元素没有设置高度，会脱离文档流。这时就需要给图片清除浮动。 12 | 13 | ![设置了左浮动](https://s1.ax1x.com/2018/08/16/PRxXxH.png) 14 | 15 | 利用`:after`，使包裹元素中的子元素清除浮动。 16 | ```css 17 | .clear:after{ 18 | display:block; 19 | content:""; 20 | height:0; 21 | clear: both; 22 | overflow:hidden; 23 | visibility:hidden; 24 | } 25 | ``` 26 | ```html 27 |
28 | 29 |
30 | ``` 31 | ![清除浮动](https://s1.ax1x.com/2018/08/16/PRxQvd.png) 32 | ## 2. 让元素垂直居中 33 | ```html 34 |
35 | 36 |
37 | ``` 38 | ```css 39 | .wrapper{ 40 | width:300px; 41 | height:300px; 42 | background-color: pink; 43 | text-align: center; 44 | } 45 | 46 | .avatar{ 47 | vertical-align: middle; 48 | } 49 | 50 | .middle::after{ 51 | display: inline-block; 52 | width:0; 53 | height:100%; 54 | content:''; 55 | vertical-align: middle; 56 | } 57 | ``` 58 | ![demo](https://s1.ax1x.com/2018/08/16/PRzud0.png) 59 | ## 3. :hover 给盒子添加阴影 60 | ![demo](http://wx3.sinaimg.cn/mw690/0060lm7Tly1fucjddeokzg307p02gglk.gif) 61 | ```css 62 | .btn:hover{ 63 | box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); 64 | } 65 | ``` 66 | ## 4. 面包屑导航 67 | ![demo](https://s1.ax1x.com/2018/08/17/PW1a7t.png) 68 | ```html 69 | 74 | ``` 75 | ```css 76 | ul.breadcrumb{ 77 | margin: 500px 500px; 78 | list-style: none; 79 | } 80 | ul.breadcrumb li{ 81 | display: inline; 82 | } 83 | ul.breadcrumb li+li:before{ 84 | content: '/'; 85 | padding: 10px; 86 | } 87 | ``` 88 | # 高阶操作 89 | 90 | # 参考链接 91 | 1. [从青铜到王者10个css3伪类使用技巧和运用，了解一哈](https://juejin.im/post/5b6d0c5cf265da0f504a837f) 92 | 2. [:after伪类+content内容生成经典应用举例](https://www.zhangxinxu.com/wordpress/2010/09/after%E4%BC%AA%E7%B1%BBcontent%E5%86%85%E5%AE%B9%E7%94%9F%E6%88%90%E5%B8%B8%E8%A7%81%E5%BA%94%E7%94%A8%E4%B8%BE%E4%BE%8B/) -------------------------------------------------------------------------------- /原创/收藏/awesome js 2017-12.md: -------------------------------------------------------------------------------- 1 | ## 数据图表相关 2 | 1. [superstruct -- 一个简单和可组合的方式来验证Javascript中的数据](https://github.com/ianstormtaylor/superstruct) 3 | 2. [lowdb -- lowdb是一个由Lodash支持的小型本地JSON数据库（支持Node，Electron和浏览器）](https://github.com/typicode/lowdb) 4 | 3. [inmap -- inMap 是一款基于百度地图的大数据可视化库，专注于大数据方向的散点、热力图、网格、聚合等方式；让大数据可视化变得简单易用。](https://github.com/TalkingData/inmap) 5 | 6 | [官网](http://inmap.talkingdata.com/#/docs/guide/introduce) 7 | 8 | [蜂窝聚合的demo](http://inmap.talkingdata.com/#/docs/guide/HoneycombOverlay) 9 | ## 文件处理 10 | 1. [uppy -- 下一个用于Web浏览器的开源文件上传器](https://github.com/transloadit/uppy) 11 | 12 | ![demo](https://github.com/transloadit/uppy/raw/master/uppy-screenshot.jpg) 13 | ## 动画相关 14 | 1. [popmotion -- JavaScript动作引擎。创建独特的动画和补间，物理和输入跟踪交互。](https://github.com/Popmotion/popmotion) 15 | 16 | [查看官网](https://popmotion.io/) 17 | ## UI相关 18 | 1. [muuri -- 响应式，可排序，可过滤和可拖动的网格布局](https://github.com/haltu/muuri)muuri最大的特点是可拖动，优秀的示例请查看 19 | [官网](https://haltu.github.io/muuri/) 20 | 21 | ## React相关 22 | 1. [react-show -- React的无依赖显示/隐藏组件。](https://github.com/react-tools/react-show) 23 | 24 | [demo](https://codesandbox.io/s/2v66j7pm8y) 25 | 2. [react-perf-devtool -- Chrome扩展程序，用于检查React组件的性能](https://github.com/nitin42/react-perf-devtool) 26 | 3. [react-sketchapp -- 渲染React组件到Sketch](https://github.com/airbnb/react-sketchapp) 27 | 4. [beidou -- 服务器呈现的React应用程序的同构框架](https://github.com/alibaba/beidou)阿里出品----必属呃呃呃。。。 28 | 29 | ## Vue相关 30 | 1. [vue-content-placeholders -- 用于渲染虚假（渐进）内容的可组合组件，例如vue中的Facebook](https://github.com/michalsnik/vue-content-placeholders) 31 | ![demo](https://camo.githubusercontent.com/c1aad1a0b2ff76b16bade98b3a30afe708920078/68747470733a2f2f692e696d6775722e636f6d2f4a516c466a73532e676966) 32 | 2. [vue-global-events -- 将全局事件注册为组件](https://github.com/shentao/vue-global-events) 33 | 3. [bootstrap-vue -- 快速将Bootstrap 4组件与Vue.js集成的组件库](https://github.com/bootstrap-vue/bootstrap-vue) 34 | 35 | [官网](https://bootstrap-vue.js.org/) 36 | 4. [vue2-element-touzi-admin]() 37 | 38 | ## RN相关 39 | 1. [react-native-typography -- React Native 中像素完美，像原生一样的印刷风格](https://github.com/hectahertz/react-native-typography) 40 | 41 | ![DEMO](https://github.com/hectahertz/react-native-typography/raw/master/images/san-francisco-weights.png) 42 | 2. [AC-QRCode-RN -- React Native高度可定制的二维码扫描组件](https://github.com/MarnoDev/AC-QRCode-RN) 43 | ![demo](https://github.com/MarnoDev/AC-QRCode-RN/raw/master/screenshots/twitter.png) 44 | ## electron相关 45 | 1. [PicGo -- 一个简单而美丽的工具，用electron-vue构建的图片上传工具](https://github.com/Molunerfinn/PicGo) 46 | 47 | ![demo](https://ws1.sinaimg.cn/large/8700af19ly1fma907llb5j20m30ed46a) 48 | 49 | ## 架构 50 | 1. [parcel -- 快速，零配置的Web应用程序打包器](https://github.com/parcel-bundler/parcel) 51 | 2. [microbundle -- 用于小型模块的零配置打包程序。](https://github.com/developit/microbundle) 52 | 3. [DOClever -- 移动时代首选的接口管理平台 ](https://github.com/sx1989827/DOClever) 53 | 54 | [官网](http://doclever.cn/controller/index/index.html) 55 | 56 | ## 文档 57 | 1. [Docusaurus -- 易于维护开源文档网站。](https://github.com/facebook/Docusaurus) 58 | 59 | [官网](https://docusaurus.io/) 60 | 2. [i18next -- 学习一次 - 到处翻译：i18next国际化生态系统](https://github.com/i18next/i18next) 61 | 62 | ## 博客 63 | 1. [grow-to-express -- 渐进式Express学习课程，从零开始实现一个Express](https://github.com/sunkuo/grow-to-express) 64 | 2. [30-seconds-of-code -- 精心收集的有用的JavaScript代码片段，你可以在30秒或更少的时间内理解。](https://github.com/Chalarangelo/30-seconds-of-code) 65 | ## 小程序相关 66 | 1. [wepy -- 小程序组件化开发框架](https://github.com/Tencent/wepy) 67 | 68 | [官网](https://tencent.github.io/wepy/) 69 | ## funny stuff 70 | 1. [learn-anything -- 搜索互动地图学习任何东西](https://github.com/learn-anything/learn-anything) 71 | [官网](https://learn-anything.xyz/)最大的特点是帮你建立每个知识点的相互关联，查看下图 72 | ![demo](https://s1.ax1x.com/2017/12/11/HlpLR.gif) 73 | 2. [array-explorer -- 帮助在任何时候最好的数组方法](https://github.com/sdras/array-explorer) 74 | [官方示例](https://sdras.github.io/array-explorer/) -------------------------------------------------------------------------------- /原创/收藏/awesome js 2018-01.md: -------------------------------------------------------------------------------- 1 | ## 框架 2 | 1. [hyperapp -- 1 KB用于构建Web应用程序的JavaScript库。](https://github.com/hyperapp/hyperapp)他的特点是轻量和开箱即用，它将状态管理与支持密钥更新和生命周期事件的VDOM引擎相结合，所有这些都不依赖于任何依赖关系。 3 | 4 | ## 脚手架相关 5 | 1. [jarvis -- 一个非常智能的基于浏览器的Webpack仪表板](https://github.com/zouhir/jarvis)它的主要特点是可以查看在12种不同的网络制式中你的项目的表现情况。 6 | ![demo](https://github.com/zouhir/jarvis/raw/master/.github/screenshot.png?raw=true) 7 | 8 | ## 网络通信 9 | 1.[greenlet -- 移动一个异步函数到自己的线程。](https://github.com/developit/greenlet)他的原理是接受一个异步函数，生成一个在Web Worker中运行的副本。 10 | 11 | 示例： 12 | ```js 13 | import greenlet from 'greenlet' 14 | 15 | let get = greenlet(async url => { 16 | let res = await fetch(url) 17 | return await res.json() 18 | }) 19 | 20 | console.log(await get('/foo')) 21 | ``` 22 | 2. [sockette -- 最可爱的小WebSocket包装！](https://github.com/lukeed/sockette)Sockette是一个很小的（319字节）WebSocket封装，如果连接丢失，它将自动重新连接！ 23 | 24 | ## 编辑器 25 | 1. [tui.editor -- Markdown所见即所得的编辑器。图表和UML在markdown语法。](https://github.com/nhnent/tui.editor) 26 | ![demo](https://user-images.githubusercontent.com/1215767/34353629-95b58da0-ea6c-11e7-859b-df5e990dd157.png) 27 | 28 | ## react相关 29 | 1. [react-sortable-hoc -- 触摸有好、可排序的列表](https://github.com/clauderic/react-sortable-hoc) 30 | 2. [after.js -- 类似Next.js，使用React Router 4构建的ssr React应用程序的框架](https://github.com/jaredpalmer/after.js) 31 | 32 | ## node相关 33 | 1. [polka -- 基于express的微型Web服务器](https://github.com/lukeed/polka)简单程序上比express快30%；支持中间件：包括express中间件；和express几乎相同的api和路由模式； 34 | 2. [safe-start-koa2 -- 简單直接的 Koa2 的脚手架](https://github.com/chungchi300/safe-start-koa2) 35 | 36 | ## PWA 37 | 1. [lavas -- 基于 Vue 的 PWA 解决方案，帮助开发者快速搭建 PWA 应用，解决接入 PWA 的各种问题 ](https://github.com/lavas-project/lavas) 38 | 39 | [官网示例，建议在手机浏览器打开](https://lavas-project.github.io/lavas-demo/appshell/#/) 40 | 41 | ## 博客/文档 42 | 1. [project-guidelines -- JavaScript工程项目的一系列最佳实践策略](https://github.com/wearehive/project-guidelines/blob/master/README-zh.md#consistent-dev-environments) 43 | 2. [outline -- 为成长中的团队开放源代码wiki和知识库](https://github.com/outline/outline)比较适合创业团队来看的 44 | 45 | [文档](https://www.getoutline.com/developers) 46 | 3. [standard -- JavaScript风格指南，配有linter＆自动代码修复器](https://github.com/standard/standard/blob/master/docs/README-zhcn.md) 47 | 4. [webpack-demos -- Webpack的简单演示的集合](https://github.com/ruanyf/webpack-demos) 48 | 49 | ## funny-stuff 50 | 1. [PlanMaster -- 威信小程序套餐助手：手机套餐对比选购小程序](https://github.com/PrototypeFunction/PlanMaster) 51 | 2. [jspaint -- windows经典的画图工具](https://github.com/1j01/jspaint) 52 | 53 | ![demo](https://github.com/1j01/jspaint/blob/gh-pages/images/readme/main-screenshot.png?raw=true) 54 | 55 | [demo地址](http://jspaint.ml/#local:199164e0.a711e) 56 | 3. [ilsap -- Intellij许可证服务器活动代理](https://github.com/rodrigogs/ilsap)这个我自己还没有测试，使用jet brains家的产品就fork一下把~~ -------------------------------------------------------------------------------- /原创/收藏/awesome js 2018-02.md: -------------------------------------------------------------------------------- 1 | ## 框架 2 | 1. [ice -- （邀请公测）赋能企业中后台建设 - 海量可复用物料，通过 GUI 工具极速构建中后台应用 ](https://github.com/alibaba/ice) 3 | 4 | [官网](https://alibaba.github.io/ice/#/block) 5 | 6 | 2. [viron -- 基于自动化设计的管理控制台](https://github.com/cam-inc/viron)你所做的只是创建一个API服务器和一个OAS2.0 json文件。然后viron管理工具已准备好使用。你不需要编写前端代码！ 7 | 8 | [demo](https://cam-inc.github.io/viron/latest/#/) 9 | 10 | [官网](https://cam-inc.github.io/viron-doc/) 11 | ## 网络聊天室 12 | 1. [lounge -- 现代自主网络IRC客户端](https://github.com/thelounge/lounge)具有推送通知、链接预览、信息标记；始终连接；跨平台；响应式；优秀的同步体验。 13 | 14 | ## RN相关 15 | 1. [react-native-sideswipe](https://github.com/kkemple/react-native-sideswipe)简单的走马灯？？？ 16 | 17 | ![demo](https://github.com/kkemple/react-native-sideswipe/raw/master/example-assets/sideswipe-example.gif) 18 | 19 | ## react相关 20 | 1. [mdxc -- 在jsx中写markdown](https://github.com/jamesknelson/mdxc) 21 | 22 | [官网示例](http://dump.jamesknelson.com/mdxc-playground.html) 23 | 24 | ## 图表相关 25 | 1. [just-dashboard -- 使用YAML / JSON文件创建仪表板](https://github.com/kantord/just-dashboard) 26 | 27 | ![demo](https://github.com/kantord/just-dashboard/raw/master/screenshot.png) 28 | 29 | ## 数据库相关 30 | 1. [node-mongodb-native -- Mongo DB本机NodeJS驱动程序](https://github.com/mongodb/node-mongodb-native) 31 | 32 | ## 博客/文档 33 | 1. [awesome-cheatsheets -- 流行的编程语言和框架的备忘录。你应该知道什么组织在一个单一的文件](https://github.com/LeCoupa/awesome-cheatsheets#frontend) 34 | 看了下，是作者个人记录的各种命令行和某些框架的配置命令，命令行还比较实用，配置啥的其实看官方文档可以查到，作者也不会一直追踪最新版的框架。 35 | 36 | 2.[first-contributions -- 一个让初学者贡献开源的项目](https://github.com/Roshanjossey/first-contributions)可以说是一个详细的贡献开源的教程 37 | 3.[front-end-interview-handbook -- 几乎完整的答案，您可以用来面试潜在的候选人，测试自己或完全忽略“前端工作面试问题”](https://github.com/yangshun/front-end-interview-handbook) 38 | 39 | ## 游戏相关 40 | 1. [phaser -- Phaser是一个有趣，免费且快速的2D游戏框架，用于制作适用于桌面和移动Web浏览器的HTML5游戏，支持Canvas和WebGL渲染。](https://github.com/photonstorm/phaser)一个非常著名的游戏框架，官网文档超级全 41 | 42 | [官网](http://phaser.io/) 43 | ## funny stuff 44 | 1. [carbon -- 创建和分享源代码的美丽图像](https://github.com/dawnlabs/carbon)就是将自己的代码，生成图像，拥有很多高亮，还挺有意思的。 45 | 46 | ![demo](https://user-images.githubusercontent.com/10369094/30791512-cb001438-a167-11e7-952b-f0f0e5c4499e.png) 47 | 2. [tetris -- 流行的游戏俄罗斯方块的克隆。](https://github.com/nullobject/tetris)其实就是个小游戏，感兴趣的可以看看源代码 48 | 49 | [游戏地址](https://tetris.joshbassett.info/) 50 | 3. [OpenSC2K -- 由Maxis公司开发的SimCity 2000开源软件](https://github.com/rage8885/OpenSC2K)使用HTML5 Canvas API和SQLite编写的使用JavaScript编写的模拟城市 2000的开放源代码重建，并且构建在Electron上。 51 | 4. [baidu-pet-chain-buyer -- 百度莱茨狗抢购插件](https://github.com/playwithblockchain/baidu-pet-chain-buyer) 52 | [Chrome商店地址：](https://chrome.google.com/webstore/detail/%E7%99%BE%E5%BA%A6%E8%8E%B1%E8%8C%A8%E7%8B%97/fgpcgbppajchcfdnphppkhkfhbpnmoji) 53 | 5. [kap -- 使用网络技术构建的开源屏幕录像机](https://github.com/wulkano/kap) 54 | 6. [oji -- 文本表情符号生成器](https://github.com/xxczaki/oji) 55 | 56 | ![demo](https://camo.githubusercontent.com/ddbd1e46c050d2227df947c1ba41a405f0f17958/68747470733a2f2f692e696d6775722e636f6d2f6d6646314169792e676966) 57 | 7. [rekit -- 使用React，Redux和React-router构建可伸缩Web应用程序的工具包](https://github.com/supnate/rekit)可以说是react的ide了 58 | 59 | ![demo](https://cdn-images-1.medium.com/max/800/1*Qi68yRpDTFISfd_SFoy9HQ.png) -------------------------------------------------------------------------------- /原创/收藏/awesome js 2018-11.md: -------------------------------------------------------------------------------- 1 | ## cli 2 | 1. [fx -- 命令行JSON处理工具](https://github.com/antonmedv/fx) 3 | 4 | ![demo](https://user-images.githubusercontent.com/141232/47933350-f0f22900-df06-11e8-9cf2-88492c1be774.gif) 5 | 2. [ervy -- 在终端显示图表](https://github.com/chunqiuyiyu/ervy) 6 | 7 | ![demo](https://github.com/chunqiuyiyu/ervy/raw/master/site/imgs/bar.png) 8 | 3. [glorious-demo -- 演示代码的最简单方法。](https://github.com/glorious-codes/glorious-demo) 9 | 10 | ![demo](https://user-images.githubusercontent.com/4738687/44633197-01fa4900-a95e-11e8-9b53-66e9043e2533.gif) 11 | 4. [enquirer -- 时尚，直观，用户友好的提示系统。](https://github.com/enquirer/enquirer) 12 | ![demo](https://github.com/enquirer/enquirer/raw/master/media/survey-prompt.gif) 13 | 5. [progress-estimator -- 记录进度条并估算Promise完成所需的时间](https://github.com/bvaughn/progress-estimator) 14 | 15 | ![demo](https://user-images.githubusercontent.com/29597/48986949-474e2400-f0cf-11e8-86d7-d201f8ad8eca.gif) 16 | ## 动画 17 | 1. [swup -- 完整，灵活，易用的页面转换库。](https://github.com/gmrchk/swup) 18 | 19 | ![demo](https://gmrchk.github.io/swup-gia-demo/) 20 | ## 音频处理 21 | 1. [howler.js -- howler.js是现代网络的音频库。它默认为Web Audio API并回退到HTML5 Audio。这使得在所有平台上使用JavaScript轻松可靠地处理音频](https://github.com/goldfire/howler.js) 22 | 23 | [官方文档](https://howlerjs.com/) 24 | ## babel相关 25 | 1. [rawact -- 一个babel插件，它将React.js组件编译为本机DOM指令，以消除运行时对react库的需求。](https://github.com/sokra/rawact) 26 | 27 | 它适用于 28 | ``` 29 | 1.小应用程序，总组件代码将提供的JavaScript对象集映射到DOM节点上，并仅呈现当前可见的DOM节点，其余部分为“虚拟化”。](https://github.com/valdrinkoshi/virtual-scroller) 39 | 40 | [具体示例](https://github.com/valdrinkoshi/virtual-scroller/blob/master/demo/scrolling.html) 41 | 3. [ImageRevealHover -- ](https://github.com/codrops/ImageRevealHover) 42 | ## 可视化 43 | 1. [cytoscape.js -- 用于可视化和分析的图论（网络）库](https://github.com/cytoscape/cytoscape.js) 44 | ## 机器学习 45 | 1. [tensorspace -- TensorSpace是一套用于构建神经网络3D可视化应用的框架。 开发者可以使用类Keras风格的TensorSpace API，轻松创建可视化网络、加载神经网络模型并在浏览器中基于已加载的模型进行3D可交互呈现。 TensorSpace可以使您更直观地观察神经网络模型，并了解该模型是如何通过中间层 tensor 的运算来得出最终结果的。 TensorSpace 支持3D可视化经过适当预处理之后的 TensorFlow、Keras、TensorFlow.js 模型。](https://github.com/tensorspace-team/tensorspace) 46 | 47 | ![demo](https://camo.githubusercontent.com/c96fae60bd3f4214484f8516215caf40b5403952/68747470733a2f2f7261772e6769746861636b2e636f6d2f74656e736f7273706163652d7465616d2f74656e736f7273706163652f6d61737465722f6173736574732f74656e736f7273706163655f6c656e65742e676966) 48 | ## 学习的资料 49 | 1. [learnGitBranching -- 一个互动的git可视化，以挑战和教育！](https://github.com/pcottle/learnGitBranching) 50 | ![演示地址](https://learngitbranching.js.org/?demo) 51 | ## 静态网站 52 | 1. [cms.js -- 客户端JavaScript站点生成器](https://github.com/chrisdiana/cms.js) 53 | ## funny stuff 54 | 1. [15-puzzle -- 15拼图是一个滑动拼图，由一组编号方形拼块按随机顺序组成，缺少一个拼贴](https://github.com/imshubhamsingh/15-puzzle) 55 | 56 | ![demo](https://raw.githubusercontent.com/imshubhamsingh/15-puzzle/master/screenshots/1.png) 57 | 2. [sky -- React的天空组件](https://github.com/lucagez/sky) 58 | 59 | ![demo](https://github.com/lucagez/sky/raw/master/gif/sky-gif.gif) 60 | 61 | [演示地址](https://codepen.io/lucagez/full/oQoRyK/) 62 | 3. [Random-waifu-generater -- 随机老婆生成器==](https://github.com/reed-chan/Random-waifu-generater) 63 | [demo](https://reed-chan.github.io/Random-waifu-generater/) 64 | 4. [ImageRevealHover -- 一组链接悬停效果，以不同的创作方式显示缩略图。](https://github.com/codrops/ImageRevealHover) 65 | 66 | [demo](https://tympanus.net/Development/ImageRevealHover/) -------------------------------------------------------------------------------- /原创/收藏/awesome js 2018-12.md: -------------------------------------------------------------------------------- 1 | ## 文本处理 2 | 1. [forgJs -- ForgJs是一个javascript轻量级对象验证器。去查看快速入门部分并开始用爱编码](https://github.com/oussamahamdaoui/forgJs) 3 | ```js 4 | const { Validator, Rule } = require('@cesium133/forgjs'); 5 | 6 | const vComplexe = new Validator({ 7 | age: new Rule({ type: 'int', min: 18, max: 99 }), 8 | dateOfBirth: new Rule({ type: 'date' }), 9 | array: new Rule({ type: 'array', of: new Rule({ type: 'string' }) }), 10 | }); 11 | 12 | vComplexe.test({ 13 | age: 26, 14 | dateOfBirth: new Date(1995, 10, 3), 15 | array: ['1'], 16 | }); /// returns true 17 | ``` 18 | ## 布局 19 | 1. [Magic-Grid -- 一个简单，轻量级的Javascript库，用于动态网格布局。](https://github.com/e-oj/Magic-Grid) 20 | 21 | ![demo](https://camo.githubusercontent.com/c81d42594b1b2fccd509ff83e8872f20fcd1de8a/687474703a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d3137324553505a447751496637764c4d656c756e2d5f34526157445f2d6a39342d) 22 | ## 静态站 23 | 1. [fiddly -- 从Readme.md文件创建美观简单的HTML页面](https://github.com/SaraVieira/fiddly) 24 | ## 表单 25 | 1. [autoComplete.js -- autoComplete.js是一个简单的纯vanilla Javascript库，它逐步为速度，高通用性和与各种项目和系统的无缝集成而设计，专为用户和开发人员而设计。](https://github.com/TarekRaafat/autoComplete.js) 26 | ## Node 27 | 1. [sharp -- 高性能Node.js图像处理，是调整JPEG，PNG，WebP和TIFF图像大小的最快模块。使用libvips库](https://github.com/lovell/sharp) 28 | ## 算法 29 | 1. [algorithm-visualizer -- 可视化代码算法的交互式在线平台](https://github.com/algorithm-visualizer/algorithm-visualizer) 30 | ## react相关 31 | 1. [react-jsonschema-form -- 用于从JSON Schema构建Web表单的React组件。](https://github.com/mozilla-services/react-jsonschema-form) 32 | ## 网络处理 33 | 1. [quicklink -- 通过在空闲时间预取视口内链接，加快后续页面加载速度](https://github.com/GoogleChromeLabs/quicklink) 34 | ## vue相关 35 | 1. [vue-virtual-scroll-list -- 支持具有高滚动性能的大数据列表的vue组件](https://github.com/tangbc/vue-virtual-scroll-list) 36 | ## css相关 37 | 1. [emotion -- Emotion是一个高效且灵活的CSS-in-JS库。在许多其他CSS-in-JS库的基础上，它允许您使用字符串或对象样式快速设置应用程序样式。它具有可预测的组合，以避免CSS的特殊性问题。通过源映射和标签，Emotion具有出色的开发人员体验和出色的性能，并且可以在生产中进行大量缓存。](https://github.com/emotion-js/emotion) 38 | ## 调试相关 39 | 1. [eruda -- 移动浏览器控制台](https://github.com/liriliri/eruda) 40 | ## 数据可视化 41 | 1. [tabulator -- 用于JavaScript的交互式表和数据网格](https://github.com/olifolkerd/tabulator) 42 | 43 | ![demo](https://camo.githubusercontent.com/9c2d6ef191915ab62b8ebebd89b872117d50fb3a/687474703a2f2f746162756c61746f722e696e666f2f696d616765732f746162756c61746f725f7461626c652e6a7067) 44 | 45 | [官网](http://tabulator.info/) 46 | ## 视差处理 47 | 1. [rallax.js -- 死简单的视差滚动。](https://github.com/ChrisCavs/rallax.js) 48 | 49 | [demo](https://chriscavs.github.io/rallax-demo/) 50 | ## 小程序相关 51 | 1. [wxa-plugin-canvas -- 小程序海报组件-生成朋友圈分享海报并生成图片](https://github.com/jasondu/wxa-plugin-canvas) 52 | ## 学习的文档 53 | 1. [nodebestpractices -- 最大的Node.JS最佳实践列表（2018年11月）](https://github.com/i0natan/nodebestpractices) 54 | ## funny stuff 55 | 1. [taiko-web -- web太鼓达人](https://github.com/bui/taiko-web) 56 | 2. [atree -- 只是一个简单的圣诞树，基于reddit的故事](https://github.com/anvaka/atree) 57 | 58 | ![demo](https://camo.githubusercontent.com/1ef821cdc5a42e5a04bfb71b0c830f7f4a6572d3/687474703a2f2f692e696d6775722e636f6d2f46793453316a522e676966) 59 | [预览](http://anvaka.github.io/atree/) -------------------------------------------------------------------------------- /原创/收藏/awesome js 2018-7.md: -------------------------------------------------------------------------------- 1 | ## UI 2 | 1. [Semantic-UI -- Semantic是一个基于自然语言有用原则的UI组件框架。](https://github.com/Semantic-Org/Semantic-UI) 3 | 4 | [官网](https://semantic-ui.com/) 5 | 2. [marko -- 来自eBay的友好（快速！）UI库，使构建Web应用程序变得有趣](https://github.com/marko-js/marko) 6 | 7 | [官网](https://markojs.com/) 8 | ## cli 9 | 1. [terminalizer -- 录制您的终端并生成动画gif图像](https://github.com/faressoft/terminalizer) 10 | 11 | ![demo](https://github.com/faressoft/terminalizer/raw/master/img/demo.gif) 12 | 2. [taskbook -- 在命令行中写任务、块和注释](https://github.com/klauscfhq/taskbook) 13 | 14 | ![demo](https://github.com/klauscfhq/taskbook/raw/master/media/header-boards.png) 15 | ## 图像处理 16 | 1. [tui.image-editor -- 使用画布的全功能照片图像编辑器。它非常简单，它配有很棒的过滤器。](https://github.com/nhnent/tui.image-editor) 17 | 18 | ![demo](https://user-images.githubusercontent.com/35218826/41647896-7b218ae0-74b2-11e8-90db-d7805cc23e8c.gif) 19 | ## 动画 20 | 1. [between.js -- 轻量级JavaScript（ES6）补间引擎](https://github.com/sasha240100/between.js) 21 | ## react 相关 22 | 1. [react-flip-toolkit -- React FLIP动画助手库，用于高级可配置转换](https://github.com/aholachek/react-flip-toolkit) 23 | 24 | ![demo](https://github.com/aholachek/react-flip-toolkit/raw/master/example-assets/photogrid.gif) 25 | 2. [hocs -- React和React Native的高阶组件集合](https://github.com/deepsweet/hocs) 26 | 3. [rogue -- SSR for React是不可见的（零配置！ - 只需要一个App.js）和快速（没有Webpack！ - Parcel <3）](https://github.com/alidcastano/rogue) 27 | 4. [rifm -- React Input Format＆Mask，微小（≈650b）组件，用于将任何输入组件转换为格式化或屏蔽输入](https://github.com/istarkov/rifm) 28 | 29 | [demo](https://istarkov.github.io/rifm/docs-readme) 30 | ## node 31 | 1. [ndb -- ndb是针对Node.js的改进调试体验，由Chrome DevTools启用](https://github.com/GoogleChromeLabs/ndb) 32 | 33 | ![demo](https://user-images.githubusercontent.com/39191/43023843-14a085a6-8c21-11e8-85b7-b9fd3405938a.png) 34 | ## vue相关 35 | 1. [d2-admin -- 一个开源的管理系统前端集成方案，为了方便开发者快速进行管理系统开发而设计](https://github.com/d2-projects/d2-admin) 36 | 37 | ![demo](http://chuantu.biz/t6/351/1533090864x1822611227.png) 38 | ## react-native相关 39 | 1. [react-native-shop-ui -- react-native服饰电商ui](https://github.com/ATF19/react-native-shop-ui) 40 | 41 | ![demo](http://chuantu.biz/t6/351/1533090917x1822611227.png) 42 | ## 数据可视化 43 | 1. [giojs -- 使用Three.js构建的声明式3D Globe数据可视化库](https://github.com/syt123450/giojs)这个真的超级酷炫，建议大家打开官网去感受一下~ 44 | 45 | ![demo](https://raw.githubusercontent.com/syt123450/giojs/master/assets/readme/Gio.gif) 46 | 2. [apexcharts.js -- JavaScript图表库](https://github.com/apexcharts/apexcharts.js) 47 | 48 | ![demo](http://chuantu.biz/t6/351/1533087677x-1376440252.png) 49 | 50 | [官网](https://apexcharts.com/javascript-chart-demos/) 51 | ## PWA 52 | 1. [vue-storefront -- 电子商务的PWA。 100％离线，平台无关，无头，支持Magento 2。始终开源，MIT许可证。](https://github.com/DivanteLtd/vue-storefront) 53 | ## 机器学习 54 | 1. [Netron -- 用于深度学习和机器学习模型的Visualizer](https://github.com/lutzroeder/Netron) 55 | ## markdown 56 | 1. [mermaid -- 以与markdown类似的方式从文本生成图表和流程图](https://github.com/knsv/mermaid) 57 | 58 | ![demo](https://github.com/knsv/mermaid/raw/master/img/header.png) 59 | ## 文档 60 | 1. [React-Redux-Styleguide -- 这是一套用于开发React应用程序的工作指南](https://github.com/iraycd/React-Redux-Styleguide) 61 | 2. [serviceworker-cookbook -- service-worker手册，由mozilla社区开源](https://github.com/mozilla/serviceworker-cookbook) 62 | 63 | [官网](https://serviceworke.rs/) 64 | ## funny stuff 65 | 1. [world-cup-2018-cli-dashboard -- 2018年世界杯CLI仪表板 - 在您的终端上观看比赛](https://github.com/cedricblondeau/world-cup-2018-cli-dashboard) 66 | 67 | ![demo](https://raw.githubusercontent.com/cedricblondeau/world-cup-2018-cli-dashboard/master/screenshot.gif) 68 | 2. [the-art-of-reading -- 已经阅读并且个人认为值得分享的书籍的阅读笔记列表。](https://github.com/n0ruSh/the-art-of-reading) 69 | 3. [ivideo -- 一个可以观看国内主流视频平台所有视频的客户端（Mac、Windows、Linux），包括 VIP 资源](https://github.com/phobal/ivideo)请大家低调使用！！ -------------------------------------------------------------------------------- /原创/收藏/awesome js 2019-01.md: -------------------------------------------------------------------------------- 1 | ## 文本处理 2 | 1. [fbt -- fb出的JavaScript国际化框架](https://github.com/facebookincubator/fbt) 3 | ## 构建工具 4 | 1. [jetpack -- 让webpack配置更加方便](https://github.com/KidkArolis/jetpack) 5 | ## node 6 | 1. [node-security -- 控制npm模块可以访问的最简单方法](https://github.com/matthaywardwebdesign/node-security)用来检测npm包是否安全 7 | ## react相关 8 | 1. [react-with-gesture -- react手势库](https://github.com/drcmda/react-with-gesture) 9 | 10 | ![demo](https://camo.githubusercontent.com/44a780a48d96323e232c62e28060a694adeccc8e/68747470733a2f2f692e696d6775722e636f6d2f7467316d4e31462e676966) 11 | 2. [react-rewards -- 奖励用户的小事，让他们微笑！](https://github.com/thedevelobear/react-rewards) 一个点赞动画组件 12 | 13 | ![demo](https://github.com/thedevelobear/react-rewards/raw/master/react-rewards.gif) 14 | ## rn相关 15 | 1. [react-native-magic-move -- 在react-native中创建场景之间的神奇移动过渡](https://github.com/IjzerenHein/react-native-magic-move) 16 | ![demo](https://github.com/IjzerenHein/react-native-magic-move/raw/master/magicmove4.gif) 17 | ## 框架 18 | 1. [chameleon -- 真正专注于让一套代码运行多端的开发框架，提供标准的MVVM架构开发模式统一各类终端](https://github.com/didi/chameleon)研发同学在端内既追求h5的灵活性，也要追求性能趋近于原生。 面对入口扩张，主端、独立端、微信小程序、支付宝小程序、百度小程序、Android厂商联盟快应用，单一功能在各平台都要重复实现，开发和维护成本成倍增加。迫切需要维护一套代码可以构建多入口的解决方案，历经近20个月打磨，滴滴跨端解决方案Chameleon终于发布。真正专注于让一套代码运行多端。 19 | ## 文档 20 | 1. [learn-json-web-tokens -- 了解如何使用JSON Web Token（JWT）来保护您的下一个Web App！ （教程/测试示例!!）](https://github.com/dwyl/learn-json-web-tokens) 21 | 2. [simple-redux -- 用于教学目的的redux的简单实现](https://github.com/eddyerburgh/simple-redux) 22 | 3. [awesome-mac -- 现在我们变得非常大，与最初的想法不同。收集各种类别的高级软件。](https://github.com/jaywcjlove/awesome-mac) 23 | 4. [electron-quick-start -- electron学习文档](https://github.com/electron/electron-quick-start) 24 | 5. [security-checklist -- 在互联网上保持安全的清单](https://github.com/brianlovin/security-checklist) 25 | ## ui控件 26 | 1. [OnsenUI -- 使用HTML5和JavaScript的移动应用开发框架和SDK。创建漂亮且高性能的跨平台移动应用程序。基于Web组件，并为Angular 1,2，React和Vue.js提供绑定](https://github.com/OnsenUI/OnsenUI) 27 | 28 | [官网](https://onsen.io/) 29 | ![demo](https://camo.githubusercontent.com/d6b430c80dda5fdf918272eb352e0e63cb5238d3/68747470733a2f2f6f6e73656e2e696f2f696d616765732f73616d706c65732f72656163742d72656475782d776561746865722e706e67) 30 | 2. [hotkey -- 全局DOM元素激活](https://github.com/github/hotkey) 31 | 3. [x-spreadsheet -- 在线的js电子表格](https://github.com/myliang/x-spreadsheet) 32 | 33 | ![demo](https://raw.githubusercontent.com/myliang/x-spreadsheet/master/docs/demo.png) 34 | ## 格式化工具 35 | 1. [typescript-eslint -- Monorepo用于所有工具，使ESLint能够支持TypeScript](https://github.com/typescript-eslint/typescript-eslint) 36 | ## 图片处理 37 | 1. [shiny -- 给图片加上反光背景](https://github.com/rikschennink/shiny) 38 | 39 | ![demo](https://github.com/rikschennink/shiny/raw/master/demo.gif) 40 | ## 学习的文档 41 | 1. [css_tricks](https://github.com/QiShaoXuan/css_tricks) 42 | ## 架构相关 43 | 1. [import-http -- 从URL而不是本地node_modules导入模块](https://github.com/egoist/import-http) 44 | 在webpack中： 45 | ```js 46 | const ImportHttpWebpackPlugin = require('import-http/webpack') 47 | 48 | module.exports = { 49 | plugins: [new ImportHttpWebpackPlugin()] 50 | } 51 | ``` 52 | ## funny stuff 53 | 1. [Motrix -- 一款全能的下载工具,支持下载 HTTP、FTP、BT、磁力链、百度网盘等资源](https://github.com/agalwood/Motrix) 54 | 55 | [下载地址](https://motrix.app/) 56 | ![demo](https://motrix.app/images/app-task-list@2x.png) 57 | 2. [Here -- Here Music 一个 使用 Electron + React 开发的音乐客户端](https://github.com/caijinyc/Here) 58 | 59 | ![demo](https://github.com/caijinyc/Here/raw/master/docs/img/%E6%8E%A8%E8%8D%90%E5%88%97%E8%A1%A8.png) 60 | 3. [trilium -- 使用Trilium Notes构建您的个人知识库](https://github.com/zadam/trilium) 61 | 62 | ![demo](https://raw.githubusercontent.com/wiki/zadam/trilium/images/screenshot.png) 63 | 4. [BitVision -- 比特币预测，交易和图表软件完全在终端中运行](https://github.com/shobrook/BitVision) 64 | 65 | ![demo](https://github.com/shobrook/BitVision/raw/master/resources/demo.png) 66 | 5. [Gitter -- Gitter for GitHub - 可能是目前颜值最高的GitHub小程序客户端](https://github.com/huangjianke/Gitter) 67 | 6. [zaobao -- 每日时报，以前端技术体系为主要分享课题。根据：文章、工具、新闻、视频几大板块作为主要分类。](https://github.com/wubaiqing/zaobao) -------------------------------------------------------------------------------- /原创/收藏/awesome js 2020-0203.md: -------------------------------------------------------------------------------- 1 | ## 办公软件 2 | 3 | 1. [Joplin - 具有 Windows，macOS，Linux，Android 和 iOS 同步功能的开源笔记记录和待办事项应用程序。](https://github.com/laurent22/joplin) 4 | 5 | 支持 window、linux、macOS。windows 版下载下来 112mb 6 | 7 | ![软件截图](https://camo.githubusercontent.com/4f4603c9de2d8d9f6051628fbb5d91183046a471/68747470733a2f2f6a6f706c696e6170702e6f72672f696d616765732f416c6c436c69656e74732e6a7067) 8 | 9 | 2. [magnetW - 磁力链接聚合搜索](https://github.com/xiandanin/magnetW) 10 | 11 | ![程序截图](https://github.com/xiandanin/magnetW/raw/master/screenshots/app.gif) 12 | 13 | 3. [动态实时消除人像 -- Real-Time-Person-Removal](https://github.com/jasonmayes/Real-Time-Person-Removal) 14 | -------------------------------------------------------------------------------- /原创/收藏/awesome js 2020-03.md: -------------------------------------------------------------------------------- 1 | ## 动画 2 | 3 | 1.[particles.js -- 轻量级的粒子动画库 ](https://github.com/VincentGarreau/particles.js) 4 | ![demo](https://camo.githubusercontent.com/cdc9e740f0c04b77449e476c91e6f7770a6af6e7/687474703a2f2f76696e63656e74676172726561752e636f6d2f7061727469636c65732e6a732f6173736574732f696d672f6769746875622d73637265656e2e6a7067) 5 | 6 | ## 建站 7 | 8 | 1.[gatsby -- 使用 React 构建快速，现代化的应用程序和网站](https://github.com/gatsbyjs/gatsby) 9 | 10 | 2. [MyDrive -- 是一个开源云服务器（类似于 Google Drive），由 Node.JS，Express，React 和 MongoDB 构建。](https://github.com/subnub/myDrive) 11 | 12 | ``` 13 | MyDrive功能： 14 | 15 | 上传文件 16 | 下载档案 17 | 建立资料夹 18 | 分享文件 19 | 创建图像缩略图 20 | 照片浏览器 21 | 串流影片 22 | 转码视频 23 | 创建文件的一次性下载链接 24 | 移动文件/文件夹 25 | AES256加密（用于文件块，令牌等！） 26 | 搜索文件/文件夹 27 | 移动友好（包括上传！） 28 | 进阶筛选器选项 29 | ``` 30 | 31 | ## React 相关 32 | 33 | 1. [react-vis -- uber 开发的数据可视化组件](https://uber.github.io/react-vis/) 34 | 35 | [官网](https://uber.github.io/react-vis/) 36 | ![demo](https://github.com/uber/react-vis/raw/master/docs/assets/react-vis.gif?raw=true) 37 | 38 | ## 视频 39 | 40 | 1. [jitsi-meet -- Jitsi Meet-安全，简单和可扩展的视频会议，您可以将其用作独立应用程序或嵌入到 Web 应用程序中。](https://github.com/jitsi/jitsi-meet) 41 | 42 | ## graphql 相关 43 | 44 | 1. [api-platform -- REST 和 GraphQL 框架来构建现代的 API 驱动的项目（服务器端和客户端）](https://github.com/api-platform/api-platform) 45 | 46 | [官网](https://api-platform.com/) 47 | 48 | 2. [graphql-engine -- 具有细粒度访问控制的 Postgres 上快速，实时的 GraphQL API 非常出色，也触发了数据库事件上的 webhooks。](https://github.com/hasura/graphql-engine) 49 | 50 | ![demo](https://github.com/hasura/graphql-engine/raw/master/assets/demo.gif) 51 | 52 | ## 实用工具 53 | 54 | 1. [opensource.builders -- 可以用开源来代替的服务](https://github.com/junaid33/opensource.builders) 55 | [Open-source alternatives](https://opensource.builders/) 56 | 2. [iptv -- 收集来自世界各地的 8000 多个公共 IPTV 频道](https://github.com/iptv-org/iptv) 57 | 3. [Mellow -- Mellow 是一个基于规则的全局透明代理工具，可以运行在 Windows、macOS 和 Linux 上，也可以配置成路由器透明代理或代理网关，支持 SOCKS、HTTP、Shadowsocks、VMess 等多种代理协议。](https://github.com/mellow-io/mellow) 58 | 4. [universal-data-tool -- 在简单的 Web 界面或桌面应用程序中协作并标记任何类型的数据，图像，文本或文档。](https://github.com/UniversalDataTool/universal-data-tool) 59 | 60 | [官网](https://universaldatatool.com/) 61 | 62 | ![demo](https://user-images.githubusercontent.com/1910070/75850482-6a2cb500-5db5-11ea-852c-7256463cece8.png) 63 | 64 | 5. [UnblockNeteaseMusic -- 恢复网易云音乐的不可用歌曲](https://github.com/nondanee/UnblockNeteaseMusic) 65 | 66 | ![demo](https://user-images.githubusercontent.com/26399680/52215123-5a028780-28ce-11e9-8491-08c4c5dac3b4.png) 67 | 68 | 6. [surge -- 一些脚本，包含京东、淘宝展示原价，移除微博脚本，丁丁打卡等](https://github.com/yichahucha/surge/tree/master) 69 | 70 | 7. [grocy -- erp 管理冰箱](https://github.com/grocy/grocy)智慧食谱。。基于这个项目，我又有一个更好的创意～～～ TODO 71 | 72 | 8. [core -- JAVClub - 让你的大姐姐不再走丢](https://github.com/JAVClub/core) 73 | 74 | 9. [Reactive-Resume -- 独一无二的简历构建器，牢记您的隐私。完全安全，可定制，可移植，开源且永久免费。今天尝试一下](https://github.com/AmruthPillai/Reactive-Resume) TODO 75 | 76 | ## 文档 77 | 78 | 1. [chinese-independent-blogs -- 中文独立博客列表](https://github.com/timqian/chinese-independent-blogs) 大牛博客 79 | -------------------------------------------------------------------------------- /原创/收藏/awesome js 2021-03.md: -------------------------------------------------------------------------------- 1 | ## 文档 2 | 3 | 1. [howtheysre -- 精选的公开资源集合，介绍了世界各地的技术和精通技术的组织如何实践站点可靠性工程（SRE）](https://github.com/upgundecha/howtheysre) 4 | 2. [react-developer-roadmap -- 虽然更新到了 2019 年，不过也很有参考价值](https://github.com/adam-golab/react-developer-roadmap/blob/master/README-CN.md) 5 | 3. [reactjs-interview-questions -- 500 道 react 相关的面试题和答案](https://github.com/sudheerj/reactjs-interview-questions) 6 | 7 | ## 视频/音频 8 | 9 | 1. [moovie.js -- 专注于电影的 html5 播放器](https://github.com/BMSVieira/moovie.js) 10 | 11 | ![demo](https://camo.githubusercontent.com/3e7069ef230c6e7564b57a45afe50dac6c68a41df316f276a81cafec4348508d/68747470733a2f2f626d737669656972612e6769746875622e696f2f6d6f6f7669652e6a732f64656d6f2d74656d706c6174652f696d616765732f63617074696f6e6f66667365742e706e67) 12 | 13 | ## 游戏相关 14 | 15 | 1. [shapez.io -- shapez.io 是一个受 factorio 启发的开源基础构建游戏！可在网络和桌面上使用](https://github.com/tobspr/shapez.io) 16 | 17 | ## 区块链相关 18 | 19 | 1. [openzeppelin-contracts -- OpenZeppelin 合约通过对以太坊和其他区块链使用经过实践检验的智能合约库，可帮助您将风险降至最低。它包括最常用的 ERC 标准实施。](https://github.com/OpenZeppelin/openzeppelin-contracts) 20 | 21 | ## 工具 22 | 23 | 1. [responsively-app -- 一个用于开发响应式网页的浏览器，看起来还不错](https://github.com/responsively-org/responsively-app) 24 | 25 | ![demo](https://camo.githubusercontent.com/9c692245c2ec3c3d5b4485c2cd4d266b01e6a3849620ea1363b7a61fced78e12/68747470733a2f2f726573706f6e736976656c792e6170702f6173736574732f696d672f726573706f6e736976656c792d6170702e676966) 26 | 27 | ## 测试相关 28 | 29 | 1. [Detox -- 灰盒端到端的移动应用测试和自动化框架](https://github.com/wix/Detox) 30 | 31 | ![demo](https://camo.githubusercontent.com/16ab6f4ad4ac13093f038d030529110afc315e21e27fda07c87e85df148bd19b/687474703a2f2f692e696d6775722e636f6d2f656f61444559702e676966) 32 | 33 | ## rn 相关 34 | 35 | 1. [react-native-reanimated -- rn 动画库](https://github.com/software-mansion/react-native-reanimated) 36 | -------------------------------------------------------------------------------- /原创/收藏/awesome js 2023-02.md: -------------------------------------------------------------------------------- 1 | ## 办公工具 2 | 3 | 1. [Paperless-ngx - 有 OCR 的文件管理系统](https://github.com/paperless-ngx/paperless-ngx) Paperless-ngx 是一种文档管理系统，可将您的物理文档转换为可搜索的在线档案，这样您就可以减少纸张的使用。 4 | ![demo](https://raw.githubusercontent.com/paperless-ngx/paperless-ngx/main/docs/assets/screenshots/documents-smallcards.png#gh-light-mode-only) 5 | 6 | [在线示例](https://demo.paperless-ngx.com/dashboard) 7 | 8 | 2. [bpmn-js - 业务流程建模标记工具](https://github.com/bpmn-io/bpmn-js) 9 | 10 | ## 开发工具 11 | 12 | 1. [cypress - 对在浏览器中运行的任何内容进行快速、简单和可靠的测试。](https://github.com/cypress-io/cypress) 13 | [一些介绍文档](https://github.com/cypress-io/cypress/blob/develop/cypress-prioritization-and-triage.md) 14 | 15 | ## AI 16 | 17 | 1. [chatgpt- chatGPT API 逆向工程](https://github.com/acheong08/ChatGPT) 18 | 2. [chatGPT-discord-bot - discord chatgpt 机器人](https://github.com/Zero6992/chatGPT-discord-bot) 19 | 3. [picoGPT - NumPy 中 GPT-2 的不必要的微小实现](https://github.com/jaymody/picoGPT) 20 | 4. [ControlNet - 一个扩散模型](https://github.com/lllyasviel/ControlNet) 21 | 22 | ![demo](https://github.com/lllyasviel/ControlNet/raw/main/github_page/p1.png) 23 | 24 | 5. [WAAS - 基于 OPENAI 的 Whisper 服务](https://github.com/schibsted/WAAS) 25 | 6. [llama - facebook 出的大型语言模型](https://github.com/facebookresearch/llama) 26 | 27 | ## Canvas 28 | 29 | 1. [motion-canvas - 一个使用生成器对动画进行编程的 TypeScript 库、提供所述动画的实时预览的编辑器。](https://github.com/motion-canvas/motion-canvas) 30 | 31 | [官网](https://motion-canvas.github.io/docs/) 32 | 33 | ## 图形学相关 34 | 35 | 1. [three-projected-material - Three.js 材质，可让您在 3d 模型上进行纹理投影](https://github.com/marcofugaro/three-projected-material) 36 | 37 | ![demo](https://github.com/marcofugaro/three-projected-material/raw/master/examples/screenshots/3d-model.png) 38 | 39 | [在线示例](https://marcofugaro.github.io/three-projected-material/3d-model) 40 | 41 | ## 动画库 42 | 43 | 1. [lenis - 顺滑的滚轴动画](https://github.com/studio-freight/lenis) 44 | 45 | 可以看下[官方 demo](https://lenis.studiofreight.com/)，像动画短片一样 46 | 47 | ## 组件/组件库 48 | 49 | 1. [vexip-ui - 一个 Vue 3 UI 库，高度可定制的属性值，完整的 TypeScript，性能非常好](https://github.com/vexip-ui/vexip-ui) 50 | 51 | 每个组件所有的 属性默认值 均可以通过注入配置快速修改，轻松实现定制化。同时，组件代码的编写非常注重降低源码阅读的门槛，代码的排布尽可能的贴近平时的业务代码的习惯，没有过度的封装和花里胡哨的设计。特色组件 Layout、Form、Scroll、Overflow、Wheel。 52 | 53 | ![demo](https://user-images.githubusercontent.com/40221744/218237119-fb20cd58-1c35-40bf-8be7-df764aa887e6.png) 54 | 55 | [官网](https://www.vexipui.com/zh-CN) 56 | 57 | 2. [emoji-mart - 可定制的 emoji 选择器 HTML 组件](https://github.com/missive/emoji-mart) 58 | 59 | ![demo](https://user-images.githubusercontent.com/436043/163686169-766ef715-89b5-4ada-88d7-672623713bc0.png) 60 | 61 | ## low code 62 | 63 | 1. [lowcode-engine - 一套面向扩展设计的企业级低代码技术体系](https://github.com/alibaba/lowcode-engine) 64 | 65 | ``` 66 | 🌈 提炼自企业级低代码平台的面向扩展设计的内核引擎，奉行最小内核，最强生态的设计理念 67 | 📦 开箱即用的高质量生态元素，包括 物料体系、设置器、插件 等 68 | ⚙️ 完善的工具链，支持 物料体系、设置器、插件 等生态元素的全链路研发周期 69 | 🔌 强大的扩展能力，已支撑 100+ 个各种类型低代码平台 70 | 🛡 使用 TypeScript 开发，提供完整的类型定义文件 71 | ``` 72 | 73 | [desc](https://camo.githubusercontent.com/e405017c0897dbd19c039af403b85d41e474bae68d2fd014ae605bd509d6ebd3/68747470733a2f2f696d672e616c6963646e2e636f6d2f696d6765787472612f69332f4f31434e303149697342637931644e424967313651464d5f2121363030303030303030333732332d322d7470732d313931362d313037302e706e67) 74 | 75 | ## 学习的文档 76 | 77 | 1. [kubernetes-learning-path - kubernetes 学习 roadmap](https://github.com/techiescamp/kubernetes-learning-path) 78 | 2. [Programmers-Overseas-Job-Interview-Handbook - 程序员海外工作/英文面试手册 ](https://github.com/eliaszon/Programmers-Overseas-Job-Interview-Handbook) 79 | 非常全的文档集合，从找工作到辅助面试常用语都有，润学家必备！ 80 | 3. [DEVOPS-WORLD - 学习 DEVOPS 的路线图和文档合集](https://github.com/annfelix/DEVOPS-WORLD) 81 | 4. [Prompt-Engineering-Guide - 提示工程指南](https://github.com/dair-ai/Prompt-Engineering-Guide) chatgpt 带火的工程，非常值得一看 82 | 83 | ## 好玩的东东 84 | 85 | 1. [wechat-bot- 一个基于 OpenAi ChatGPT + WeChaty 实现的微信机器人 ，可以用来帮助你自动回复微信消息，或者管理微信群/好友，检测僵尸粉等...](https://github.com/wangrongding/wechat-bot) 86 | 2. [memos - 一个轻量级的自托管备忘录中心。开源且永远免费。](https://github.com/usememos/memos) 87 | 88 | ![demo](https://usememos.com/demo.webp) 89 | -------------------------------------------------------------------------------- /原创/收藏/awesome js 2023-04.md: -------------------------------------------------------------------------------- 1 | ## 图形学相关 2 | 3 | ### CFD 4 | 5 | 1. [FluidX3D - 计算流体力学软件，全部代码都在 GPU 上运行](https://github.com/ProjectPhysX/FluidX3D) 6 | 7 | ## AI 8 | 9 | ### CV 10 | 11 | 1. [Inpaint-Anything - 图像修复，使用 Segment Anything 和修复模型修复任何东西。](https://github.com/geekyutao/Inpaint-Anything) 12 | 13 | ![demo](https://github.com/geekyutao/Inpaint-Anything/raw/main/example/remove-anything/person/with_mask.png) 14 | 15 | ### GPT 16 | 17 | 1. [micro-gpt - 基于 GPT3.5/4 的最小通用自治代理。可以分析股票价格、执行网络安全测试、创作艺术品和订购比萨饼。](https://github.com/muellerberndt/micro-gpt) 18 | 19 | ### chatGPT 20 | 21 | 1. [KeepChatGPT - 让我们在使用 ChatGPT 过程中更高效、更顺畅，完美解决 ChatGPT 网络错误，不再频繁地刷新网页，足足省去 10 个多余的步骤。还可以取消后台监管审计。](https://github.com/xcanwin/KeepChatGPT) 22 | 23 | ## 数据分析 24 | 25 | 1. [umami - Umami 是一种简单、快速、注重隐私的 Google Analytics（分析）替代品。](https://github.com/umami-software/umami) 26 | 27 | ## 学习的文档 28 | 29 | 1. [developers-conferences-agenda - 全球开发者会议日程总览](https://github.com/scraly/developers-conferences-agenda) 30 | 31 | ## 好玩的东东 32 | -------------------------------------------------------------------------------- /原创/收藏/awesome js 2023-08.md: -------------------------------------------------------------------------------- 1 | ## 学习的文档 2 | 3 | 1. [nextjs-tutorial](https://github.com/safak/nextjs-tutorial) 4 | 5 | ## canvas 相关 6 | 7 | 1. [etherpad-lite - 实时多人文本编辑器](https://github.com/ether/etherpad-lite) 8 | 9 | ![demo](https://github.com/ether/etherpad-lite/raw/develop/doc/images/etherpad_demo.gif) 10 | 11 | ## LLM 12 | 13 | 1. [superagent - 搭建、部署、管理 LLM 驱动代理](https://github.com/homanp/superagent) 14 | 15 | ## 组件库 16 | 17 | 1. [lucide -- 美丽且一致的图标，使用多种框架](https://github.com/lucide-icons/lucide) 18 | ![demo](https://camo.githubusercontent.com/df61ea6d62baaaff49b7d58d9012c5a0ae2363a493ffe48e3c0e7a30eb83d9c2/68747470733a2f2f7777772e6669676d612e636f6d2f636f6d6d756e6974792f706c7567696e2f3933393536373336323534393638323234322f7468756d626e61696c) 19 | 20 | ## 区块链相关 21 | 22 | 1. [metamask-extension - 在浏览器上使用 metamask](https://github.com/MetaMask/metamask-extension)metamask 是一个在几秒钟内开始探索区块链的应用程序。受到全球超过 3000 万用户的信赖。 23 | 24 | ## 建站相关 25 | 26 | 1. [pipedream - Pipedream 是一个基于云的自动化和集成平台，它可以帮助开发人员和非技术人员创建和部署工作流，无需编写任何代码。Pipedream 的功能包括事件处理、数据转换、API 集成等，可以帮助用户轻松地将不同的应用程序和服务连接在一起。同时，Pipedream 还提供了丰富的工具和文档，方便用户进行开发和调试。](https://github.com/PipedreamHQ/pipedream) 27 | 28 | ![demo](https://github.com/PipedreamHQ/pipedream/raw/master/images/hero2.png) 29 | 30 | [视频说明](https://www.youtube.com/watch?v=pRHsQyyfYl0) 31 | 32 | 2. [uptime-kuma - 简单易用的站点监控工具](https://github.com/louislam/uptime-kuma) 33 | 34 | ![demo](https://user-images.githubusercontent.com/1336778/212262296-e6205815-ad62-488c-83ec-a5b0d0689f7c.jpg) 35 | 36 | ``` 37 | 监控HTTP(s) / TCP / HTTP(s)关键字/ HTTP(s) Json查询/ Ping / DNS记录/ Push / Steam游戏服务器/ Docker容器的运行时间 38 | 花哨、反应性、快速的UI/UX 39 | 通过Telegram, Discord, Gotify, Slack, Pushover, Email (SMTP)和90多个通知服务进行通知，点击这里查看完整列表 40 | 20秒的间隔 41 | 多语言 42 | 多个状态页 43 | 将状态页映射到特定的域 44 | 平图 45 | 证书信息 46 | 代理支持 47 | 2 fa支持 48 | ``` 49 | 50 | ## LLM 相关 51 | 52 | 1. [ollama-ui - 只是一个简单的 Ollama HTML UI 现在可作为 Chrome 扩展使用](https://github.com/ollama-ui/ollama-ui) 53 | 54 | [商店地址](https://chrome.google.com/webstore/detail/ollama-ui/cmgdpmlhgjhoadnonobjeekmfcehffco) 55 | 56 | ![demo](https://github.com/ollama-ui/ollama-ui/raw/main/screenshot.png?raw=true) 57 | 58 | ## 工作相关 59 | 60 | 1. [hiring-without-whiteboards](https://github.com/poteto/hiring-without-whiteboards) 61 | 列出不进行“白板”面试的公司(或团队)。“白板”是一种隐喻，是与糟糕的面试方式有关的 CS 琐事问题的象征。白板不坏——CS 的琐事问题就坏了。使用 HackerRank/LeetCode 等网站可能属于类似的类别。这里列出的公司和团队使用的面试技巧和问题类似于日常工作。例如，结对解决一个现实世界的问题或一个带薪/无薪的家庭作业。阅读(并参与)我们关于如何进行更好的面试的建议。 62 | 2. [BioDrop - 创建一个技术人的个人主页](https://github.com/EddieHubCommunity/BioDrop)在这个平台上，技术人员可以有一个单一的中心来展示他们的内容，以加速他们的职业生涯，同时为开源项目做出贡献，并成为社区的一部分，对项目的发展方向有发言权。您的个人资料将链接到您的社交媒体和内容。你也可以添加你的时间线，推荐，和即将到来的活动，你正在参与的活动等等。 63 | 64 | [在线示例](https://www.biodrop.io/eddiejaoude) 65 | 66 | ![demo](https://user-images.githubusercontent.com/624760/230707268-1f8f1487-6524-4c89-aae2-ab45f0e17f39.png) 67 | 68 | ## 好玩的东东 69 | 70 | 1. [shareDrop - 开源的 airdrop](https://github.com/szimek/sharedrop) 在同意本地网络中，无需任何配置，只要在设备上打开 https://www.sharedrop.io 就可传输文件，与 airdrop 不一样的是，ShareDrop 需要互联网连接来发现其他设备，而 AirDrop 不需要 71 | 2. [GDevelop](https://github.com/4ian/GDevelop) 在网页上制作游戏应用，无需任何代码 72 | 73 | ![demo](https://raw.githubusercontent.com/4ian/GDevelop/master/newIDE/GDevelop%20screenshot.png) 74 | 75 | 3. [academicpages.github.io - 学术人必备的学术个人主页模板](https://github.com/academicpages/academicpages.github.io) 76 | 77 | [在线示例](https://academicpages.github.io/) 78 | 79 | 4. [register - 自动化注册免费的 is-a-dev 域名](https://github.com/is-a-dev/register) 80 | -------------------------------------------------------------------------------- /原创/收藏/分类/AI/ChatGPT.md: -------------------------------------------------------------------------------- 1 | 1. [chatgpt 逆向工程](https://github.com/acheong08/ChatGPT) 2 | 3 | ## GPT 4 | 5 | 1. [micro-gpt - 基于 GPT3.5/4 的最小通用自治代理。可以分析股票价格、执行网络安全测试、创作艺术品和订购比萨饼。](https://github.com/muellerberndt/micro-gpt) 6 | 7 | ## 应用 8 | 9 | 1. [chatGPT-discord-bot - discord chatgpt 机器人](https://github.com/Zero6992/chatGPT-discord-bot) 10 | 2. [KeepChatGPT - 让我们在使用 ChatGPT 过程中更高效、更顺畅，完美解决 ChatGPT 网络错误，不再频繁地刷新网页，足足省去 10 个多余的步骤。还可以取消后台监管审计。](https://github.com/xcanwin/KeepChatGPT) 11 | -------------------------------------------------------------------------------- /原创/收藏/分类/AI/LLM.md: -------------------------------------------------------------------------------- 1 | 1. [superagent - 搭建、部署、管理 LLM 驱动代理](https://github.com/homanp/superagent) 2 | -------------------------------------------------------------------------------- /原创/收藏/分类/AI/人工智能.md: -------------------------------------------------------------------------------- 1 | ## 机器学习 2 | 3 | 1. [brain.js -- JavaScript 中的神经网络](https://github.com/BrainJS/brain.js) 4 | 2. [tfjs -- WebGL 加速的基于浏览器的 JavaScript 库，用于学习和部署 ML 模型。](https://github.com/tensorflow/tfjs) 5 | 3. [ml5-library -- 友好的机器学习网络！](https://github.com/ml5js/ml5-library) 6 | 4. [Netron -- 用于深度学习和机器学习模型的 Visualizer](https://github.com/lutzroeder/Netron) 7 | 5. [ganlab -- 用于生成对抗网络的交互式可视化实验工具](https://github.com/poloclub/ganlab) 8 | 9 | [演示 demo](https://poloclub.github.io/ganlab/) 10 | 11 | ![demo](https://github.com/poloclub/ganlab/raw/master/ganlab-teaser.png) 12 | 13 | 6. [tensorspace -- TensorSpace 是一套用于构建神经网络 3D 可视化应用的框架。 开发者可以使用类 Keras 风格的 TensorSpace API，轻松创建可视化网络、加载神经网络模型并在浏览器中基于已加载的模型进行 3D 可交互呈现。 TensorSpace 可以使您更直观地观察神经网络模型，并了解该模型是如何通过中间层 tensor 的运算来得出最终结果的。 TensorSpace 支持 3D 可视化经过适当预处理之后的 TensorFlow、Keras、TensorFlow.js 模型。](https://github.com/tensorspace-team/tensorspace) 14 | 15 | ![demo](https://camo.githubusercontent.com/c96fae60bd3f4214484f8516215caf40b5403952/68747470733a2f2f7261772e6769746861636b2e636f6d2f74656e736f7273706163652d7465616d2f74656e736f7273706163652f6d61737465722f6173736574732f74656e736f7273706163655f6c656e65742e676966) 16 | 17 | ## 图像识别 18 | 19 | 1. [picojs -- 200 行 JavaScript 中的人脸检测库](https://github.com/tehnokv/picojs) 20 | 2. [handtrack.js -- 用于直接在浏览器中进行实时手部检测（边界框）原型设计的库。](https://github.com/victordibia/handtrack.js) 21 | 3. [动态实时消除人像 -- Real-Time-Person-Removal](https://github.com/jasonmayes/Real-Time-Person-Removal) 22 | 23 | ## 图像修复 24 | 25 | 1. [Inpaint-Anything - 图像修复，使用 Segment Anything 和修复模型修复任何东西。](https://github.com/geekyutao/Inpaint-Anything) 26 | 27 | ![demo](https://github.com/geekyutao/Inpaint-Anything/raw/main/example/remove-anything/person/with_mask.png) 28 | 29 | ## 语音 30 | 31 | 1. [WAAS - 基于 OPENAI 的 Whisper 的服务](https://github.com/schibsted/WAAS) 32 | 33 | ## NLP 34 | 35 | 1. [nlp.js -- 用于构建机器人的 NLP 库，具有实体提取，情感分析，自动语言识别等功能](https://github.com/axa-group/nlp.js) 36 | 37 | ![demo](https://github.com/axa-group/nlp.js/raw/master/screenshots/hybridbot.gif) 38 | ![demo](https://github.com/victordibia/handtrack.js/raw/master/demo/images/bossflip.gif) 39 | 40 | 2. [llama - facebook 出的大型语言模型](https://github.com/facebookresearch/llama) 41 | 42 | ## 示例 43 | 44 | 1. [tfjs-examples -- 使用 TensorFlow.js 构建的示例](https://github.com/tensorflow/tfjs-examples) 45 | -------------------------------------------------------------------------------- /原创/收藏/分类/CLI.md: -------------------------------------------------------------------------------- 1 | 1. [prompts - 轻量级，美观且用户友好的交互式提示](https://github.com/terkelg/prompts) 2 | ![demo](https://github.com/terkelg/prompts/raw/master/media/number.gif) 3 | 2. [wunderbar -- 简单的水平条形图](https://github.com/gribnoysup/wunderbar) 4 | 5 | ![demo](https://github.com/gribnoysup/wunderbar/raw/master/wunder-bar-cli-all.png) 6 | 3. [fkill-cli -- 跨平台杀进程](https://github.com/sindresorhus/fkill-cli) 7 | 4. [ink -- 把react应用于命令行应用程序](https://github.com/vadimdemedes/ink) 8 | 5. [consola -- 优雅的控制台记录器](https://github.com/nuxt/consola) 9 | ```js 10 | const consola = require('consola') 11 | 12 | // See types section for all available types 13 | consola.start('Starting build') 14 | consola.success('Built!') 15 | consola.info('Reporter: Some info') 16 | consola.error(new Error('Foo')) 17 | ``` 18 | ![demo](https://github.com/nuxt/consola/raw/master/assets/screen1.png) 19 | ``` 20 | [2:17:17 PM] Starting build 21 | [2:17:17 PM] [TEST] Log from test scope 22 | [2:17:18 PM] Built! 23 | [2:17:18 PM] Some info 24 | [2:17:18 PM] Error: Foo 25 | ``` 26 | 6. [hyper -- 在web上显示终端](https://github.com/zeit/hyper) 27 | 28 | [官网](https://hyper.is/) 29 | 7. [signale -- 黑客控制台记录器](https://github.com/klauscfhq/signale) 30 | ![demo](https://camo.githubusercontent.com/dd0ad939bce8e21b2f9afbf0db794a0de7422c5f/68747470733a2f2f63646e2e7261776769742e636f6d2f6b6c617573636668712f7369676e616c652f32643862636666382f6d656469612f6865616465722e706e67) 31 | 8. [terminalizer -- 录制您的终端并生成动画gif图像](https://github.com/faressoft/terminalizer) 32 | 33 | ![demo](https://github.com/faressoft/terminalizer/raw/master/img/demo.gif?raw=true) 34 | 9. [taskbook -- 在命令行中写任务、块和注释](https://github.com/klauscfhq/taskbook) 35 | 36 | ![demo](https://github.com/klauscfhq/taskbook/raw/master/media/header-boards.png) 37 | 10. [ervy -- 在终端显示图表](https://github.com/chunqiuyiyu/ervy) 38 | 39 | ![demo](https://github.com/chunqiuyiyu/ervy/raw/master/site/imgs/bar.png) 40 | 11. [glorious-demo -- 演示代码的最简单方法。](https://github.com/glorious-codes/glorious-demo) 41 | 42 | ![demo](https://user-images.githubusercontent.com/4738687/44633197-01fa4900-a95e-11e8-9b53-66e9043e2533.gif) 43 | 12. [enquirer -- 时尚，直观，用户友好的提示系统。](https://github.com/enquirer/enquirer) 44 | ![demo](https://github.com/enquirer/enquirer/raw/master/media/survey-prompt.gif) 45 | 13. [progress-estimator -- 记录进度条并估算Promise完成所需的时间](https://github.com/bvaughn/progress-estimator) 46 | 47 | ![demo](https://user-images.githubusercontent.com/29597/48986949-474e2400-f0cf-11e8-86d7-d201f8ad8eca.gif) -------------------------------------------------------------------------------- /原创/收藏/分类/PWA.md: -------------------------------------------------------------------------------- 1 | 1. [lavas -- 基于 Vue 的 解决方案，帮助开发者快速搭建 应用，解决接入 的各种问题 ](https://github.com/lavas-project/lavas) 2 | 3 | [官网示例，建议在手机浏览器打开](https://lavas-project.github.io/lavas-demo/appshell/#/) 4 | 2. [vue-storefront -- 电子商务的。 100％离线，平台无关，无头，支持Magento 2。始终开源，MIT许可证。](https://github.com/DivanteLtd/vue-storefront) 5 | ## 构建工具 6 | 1. [pwa -- 通用PWA Builder](https://github.com/lukeed/pwa) 7 | 2. [bento-starter -- 全栈解决方案，可快速构建PWA应用程序](https://github.com/kefranabg/bento-starter) 8 | ![demo](https://user-images.githubusercontent.com/9840435/56022522-30ba0980-5d0c-11e9-8c61-23a9f91a926f.gif) -------------------------------------------------------------------------------- /原创/收藏/分类/RN.md: -------------------------------------------------------------------------------- 1 | ## 走马灯 2 | 3 | 1. [react-native-sideswipe](https://github.com/kkemple/react-native-sideswipe)简单的走马灯？？？感觉应该是这个术语 4 | 5 | ![demo](https://github.com/kkemple/react-native-sideswipe/raw/master/example-assets/sideswipe-example.gif) 6 | 7 | ## 下拉菜单 8 | 9 | 1. [react-native-menu -- 适用于 Android 和 iOS 的灵活下拉菜单组件，与 Android 的 Spinner 类似。](https://github.com/jaysoo/react-native-menu) 10 | 11 | ![demo](https://raw.githubusercontent.com/jaysoo/react-native-menu/master/packages/react-native-menu/android.demo.gif) 12 | 13 | ## UI 14 | 15 | 1. [react-native-elements -- 跨平台 React 本地用户界面工具包](https://github.com/react-native-training/react-native-elements) 16 | 17 | ![demo](https://user-images.githubusercontent.com/5962998/37248832-a7060286-24b1-11e8-94a8-847ab6ded4ec.png) 18 | 19 | [官方文档](https://react-native-training.github.io/react-native-elements/docs/avatar.html) 20 | 21 | 2. [react-native-shop-ui -- react-native 服饰电商 ui](https://github.com/ATF19/react-native-shop-ui) 22 | 23 | ![demo](https://camo.githubusercontent.com/ebd512bfe14d8eebf1b9128b8cb8ca843b32f188/687474703a2f2f7265732e636c6f7564696e6172792e636f6d2f61746631392f696d6167652f75706c6f61642f635f7363616c652c685f3530302f76313530313431363436382f315f6636686977302e706e67) 24 | 25 | 3. [react-native-paper -- react native material design](https://github.com/callstack/react-native-paper) 26 | 4. [galio -- Galio 是一个设计精美，免费和开源的 React Native Framework](https://github.com/galio-org/galio) 27 | 28 | [galio](https://galio.io/) 29 | 30 | ## loader 31 | 32 | 1. [react-native-bouncing-preloader -- 使用 React Native 中的自定义图标弹跳预加载器组件](https://github.com/sonnylazuardi/react-native-bouncing-preloader) 33 | 34 | [demo](https://github.com/sonnylazuardi/react-native-bouncing-preloader/raw/master/bouncingpreloader.gif) 35 | 36 | ## 按钮 37 | 38 | 1. [react-native-really-awesome-button -- React Native 按钮组件。 Awesome Button 是一个 60fps 的 3D，支持进度，社交就绪，可扩展，生产就绪的组件，可以呈现一组很棒的动画 UI 按钮](https://github.com/rcaferati/react-native-really-awesome-button) 39 | 40 | ![demo](https://raw.githubusercontent.com/rcaferati/react-native-really-awesome-button/master/demo/demo-button-blue-new.gif?raw=true) 41 | 42 | ## 其他 43 | 44 | 1. [react-native-reanimated-bottom-sheet -- 高度可配置的底部组件，使用 react-native-reanimated 和 react-native-gesture-handler 制作](https://github.com/osdnk/react-native-reanimated-bottom-sheet) 45 | 46 | ![demo](https://github.com/osdnk/react-native-reanimated-bottom-sheet/raw/master/gifs/2.gif) 47 | 48 | ## 工具库 49 | 50 | 1. [react-native-starter -- React Native Starter 是一个移动应用程序模板，包含许多内置组件](https://github.com/flatlogic/react-native-starter) 51 | 2. [metro -- React Native 的 JavaScript 打包工具。](https://github.com/facebook/metro) 52 | 53 | ## 场景切换 54 | 55 | 1. [react-native-magic-move -- 在 react-native 中创建场景之间的神奇移动过渡](https://github.com/IjzerenHein/react-native-magic-move) 56 | ![demo](https://github.com/IjzerenHein/react-native-magic-move/raw/master/magicmove4.gif) 57 | 58 | ## 框架 59 | 60 | 1. [CRN -- CRN 是 Ctrip React Native 简称，由携程无线平台研发团队基于 React Native 框架优化，定制成稳定性和性能更佳、也更适合业务场景的跨平台开发框架。](https://github.com/ctripcorp/CRN) 61 | 62 | ## 动画 63 | 64 | 1. [react-native-reanimated -- rn 动画库](https://github.com/software-mansion/react-native-reanimated) 65 | -------------------------------------------------------------------------------- /原创/收藏/分类/Vue相关.md: -------------------------------------------------------------------------------- 1 | # PWA 2 | 1. [lavas -- 基于 Vue 的 PWA 解决方案，帮助开发者快速搭建 PWA 应用，解决接入 PWA 的各种问题 ](https://github.com/lavas-project/lavas) 3 | 4 | [官网示例，建议在手机浏览器打开](https://lavas-project.github.io/lavas-demo/appshell/#/) 5 | 6 | # 控件 7 | ## loading 8 | 1. [vue-content-loader -- SVG组件创建占位符加载，如Facebook card loading。](https://github.com/egoist/vue-content-loader) 9 | 10 | ![demo](https://user-images.githubusercontent.com/4838076/34308760-ec55df82-e735-11e7-843b-2e311fa7b7d0.gif) 11 | ## 图表 12 | 1. [v-charts -- 基于 Vue2.0 和 ECharts 封装的图表组件](https://github.com/ElemeFE/v-charts) 13 | 14 | [文档](https://v-charts.js.org/#/) 15 | ## 滚动列表 16 | 1. [vue-virtual-scroll-list -- 支持具有高滚动性能的大数据列表的vue组件](https://github.com/tangbc/vue-virtual-scroll-list) 17 | # 扩展框架 18 | 1. [saber.js -- 使用Vue.js构建静态网站的简约框架](https://github.com/egoist/saber.js) 19 | 2. [vue-native-core -- Vue Native是一个使用JavaScript构建跨平台原生移动应用程序的框架](https://github.com/GeekyAnts/vue-native-core) 20 | 21 | [官方文档](https://vue-native.io/) 22 | 23 | ![demo](https://vue-native.io/images/landing.png) 24 | ## 编辑器 25 | 1. [tiptap -- Vue.js的富文本编辑器](https://github.com/heyscrumpy/tiptap) 26 | ```html 27 | 35 | 36 | 46 | ``` 47 | ## 解决方案 48 | 1. [d2-admin -- 一个开源的管理系统前端集成方案，为了方便开发者快速进行管理系统开发而设计](https://github.com/d2-projects/d2-admin) 49 | 50 | ![demo](https://raw.githubusercontent.com/FairyEver/d2-admin/master/github/preview@2x.png) 51 | 2. [quasar -- 高性能，Material Design 2，带Vue.js的完整前端堆栈](https://github.com/quasarframework/quasar) 52 | ## 跨平台 53 | 1. [uni-app -- 使用 Vue.js 开发跨平台应用的前端框架 ](https://github.com/dcloudio/uni-app) 54 | ## 其他 55 | 1. [gridsome -- 使用Vue.js和GraphQL构建超快的网站](https://github.com/gridsome/gridsome) 56 | 57 | [文档](https://gridsome.org/docs) 58 | -------------------------------------------------------------------------------- /原创/收藏/分类/canvas.md: -------------------------------------------------------------------------------- 1 | ## 框架 2 | 3 | 1. [Konva.js 是一个 HTML5 Canvas JavaScript 框架，它通过为桌面和移动应用程序启用画布交互来扩展 2D 上下文。](https://github.com/konvajs/konva) 4 | 5 | ## 动画 6 | 7 | 1. [motion-canvas - 一个使用生成器对动画进行编程的 TypeScript 库、提供所述动画的实时预览的编辑器。](https://github.com/motion-canvas/motion-canvas) 8 | 9 | [官网](https://motion-canvas.github.io/docs/) 10 | -------------------------------------------------------------------------------- /原创/收藏/分类/chrome插件.md: -------------------------------------------------------------------------------- 1 | ## 邮件 2 | 1. [markdown-here -- Google Chrome，Firefox和Thunderbird扩展程序，可让您在Markdown中编写电子邮件并在发送前进行呈现。](https://github.com/adam-p/markdown-here) 3 | 4 | ![demo](https://camo.githubusercontent.com/4d86f3e42a47d99458ea21f40ca80eaab7d8373a/68747470733a2f2f7261772e6769746875622e636f6d2f6164616d2d702f6d61726b646f776e2d686572652f6d61737465722f73746f72652d6173736574732f6d61726b646f776e2d686572652d696d616765312e67696d702e706e67) -------------------------------------------------------------------------------- /原创/收藏/分类/css相关.md: -------------------------------------------------------------------------------- 1 | ## css相关 2 | 1. [emotion -- Emotion是一个高效且灵活的CSS-in-JS库。在许多其他CSS-in-JS库的基础上，它允许您使用字符串或对象样式快速设置应用程序样式。它具有可预测的组合，以避免CSS的特殊性问题。通过源映射和标签，Emotion具有出色的开发人员体验和出色的性能，并且可以在生产中进行大量缓存。](https://github.com/emotion-js/emotion) 3 | ## css in js 4 | 1. [linaria -- JS库中的零运行时CSS](https://github.com/callstack/linaria)在js中写css，0 runtime 5 | ```jsx 6 | import { css } from 'linaria'; 7 | import { modularScale, hiDPI } from 'polished'; 8 | import fonts from './fonts'; 9 | 10 | // Write your styles in `css` tag 11 | const header = css` 12 | text-transform: uppercase; 13 | font-family: ${fonts.heading}; 14 | font-size: ${modularScale(2)}; 15 | 16 | ${hiDPI(1.5)} { 17 | font-size: ${modularScale(2.5)}; 18 | } 19 | `; 20 | 21 | // Then use it as a class name 22 |

Hello world

; 23 | ``` 24 | ## 插件 25 | 1. [css-doodle -- 用于使用CSS绘制图案的Web组件。](https://github.com/css-doodle/css-doodle) 26 | 27 | ![demo](https://github.com/css-doodle/css-doodle/raw/master/screenshot/doodle.png) 28 | ## 网格布局 29 | 1. [Magic-Grid -- 一个简单，轻量级的Javascript库，用于动态网格布局。](https://github.com/e-oj/Magic-Grid) 30 | 31 | ![demo](https://camo.githubusercontent.com/c81d42594b1b2fccd509ff83e8872f20fcd1de8a/687474703a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d3137324553505a447751496637764c4d656c756e2d5f34526157445f2d6a39342d) -------------------------------------------------------------------------------- /原创/收藏/分类/devops.md: -------------------------------------------------------------------------------- 1 | ## 学习文档 2 | 3 | 1. [DEVOPS-WORLD - 学习 DEVOPS 的路线图和文档合集](https://github.com/annfelix/DEVOPS-WORLD) 4 | 5 | ## 相关平台 6 | 7 | 1. [pipedream - Pipedream 是一个基于云的自动化和集成平台，它可以帮助开发人员和非技术人员创建和部署工作流，无需编写任何代码。Pipedream 的功能包括事件处理、数据转换、API 集成等，可以帮助用户轻松地将不同的应用程序和服务连接在一起。同时，Pipedream 还提供了丰富的工具和文档，方便用户进行开发和调试。](https://github.com/PipedreamHQ/pipedream) 8 | 9 | ![demo](https://github.com/PipedreamHQ/pipedream/raw/master/images/hero2.png) 10 | 11 | [视频说明](https://www.youtube.com/watch?v=pRHsQyyfYl0) 12 | -------------------------------------------------------------------------------- /原创/收藏/分类/docker.md: -------------------------------------------------------------------------------- 1 | ## 控制台 2 | 1. [dockly -- Docker控制台用户界面和仪表板，用于快速管理和检查容器和服务](https://github.com/lirantal/dockly) 3 | 4 | ![demo](https://cloud.githubusercontent.com/assets/316371/25682867/c5212216-3027-11e7-8f36-72d38516d2af.gif) -------------------------------------------------------------------------------- /原创/收藏/分类/electron.md: -------------------------------------------------------------------------------- 1 | ## 项目 2 | 1. [Here -- Here Music 一个 使用 Electron + React 开发的音乐客户端](https://github.com/caijinyc/Here) 3 | 4 | ![demo](https://github.com/caijinyc/Here/raw/master/docs/img/%E6%8E%A8%E8%8D%90%E5%88%97%E8%A1%A8.png) -------------------------------------------------------------------------------- /原创/收藏/分类/graphql.md: -------------------------------------------------------------------------------- 1 | 1. [apollo-server -- 适用于 Express，Connect，Hapi，Koa 等的 GraphQL 服务器](https://github.com/apollographql/apollo-server) 2 | 2. [graphqldesigner.com -- 一个开发人员 Web 应用程序工具，可以使用 React 快速构建 GraphQL 的完整堆栈 CRUD 实现。](https://github.com/GraphQL-Designer/graphqldesigner.com) 3 | 4 | ![demo](https://github.com/GraphQL-Designer/graphqldesigner.com/raw/master/graphql.gif) 5 | 6 | 3. [graphpack -- 简约的零配置 GraphQL 服务器。](https://github.com/glennreyes/graphpack) 7 | 8 | 4. [api-platform -- REST 和 GraphQL 框架来构建现代的 API 驱动的项目（服务器端和客户端）](https://github.com/api-platform/api-platform) 9 | 10 | [官网](https://api-platform.com/) 11 | 12 | 5. [graphql-engine -- 具有细粒度访问控制的 Postgres 上快速，实时的 GraphQL API 非常出色，也触发了数据库事件上的 webhooks。](https://github.com/hasura/graphql-engine) 13 | 14 | ![demo](https://github.com/hasura/graphql-engine/raw/master/assets/demo.gif) 15 | -------------------------------------------------------------------------------- /原创/收藏/分类/linux.md: -------------------------------------------------------------------------------- 1 | ## 命令行 2 | 1. [linux-command -- Linux 命令查询工具跨平台桌面版](https://github.com/haloislet/linux-command) 3 | 之前介绍过的linux-command，这个是整合出来的搜索引擎，很强大 -------------------------------------------------------------------------------- /原创/收藏/分类/low_code.md: -------------------------------------------------------------------------------- 1 | 1. [lowcode-engine - 一套面向扩展设计的企业级低代码技术体系](https://github.com/alibaba/lowcode-engine) 2 | 3 | ``` 4 | 🌈 提炼自企业级低代码平台的面向扩展设计的内核引擎，奉行最小内核，最强生态的设计理念 5 | 📦 开箱即用的高质量生态元素，包括 物料体系、设置器、插件 等 6 | ⚙️ 完善的工具链，支持 物料体系、设置器、插件 等生态元素的全链路研发周期 7 | 🔌 强大的扩展能力，已支撑 100+ 个各种类型低代码平台 8 | 🛡 使用 TypeScript 开发，提供完整的类型定义文件 9 | ``` 10 | 11 | [desc](https://camo.githubusercontent.com/e405017c0897dbd19c039af403b85d41e474bae68d2fd014ae605bd509d6ebd3/68747470733a2f2f696d672e616c6963646e2e636f6d2f696d6765787472612f69332f4f31434e303149697342637931644e424967313651464d5f2121363030303030303030333732332d322d7470732d313931362d313037302e706e67) 12 | -------------------------------------------------------------------------------- /原创/收藏/分类/nextjs.md: -------------------------------------------------------------------------------- 1 | ## 学习文档 2 | 3 | 1. [nextjs-tutorial](https://github.com/safak/nextjs-tutorial) 4 | -------------------------------------------------------------------------------- /原创/收藏/分类/node相关.md: -------------------------------------------------------------------------------- 1 | 1. [polka -- 基于express的微型Web服务器](https://github.com/lukeed/polka)简单程序上比express快30%；支持中间件：包括express中间件；和express几乎相同的api和路由模式； 2 | 2. [dumper.js -- 适用于Node.js应用程序的更好，更漂亮的变量检查器](https://github.com/zeeshanu/dumper.js) 3 | 3. [antcloud-node-stack -- 蚂蚁金融科技官方 Node 技术栈脚本](https://github.com/alipay/antcloud-node-stack) 4 | ## Koa 5 | 1. [safe-start-koa2 -- 简單直接的 Koa2 的脚手架](https://github.com/chungchi300/safe-start-koa2) 6 | 7 | ## 数据库驱动 8 | 1. [node-mongodb-native -- Mongo DB本机NodeJS驱动程序](https://github.com/mongodb/node-mongodb-native) 9 | 2. [better-sqlite3 -- Node.js中最快和最简单的SQLite3库](https://github.com/JoshuaWise/better-sqlite3) 10 | 3. [bull -- 用于处理NodeJS中的作业和消息的高级包，最快，最可靠，基于Redis的Node队列](https://github.com/OptimalBits/bull) 11 | 12 | ## 科学计算 13 | 1. [stdlib -- stdlib是JavaScript和Node.js的标准库，重点放在数字和科学计算应用程序上。](https://github.com/stdlib-js/stdlib) 14 | 15 | ![demo](https://camo.githubusercontent.com/603be274fc41ee39a4095b7c349016f85ee31945/68747470733a2f2f63646e2e7261776769742e636f6d2f7374646c69622d6a732f7374646c69622f323033383339333533626337343239376665363431323037323730663739313764326264613536302f646f63732f6173736574732f726561646d652f626173655f7370656369616c5f6d6174682e706e67) 16 | ## 均衡负载 17 | 1. [Microjob -- 一个微小的包装器，用于将Node.js工作线程转换为易于使用的例程，用于繁重的CPU负载。 ](https://github.com/wilk/microjob) 18 | ```js 19 | (async () => { 20 | const { job } = require('microjob') 21 | 22 | try { 23 | // this function will be executed in another thread 24 | const res = await job(() => { 25 | let i = 0 26 | for (i = 0; i < 1000000; i++) { 27 | // heavy CPU load ... 28 | } 29 | 30 | return i 31 | }) 32 | 33 | console.log(res) // 1000000 34 | } catch (err) { 35 | console.error(err) 36 | } 37 | })() 38 | ``` 39 | ## 路径匹配 40 | 1. [node-glob -- node中glob模式下路径匹配](https://github.com/isaacs/node-glob) 41 | ```js 42 | var glob = require("glob") 43 | 44 | // options is optional 45 | glob("**/*.js", options, function (er, files) { 46 | // files is an array of filenames. 47 | // If the `nonull` option is set, and nothing 48 | // was found, then files is ["**/*.js"] 49 | // er is an error object or null. 50 | }) 51 | ``` 52 | ## 调试工具 53 | 1. [ndb -- ndb是针对Node.js的改进调试体验，由Chrome DevTools启用](https://github.com/GoogleChromeLabs/ndb) 54 | ## 请求工具 55 | 1. [got -- 简化的HTTP请求](https://github.com/sindresorhus/got) 56 | ```js 57 | const got = require('got'); 58 | 59 | (async () => { 60 | try { 61 | const response = await got('sindresorhus.com'); 62 | console.log(response.body); 63 | //=> ' ...' 64 | } catch (error) { 65 | console.log(error.response.body); 66 | //=> 'Internal server error ...' 67 | } 68 | })(); 69 | ``` 70 | 2. [check-links -- 可靠地检查一系列URL以获得活跃度。](https://github.com/transitive-bullshit/check-links) 71 | ``` 72 | 支持http和https； 73 | 每次HTTP请求默认为10秒超时，重试次数为2次； 74 | 默认为Mac OS Chrome用户代理； 75 | 默认为重定向 76 | ``` 77 | 3. [http-timer -- HTTP请求的计时](https://github.com/szmarczak/http-timer) 78 | ```js 79 | const https = require('https'); 80 | const timer = require('@szmarczak/http-timer'); 81 | 82 | const request = https.get('https://httpbin.org/anything'); 83 | const timings = timer(request); 84 | 85 | request.on('response', response => { 86 | response.on('data', () => {}); // Consume the data somehow 87 | response.on('end', () => { 88 | console.log(timings); 89 | }); 90 | }); 91 | ``` 92 | -------------------------------------------------------------------------------- /原创/收藏/分类/webgl.md: -------------------------------------------------------------------------------- 1 | ## 引擎 2 | 3 | 1. [pixi.js -- HTML5 创建引擎：使用最快，最灵活的 2D WebGL 渲染器创建精美的数字内容。](https://github.com/pixijs/pixi.js) 4 | 5 | ## example 6 | 7 | 1. [nyc-buildings -- 曼哈顿所有建筑物的交互式三维可视化。](https://github.com/rolyatmax/nyc-buildings) 8 | 9 | ![demo](https://github.com/rolyatmax/nyc-buildings/raw/master/img/all-the-buildings.png) 10 | 11 | 2. [ElGrapho -- 一个高性能的 WebGL 图形数据可视化引擎。 El Grapho 可以在任何现代浏览器中支持数百万个交互式节点和边缘。](https://github.com/ericdrowell/ElGrapho) 12 | ![demo](https://raw.githubusercontent.com/ericdrowell/ElGrapho/master/img/elgrapho-examples.png) 13 | 3. [WebGL-Fluid-Simulation -- 在浏览器中使用流体（甚至可以在移动设备上使用）](https://github.com/PavelDoGreat/WebGL-Fluid-Simulation)超级美 14 | 15 | ![demo](https://github.com/PavelDoGreat/WebGL-Fluid-Simulation/raw/master/screenshot.png?raw=true) 16 | [demo](https://paveldogreat.github.io/WebGL-Fluid-Simulation/) 17 | 18 | ## three 19 | 20 | 1. [meshwalk](https://github.com/yomotsu/meshwalk) 使用 threejs 快速开发 TPS 游戏（第三人称射击游戏） 21 | 22 | [示例](https://yomotsu.github.io/xmas2014/) 23 | 24 | ### texture 25 | 26 | 1. [three-projected-material - Three.js 材质，可让您在 3d 模型上进行纹理投影](https://github.com/marcofugaro/three-projected-material) 27 | 28 | ![demo](https://github.com/marcofugaro/three-projected-material/raw/master/examples/screenshots/3d-model.png) 29 | -------------------------------------------------------------------------------- /原创/收藏/分类/代码格式化.md: -------------------------------------------------------------------------------- 1 | 1. [typescript-eslint -- Monorepo用于所有工具，使ESLint能够支持TypeScript](https://github.com/typescript-eslint/typescript-eslint) -------------------------------------------------------------------------------- /原创/收藏/分类/优化.md: -------------------------------------------------------------------------------- 1 | 1. [lazysizes -- 高性能和SEO友好的延迟加载器，用于图像（响应和正常），iframe等，可检测通过用户交互，CSS或JavaScript触发的任何可见性更改，无需配置。](https://github.com/aFarkas/lazysizes)懒加载。 2 | [demo](https://blog.csdn.net/gao449812984/article/details/80900546) 3 | ## 插件 4 | 1. [dlv -- 120字节的安全深度属性访问。x = dlv](https://github.com/developit/dlv) 5 | ```js 6 | import delve from 'dlv'; 7 | 8 | let obj = { 9 | a: { 10 | b: { 11 | c: 1, 12 | d: undefined, 13 | e: null 14 | } 15 | } 16 | }; 17 | 18 | //use string dot notation for keys 19 | delve(obj, 'a.b.c') === 1; 20 | 21 | //or use an array key 22 | delve(obj, ['a', 'b', 'c']) === 1; 23 | 24 | delve(obj, 'a.b') === obj.a.b; 25 | 26 | //returns undefined if the full key path does not exist and no default is specified 27 | delve(obj, 'a.b.f') === undefined; 28 | 29 | //optional third parameter for default if the full key in path is missing 30 | delve(obj, 'a.b.f', 'foo') === 'foo'; 31 | 32 | //or if the key exists but the value is undefined 33 | delve(obj, 'a.b.d', 'foo') === 'foo'; 34 | 35 | //Non-truthy defined values are still returned if they exist at the full keypath 36 | delve(obj, 'a.b.e', 'foo') === null; 37 | 38 | //undefined obj or key returns undefined, unless a default is supplied 39 | delve(undefined, 'a.b.c') === undefined; 40 | delve(undefined, 'a.b.c', 'foo') === 'foo'; 41 | delve(obj, undefined, 'foo') === 'foo'; 42 | ``` -------------------------------------------------------------------------------- /原创/收藏/分类/其他工具/hack.md: -------------------------------------------------------------------------------- 1 | 1. [bypass-paywalls-chrome -- chrome 上绕过支付墙](https://github.com/iamadamdev/bypass-paywalls-chrome) 2 | 2. [surge -- 一些脚本，包含京东、淘宝展示原价，移除微博脚本，丁丁打卡等](https://github.com/yichahucha/surge/tree/master) 3 | -------------------------------------------------------------------------------- /原创/收藏/分类/其他工具/办公.md: -------------------------------------------------------------------------------- 1 | ## 思维导图 2 | 3 | 1. [text2mindmap -- 通过编写缩进列表来制作思维导图的在线工具](https://github.com/tobloef/text2mindmap) 4 | 2. [fusuma -- Fusuma 很容易使用 Markdown 制作幻灯片](https://github.com/hiroppy/fusuma) 5 | ![demo](https://github.com/hiroppy/fusuma/raw/master/media/procedure-screenshot.png) 6 | 7 | ## 演示文档 8 | 9 | 1. [mdx-deck -- 基于 MDX 的演示文稿](https://github.com/jxnblk/mdx-deck) 10 | 11 | ![demo](https://camo.githubusercontent.com/c12c8d143a3509f9aa6fde5629ea0c7f78e68437/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6a786e626c6b2f6d64782d6465636b2e676966) 12 | [demo](https://hiroppy.github.io/fusuma/intro/#slide=1) 13 | 14 | ## 下载 15 | 16 | 1. [baiduyun -- 油猴脚本 直接下载百度网盘和百度网盘分享的文件,直链下载超级加速](https://github.com/syhyz1990/baiduyun) 17 | 18 | 2. [magnetW - 磁力链接聚合搜索](https://github.com/xiandanin/magnetW) 19 | 20 | ![程序截图](https://github.com/xiandanin/magnetW/raw/master/screenshots/app.gif) 21 | 22 | ## 公众号 23 | 24 | 1. [wechat-format -- 微信公众号排版编辑器，转化 Markdown 微信特制的 HTML ](https://github.com/lyricat/wechat-format) 25 | 26 | [demo](https://lab.lyric.im/wxformat/) 27 | 28 | ## 管理后台 29 | 30 | 1. [vhr -- 微人事是一个前后端分离的人力资源管理系统，项目采用 SpringBoot+Vue 开发。](https://github.com/lenve/vhr) 31 | 32 | ## 时间管理 33 | 34 | 1. [Joplin - 具有 Windows，macOS，Linux，Android 和 iOS 同步功能的开源笔记记录和待办事项应用程序。](https://github.com/laurent22/joplin) 35 | 36 | 支持 window、linux、macOS。windows 版下载下来 112mb 37 | 38 | ![软件截图](https://camo.githubusercontent.com/4f4603c9de2d8d9f6051628fbb5d91183046a471/68747470733a2f2f6a6f706c696e6170702e6f72672f696d616765732f416c6c436c69656e74732e6a7067) 39 | 40 | ## 文档管理 41 | 42 | 1. [Paperless-ngx - 有 OCR 的文件管理系统](https://github.com/paperless-ngx/paperless-ngx) Paperless-ngx 是一种文档管理系统，可将您的物理文档转换为可搜索的在线档案，这样您就可以减少纸张的使用。 43 | ![demo](https://raw.githubusercontent.com/paperless-ngx/paperless-ngx/main/docs/assets/screenshots/documents-smallcards.png#gh-light-mode-only) 44 | 45 | [在线示例](https://demo.paperless-ngx.com/dashboard) 46 | 47 | ## 文件传输 48 | 49 | 1. [shareDrop - 开源的 airdrop](https://github.com/szimek/sharedrop) 在同意本地网络中，无需任何配置，只要在设备上打开 https://www.sharedrop.io 就可传输文件，与 airdrop 不一样的是，ShareDrop 需要互联网连接来发现其他设备，而 AirDrop 不需要 50 | -------------------------------------------------------------------------------- /原创/收藏/分类/其他工具/大牛博客.md: -------------------------------------------------------------------------------- 1 | ## 国外 2 | 1. [gaearon -- 丹·阿布拉莫夫的个人博客](https://overreacted.io/) 3 | 2. [frankmcsherry/blog](https://github.com/frankmcsherry/blog) 4 | ## 国内 5 | 1. [ljianshu/Blog -- 关注基础知识，打造优质前端博客，欢迎关注我的公众号：前端工匠](https://github.com/ljianshu/Blog) 6 | ## 工具链推荐 7 | [开发效率提升：Mac生产力工具链推荐](https://github.com/Louiszhai/tool) -------------------------------------------------------------------------------- /原创/收藏/分类/其他工具/数据收藏.md: -------------------------------------------------------------------------------- 1 | 1. [Administrative-divisions-of-China -- 中华人民共和国行政区划：省级（省份直辖市自治区）、 地级（城市）、 县级（区县）、 乡级（乡镇街道）、 村级（村委会居委会） ，中国省市区镇村二级三级四级五级联动地址数据 Node.js 爬虫。](https://github.com/modood/Administrative-divisions-of-China) 2 | 3 | 包含数据下载，中国省市县区数据及代码 -------------------------------------------------------------------------------- /原创/收藏/分类/其他工具/文件处理.md: -------------------------------------------------------------------------------- 1 | ## 上传 2 | 3 | 1. [filepond -- 一个灵活有趣的 JavaScript 文件上传插件](https://github.com/pqina/filepond) 4 | 5 | ## 文档类 6 | 7 | 1. [ReLaXed -- 使用 web 技术创建 PDF 文档](https://github.com/RelaxedJS/ReLaXed)ReLaXed 是一种使用 HTML 或 Pug（HTML 的简写）交互式创建 PDF 文档的工具。它允许使用 CSS 和 JavaScript 定义复杂的布局，同时将内容写入接近 Markdown 或 LaTeX 的友好，最简单的语法中。 8 | 9 | ![demo](https://camo.githubusercontent.com/be077d7379399961977b45a802b675f5c18f170a/68747470733a2f2f692e696d6775722e636f6d2f344e34665359592e676966) 10 | 11 | 2. [percollate -- 一种命令行工具，可将网页抓取为格式精美的 PDF](https://github.com/danburzo/percollate) 12 | 3. [pdf.js -- js pdf 阅读器](https://github.com/mozilla/pdf.js) 13 | 14 | ## 图片类 15 | 16 | 1. [vivid -- 一个 JavaScript 库，它可以轻松定制和使用 SVG 图标。](https://github.com/webkul/vivid) 17 | 18 | ## 音频类 19 | 20 | 1. [howler.js -- howler.js 是现代网络的音频库。它默认为 Web Audio API 并回退到 HTML5 Audio。这使得在所有平台上使用 JavaScript 轻松可靠地处理音频](https://github.com/goldfire/howler.js) 21 | 22 | [官方文档](https://howlerjs.com/) 23 | -------------------------------------------------------------------------------- /原创/收藏/分类/其他工具/文本处理.md: -------------------------------------------------------------------------------- 1 | ## 表情 2 | 1. [oji -- 文本表情符号生成器](https://github.com/xxczaki/oji) 3 | 4 | ![demo](https://camo.githubusercontent.com/ddbd1e46c050d2227df947c1ba41a405f0f17958/68747470733a2f2f692e696d6775722e636f6d2f6d6646314169792e676966) 5 | ## 时间 6 | 1. [dayjs -- 使用相同的现代API替代Moment.js的快速2KB日期库](https://github.com/xx45/dayjs) 7 | 2. [You-Dont-Need-Momentjs -- 可用于替换moment.js + ESLint插件的日期文件或本机函数列表](https://github.com/you-dont-need/You-Dont-Need-Momentjs) 8 | ## 文本突出 9 | 1. [lumin -- 一个JavaScript库，逐步突出显示页面上的任何文本。](https://github.com/pshihn/lumin) 10 | 11 | [demo](https://camo.githubusercontent.com/a536b2095ed53b00ac4edb357bb98bd42a0c9144/68747470733a2f2f6c756d696e2e726f636b732f696d616765732f686967686c696768742e676966) 12 | ## markdown 13 | 1. [mermaid -- 以与markdown类似的方式从文本生成图表和流程图](https://github.com/knsv/mermaid) 14 | 15 | ![demo](https://github.com/knsv/mermaid/raw/master/img/header.png) 16 | ## 编辑器 17 | 1. [monaco-editor -- 基于浏览器的代码编辑器](https://github.com/Microsoft/monaco-editor) 18 | 19 | ![demo](https://cloud.githubusercontent.com/assets/5047891/19600675/5eaae9e6-97a6-11e6-97ad-93903167d8ba.png) 20 | ## 文本查找 21 | 1. [fastscan -- 通过ahocorasick算法快速搜索文本](https://github.com/pyloque/fastscan) 22 | 23 | ![demo](https://github.com/pyloque/fastscan/raw/master/images/graph.png) 24 | 2. [flexsearch -- Browser和Node.js的下一代全文搜索库](https://github.com/nextapps-de/flexsearch) 25 | ## 表单校验 26 | 1. [forgJs -- ForgJs是一个javascript轻量级对象验证器。去查看快速入门部分并开始用爱编码](https://github.com/oussamahamdaoui/forgJs) 27 | ```js 28 | const { Validator, Rule } = require('@cesium133/forgjs'); 29 | 30 | const vComplexe = new Validator({ 31 | age: new Rule({ type: 'int', min: 18, max: 99 }), 32 | dateOfBirth: new Rule({ type: 'date' }), 33 | array: new Rule({ type: 'array', of: new Rule({ type: 'string' }) }), 34 | }); 35 | 36 | vComplexe.test({ 37 | age: 26, 38 | dateOfBirth: new Date(1995, 10, 3), 39 | array: ['1'], 40 | }); /// returns true 41 | ``` 42 | ## 国际化 43 | 1. [fbt -- fb出的JavaScript国际化框架](https://github.com/facebookincubator/fbt) 44 | ## 记事本 45 | 1. [trilium -- 使用Trilium Notes构建您的个人知识库](https://github.com/zadam/trilium) 46 | 47 | ![demo](https://raw.githubusercontent.com/wiki/zadam/trilium/images/screenshot.png) -------------------------------------------------------------------------------- /原创/收藏/分类/其他工具/有趣的开发工具.md: -------------------------------------------------------------------------------- 1 | ## 搭建博客 2 | 3 | 1. [letterpad -- Letterpad 是采用最先进技术的博客的开源和高性能发布引擎。它使用 React，Graphql，Express 和 Sequelize ORM。它现在处于测试阶段。](https://github.com/letterpad/letterpad) 4 | 它具有以下功能： 5 | 6 | ``` 7 | 服务器端渲染 8 | 多作者支持 9 | 评论（Disqus整合） 10 | 谷歌分析 11 | 主题支持 12 | 多级导航 13 | 图像优化器 14 | GraphQL for json API 15 | 角色 - 管理员，审稿人，作者，读者 16 | Markdown和RichText编辑器 17 | 搜索引擎优化 18 | 多语言支持（当前en，fr和pl） 19 | ``` 20 | 21 | [demo 地址](https://letterpad.app/demo/) 2. [docsite -- 一个开源静态网站生成器](https://github.com/txd-team/docsite) 22 | 23 | ## api 相关 24 | 25 | 1. [slate -- 适用于 API 的精美静态文档](https://github.com/lord/slate) 26 | 27 | ![demo](https://raw.githubusercontent.com/lord/img/master/screenshot-slate.png) 28 | 29 | [demo](https://lord.github.io/slate/#authentication) 30 | 31 | ## 整合资源 32 | 33 | 1. [JSUI -- 一个强大的用于管理 JavaScript 应用程序的 UI 工具包](https://github.com/kitze/JSUI)推荐给喜欢归纳收藏各种 js lib 的人 er~ 34 | 35 | ![demo](https://camo.githubusercontent.com/a1dc84035e85ceda7bec11bc14a5d95c72846c7e/68747470733a2f2f692e696d6775722e636f6d2f587759583845452e676966) 36 | 37 | ## markdown 38 | 39 | 1. [readme-md-generator](https://github.com/kefranabg/readme-md-generator)readme-md-generator 能够读取您的环境（package.json，git config ...），以便在 README.md 创建过程中建议您的默认答案 40 | 41 | ![demo](https://user-images.githubusercontent.com/9840435/59459416-07f1e580-8e1d-11e9-89e7-6a5e6b373e93.gif) 42 | 43 | ## 代码片段 44 | 45 | 1. [Lepton -- Lepton 是一个基于 GitHub Gist 的精简代码片段管理器](https://github.com/hackjutsu/Lepton) 46 | 47 | ![demo](https://github.com/hackjutsu/Lepton/raw/master/docs/img/portfolio/stay_organized.png) 48 | 49 | ## web 开发 50 | 51 | 1. [responsively-app -- 一个用于开发响应式网页的浏览器，看起来还不错](https://github.com/responsively-org/responsively-app) 52 | 53 | ![demo](https://camo.githubusercontent.com/9c692245c2ec3c3d5b4485c2cd4d266b01e6a3849620ea1363b7a61fced78e12/68747470733a2f2f726573706f6e736976656c792e6170702f6173736574732f696d672f726573706f6e736976656c792d6170702e676966) 54 | -------------------------------------------------------------------------------- /原创/收藏/分类/其他工具/游戏.md: -------------------------------------------------------------------------------- 1 | ## 小游戏 2 | 3 | 1. [tetris -- 流行的游戏俄罗斯方块的克隆。](https://github.com/nullobject/tetris)其实就是个小游戏，感兴趣的可以看看源代码 4 | [游戏地址](https://tetris.joshbassett.info/) 5 | 2. [tower_game -- 盖楼游戏 html5 canvas tower building game ](https://github.com/bmqb/tower_game) 6 | 7 | ![demo](https://camo.githubusercontent.com/2bd720d4d3c07d5755e7533bc99db4c37cf15106/687474703a2f2f6f6264686f796667342e626b742e636c6f7564646e2e636f6d2f746f7765722d707265766965772e676966) 8 | 9 | 3. [15-puzzle -- 15 拼图是一个滑动拼图，由一组编号方形拼块按随机顺序组成，缺少一个拼贴](https://github.com/imshubhamsingh/15-puzzle) 10 | 11 | ![demo](https://raw.githubusercontent.com/imshubhamsingh/15-puzzle/master/screenshots/1.png) 4. [taiko-web -- web 太鼓达人](https://github.com/bui/taiko-web) 12 | 13 | ## 模拟 14 | 15 | 1. [OpenSC2K -- 由 Maxis 公司开发的 SimCity 2000 开源软件](https://github.com/rage8885/OpenSC2K)使用 HTML5 Canvas API 和 SQLite 编写的使用 JavaScript 编写的模拟城市 2000 的开放源代码重建，并且构建在 Electron 上。 16 | 2. [nes -- 一个 Javascript NES 模拟器](https://github.com/fredericcambon/nes) 17 | 18 | ![demo](https://camo.githubusercontent.com/7545e51acb21557e1a37856f45ab7f01da83d4e0/68747470733a2f2f692e696d6775722e636f6d2f7a6d39626a474e6c2e706e67) 19 | 20 | 3. [AutoPiano -- 自由钢琴 AutoPiano](https://github.com/WarpPrism/AutoPiano) 可以在上面学琴~~ 21 | 22 | ## 开源平台 23 | 24 | 1. [shapez.io -- shapez.io 是一个受 factorio 启发的开源基础构建游戏！可在网络和桌面上使用](https://github.com/tobspr/shapez.io) 25 | 2. [GDevelop](https://github.com/4ian/GDevelop) 在网页上制作游戏应用，无需任何代码 26 | 27 | ![demo](https://raw.githubusercontent.com/4ian/GDevelop/master/newIDE/GDevelop%20screenshot.png) 28 | -------------------------------------------------------------------------------- /原创/收藏/分类/其他工具/生涯相关.md: -------------------------------------------------------------------------------- 1 | ## 找工作 2 | 1. [programmer-job-blacklist -- 程序员找工作黑名单，换工作和当技术合伙人需谨慎啊 更新有赞 ](https://github.com/shengxinjing/programmer-job-blacklist) 3 | 2. [955.WLB -- 955 不加班的公司名单](https://github.com/formulahendry/955.WLB) 4 | ## 海外工作 5 | ## 设计 6 | 1. [Awesome-Design-Tools -- 适合一切的最佳设计工具](https://github.com/LisaDziuba/Awesome-Design-Tools) -------------------------------------------------------------------------------- /原创/收藏/分类/其他工具/网络相关.md: -------------------------------------------------------------------------------- 1 | ## 服务代理 2 | 1. [ilsap -- Intellij许可证服务器活动代理](https://github.com/rodrigogs/ilsap)这个我自己还没有测试，使用jet brains家的产品就fork一下把~~ 3 | 2. [jsonstore -- 通过发送简单的HTTP请求免费存储您的数据](https://github.com/bluzi/jsonstore)非常值得收藏~适合自己写前端demo作为临时数据接口使用 4 | 5 | [官网](https://www.jsonstore.io/) 6 | 3. [Mellow -- Mellow 是一个基于规则的全局透明代理工具，可以运行在 Windows、macOS 和 Linux 上，也可以配置成路由器透明代理或代理网关，支持 SOCKS、HTTP、Shadowsocks、VMess 等多种代理协议。](https://github.com/mellow-io/mellow) 7 | ## 请求优化 8 | 1. [quicklink -- 通过在空闲时间预取视口内链接，加快后续页面加载速度](https://github.com/GoogleChromeLabs/quicklink) -------------------------------------------------------------------------------- /原创/收藏/分类/其他工具/聊天室.md: -------------------------------------------------------------------------------- 1 | ## IRC 2 | 3 | 1. [lounge -- 现代自主网络 IRC 客户端](https://github.com/thelounge/lounge)具有推送通知、链接预览、信息标记；始终连接；跨平台；响应式；优秀的同步体验。 4 | 5 | ## 聊天机器人 6 | 7 | 1. [wechat-bot- 一个基于 OpenAi ChatGPT + WeChaty 实现的微信机器人 ，可以用来帮助你自动回复微信消息，或者管理微信群/好友，检测僵尸粉等...](https://github.com/wangrongding/wechat-bot) 8 | -------------------------------------------------------------------------------- /原创/收藏/分类/其他工具/量化.md: -------------------------------------------------------------------------------- 1 | 1. [xalpha-基金投资管理回测引擎](https://github.com/refraction-ray/xalpha) 2 | -------------------------------------------------------------------------------- /原创/收藏/分类/其他工具/面试题.md: -------------------------------------------------------------------------------- 1 | 1. [30-seconds-of-interviews -- 一系列常见面试问题的集合，以帮助您为下次面试做好准备。](https://github.com/fejes713/30-seconds-of-interviews) 2 | 3 | [地址](https://github.com/fejes713/30-seconds-of-interviews) 4 | 2. [javascript-questions](https://github.com/lydiahallie/javascript-questions) 5 | 一长串（高级）JavaScript问题及其解释✨每周更新一次！ -------------------------------------------------------------------------------- /原创/收藏/分类/动画.md: -------------------------------------------------------------------------------- 1 | ## 渐变 2 | 3 | 1. [swup -- 完整，灵活，易用的页面转换库。](https://github.com/gmrchk/swup) 4 | 5 | ![demo](https://gmrchk.github.io/swup-gia-demo/) 6 | 7 | ## 库 8 | 9 | 1. [typeit -- 这个星球上最通用的 JavaScript 动画打字工具](https://github.com/alexmacarthur/typeit) 10 | ![demo](https://github.com/alexmacarthur/typeit/raw/master/demo.gif) 11 | 2. [ola -- 用于插值数字的平滑动画库](https://github.com/franciscop/ola) 12 | ![demo](https://raw.githubusercontent.com/franciscop/ola/master/docs/line.gif) 13 | 14 | ## 滚动 15 | 16 | 1. [laxxx -- 简单轻巧（2kb 缩小和压缩）香草 javascript 插件，当你滚动时创建流畅和美丽的动画！利用最直观的互动的力量，让您的网站活跃起来！](https://github.com/alexfoxy/laxxx) 17 | 18 | ![demo](https://camo.githubusercontent.com/9c753cc96b8ce9b065bc33f736118768c2ecc2ea/68747470733a2f2f692e696d6775722e636f6d2f4448686c724d332e676966) 19 | 20 | [demo](https://alexfox.dev/laxxx/) 21 | 22 | 2. [lenis - 顺滑的滚轴动画](https://github.com/studio-freight/lenis) 23 | 24 | 可以看下[官方 demo](https://lenis.studiofreight.com/)，像动画短片一样 25 | 26 | ## 特效 27 | 28 | 1.[particles.js -- 轻量级的粒子动画库 ](https://github.com/VincentGarreau/particles.js) 29 | ![demo](https://camo.githubusercontent.com/cdc9e740f0c04b77449e476c91e6f7770a6af6e7/687474703a2f2f76696e63656e74676172726561752e636f6d2f7061727469636c65732e6a732f6173736574732f696d672f6769746875622d73637265656e2e6a7067) 30 | -------------------------------------------------------------------------------- /原创/收藏/分类/区块链.md: -------------------------------------------------------------------------------- 1 | ## 交易所 2 | 3 | 1. [ccxt -- 支持 100 多个比特币/ altcoin 交易所的 JavaScript / Python / PHP 加密货币交易库](https://github.com/ccxt/ccxt) 4 | 5 | ## 交易钱包 6 | 7 | 1. [metamask - 在几秒钟内开始探索区块链应用程序。受到全球超过 3000 万用户的信赖。](https://metamask.io/) 8 | 9 | ## 合约 10 | 11 | 1. [openzeppelin-contracts -- OpenZeppelin 合约通过对以太坊和其他区块链使用经过实践检验的智能合约库，可帮助您将风险降至最低。它包括最常用的 ERC 标准实施。](https://github.com/OpenZeppelin/openzeppelin-contracts) 12 | 13 | ## 文档 14 | 15 | 1. [awesome-blockchain](https://github.com/chaozh/awesome-blockchain)收集所有区块链(BlockChain)技术开发相关资料，包括 Fabric 和 Ethereum 开发资料 16 | 2. [ethereumbook -- Mastering Ethereum 英文文档](https://github.com/ethereumbook/ethereumbook) 17 | -------------------------------------------------------------------------------- /原创/收藏/分类/地理相关.md: -------------------------------------------------------------------------------- 1 | 1. [gcoord -- 用于转换地理坐标的js库](https://github.com/hujiulong/gcoord)gcoord( geographic coordinates)是一个处理地理坐标系的js库，用来修正百度地图、高德地图及其它互联网地图坐标系不统一的问题 2 | 2. [kepler.gl -- 数据不可知的，高性能的基于Web的应用程序，用于大规模地理定位数据集的可视化探索。](https://github.com/uber/kepler.gl) 3 | ![demo](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/website/hero/kepler.gl-contours.png) 4 | 3. [AgentMaps -- 使用Javascript在交互式地图上进行社交模拟！基于代理的Web建模。](https://github.com/noncomputable/AgentMaps) 5 | 6 | [demo演示](https://noncomputable.github.io/AgentMaps/demos/simple/simple.html) 7 | 8 | ![demo](https://github.com/noncomputable/AgentMaps/raw/master/resources/agentgif.gif) -------------------------------------------------------------------------------- /原创/收藏/分类/娱乐/视频.md: -------------------------------------------------------------------------------- 1 | ## iptv 2 | 3 | 1. [iptv - 添加到 iptv 的 tv 链接集合](https://github.com/iptv-org/iptv) 4 | -------------------------------------------------------------------------------- /原创/收藏/分类/学习的文档.md: -------------------------------------------------------------------------------- 1 | 1. [learntocrypto -- 学习加密算法](https://github.com/sodium-friends/learntocrypto) 2 | 2. [serviceworker-cookbook -- service-worker 手册，由 mozilla 社区开源](https://github.com/mozilla/serviceworker-cookbook) 3 | 4 | [官网](https://serviceworke.rs/) 5 | 6 | 3. [33-js-concepts -- 每个 JavaScript 开发人员应该知道 33 个概念。(中文版)](https://github.com/stephentian/33-js-concepts) 7 | 4. [Web-Series -- 现代 Web 开发，现代 Web 开发导论 | 基础篇 | 进阶篇 | 架构优化篇 | React 篇 | Vue 篇 ](https://github.com/wxyyxc1992/Web-Series)Web 开发，入门易，深度难，分为初窥门径、登堂入室、融会贯通等阶段。本仓库存放 ITCS 技术体系与知识图谱-Web 前端相关领域的 Web 开发基础与工程实践的相关博客、示例代码与开源项目、整理成的系列书籍等内容；目前为了更好地体系化阅读，笔者将所有的内容规整到了不同的系列文章 / 书籍中。 8 | 5. [30-seconds-of-css -- 精选的有用 CSS 片段集合，您可以在 30 秒或更短的时间内理解这些片段。](https://github.com/30-seconds/30-seconds-of-css) 9 | 6. [You-Dont-Need-jQuery -- 如何使用简单的 javascript 进行查询，样式，dom，ajax，事件等的示例。](https://github.com/nefe/You-Dont-Need-jQuery) 10 | 11 | ## 面试 12 | 13 | 1. [javascript-questions](https://github.com/lydiahallie/javascript-questions) 14 | 一长串（高级）JavaScript 问题及其解释 ✨ 每周更新一次！ 15 | 16 | ## css 17 | 18 | 1. [css_tricks](https://github.com/QiShaoXuan/css_tricks) 19 | 20 | ## react 21 | 22 | 1. [react-conf-2018 -- 90% Cleaner React w/ Hooks](https://github.com/ryanflorence/react-conf-2018) 23 | 2. [simple-redux -- 用于教学目的的 redux 的简单实现](https://github.com/eddyerburgh/simple-redux) 24 | 3. [react-developer-roadmap -- 虽然更新到了 2019 年，不过也很有参考价值](https://github.com/adam-golab/react-developer-roadmap/blob/master/README-CN.md) 25 | 4. [reactjs-interview-questions -- 500 道 react 相关的面试题和答案](https://github.com/sudheerj/reactjs-interview-questions) 26 | 27 | ## webpack 28 | 29 | 1. [awesome-webpack-cn -- [印记中文](https://docschina.org/) - webpack 优秀中文文章](https://github.com/webpack-china/awesome-webpack-cn) 30 | 31 | ## git 32 | 33 | 1. [learnGitBranching -- 一个互动的 git 可视化，以挑战和教育！](https://github.com/pcottle/learnGitBranching) 34 | ![演示地址](https://learngitbranching.js.org/?demo) 35 | 36 | ## node 37 | 38 | 1. [nodebestpractices -- 最大的 Node.JS 最佳实践列表（2018 年 11 月）](https://github.com/i0natan/nodebestpractices) 39 | 40 | ## 安全 41 | 42 | 1. [learn-json-web-tokens -- 了解如何使用 JSON Web Token（JWT）来保护您的下一个 Web App！ （教程/测试示例!!）](https://github.com/dwyl/learn-json-web-tokens) 43 | 2. [security-checklist -- 在互联网上保持安全的清单](https://github.com/brianlovin/security-checklist) 44 | 45 | ## mac 46 | 47 | 1. [awesome-mac -- 现在我们变得非常大，与最初的想法不同。收集各种类别的高级软件。](https://github.com/jaywcjlove/awesome-mac) 48 | 49 | ## electron 50 | 51 | 1. [electron-quick-start -- 克隆尝试一个简单的电子应用程序](https://github.com/electron/electron-quick-start) 52 | 53 | ## docker 54 | 55 | 1. [docker_practice -- 通过真正的 DevOps 练习，学习和了解 Docker 技术！](https://github.com/yeasy/docker_practice) 56 | 57 | ## 算法 58 | 59 | 1. [dsa.js -- 使用 JavaScript 的数据结构和算法](https://github.com/amejiarosario/dsa.js) 60 | 2. [google-interview-preparation-problems -- leetcode 上用 js 解决的算法题源码](https://github.com/mgechev/google-interview-preparation-problems) 61 | 3. [leetcode -- leetcode 题解，记录自己的 leecode 解题之路。](https://github.com/azl397985856/leetcode) 62 | 63 | ## python 64 | 65 | 1. [Python-100-Days -- Python - 100 天从新手到大师](https://github.com/jackfrued/Python-100-Days) 66 | 67 | ## AI 68 | 69 | 1. [Prompt-Engineering-Guide - 提示工程指南](https://github.com/dair-ai/Prompt-Engineering-Guide) chatgpt 带火的工程，非常值得一看 70 | 71 | ## 其他 72 | 73 | 1. [kubernetes-learning-path - kubernetes 学习 roadmap](https://github.com/techiescamp/kubernetes-learning-path) 74 | 75 | ## 集合 76 | 77 | 1. [libpku -- 北京大学课程资料整理](https://github.com/lib-pku/libpku) 78 | 2. [from_coder_to_expert -- 2019 年最新总结，从程序员到 CTO，从专业走向卓越，分享大牛企业内部 pdf 与 PPT](https://github.com/0voice/from_coder_to_expert) 79 | 3. [howtheysre -- 精选的公开资源集合，介绍了世界各地的技术和精通技术的组织如何实践站点可靠性工程（SRE）](https://github.com/upgundecha/howtheysre) 80 | 4. [Programmers-Overseas-Job-Interview-Handbook - 程序员海外工作/英文面试手册 ](https://github.com/eliaszon/Programmers-Overseas-Job-Interview-Handbook) 81 | -------------------------------------------------------------------------------- /原创/收藏/分类/建站.md: -------------------------------------------------------------------------------- 1 | ## makdown 2 | 3 | 1. [md-page -- 创建一个只用 markdown 的网页](https://github.com/oscarmorrison/md-page) 4 | ![demo](https://user-images.githubusercontent.com/1651212/46581080-1cefcb00-ca7d-11e8-8a4f-828dbe945dc6.png) 5 | 2. [cms.js -- 客户端 JavaScript 站点生成器](https://github.com/chrisdiana/cms.js) 6 | 3. [fiddly -- 从 Readme.md 文件创建美观简单的 HTML 页面](https://github.com/SaraVieira/fiddly) 7 | 8 | ## 建站 9 | 10 | 1.[gatsby -- 使用 React 构建快速，现代化的应用程序和网站](https://github.com/gatsbyjs/gatsby) 11 | 12 | ## 开源服务器 13 | 14 | 1. [MyDrive -- 是一个开源云服务器（类似于 Google Drive），由 Node.JS，Express，React 和 MongoDB 构建。](https://github.com/subnub/myDrive) 15 | 16 | ``` 17 | MyDrive功能： 18 | 19 | 上传文件 20 | 下载档案 21 | 建立资料夹 22 | 分享文件 23 | 创建图像缩略图 24 | 照片浏览器 25 | 串流影片 26 | 转码视频 27 | 创建文件的一次性下载链接 28 | 移动文件/文件夹 29 | AES256加密（用于文件块，令牌等！） 30 | 搜索文件/文件夹 31 | 移动友好（包括上传！） 32 | 进阶筛选器选项 33 | ``` 34 | 35 | ## 站点监控 36 | 37 | 1. [uptime-kuma - 简单易用的站点监控工具](https://github.com/louislam/uptime-kuma) 38 | 39 | ![demo](https://user-images.githubusercontent.com/1336778/212262296-e6205815-ad62-488c-83ec-a5b0d0689f7c.jpg) 40 | 41 | ``` 42 | 监控HTTP(s) / TCP / HTTP(s)关键字/ HTTP(s) Json查询/ Ping / DNS记录/ Push / Steam游戏服务器/ Docker容器的运行时间 43 | 花哨、反应性、快速的UI/UX 44 | 通过Telegram, Discord, Gotify, Slack, Pushover, Email (SMTP)和90多个通知服务进行通知，点击这里查看完整列表 45 | 20秒的间隔 46 | 多语言 47 | 多个状态页 48 | 将状态页映射到特定的域 49 | 平图 50 | 证书信息 51 | 代理支持 52 | 2 fa支持 53 | ``` 54 | -------------------------------------------------------------------------------- /原创/收藏/分类/微信小程序.md: -------------------------------------------------------------------------------- 1 | ## 框架 2 | 1. [mpvue -- 基于 Vue.js 的小程序开发框架，从底层支持 Vue.js 语法和构建工具体系。](https://github.com/Meituan-Dianping/mpvue) 3 | 2. [taro -- 京东多端统一开发框架，支持用 React 的开发方式编写一次代码，生成能运行在微信小程序、H5、React Native 等的应用。](https://github.com/NervJS/taro) 看着十分心动，博主最近正好在学习小程序，使用taro实验之后将会写篇文档 4 | 5 | [官方文档](https://taro.aotu.io/) 6 | 3. [omi -- Omi === Preact + Scoped CSS +Store System +本机支持3kb javascript。](https://github.com/Tencent/omi) 7 | 8 | [文档](https://github.com/Tencent/omi/blob/master/README.CN.md) 9 | 4. [westore -- 世界上最小却强大的小程序框架 - 100多行代码搞定全局状态管理、跨页通讯和插件开发](https://github.com/dntzhang/westore) 10 | ## 组件 11 | 1. [wxa-plugin-canvas -- 小程序海报组件-生成朋友圈分享海报并生成图片](https://github.com/jasondu/wxa-plugin-canvas) 12 | 13 | ## 文章 14 | 1. [awesome-wechat-weapp -- 微信小程序开发资源汇总](https://github.com/justjavac/awesome-wechat-weapp) 15 | 16 | ## UI库 17 | 1. [zanui-weapp -- 高颜值、好用、易扩展的微信小程序 UI 库，Powered by 有赞](https://github.com/youzan/zanui-weapp) 18 | 2. [taro-ui -- 一款基于 Taro 框架开发的多端 UI 组件库](https://github.com/NervJS/taro-ui) 19 | 20 | [官网](https://taro-ui.aotu.io/#/docs/article) 21 | 22 | ## 迁移工具 23 | 1. [WeTypecho -- 微信小程序版Typecho ](https://github.com/MingliangLu/WeTypecho) 24 | 25 | 众所周知，现在由于移动互联网的普及，网站访问量下降，导致个人站长非常难混。 26 | 27 | WeTypecho则能帮您快速搭建微信小程序，将Typecho博客的内容映射到微信小程序。 帮助您在一定程度上获取更多来自微信的流量。WeTypecho的安非常简单，只需三分钟，就能搭建。 28 | 29 | ## 示例 30 | 1. [didi -- 模仿滴滴打车微信小程序，持续更新中，有兴趣的小伙伴可以加入一起沟通交流噢。实现了主要的业务流程,数据封装和请求,本小程序仍会不断的更新...](https://github.com/WsmDyj/didi) -------------------------------------------------------------------------------- /原创/收藏/分类/控件.md: -------------------------------------------------------------------------------- 1 | ## 提示块 2 | 3 | 1. [tippyjs -- 一个轻量级的 vanilla JS 工具提示库](https://github.com/atomiks/tippyjs) 4 | 5 | [官方示例](https://atomiks.github.io/tippyjs/) 6 | 7 | 2. [driver.js -- 一个轻量级的，无需依赖的 JavaScript 引擎，可以在整个页面中推动用户的注意力](https://github.com/kamranahmedse/driver.js) 8 | 9 | 这个库可以用来给某个元素高亮，高度可定制化； 10 | [官方示例](http://kamranahmed.info/driver) 11 | 12 | ## 表单输入 13 | 14 | 1. [text-mask -- 一个输入掩码库。它可以为手机，日期，货币，邮政编码，百分比，电子邮件和字面上的任何东西创建输入掩码！](https://github.com/text-mask/text-mask) 15 | 16 | [demo](https://text-mask.github.io/text-mask/) 17 | 18 | 2. [cleave.js -- 键入时格式化输入文本内容。](https://github.com/nosir/cleave.js) 19 | 20 | ## 走马灯 21 | 22 | 1. [glide -- 0 依赖，轻量的 slider 和走马灯](https://github.com/glidejs/glide) 23 | 2. [Glider.js -- 一个超快速，轻量级，无依赖性，最小的旋转木马，动力滚动！](https://github.com/NickPiscitelli/Glider.js) 24 | [demo](https://nickpiscitelli.github.io/Glider.js/) 25 | 26 | ## 滚动展示 27 | 28 | 1. [scrollbooster -- 令人愉快的内容拖动滚动库](https://github.com/ilyashubin/scrollbooster) 29 | 30 | [官方示例](https://ilyashubin.github.io/scrollbooster/) 31 | ![demo](http://chuantu.biz/t6/259/1521509388x-1404817509.gif) 32 | 33 | 2. [virtual-scroller -- 将提供的 JavaScript 对象集映射到 DOM 节点上，并仅呈现当前可见的 DOM 节点，其余部分为“虚拟化”。](https://github.com/valdrinkoshi/virtual-scroller) 34 | 35 | [具体示例](https://github.com/valdrinkoshi/virtual-scroller/blob/master/demo/scrolling.html) 36 | 37 | ## 日历 38 | 39 | 1. [tui.calendar -- 一个 JavaScript 日历，你需要的一切。](https://github.com/nhnent/tui.calendar) 40 | 41 | ![demo](https://user-images.githubusercontent.com/26706716/38919146-bc596f28-432a-11e8-8bbd-b561911067c7.gif) 42 | 43 | ## 颜色选择器 44 | 45 | 1. [pickr -- 简单的颜色选择器。没有依赖关系，没有 jQuery，与所有 CSS 框架兼容。 Bootstrap，实现。](https://github.com/Simonwep/pickr) 46 | 47 | ![demo](https://github.com/Simonwep/pickr/raw/master/gh-page/pickr.apng) 48 | 49 | ## 列表 50 | 51 | 1. [pulltorefresh.js -- 一个快速而强大的插件，用于在您的 web 应用程序中进行“上拉刷新”需求。](https://github.com/BoxFactura/pulltorefresh.js) 52 | 53 | ![demo](https://github.com/BoxFactura/pulltorefresh.js/raw/master/img/pulltorefresh.gif) 54 | 55 | ## ui 框架 56 | 57 | 1. [OnsenUI -- 使用 HTML5 和 JavaScript 的移动应用开发框架和 SDK。创建漂亮且高性能的跨平台移动应用程序。基于 Web 组件，并为 Angular 1,2，React 和 Vue.js 提供绑定](https://github.com/OnsenUI/OnsenUI) 58 | 59 | [官网](https://onsen.io/) 60 | ![demo](https://camo.githubusercontent.com/d6b430c80dda5fdf918272eb352e0e63cb5238d3/68747470733a2f2f6f6e73656e2e696f2f696d616765732f73616d706c65732f72656163742d72656475782d776561746865722e706e67) 61 | 62 | ## 引导 63 | 64 | 1. [shepherd -- 引导您的用户浏览您的应用](https://github.com/shipshapecode/shepherd) 65 | ![demo](https://github.com/shipshapecode/shepherd/raw/master/docs/assets/img/intro-step.png) 66 | 67 | ## 事件绑定 68 | 69 | 1. [hotkey -- 全局 DOM 元素激活](https://github.com/github/hotkey) 70 | 71 | ## 视觉 72 | 73 | 1. [js-cloudimage-360-view -- 通过令人惊叹的 360 度产品视图吸引客户](https://github.com/scaleflex/js-cloudimage-360-view) 74 | 75 | ## 鼠标 76 | 77 | 1. [cursor-effects -- 只有 90 后孩子们知道的鼠标特效](https://github.com/tholman/cursor-effects) 78 | 目前有雪花，气泡，蝙蝠。。挺有意思的 79 | 80 | ## 表格 81 | 82 | 1. [x-spreadsheet -- 在线的 js 电子表格](https://github.com/myliang/x-spreadsheet) 83 | 84 | ![demo](https://raw.githubusercontent.com/myliang/x-spreadsheet/master/docs/demo.png) 85 | 86 | ## 其他 87 | -------------------------------------------------------------------------------- /原创/收藏/分类/数据分析.md: -------------------------------------------------------------------------------- 1 | ## GA 2 | 3 | 1. [umami - Umami 是一种简单、快速、注重隐私的 Google Analytics（分析）替代品。](https://github.com/umami-software/umami) 4 | -------------------------------------------------------------------------------- /原创/收藏/分类/架构.md: -------------------------------------------------------------------------------- 1 | 1. [outline -- 为成长中的团队开放源代码 wiki 和知识库](https://github.com/outline/outline)比较适合创业团队来看的 2 | 3 | [文档](https://www.getoutline.com/developers) 4 | 5 | 2. [webpack-demos -- Webpack 的简单演示的集合](https://github.com/ruanyf/webpack-demos) 6 | 7 | ## webpack 8 | 9 | ### loader 10 | 11 | 1. [prerender-loader -- Webpack 无痛通用预渲染](https://github.com/GoogleChromeLabs/prerender-loader)这个非常值得推荐~googlelabs 出的 prerender 12 | 13 | ### plugin 14 | 15 | 1. [postcss-autoprefixer](https://github.com/postcss/autoprefixer)通过 Can I Use 解析 CSS 并将规则添加到规则中 16 | 2. [size-plugin -- 随时间跟踪压缩的 Webpack 资产大小。](https://github.com/GoogleChromeLabs/size-plugin) 17 | 18 | ```js 19 | // webpack.config.js 20 | + const SizePlugin = require('size-plugin'); 21 | 22 | module.exports = { 23 | plugins: [ 24 | + new SizePlugin() 25 | ] 26 | } 27 | ``` 28 | 29 | ![demo](https://camo.githubusercontent.com/806eb206a76f2453f3160eb2e56f1d4a2aaa589f/68747470733a2f2f692e696d6775722e636f6d2f33625742724a6d2e706e67) 30 | 31 | ## babel plugin 32 | 33 | 1. [rawact -- 一个 babel 插件，它将 React.js 组件编译为本机 DOM 指令，以消除运行时对 react 库的需求。](https://github.com/sokra/rawact) 34 | 35 | 它适用于 36 | 37 | ``` 38 | 1.小应用程序，总组件代码 { 9 | let res = await fetch(url) 10 | return await res.json() 11 | }) 12 | 13 | console.log(await get('/foo')) 14 | ``` 15 | 2. [ky -- 基于浏览器Fetch API的简洁优雅的HTTP客户端](https://github.com/sindresorhus/ky) 16 | ```js 17 | import ky from 'ky'; 18 | 19 | (async () => { 20 | const json = await ky.post('https://some-api.com', {json: {foo: true}}).json(); 21 | 22 | console.log(json); 23 | //=> `{data: '🦄'}` 24 | })(); 25 | ``` 26 | 如果用普通的fetch，它将会是 27 | ```js 28 | (async () => { 29 | class HTTPError extends Error {} 30 | 31 | const response = await fetch('https://sindresorhus.com', { 32 | method: 'POST', 33 | body: JSON.stringify({foo: true}), 34 | headers: { 35 | 'content-type': 'application/json' 36 | } 37 | }); 38 | 39 | if (!response.ok) { 40 | throw new HTTPError(`Fetch error:`, response.statusText); 41 | } 42 | 43 | const json = await response.json(); 44 | 45 | console.log(json); 46 | //=> `{data: '🦄'}` 47 | })(); 48 | ``` 49 | 3.[Mellow -- Mellow 是一个基于规则的全局透明代理工具，可以运行在 Windows、macOS 和 Linux 上，也可以配置成路由器透明代理或代理网关，支持 SOCKS、HTTP、Shadowsocks、VMess 等多种代理协议。](https://github.com/mellow-io/mellow) 50 | ## websocket 51 | 1. [sockette -- 最可爱的小WebSocket包装！](https://github.com/lukeed/sockette)Sockette是一个很小的（319字节）WebSocket封装，如果连接丢失，它将自动重新连接！ 52 | ## 上传 53 | 1. [nuage -- Dropbox克隆，适用于FTP，SFTP，WebDAV，Git，S3，Minio，....](https://github.com/mickael-kerjean/nuage) 54 | 55 | ![demo](https://raw.githubusercontent.com/mickael-kerjean/nuage/master/.assets/img/photo.jpg) -------------------------------------------------------------------------------- /原创/收藏/分类/脚手架相关.md: -------------------------------------------------------------------------------- 1 | ## webpack 2 | 1. [jarvis -- 一个非常智能的基于浏览器的Webpack仪表板](https://github.com/zouhir/jarvis)它的主要特点是可以查看在12种不同的网络制式中你的项目的表现情况。 3 | ![demo](https://github.com/zouhir/jarvis/raw/master/.github/screenshot.png?raw=true) 4 | 2. [webpackbar -- 用于Webpack 4的优雅ProgressBar和Profiler（实验）](https://github.com/nuxt/webpackbar) 5 | 6 | ![demo](https://github.com/nuxt/webpackbar/raw/master/assets/screen1.jpg) 7 | 3. [multipages-generator -- 是一个像express-generator一样快速生成网站脚手架的npm模块，可以全局安装。只要一个命令即可生成多页面的express工程，是多页面webpack编译的最佳实践模板，最适合多个独立的移动端h5项目](https://github.com/linweiwei123/multipages-generator) 8 | ## 其他 9 | 1. [jetpack -- 让webpack配置更加方便](https://github.com/KidkArolis/jetpack) -------------------------------------------------------------------------------- /原创/收藏/分类/视频音频.md: -------------------------------------------------------------------------------- 1 | ## 视频 2 | 3 | 1. [video.js -- 开源的 HTML5 和 Flash 视频播放器](https://github.com/videojs/video.js) 4 | 2. [griffith -- 基于 React 的网络视频播放器](https://github.com/zhihu/griffith) 5 | 不仅仅是 react 也支持 standalone 模式 6 | ![demo](https://camo.githubusercontent.com/769e4ffef142b47a3fac69107884e78523092c00/68747470733a2f2f7a687374617469632e7a686968752e636f6d2f6366652f67726966666974682f706c617965722e706e67) 7 | 8 | 3. [jitsi-meet -- Jitsi Meet-安全，简单和可扩展的视频会议，您可以将其用作独立应用程序或嵌入到 Web 应用程序中。](https://github.com/jitsi/jitsi-meet) 9 | 4. [moovie.js -- 专注于电影的 html5 播放器](https://github.com/BMSVieira/moovie.js) 10 | 11 | ![demo](https://camo.githubusercontent.com/3e7069ef230c6e7564b57a45afe50dac6c68a41df316f276a81cafec4348508d/68747470733a2f2f626d737669656972612e6769746875622e696f2f6d6f6f7669652e6a732f64656d6f2d74656d706c6174652f696d616765732f63617074696f6e6f66667365742e706e67) 12 | 13 | ## 音频 14 | 15 | 1. [Tone.js -- 用于在浏览器中制作交互式音乐的 Web Audio 框架。](https://github.com/Tonejs/Tone.js) 16 | 17 | [demo](https://tonejs.github.io/demos) 18 | -------------------------------------------------------------------------------- /原创/收藏/分类/调试相关.md: -------------------------------------------------------------------------------- 1 | ## 控制台 2 | 1. [eruda -- 移动浏览器控制台](https://github.com/liriliri/eruda) -------------------------------------------------------------------------------- /原创/教程/react native/react-native-linear-gradient 基础教程.md: -------------------------------------------------------------------------------- 1 | # 安装 2 | ``` 3 | yarn add react-native-linear-gradient 4 | 5 | react-native link react-native-linear-gradient 6 | ``` 7 | 安装之后运行```react-native run-android```可能会报错，比如说我会报一个```cannot delete [filename]```之类的错误，把他说的那几个文件删了，再多run几次就成功了。 8 | 9 | # 使用 10 | ```js 11 | // 引用官网的例子 12 | import LinearGradient from 'react-native-linear-gradient'; 13 | // Within your render function 14 | 15 | 16 | Sign in with Facebook 17 | 18 | 19 | 20 | // Later on in your styles.. 21 | var styles = StyleSheet.create({ 22 | linearGradient: { 23 | flex: 1, 24 | paddingLeft: 15, 25 | paddingRight: 15, 26 | borderRadius: 5 27 | }, 28 | buttonText: { 29 | fontSize: 18, 30 | fontFamily: 'Gill Sans', 31 | textAlign: 'center', 32 | margin: 10, 33 | color: '#ffffff', 34 | backgroundColor: 'transparent', 35 | }, 36 | }); 37 | ``` 38 | ![官网的例子](http://upload-images.jianshu.io/upload_images/3790386-368206b17af44bae.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 39 | # 配置 40 | ## color 41 | 数组。一定要提供给他**不少于两个**元素，比如```['red','blue']```，表示从红到蓝的渐变。 42 | 43 | 本例用```colors={['#295cce', '#14b7e6', '#fff']}``` 44 | ## start 45 | 对象。可选。格式为```{x:number,y:number}```。坐标从左上角开始，声明渐变开始的位置，作为渐变整体大小的一部分。示例：{x：0.1，y：0.1}表示梯度将从顶部开始为10％，从左侧开始为10％。 46 | ## end 47 | 和start一样。是指渐变的结束。 48 | 49 | 举个例子，比如我们需要从右上角开始到左下角渐变，即对角线渐变，这时就需要设置 50 | ```js 51 | start={{x:1,y:0}} 52 | end={{x:0,y:1}} 53 | ``` 54 | ![对角线渐变](http://upload-images.jianshu.io/upload_images/3790386-3dc9638918c75cd4.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 55 | ## locations 56 | 57 | 58 | 数组。可选。定义每个渐变颜色停止的位置，映射到颜色相同的索引颜色。例如：```[0.1,0.75,1]```表示第一种颜色将占0％-10％，第二种颜色将占据10％-75％，最终第三种色彩将占据75％-100％。 59 | 60 | 在上例的基础上，我们想让白色占比多一点，让他占50%，即从0.5到1这个区间都为白色,深蓝色和湖蓝色平分渐变这个区间。 61 | locations就可以这样设置： 62 | ```js 63 | locations={[0, 0.25, 0.5]} 64 | ``` 65 | 66 | ![location例子](http://upload-images.jianshu.io/upload_images/3790386-183c327fd839a7f6.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 67 | 68 | 69 | ## 相关资料 70 | [react-native-linear-gradient 官方文档](https://github.com/react-native-community/react-native-linear-gradient/blob/master/README.md) -------------------------------------------------------------------------------- /学习笔记/es6/ES6 TDZ.md: -------------------------------------------------------------------------------- 1 | # ES6 Temporal Dead Zone 2 | ## 什么是暂存死区 3 | 暂存死区TDZ(Temporal Dead Zone)是ES6中对作用域新的语义。他关系到let、const和var声明变量的区别。 4 | 在程序的控制流程在新的作用域进行实例化时，在此作用域中用let、const声明的变量会在该作用域中先创建，但这个时候还没有进行词法绑定，没有进行对声明语句的求值运算，所以是不能访问的，访问会抛出错误。所以在这运行流程一进入作用域创建变量，到变量开始可被访问的一段时间，就称为TDZ。 5 | 6 | ## let暂存死区的错误 7 | 大家都知道，使用var声明变量，有变量提升，如下： 8 | ```js 9 | console.log(a)//undefined 10 | var a=1 11 | ``` 12 | 他等同于 13 | ```js 14 | var a 15 | console.log(a) 16 | a=1 17 | ``` 18 | let和const使用区块作用域，使用let声明a变量，会报错： 19 | ```js 20 | console.log(a) //Uncaught ReferenceError：a is not defined 21 | ///// 以上区域则为暂存死区 22 | let a=1 23 | ``` 24 | 是因为let声明不会被提升到当前执行上下文的顶部。该变量属于从块开始到初始化处理的“暂存死区”。 25 | 26 | 再用一个更明显的例子来说明： 27 | ```js 28 | switch (1) { 29 | case 0: 30 | let foo; 31 | break; 32 | 33 | case 1: 34 | let foo; // TypeError for redeclaration. 35 | break; 36 | } 37 | ``` 38 | switch中只有一个块，所以会报错。 39 | 40 | 我们再看for循环， 41 | ```js 42 | let a=0 43 | for(let a;a<5;a++){ 44 | console.log(a) //什么都不会输出，因为这时a为undefined，undefined<5为false，所以不会打印任何内容 45 | } 46 | ``` 47 | 但如果把上述程序中的```let```改成```var```则会正确打印0,1,2,3,4。 48 | ## 与词法作用域结合的暂存死区 49 | 由于词法作用域，表达式```a+2```中的a会解析为if块中的a，而不是引用值为1的a。 50 | ```js 51 | function main(){ 52 | var a=1 53 | if(true){ 54 | let a=a+2 // ReferenceError: a is not defined 55 | } 56 | } 57 | ``` 58 | 我们使用立即执行函数复习一遍，a=2这个表达式不会被提升，所以会报错。 59 | ```js 60 | let a=1 61 | (function(){ 62 | console.log(a) //a is not defined 63 | // 以上区域为暂存死区 64 | let a=2 65 | }()) 66 | ``` 67 | ## 相关资料 68 | [MDN Web Docs -- let](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/let) -------------------------------------------------------------------------------- /学习笔记/es6/ES6 将类中的方法暴露给外部.md: -------------------------------------------------------------------------------- 1 | 最近在项目中遇到一个问题，就是需要在类的外部调用类中的方法。 2 | 3 | 举个例子，我有一个`Toast`组件，在外部需要调用它的`show`方法来控制他的显隐状态。 4 | 之前我的写法是写一个静态类方法，然后在`constructor`中去修改它的作用域，代码如下： 5 | ```js 6 | // @flow 7 | import React from 'react'; 8 | import './style.less'; 9 | 10 | type Props={ 11 | time:number, 12 | text:string, 13 | } 14 | 15 | export default class Toast extends React.Component { 16 | static show({ text }) { 17 | const _self = this; 18 | this.setState({ 19 | isShow: true, 20 | text, 21 | }, () => { 22 | _self.timer = setTimeout(() => { 23 | this.setState({ 24 | isShow: false, 25 | }); 26 | }, this.props.time); 27 | }); 28 | } 29 | 30 | constructor(props:Props) { 31 | super(props); 32 | this.state = { 33 | isShow: false, 34 | text: '', 35 | }; 36 | Toast.show = Toast.show.bind(this); 37 | } 38 | 39 | componentWillUnmount() { 40 | this.setState({ 41 | isShow: false, 42 | }); 43 | clearInterval(this.timer); 44 | } 45 | 46 | render() { 47 | const { isShow, text } = this.state; 48 | return ( 49 |
50 | {isShow &&
{text}
} 51 |
52 | ); 53 | } 54 | } 55 | ``` 56 | 后来发现bug频出，只有在重新刷新的时候`show`方法中调用`this.setState()`才有效，而在多个页面使用这个组件会出现很多问题，都是由于作用域绑定错误的原因。 57 | ## 解决方法 58 | 最后审视了下代码，应该是将静态的show方法指向内部的`show`方法，而不是把静态的`show`方法的上下文绑定到这个类上。 59 | 60 | 调整代码如下： 61 | ```js 62 | // ... 63 | constructor(props:Props) { 64 | super(props); 65 | this.state = { 66 | isShow: false, 67 | text: '', 68 | }; 69 | Toast.show = this.show.bind(this); // 最重要的一步！！ 70 | } 71 | 72 | show({ text }) { 73 | const _self = this; 74 | this.setState({ 75 | isShow: true, 76 | text, 77 | }, () => { 78 | _self.timer = setTimeout(() => { 79 | this.setState({ 80 | isShow: false, 81 | }); 82 | }, this.props.time); 83 | }); 84 | } 85 | // .... 86 | ``` -------------------------------------------------------------------------------- /学习笔记/es6/ES6 标签模板字面量.md: -------------------------------------------------------------------------------- 1 | ## 前言 2 | 最近在读《你不知道的js》下册，看到了关于`标签模板字面量`的内容，之前没遇见过，所以不懂就要写博客记录下来啊~ 3 | 4 | ## 基础示例 5 | ```js 6 | function foo(strings,...values){ 7 | console.log(strings) 8 | console.log(values) 9 | } 10 | const desc='awesome' 11 | foo`Everything is ${desc}!]`; 12 | // ["Everything is ","!"] 13 | // ["awesome"] 14 | ``` 15 | 在`foo`函数中`strings`是一个由所有普通字符串（插入表达式之间的部分）组成的数组。使用`...gather/rest`运算符，把所有参数值都收集到`values`中。 16 | 17 | 换一种说法也就是，values中的值是分隔符，就好像用它们连接了strings中的值，然后把他们都连接在一起，就得到了一个完整的字符串。 18 | ## 应用 19 | 上面的基础示例不能展现`标签模板字面量`的强大之处。一般情况，字符串字面量标签函数（上个示例中的`foo`）要计算出一个字符串并将其返回。 20 | ### 把目标字符串中的数值格式化为美元 21 | ```js 22 | function format(strings,...values){ 23 | return strings.reduce((s,v,idx)=>{ 24 | if(idx>0){ 25 | const prev=values[idx-1] 26 | if(typeof prev==='number'){ 27 | s+=`$${prev.toFixed(2)}` 28 | }else{ 29 | s+=prev 30 | } 31 | } 32 | return s+v 33 | },'') 34 | 35 | } 36 | 37 | const item='orange' 38 | const price=3.5554 39 | 40 | const text=format`the ${item}'s price is ${price}` 41 | console.log(text) 42 | // the orange's price is $3.56 43 | ``` 44 | ### 过滤HTML字符串，防止用户输入恶意内容 45 | 大部分的网站都提供有评论模块以供用户发表自己的观点，一般防止用户恶意输入，如``，都会把`<`替换为` <`；把`>`替换为` >`。 46 | 47 | ```js 48 | function filterSpitefulCode(strings,...values){ 49 | return strings.reduce((s,v,idx)=>{ 50 | if(idx>0){ 51 | const prev=values[idx-1].replace(//g,">") 53 | s+=prev 54 | } 55 | return s+v 56 | },'') 57 | } 58 | 59 | const badCode= '' 60 | const message=filterSpitefulCode`

${badCode} has been transformed safely~` 61 | 62 | console.log(message) 63 | //

<script>alert("abc")</script> has been transformed safely~ 64 | ``` 65 | ### 原始字符串 66 | 在上面的代码中，标签函数接受第一个名为strings的参数，这是一个数组，也包括了一些额外的数据：所有字符串的原始未处理版本。可以像下面通过`.raw`属性访问这些原始字符串： 67 | ```js 68 | function showraw(strings,...values){ 69 | console.log(strings.raw) 70 | } 71 | 72 | showraw`Hello\nWorld` 73 | // ["Hello\nWorld"] 74 | console.log(`Hello\nWorld`) 75 | // Hello 76 | // World 77 | ``` 78 | 原始版本的值保留了原始的转义码`\n`序列，而处理过的版本把它当作是一个单独的换行符。 79 | ## 参考链接 80 | 1. [ES6 标签模板](https://www.cnblogs.com/sminocence/p/6832331.html) -------------------------------------------------------------------------------- /学习笔记/es6/ES6 正则表达式-定点标识.md: -------------------------------------------------------------------------------- 1 | ## 前言 2 | 最近在读《你不知道的js》下册，发现了一个有意思的东东：正则表达式中新增的标签模式y，英文是stick，书中译作"定点模式"。*定点模式*主要是指在正则表达式的起点有一个虚拟锚点，只从`lastIndex`属性制定的位置开始匹配。 3 | 4 | ## 匹配规则 5 | ```js 6 | const re=/foo/y 7 | const re2=/foo/ 8 | const str='##foo##' 9 | 10 | re.lastIndex // 0 11 | re.test(str) // false 12 | re2.test(str) // true 13 | re.lastIndex // 0 14 | 15 | re.lastIndex=2 16 | re.test(str) // true 17 | re.lastIndex // 5 匹配成功后会更新lastIndex 18 | 19 | re.test(str) // false 匹配失败后lastIndex会重置为0 20 | re.lastIndex // 0 21 | ``` 22 | 从上面的例子中可以看出，正则从lastIndex位置开始匹配，如果不匹配返回false并将lastIndex重置为0；如果匹配成功，lastIndex则会更新至匹配内容之后的字符。 23 | ## 适用场景 24 | ### 结构化的输入字符串 25 | 如匹配：`"1. aaa 2. bbb 3. ccc"`这个字符串，可以明显感知到这个模式是一个数字序号后跟空格+内容+空格，这种模式对应正则表达式为`/\d+\.\s(.*?)(?:\s|$)/`。 26 | ```js 27 | const pattern=/\d+\.\s(.*?)(?:\s|$)/y 28 | const str='1. aaa 2. bbb 3. ccc' 29 | 30 | str.match(pattern) // "1. aaa ", "aaa" 31 | pattern.lastIndex // 7 32 | 33 | str.match(pattern) // "2. bbb ", "bbb" 34 | pattern.lastIndex // 14 35 | 36 | str.match(pattern) // "3. ccc", "ccc", 37 | pattern.lastIndex // 20 38 | ``` 39 | ## 与g模式的区别 40 | g全局匹配和`exec()`方法可以模拟这种相对于lastIndex的匹配，如下: 41 | ```js 42 | const re=/o+./g 43 | const str='foot book more' 44 | 45 | re.exec(str) // ['oot'] 46 | re.lastIndex // 4 47 | 48 | re.exec(str) // ['ook'] 49 | re.lastIndex // 9 50 | 51 | re.exec(str) // ['or'] 52 | re.lastIndex // 13 53 | ``` 54 | 我们可以看到，g模式非定点匹配可以在匹配过程中自由向前移动，之后更新lastIndex值。在第二个匹配中，如果是定点匹配，将会匹配失败 55 | ## 新增属性flags 56 | 在es6之前，我们如果需要检查一个正则表达式对象应用了哪些标识，首先要将它转化为字符串，再套用正则。 57 | 58 | 而在es6中，我们用新的属性flags可以直接获得这些值。 59 | ```js 60 | const re=/foo/ig 61 | re.flags // gi 62 | ``` 63 | 至于这里为什么不是ig，是因为es6规范中规定了表达式的标识按照`"gimuy"`的顺序列出，无论原始指定的模式是什么。 -------------------------------------------------------------------------------- /学习笔记/es6/ES6 自定义迭代器.md: -------------------------------------------------------------------------------- 1 | ## 构造自定义迭代器 2 | 字符串和数组类型都有自身的迭代器，而对于不可枚举的数据类型，可以为其添加`[Symbol.iterator]`属性，来创建迭代器。 3 | 4 | 一个iterable的必要组成： 5 | ``` 6 | 1.返回一个对象，该对象有迭代器属性[Symbol.iterator]指向自身 7 | 2.自定义next()函数，返回IteratorResult,done为false 8 | 3.自定义return()函数，返回IteratorResult,done为true 9 | ``` 10 | 参考以下两个例子： 11 | ## 无限的斐波那契数列 12 | 经常刷算法题的同学都晓得斐波那契数列，他的规律非常简单就是`F(n-1)+F(n-2)=F(n)`，两个初始值均为1。 13 | 14 | ```js 15 | const Fib={ 16 | [Symbol.iterator](){ 17 | let n1=1,n2=1; 18 | return{ 19 | // 使迭代器成为iterable 20 | [Symbol.iterator](){return this}, 21 | 22 | next(){ 23 | let current=n2 24 | n2=n1 25 | n1=n1+current 26 | return {value:current,done:false} 27 | }, 28 | 29 | return(v){ 30 | console.log('stop') 31 | return {value:v,done:true} 32 | } 33 | } 34 | } 35 | } 36 | 37 | for(let i of Fib){ 38 | console.log(i) 39 | 40 | if(i>50) break; 41 | } 42 | 43 | // 1 1 2 3 5 8...55 44 | // stop 45 | ``` 46 | ## 任务队列迭代 47 | 我们可以自定义一个任务迭代器，用来依次执行一系列的动作 48 | ```js 49 | const tasks = { 50 | [Symbol.iterator]() { 51 | let steps = this.actions.slice() 52 | return { 53 | // 使迭代器成为iterable 54 | [Symbol.iterator]() { return this }, 55 | 56 | next(...args) { 57 | if (steps.length > 0) { 58 | let res = steps.shift()(...args) 59 | console.log(res) 60 | return { value: res, done: false } 61 | } else { 62 | return { done: true } 63 | } 64 | }, 65 | 66 | return(v) { 67 | steps.length = 0 68 | return { value: v, done: true } 69 | } 70 | } 71 | }, 72 | actions: [] 73 | } 74 | 75 | ``` 76 | 他的使用方法是，需要先将任务函数放入actions中，然后将所需参数传入，执行迭代器， 77 | ```js 78 | tasks.actions.push( 79 | function step1(x) { console.log('step1: ', x); return x * 2 }, 80 | function step2(x, y) { console.log('step2: ', y); return x + y * 2 }, 81 | function step3(x, y, z) { console.log('step3: ', z); return x * y + z }, 82 | ) 83 | 84 | const it=tasks[Symbol.iterator]() 85 | it.next(10) // step1: 10 86 | // 20 87 | it.next(20,50) // step2: 50 88 | // 120 89 | it.next(20,50,120) // step3:120 90 | // 1120 91 | it.next() 92 | ``` 93 | ## 迭代器消耗 94 | 除了手动调用迭代器和`for...of`方法以外，还有spread运算符...也可以完全消耗迭代器。 95 | ### ...rest/gather 96 | ```js 97 | const a=[1,2,3,4,5] 98 | function foo(a,b,c,d,e){ 99 | return a+b+c+d+e 100 | } 101 | console.log(foo(...a)) 102 | ``` 103 | 数组解构可以部分/完全消耗一个迭代器。 104 | ```js 105 | const a=[1,2,3,4,5] 106 | function foo(a,b,c,d,e){ 107 | return a+b+c+d+e 108 | } 109 | const it=a[Symbol.iterator]() 110 | const [...x]=it 111 | it.next() // {value: undefined, done: true} it已经完全耗尽 112 | ``` -------------------------------------------------------------------------------- /学习笔记/es6/Symbol.md: -------------------------------------------------------------------------------- 1 | ## 介绍 2 | ES6新增加的原始数据类型```Symbol```，它不能用```new```创建实例，因为他和```undefined```、```null```一样都是原始数据类型。 3 | 4 | ```Symbol``` 表示独一无二的值，即使传入相同参数的两个Symbol，他们也不是等价的： 5 | 6 | ```js 7 | Symbol(1)==Symbol(1) //false 8 | Symbol(1)===Symbol(1) //false 9 | ``` 10 | ## 转换 11 | ```Symbol``` 不会被隐式转换为数字或字符串 12 | ```js 13 | 1+Symbol('1') //Uncaught TypeError: Cannot convert a Symbol value to a number 14 | '1'+Symbol('1') // Uncaught TypeError: Cannot convert a Symbol value to a string 15 | ``` 16 | 但是可以通过调用方法进行显式转换 17 | ```js 18 | Symbol('1').toString() // -> "Symbol(1)" 转字符串 19 | !Symbol('1') // -> false 转布尔值 20 | 21 | /*但是不能转为数值*/ 22 | Number(Symbol('1')) // -> VM1652:1 Uncaught TypeError: Cannot convert a Symbol value to a number 23 | ``` 24 | ## 基本使用 25 | ### 作为对象的键名 26 | 在我们为对象扩充属性时，经常会不小心覆盖之前的属性，由于```Symbol```的唯一性，我们可以用Symbol作为键名使用： 27 | ```js 28 | const name=Symbol() 29 | const people={} 30 | /*务必这样创建属性，如果写为people.name则会吧name解析为字符串，相当于people['name']*/ 31 | people[name]='tom' 32 | console.log(people.name) // => undefined 这里其实是在访问people['name'] 33 | console.log(people[name]) // 'tom' 34 | ``` 35 | 用Symbol创建的属性不会被遍历到，有一个```Object.getOwnPropertySymbols```方法，可以获得指定对象的所有Symbol属性名。 36 | ```js 37 | const obj = {}; 38 | let a = Symbol('a'); 39 | let b = Symbol('b'); 40 | 41 | obj[a] = 'Hello'; 42 | obj[b] = 'World'; 43 | 44 | const objectSymbols = Object.getOwnPropertySymbols(obj); 45 | console.log(objectSymbols) // => [Symbol(a), Symbol(b)] 46 | ``` 47 | ## 重用 48 | 使用```Symbol.for()```可以重用同一个Symbol值，并注册到全局环境以便搜索。 49 | ```js 50 | // 搜索标记为foo的Symbol，没有则创建 51 | const s1 = Symbol.for('foo'); 52 | const s2 = Symbol.for('foo'); 53 | 54 | s1 === s2 // true 55 | ``` 56 | ## 查询登记名称 57 | 使用```Symbol.keyFor```查询Symbol注册名称。 58 | ```js 59 | let s1 = Symbol.for("foo"); 60 | Symbol.keyFor(s1) // "foo" 61 | 62 | let s2 = Symbol("foo"); 63 | Symbol.keyFor(s2) // undefined 64 | ``` 65 | -------------------------------------------------------------------------------- /学习笔记/es6/自定义事件.md: -------------------------------------------------------------------------------- 1 | 最近一个项目中需要模拟发起一个扫码枪事件进行测试，之前写react native调用`DeviceEventEmitter`这个api就可以了，然而在web中不太常用，最终在mdn中发现了这个构造方法[CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) 2 | ## 发起事件 3 | ### 用法 4 | ```js 5 | new CustomEvent(eventName, params); 6 | ``` 7 | ### 示例 8 | 创建一个自定义事件 9 | ```js 10 | const event=new CustomEvent('mock-event'); 11 | ``` 12 | ### 传递参数 13 | 这里**值得注意**，需要把想要传递的参数包裹在一个包含`detail`属性的对象，否则传递的参数不会被挂载？（这里不太确定，我试过传`id`和`params`都不会生效） 14 | ```js 15 | function createEvent(params, eventName = 'mock-event') { 16 | return new CustomEvent(eventName, { detail: params }); 17 | } 18 | 19 | const event = createEvent({ id: '0010' }); 20 | ``` 21 | ### 发起事件 22 | 调用`dispatchEvent`方法发起事件，传入你刚才创建的方法 23 | ```js 24 | window.dispatchEvent(event); 25 | ``` 26 | ### 监听事件 27 | ```js 28 | window.addEventListener('mock-event', ({ detail: { id } }) => { 29 | console.log('id',id) // 会在控制台打印0010 30 | }); 31 | ``` 32 | ## 在react中的应用 33 | 最好在`componentDidMount`中调用`addEventListener`监听事件，在`componentWillUnmount`中调用`removeEventListener`移除事件监听器。 -------------------------------------------------------------------------------- /学习笔记/flutter/初探flutter.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mytac/blogs/b8900063edda9b8c0ac8003614fdd8b7ad1eb4a3/学习笔记/flutter/初探flutter.md -------------------------------------------------------------------------------- /学习笔记/js基础/details.md: -------------------------------------------------------------------------------- 1 | ## Array 2 | ### Array.prototype.push 3 | push机制：先查询`length`，在index=length的位置上添加值。（对于类数组也是如此） 4 | [从一道面试题谈 Array.prototype.push()](https://juejin.im/post/5ca2fdcee51d4562754be20a) -------------------------------------------------------------------------------- /学习笔记/js基础/react扫码枪事件.md: -------------------------------------------------------------------------------- 1 | ## 触发原理 2 | 原理就是监听键盘输入，比如扫一个为`6970596130126`的69条形码，用扫码枪扫一下会在光标位置依次输出： 3 | ``` 4 | 6 5 | 9 6 | 7 7 | 0 8 | 5 9 | 9 10 | 6 11 | 1 12 | 3 13 | 0 14 | 2 15 | 6 16 | ``` 17 | 但这不是完整的，所以需要写一个函数`scanEvent`来整理收集到的每个编号。 18 | ```js 19 | let code = ''; 20 | let lastTime, 21 | nextTime, 22 | lastCode, 23 | nextCode; 24 | 25 | 26 | function scanEvent(e, cb) { 27 | nextCode = e.which; 28 | nextTime = new Date().getTime(); 29 | 30 | if (lastCode != null && lastTime != null && nextTime - lastTime <= 30) { 31 | code += String.fromCharCode(lastCode); 32 | } else if (lastCode != null && lastTime != null && nextTime - lastTime > 100) { 33 | code = ''; 34 | } 35 | 36 | lastCode = nextCode; 37 | lastTime = nextTime; 38 | if (e.which === 13) { 39 | cb(code); 40 | console.log('code', code); 41 | code = ''; 42 | } 43 | } 44 | 45 | export { scanEvent }; 46 | ``` 47 | ## react中的坑 48 | 当我们想在`willComponentUnMount`阶段移除监听器时，需要传递函数名，否则无法移除！！这是非常值得注意的一点。 49 | ### 完整使用 50 | ```js 51 | class Sample extends React.Component{ 52 | componentDidMount(){ 53 | window.addEventListener('keypress', this.scanWrapper, false); 54 | } 55 | 56 | componentWillUnmount() { 57 | window.removeEventListener('keypress', this.scanWrapper, false); 58 | } 59 | 60 | scanWrapper(e) { 61 | scanEvent(e, (code) => { 62 | // to do something... 63 | }); 64 | } 65 | } 66 | ``` -------------------------------------------------------------------------------- /学习笔记/js基础/this的完全详解.md: -------------------------------------------------------------------------------- 1 | ## 函数中this的指向 2 | 先测一下你是否真的明白了this的指向 3 | ```js 4 | foo.count=0 5 | function foo(num){ 6 | this.count++ 7 | } 8 | 9 | for(let i=0;i<10;i++){ 10 | if(i>5){ 11 | foo(i) 12 | } 13 | } 14 | 15 | console.log(foo.count) //0 16 | ``` 17 | 你可能一脸茫然道：这不是应该输出4吗？？咋输出0捏。（尼克杨脸） 18 | 19 | foo是执行了4次没错。但this在任何情况下都不指向函数的词法作用域！！foo中的this指向全局，这是因为**this是在运行时绑定的，并不是在编写时绑定的**。它的上下文取决于函数调用时的各种条件。this的绑定和函数声明的位置没有关系，它只取决于**函数的调用方式**。当一个函数被调用时，会创建一个执行上下文，它包含函数在哪里被调用、函数的调用方式、传入的参数等信息，this就是这个记录的一个属性，在函数执行的过程中会用到。 20 | 21 | 那我们回到上面的程序，要想让控制台正确打印foo被调用的次数，只要把```this.count++```改为```foo.count++```就好啦~ 22 | 23 | 总的来说呢，就是函数中的this指向什么，取决于这个函数在哪里被调用。 24 | ## this的绑定规则 25 | ### 1.默认绑定 26 | 这是最常用的函数调用类型：独立函数调用，可以把这条规则看作是无法应用其他规则时的默认规则。思考一下下面的代码： 27 | ```js 28 | function foo(){ 29 | console.log(this.a) 30 | } 31 | var a=1 32 | foo() // 1 33 | ``` 34 | 因为在全局环境中调用了foo，this.a被解析为全局对象a。这时没有使用任何修饰的函数进行调用，所以实现了this的默认绑定，指向全局对象。 35 | ### 2.隐式绑定 36 | 调用位置是否有上下文，换句话说是否被某个对象拥有或包含。思考下面的代码： 37 | ```js 38 | var a=1 39 | function foo(){ 40 | console.log(this.a) 41 | } 42 | const obj={a:2,foo} 43 | obj.foo() // 2 44 | ``` 45 | 当函数引用由上下文对象时，隐式绑定规则会把函数调用中的this绑定到这个上下文对象。对象属性的引用链只有最后一层在调用位置中起作用。如： 46 | ```js 47 | function foo(){ 48 | console.log(this.a) 49 | } 50 | const obj1={a:1,foo} 51 | const obj2={a:2,obj1} 52 | 53 | obj2.obj1.foo() //1 54 | ``` 55 | #### 隐式丢失 56 | 还是看上面那段代码，如果后面加一句： 57 | ```js 58 | const bar=obj1.foo 59 | bar() //undefined 60 | ``` 61 | 这就是隐式丢失，```const bar=obj1.foo```这句其实是一个引用，它引用的是foo函数本身。此时的bar其实是一个不带任何修饰的函数调用，因此进行了默认绑定，this指向全局。所以为undefined。 62 | 63 | 更常见的一种状况发生在传入回调函数时： 64 | ```js 65 | function doFoo(fn){ 66 | fn() 67 | } 68 | const obj={a:1,foo} 69 | doFoo(obj.foo) //undefined 70 | ``` 71 | 参数传递也是一种隐式赋值，我们传入函数时fn也是引用的foo函数本身，原理同上个例子。 72 | ### 3.显式绑定 73 | 显示绑定一般是通过call和apply来实现。我们还是用foo函数来说明。 74 | ```js 75 | foo.call(obj1) 76 | foo() //1 77 | ``` 78 | #### 1.硬绑定 79 | ```js 80 | const bar=function (){ 81 | foo.call(obj1) 82 | } 83 | bar() //1 84 | ``` 85 | 这里强制把foo的this绑定到obj上，无论之后如何调用bar，它总会手动在obj上调用foo。这种绑定是一种显式的强制绑定，称之为硬绑定。 86 | 87 | 硬绑定是一种非常常用的模式，es5提供了内置方法```Function.prototype.bind```，它的用法如下： 88 | ```js 89 | function foo(something){ 90 | return this.a+something 91 | } 92 | const obj={a:1} 93 | const bar=foo.bind(obj) 94 | 95 | const b=bar(3) 96 | console.log(b) // 5 97 | ``` 98 | #### 2.API调用的上下文 99 | 第三方库的许多函数，以及js语言和宿主环境中许多新的内置函数，都提供了可选的参数，通常被称为上下文，其作用和```bind```一样。 100 | 101 | 举个例子： 102 | ```js 103 | function foo(el){ 104 | console.log(el,this.id) 105 | } 106 | const obj={id:'awesome'} 107 | // 调用foo时把this绑定到obj 108 | [1,2,3].forEach(foo,obj) 109 | // 1 awesome 2 awesome 3 awesome 110 | ``` 111 | ### 4.new绑定 112 | 内置对象函数在内的所有函数都可以用```new```来调用，这种函数调用被称为构造函数调用。使用new来调用函数，会自动执行下面的操作： 113 | 1. 创建一个全新的对象 114 | 2. 这个新对象会被执行prototype连接 115 | 3. 这个新对象会绑定到函数调用的this 116 | 4. 如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。 117 | 118 | 思考下面的代码： 119 | ```js 120 | function foo(a){ 121 | this.a=a 122 | } 123 | const bar=new foo(2) 124 | console.log(bar.a) // 2 125 | ``` 126 | 使用new来调用foo时，我们会构造一个新对象并把它绑定到foo调用中的this上。 127 | ### 优先级 128 | new绑定 > 显式绑定 > 隐式绑定 > 默认绑定 129 | 130 | 在new中使用硬绑定，主要是预先设置函数的一些参数，这样在new初始化时，可以传入其余的参数。```bind```的功能之一就是把除了第一个参数（用于绑定this）之外的其他参数都传给下层的参数，这种技术称为**柯里化**。举个例子： 131 | ```js 132 | function foo(p1,p2){ 133 | this.val=p1+p2 134 | } 135 | const bar=foo.bind(null,"hello") 136 | const baz=new bar("world") 137 | 138 | console.log(baz.val) // helloworld 139 | ``` 140 | ## 绑定例外 141 | ### 1. 当我们把null、undefined作为this传入call、apply或bind，这些值在调用时会被忽略，实际应用的是默认绑定规则。 142 | ### 2. 间接引用的情况下会应用默认绑定规则。 143 | 举个例子： 144 | ```js 145 | function foo(){ 146 | console.log(this.a) 147 | } 148 | var a=0 149 | var obj1={a:1,foo} 150 | var obj2={a:2} 151 | 152 | obj1.foo() //1 153 | (obj2.foo=obj1.foo)() // 0 154 | ``` 155 | 表达式```obj2.foo=obj1.foo```的返回值为目标函数的引用，这里会应用默认绑定。 156 | ### 3. 箭头函数 157 | 前面介绍的四种规则适用于除了箭头函数之外，所有的普通函数。我们先看看箭头函数的词法作用域： 158 | ```js 159 | function foo(){ 160 | // this继承自foo 161 | return a=>{console.log(this.a)} 162 | } 163 | 164 | var obj1={a:1} 165 | var obj2={a:2} 166 | 167 | const bar=foo.call(obj1) 168 | bar.call(obj2) // 是1，不是2 169 | ``` 170 | 因为箭头函数会补货调用时```foo()```的```this```。由于```foo()```的this绑定到obj1，bar的this也会绑定到obj1，箭头函数的绑定无法被修改。 -------------------------------------------------------------------------------- /学习笔记/js基础/关于防抖和节流的区别和实现.md: -------------------------------------------------------------------------------- 1 | 对于“防抖”和“节流”，之前以为这两个词是一个概念，翻了几篇文章特此写笔记整理一下。 2 | ## 防抖和节流的区别 3 | ### 防抖是... 4 | 我理解的防抖是，在事件被连续触发时，不进行处理，当事件不再被触发时，等待x秒后处理回调。如下图: 5 | 6 | 滚动的时候不会触发回调，而当滚动停止时，等待x秒，会打印“a”。 7 | ![debounce](https://wx2.sinaimg.cn/mw690/007N1Comly1g4c2y4as26g30ao06j3z9.gif) 8 | ### 而节流.. 9 | 我理解的节流是，在事件被连续触发时，按照某种频率（每x秒执行一次）处理回调，如下图： 10 | 11 | 可见打印的频率不会随着滚动的速率的改变而改变，会按照指定的频率而触发回调。 12 | ![thottle](https://wx2.sinaimg.cn/mw690/007N1Comly1g4c2y2rru4g30ao06jwge.gif) 13 | 14 | ## 乞丐版实现 15 | ```js 16 | const container = document.getElementById('container') 17 | 18 | // 防抖 19 | function debounce(func, time) { 20 | let timer; 21 | return () => { 22 | clearTimeout(timer) 23 | timer = setTimeout(() => { 24 | func() 25 | }, time); 26 | } 27 | } 28 | 29 | // 节流 30 | function throttle(func, time) { 31 | let timer; 32 | return () => { 33 | if (!timer) { 34 | timer = setTimeout(() => { 35 | func() 36 | timer = null 37 | }, time) 38 | } 39 | } 40 | } 41 | 42 | container.addEventListener('scroll', debounce(() => { console.log('a') }, 1000)) 43 | ``` 44 | ## 推荐两篇文章 45 | 1. [说说 JavaScript 中函数的防抖 (Debounce) 与节流 (Throttle)](https://juejin.im/post/5d07a51b5188254dd63c21ce) 46 | 1. [[译] Throttle 和 Debounce 在 React 中的应用](https://juejin.im/post/5d0a5365f265da1b5d57b0ab) 47 | -------------------------------------------------------------------------------- /学习笔记/js基础/冷知识.md: -------------------------------------------------------------------------------- 1 | ### 1. typeof null 为什么是对象 2 | 对象类型在底层的二进制表示，如果前三位都为0的话，被认为是`object`，null表示全0，所以被认为类型是object。 3 | ``` 4 | 000 object 5 | 001 整型，数据是31位带符号整数 6 | 010 双精度类型，数据是双精度数字 7 | 100 字符串，数据是字符串 8 | 110 布尔类型，数据是布尔值 9 | ``` -------------------------------------------------------------------------------- /学习笔记/js基础/大清都亡了，你还用for...in...遍历对象呢.md: -------------------------------------------------------------------------------- 1 | 哈哈，标题党一枚。这篇文章是介绍对象的枚举性和几个用于遍历对象方法的。 2 | ## 枚举 3 | 不太了解对象的几个属性描述符的，[请阅读这篇文章](https://github.com/mytac/blogs/blob/master/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/js%E5%9F%BA%E7%A1%80/%E5%85%B3%E4%BA%8E%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7%E4%BD%A0%E5%BA%94%E8%AF%A5%E7%9F%A5%E9%81%93%E7%9A%84%E4%BA%8B.md)。 4 | 5 | 在上面这篇文章中，我们针对`enumberable`特性简单说了什么是可枚举性，我们可以针对对象的某个属性设置其`enumberable`布尔值来控制它的可枚举性。概括的说，可枚举就是可以出现在`for...in..`循环中，可以在对象属性的遍历中出现。 6 | ```js 7 | const obj={a:1,b:2} 8 | Object.defineProperty(obj,'b',{ 9 | enumerable:false 10 | }) 11 | console.log('b' in obj) // true 12 | for(let k in obj){ 13 | console.log(k,obj[k]) // a 1 14 | } 15 | ``` 16 | 如上例，b确实是存在并且可访问，但并不会出现在`for...in...`中。 17 | 18 | 正如标题所说，不要使用`for...in...`遍历对象了，所以要用另一种方式区分属性是否可枚举： 19 | ```js 20 | const obj={a:1,b:2} 21 | Object.defineProperty(obj,'b',{ 22 | enumerable:false 23 | }) 24 | console.log(obj.propertyIsEnumerable('b')) // false 25 | console.log(Object.keys(obj)) // ['a'] 26 | console.log(Object.getOwnPropertyNames(obj)) ['a','b'] 27 | ``` 28 | `propertyIsEnumerable`会检查给定的属性名是否存在于对象中（并非原型链上）并且可枚举。 29 | 30 | 我们也可以从上例中看出，`Object.keys`和`getOwnPropertyNames`两者的区别。前者是返回可枚举的属性，后者是返回所有的属性。 31 | ## 遍历 32 | ### 1.for...in... 33 | 它可以遍历对象的可枚举属性列表，包括原型链。使用它遍历对象是无法直接获取属性值的，需要手动绑定对象属性指向值。 34 | ### 2.for...of... 35 | ES6中增加了一种遍历数组的语法，他是直接遍历值，而不是数组下标，当然如果对象本身定义了迭代器也可以遍历对象。 36 | ```js 37 | const arr=[1,2,3] 38 | for(let v of arr){ 39 | console.log(v) 40 | } 41 | // 1 42 | // 2 43 | // 3 44 | ``` 45 | 和数组不同，普通的对象没有内置的迭代器，所以无法通过```for...of...`遍历。我们可以给项便利的对象定义` @@iterator`（迭代器）。 46 | ```js 47 | const obj={a:1,b:2} 48 | Object.defineProperty(obj,Symbol.iterator,{ 49 | value(){ 50 | const o=this 51 | let idx=0 52 | const keys=Object.keys(o) 53 | return { 54 | next(){ 55 | return { 56 | value:o[keys[idx++]], 57 | done:(idx>keys.length) 58 | } 59 | } 60 | } 61 | } 62 | }) 63 | ``` 64 | 也可以直接在定义对象时进行声明： 65 | ```js 66 | const obj={a:1,b:2,[Symbol.iterator](){ 67 | const o=this 68 | let idx=0 69 | const keys=Object.keys(o) 70 | return { 71 | next(){ 72 | return { 73 | value:o[keys[idx++]], 74 | done:(idx>keys.length) 75 | } 76 | } 77 | } 78 | }} 79 | ``` 80 | 我们来手动遍历对象： 81 | ```js 82 | const it=obj[Symbol.iterator]() 83 | console.log(it.next()) // {value: 1, done: false} 84 | console.log(it.next()) // {value: 2, done: false} 85 | console.log(it.next()) // {value: undefined, done: true} 86 | ``` 87 | 使用`for...of...`遍历 88 | ```js 89 | for(let v of obj){ 90 | console.log(v) 91 | } 92 | // 1 93 | // 2 94 | ``` 95 | ### 3.Object.keys 96 | 如果是使用过airbnb的eslint规范的人都知道，使用`for...in...`遍历对象属性会报语法错误。我们通常的解决方法就是用```Object.keys```得到包含可枚举的属性名数组，再使用`forEach`进行遍历。 97 | ```js 98 | const obj={a:1,b:2} 99 | const keys=Object.keys(obj) 100 | keys.forEach(key=>{console.log(obj[key])}) 101 | // 1 102 | // 2 103 | ``` 104 | -------------------------------------------------------------------------------- /学习笔记/js基础/深度了解闭包.md: -------------------------------------------------------------------------------- 1 | ## 前言 2 | 之前写过关于闭包的文章，本来以为自己懂了，后来面试时被问到怀疑人生。才明白自己只是觉得自己明白了而已，如果说要将一个东西理解的彻彻底底，就不能“抄书”（我之前就是抄书），而是死抠每一个知识点，一点含糊都会让整个系统崩塌。 3 | 4 | ok，现在开始死抠。什么是闭包？ 5 | > 闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁 ——来自于百度百科 6 | 7 | > 闭包是基于词法作用域书写代码时所产生的自然结果。当函数可以记住并访问所在的词法作用域时，就产生了闭包。 ————《你不知道的js（上）》 8 | 9 | 看不太懂，那就拆开看，什么是词法作用域？ 10 | ## 词法作用域 11 | 如图，每个框框中都是一个作用域，引擎在执行`console.log()`时（黄色框中的语句），会从内向外逐个作用域查找变量。在baz中，我们找到了变量c，没有找到a,b，就会往上一层找，bar中有b,c,baz，找到了b，同名变量c被忽略，以此类推，直至所有执行语句都匹配了变量，否则引擎解析失败抛出错误。 12 | 13 | ![图示](https://wx3.sinaimg.cn/mw690/6f8e0013ly1g1l3a8vgw1j20ls0dg0ts.jpg) 14 | ### 除了词法作用域，还有啥？ 15 | 其实作用域包括词法作用域和动态作用域，JavaScript中的作用域是词法作用域（大部分的编程语言也是基于词法作用域）。在上面的图中，我们能清晰地看出来，**每个函数的全部变量都可以在整个函数的范围中使用或复用（嵌套的函数可以使用外部函数的变量）**，这就是函数作用域。那么只有函数才能创建作用域“框框”吗？ 16 | 17 | 我们看下面这几句代码： 18 | ```js 19 | for(var b=0;b<3;b++){} 20 | 21 | console.log('b',b) // 3 22 | ``` 23 | 上面的代码中，没有声明任何函数，所以通过var声明的变量b被绑定到外部作用域上，也就是全局。(不了解变量提升的同学，可以看我的这篇文章=>[《详解ES6暂存死区TDZ》](https://www.jianshu.com/p/fe05129e8a4c))，所以上述代码相当于： 24 | ```js 25 | var b; 26 | for(b=0;b<3;b++){} 27 | console.log('b',b) // 3 28 | ``` 29 | 。。。是不是很奇葩，本来只想让变量b在for循环中使用，for循环之后销毁，为啥要让他污染到整个词法作用域嘞？幸运的是，由于人类的探索精神，和几个浏览器爹们对JavaScript这个不健全的儿子的扶持，ES6中有了let和const，作为块作用域的补充。（明明都9012了，我为啥还在写ES6的东西=.=）如下，b在for循环结束时就会被销毁，又由于词法作用域中不存在同名变量，所以这里会报错。 30 | ```js 31 | for(let b=0;b<3;b++){} 32 | console.log('b',b) // Uncaught ReferenceError: b is not defined 33 | ``` 34 | 我们在理解块作用域的时候，可以将一个`{}`中看成一个块。 35 | 36 | ### 作用域和上下文到底是不是一个东西? 37 | 答案肯定是"NO!!"上文中我们已经明白了，作用域是在函数定义时决定的。上下文其实就是函数中`this`的指向，即当前函数运行时所挂载的对象。 38 | ```js 39 | const a=1 40 | function foo(){ 41 | console.log(this.a) 42 | } 43 | 44 | const obj={a:2,foo} 45 | 46 | foo() // undefined 47 | obj.foo() // 2 48 | ``` 49 | 这里有个小tips，为啥`const`声明的a，没有像var一样挂载到`window`上呢？其实秘密在这里，[《Javascript闭包：从理论到实现，[[Scopes]]的每一根毛都看得清清楚楚》](https://segmentfault.com/a/1190000015311755?utm_source=tag-newest) （写本章时我也没仔细读这篇文章），const 声明的a其实是在`[[scopes]]`上。 50 | ## 循环和闭包 51 | ### 一道经典面试题 52 | 以下代码为什么与预想的输出不符？ 53 | ```js 54 | // 代码块1 55 | for (var i = 0; i < 5; i++) { 56 | setTimeout(() => { 57 | console.log(i) // 输出5次5 58 | }, 0) 59 | } 60 | ``` 61 | 假设A：因为`setTimeout`这块的任务直接进入了事件队列中，所以i循环之后i先变成了5，再执行`setTimeout`，`setTimeout`中的箭头函数会保存对i的引用，所以会打印5个5. 62 | 63 | 变体一： 64 | ```js 65 | // 代码块2 66 | for (let i = 0; i < 5; i++) { 67 | setTimeout(() => { 68 | console.log(i) // 输出 0,1,2,3,4 69 | }, 0) 70 | } 71 | ``` 72 | 73 | 假设结论A成立，那么上式应该也是输出5次5，但是很明显不是，所以结论A并不完全正确。 74 | 75 | 那我们去掉循环，先写成最简单的异步代码： 76 | ```js 77 | function test(a){ 78 | setTimeout(function timer(){ 79 | console.log(a) 80 | }) 81 | } 82 | 83 | test('hello') 84 | ``` 85 | 执行`test`，`setTimeout`将`timer`函数放入了事件队列，`timer`保留着`test`函数的作用域（在函数定义时创建的），`test`执行完毕，主线程上没有其他任务了，`timer`从事件队列中出队，执行`timer`，执行`console.log(a)`，由于闭包的原因，a依然会保留着之前的引用，输出`'hello'`。 86 | 87 | 那我们在回到题目中，因为两段代码中的不同只有声明语句，所以我们提出假设B：因为在代码块1中，匿名函数保留着外部词法作用域，i都是在全局作用域上，代码块2中由于存在块作用域，所以它保留着每次循环时i的引用。 88 | 89 | 变体二： 90 | ```js 91 | // 代码块3 92 | for (var i = 0; i < 5; i++) { 93 | ((i) => { 94 | setTimeout(function timer() { 95 | console.log(i) // 输出 0,1,2,3,4 96 | }, 0) 97 | })(i) 98 | } 99 | ``` 100 | 使用IIFE传递了变量i给匿名函数，IIFE产生了一个新作用域，`timer`中保留对匿名函数中的i的引用，所以会依次输出。 101 | 102 | 变体三： 103 | ```js 104 | // 代码块4 105 | for (var i = 0; i < 5; i++) { 106 | (() => { 107 | setTimeout(function timer() { 108 | console.log(i) // 输出 5个5 109 | }, 0) 110 | })() 111 | } 112 | ``` 113 | 跟变体2的区别为IIFE没有给匿名函数传递i，`timer`保留的作用域链中对i的引用还是在全局作用域上。 114 | 115 | 经过以上两个变体的验证，所以假设B成立，即：由于作用域链的变化，闭包中保留的参数引用也发生了变化，输出的参数也发生了变化。 116 | 117 | ## 完 118 | 希望看完的小伙伴可以彻底明白“闭包”和作用域的关系，如果有任何错误请在下方评论区留言，欢迎指正。 119 | ## 推荐文章 120 | 1. [深入理解闭包之前置知识---作用域与词法作用域](https://www.jianshu.com/p/60ca27e185ec) -------------------------------------------------------------------------------- /学习笔记/linux/3主机规划与磁盘分区/3.2.4开机流程与主引导分区.md: -------------------------------------------------------------------------------- 1 | ## 计算机的开机流程 2 | BIOS，basic input-output system，是一个写入到主板上的韧体（韧体是指写入到硬件上的软件程序）。 3 | **BIOS是开机时计算机系统主动执行的第一个程序**。 4 | ### 1. BIOS先会分析计算机里有哪些存储设备 5 | 以硬盘为例，BIOS会依据用户的设置去取得能够开机的硬盘，并且到该硬盘中去读取第一个扇区的MBR位置。MBR中会放置最基本的引导加载程序。 6 | BIOS和MBR都是硬件本身会支持的功能。 7 | ### 2. MBR内的引导加载程序工作 8 | 这个引导加载程序（Boot Loader）工作主要是加载内核文件，因为这个引导程序是os在安装时就提供的，他会识别硬盘内的文件系统格式，所以能够读取内核文件。 9 | 10 | #### BOOT LOADER的主要任务： 11 | 1. 提供菜单：用户选择不同的开机选项 12 | 2. 载入内核文件：直接指向可开机的程序区段来开始操作系统 13 | 3. 转交其他loader：将引导加载功能转交给其他loader负责。boot loader不仅仅可以安装在MBR上，也可以安装在每个分区的引导扇区（boot sector）。 14 | ### 3. 内核文件的工作 15 | 开始操作系统的功能。 16 | 17 | ![引导加载程序的工作执行示意图](https://images0.cnblogs.com/blog/565958/201311/30222743-2c6627f579bb4bb3abc3994fe8ad018b.jpg) 18 | 19 | 菜单1（M1）直接加载windows的内核文件来开机;菜单二（M2）将引导工作直接交给第二个分区的启动扇区。 20 | loader只会认识自己系统分区内的可开及内核文件，以及其他loader。 21 | 22 | ### 问题：为啥先装windows，再装linux？ 23 | 在linux安装时，可以将引导加载程序安装在MBR或其他boot sector;且linux的loader可以手动设置菜单，可以在linux的boot loader中加入windows的开机选项。 24 | 25 | 然而，在windows安装时，他的安装程序主动覆盖掉MBR以及自己所在分区的boot sector，没有提供让我们选择的功能。 26 | 27 | 因此，先装linux再装windows，mbr的引导加载程序只有windows的，linux的加载程序已被覆盖掉。 28 | -------------------------------------------------------------------------------- /学习笔记/node/node命令行上传阿里oss.md: -------------------------------------------------------------------------------- 1 | ## package.json配置 2 | ```json 3 | { 4 | "name": "xxx", 5 | "version": "0.17.0", 6 | "private": true, 7 | "homepage": "./", 8 | "scripts": { 9 | "deploy": "node deploy.js" 10 | }, 11 | ``` 12 | ## 编写脚本 13 | ### 安装 14 | ``` 15 | yarn add ali-oss 16 | ``` 17 | ### 配置oss 18 | ```js 19 | const client = new OSS({ 20 | region: 'oss-cn-hangzhou', 21 | // 云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，部署在服务端使用RAM子账号或STS，部署在客户端使用STS。 22 | accessKeyId: 'xxxxxxxxxxxx', 23 | accessKeySecret: 'yyyyyyyyy', 24 | bucket: 'your-bucket', 25 | }); 26 | ``` 27 | ```js 28 | async function put() { 29 | try { 30 | const jsStream = fs.createReadStream('./dist/index.js'); 31 | await client.putStream(`${SERVER_CONFIG[server] || SERVER_CONFIG.default}/index.js`, jsStream); 32 | if (uploadType && uploadTypeConfig[uploadType]) { 33 | const fileName = uploadTypeConfig[uploadType]; 34 | await client.putStream(`${SERVER_CONFIG[server] || SERVER_CONFIG.default}/${fileName}`, fs.createReadStream(`./dist/${fileName}`)); 35 | } 36 | console.log('\033[42;30m SUCCESS \033[40;32m ～(￣▽￣～)(～￣▽￣)～上传完成~~ \033[0m'); 37 | } catch (err) { 38 | console.log('\033[41;30m FAIL \033[40;31m 上传失败 \033[0m'); 39 | console.log(err); 40 | } 41 | } 42 | 43 | put(); 44 | ``` 45 | 输入命令 46 | ``` 47 | yarn deploy beta 48 | ``` 49 | 50 | ![demo](https://s2.ax1x.com/2019/01/17/kprkkQ.png) 51 | 52 | ## 参考链接 53 | 1. [ali-oss-文档](https://www.alibabacloud.com/help/zh/doc-detail/32068.htm?spm=a2c63.p38356.a3.9.6e5d64cdV51ZGT#concept-32068-zh) -------------------------------------------------------------------------------- /学习笔记/node/promise解决node端口占用问题.md: -------------------------------------------------------------------------------- 1 | ## 需求 2 | 检查服务端口是否被占用，占用则递归查找未被占用的端口号，找到返回端口号。 3 | ## node api 4 | ### net.Server 类 5 | #### net.createServer([options][, connectionListener]) 6 | 创建一个新的TCP或IPC服务。 7 | #### server.close([callback]) 8 | 停止 server接受建立新的connections并保持已经存在的connections.此功能是异步的,当所有的connections关闭同时server响应 'close'事件的时候,server将会最终关闭. 一旦'close'发生将会调用可选的回调函数. 与该事件不同, 如果服务器在关闭时未打开，则将使用错误作为唯一参数。 9 | #### listening事件/error事件 10 | 调用` server.on`监听。listening服务成功绑定后调用`server.listen()`；error回调返回错误信息。 11 | ## 用回调函数实现 12 | ```js 13 | function portIsOccupied (port,cb=(err,port)=>{}){ 14 | const server=net.createServer().listen(port) 15 | server.on('listening',()=>{ 16 | console.log(`the server is running on port ${port}`) 17 | server.close() 18 | cb(null,port) 19 | console.log('port',port) 20 | }) 21 | 22 | server.on('error',(err)=>{ 23 | if(err.code==='EADDRINUSE'){ 24 | portIsOccupied(port+1,cb) 25 | console.log(`this port ${port} is occupied.try another.`) 26 | }else{ 27 | cb(err) 28 | } 29 | }) 30 | 31 | } 32 | ``` 33 | 调用方法 34 | ```js 35 | portIsOccupied(3000,(err,port)=>{ 36 | app.listen(port,()=>{ 37 | console.log(`start http://localhost:${port}`) 38 | c.exec(`start http://localhost:${port}`) 39 | }) 40 | }) 41 | ``` 42 | 43 | ## promise实现 44 | ```js 45 | const net=require('net') 46 | 47 | function portIsOccupied (port){ 48 | const server=net.createServer().listen(port) 49 | return new Promise((resolve,reject)=>{ 50 | server.on('listening',()=>{ 51 | console.log(`the server is runnint on port ${port}`) 52 | server.close() 53 | resolve(port) 54 | }) 55 | 56 | server.on('error',(err)=>{ 57 | if(err.code==='EADDRINUSE'){ 58 | resolve(portIsOccupied(port+1))//注意这句，如占用端口号+1 59 | console.log(`this port ${port} is occupied.try another.`) 60 | }else{ 61 | reject(err) 62 | } 63 | }) 64 | }) 65 | 66 | } 67 | 68 | module.exports=portIsOccupied 69 | ``` 70 | 71 | ### 调用方法 72 | 73 | ```js 74 | const c = require('child_process'); 75 | const express=require('express') 76 | const app=express() 77 | ... 78 | portIsOccupied(3000) 79 | .then(port=>{ 80 | app.listen(port,()=>{ 81 | console.log(`start http://localhost:${port}`) 82 | c.exec(`start http://localhost:${port}`) 83 | }) 84 | }) 85 | ``` 86 | ### 用async/await调用 87 | ```js 88 | async function startApp(){ 89 | try{ 90 | const port=await portIsOccupied(3000) 91 | app.listen(port,()=>{ 92 | console.log(`start http://localhost:${port}`) 93 | c.exec(`start http://localhost:${port}`) 94 | }) 95 | }catch(err){ 96 | console.error(err) 97 | } 98 | } 99 | 100 | startApp() 101 | ``` -------------------------------------------------------------------------------- /学习笔记/react-native/使用jest测试rn组件.md: -------------------------------------------------------------------------------- 1 | # 准备阶段 2 | 1. 需要一个rn项目，这里演示的是我个人的项目[ReactNative-ReduxSaga-TODO](https://github.com/mytac/ReactNative-ReduxSaga-TODO) 3 | 2. 安装jest 4 | 如果你是用```react-native init```命令行创建的rn项目，并且你的rn版本在0.38以上，则无需安装了。不太清楚的话就看一下```package.json```文件中是否包含以下代码： 5 | ```json 6 | // package.json 7 | "scripts": { 8 | "test": "jest" 9 | }, 10 | "jest": { 11 | "preset": "react-native" 12 | } 13 | ``` 14 | 如果没有就安装一下```npm i jest --save-dev```，并把上述代码添加到```package.json```文件的对应位置。 15 | 3. 以上步骤完成后，简单运行```npm run test```测试一下jest是否配置成功。但我们没有写测试用例，终端会打印```no tests found```。这时就配置完成了。 16 | 17 | # 快照测试 18 | 写一个组件 19 | ```jsx 20 | import React from 'react'; 21 | import { 22 | Text, View, 23 | } from 'react-native'; 24 | 25 | import PropTypes from 'prop-types'; 26 | 27 | const PostArea = ({ title, text, color }) => ( 28 | 29 | {title} 30 | {text} 31 | 32 | ); 33 | 34 | export default PostArea; 35 | ``` 36 | 在项目根目录下找到```__test__```文件夹，现在，让我们使用React的测试渲染器和Jest的快照功能来与组件进行交互，并捕获呈现的输出并创建一个快照文件。 37 | ```js 38 | // PostArea_test.js 39 | import 'react-native'; 40 | import React from 'react'; 41 | import PostArea from '../js/Twitter/PostArea'; 42 | 43 | import renderer from 'react-test-renderer'; 44 | 45 | test('renders correctly', () => { 46 | const tree = renderer.create().toJSON(); 47 | expect(tree).toMatchSnapshot(); 48 | }); 49 | ``` 50 | 然后在终端运行```npm run test```或```jest```。将会输出： 51 | ``` 52 | PASS __tests__\PostArea_test.js (6.657s) 53 | √ renders correctly (5553ms) 54 | 55 | › 1 snapshot written. 56 | Snapshot Summary 57 | › 1 snapshot written in 1 test suite. 58 | 59 | Test Suites: 1 passed, 1 total 60 | Tests: 1 passed, 1 total 61 | Snapshots: 1 added, 1 total 62 | Time: 8.198s 63 | Ran all test suites. 64 | 65 | ``` 66 | 同时，在__test__文件夹下会输出一个文件，即为生成的快照。 67 | ``` 68 | // Jest Snapshot v1, https://goo.gl/fbAQLP 69 | 70 | exports[`renders correctly 1`] = ` 71 | 79 | 90 | title 91 | 92 | 104 | text 105 | 106 | 107 | `; 108 | 109 | ``` 110 | # 修改源文件 111 | 在下一次运行测试的时候，呈现的输出将与之前创建的快照进行比较。快照应该和代码一起提交。当快照测试失败的时候，就需要检查是否有意或无意的更改。如果是和预期中的变化一样，调用```jest -u```来覆盖当前的快照。 112 | 113 | 我们来更改一下原来的代码：把第二行``````的字号改为14. 114 | ``` 115 | {text} 116 | ``` 117 | 这时，我们再运行```jest```。这时终端将会抛出错误，并指出了错误位置 118 | ![img](http://chuantu.biz/t6/179/1513583288x-1404817411.png)。 119 | 120 | 因为这段代码是我们有意改的，这时运行```jest -u```，快照被覆盖。再执行```jest```则不会报错了~ -------------------------------------------------------------------------------- /学习笔记/react/90% Cleaner React.md: -------------------------------------------------------------------------------- 1 | 2018 react conf在今年十月底于las vegas举行，其中主讲人Ryan Florence，演示了使用最新版本的react其中的几个hooks api可以大幅减少react functional 组件的代码量，本篇文章将围绕这个内容进行补充和示范。（在文章的结尾有大会的油管连接，没有梯子的小伙伴可以在b站上自行搜索）。 2 | 3 | 比如现在有个需求，需要监听键盘输入内容，显示在屏幕的某块可见范围中，效果如下： 4 | 5 | ![demo](https://s1.ax1x.com/2018/10/31/iRRRO0.gif) 6 | 7 | 以下代码基于`create-react-app`创建。 8 | ## 使用稳定版本react实现(v15) 9 | ```jsx 10 | class App extends Component { 11 | constructor(props) { 12 | super(props) 13 | this.state = { 14 | words: '' 15 | } 16 | this.keyFunc = this.keyFunc.bind(this) 17 | } 18 | 19 | componentDidMount() { 20 | window.addEventListener('keypress', this.keyFunc) 21 | } 22 | 23 | componentWillUnmount() { 24 | window.removeEventListener('keypress', this.keyFunc) 25 | } 26 | 27 | keyFunc(e) { 28 | this.setState(prev => ({ 29 | words: prev.words + e.key 30 | })) 31 | } 32 | 33 | render() { 34 | const { words } = this.state 35 | return ( 36 |

37 |
38 | logo 39 |

{words}

40 |
41 |
42 | ); 43 | } 44 | } 45 | ``` 46 | 我们会发现仅仅为了绑定监听函数和使用state，就要调用两个钩子函数和声明为类组件，是不是有点小题大做了？？那么我们看一下v16的react给我们带来的简洁高效！ 47 | ## 使用alpha版本（v16.7） 48 | 首先安装 49 | ``` 50 | yarn add react@next,react-dom@next 51 | ``` 52 | 53 | ```jsx 54 | import React, { useState, useEffect } from 'react'; 55 | 56 | function setIt(initWords) { 57 | const [words, setWords] = useState(initWords); 58 | const listener = (e) => { setWords(prev => (prev + e.key)) } 59 | useEffect(() => { 60 | window.addEventListener('keypress', listener); 61 | console.log('aaa') 62 | return () => window.removeEventListener('keypress', listener); 63 | }, []) 64 | return words 65 | } 66 | 67 | function App() { 68 | const words = setIt('') 69 | return ( 70 |
71 |
72 | logo 73 |

{words}

74 |
75 |
76 | ); 77 | } 78 | ``` 79 | 看啊!虽然是functional component，却可以产生和class组件一样的效果，而且减少了代码量。那么`useState`和`useEffect`到底是干啥的呢？往下翻OVO 80 | ## api 81 | ### useState 82 | 类似于`setState`，但不支持state object扩展，如下 83 | ```js 84 | setState(prevState => { 85 | // Object.assign would also work 86 | return {...prevState, ...updatedValues}; 87 | }); 88 | ``` 89 | `useState`用法如下： 90 | ```js 91 | const [state, setState] = useState(initialState); 92 | ``` 93 | #### 延迟初始化 94 | 如果`initState`是需要昂贵计算的结果，它也可以被延时提供，如下。 95 | ```js 96 | const [state, setState] = useState(() => { 97 | const initialState = someExpensiveComputation(props); 98 | return initialState; 99 | }); 100 | ``` 101 | ### useEffect 102 | ```js 103 | useEffect(didUpdate); 104 | ``` 105 | 使用`useEffect`，传递给它的函数将会在组件渲染到屏幕后运行。 106 | 107 | 在从屏幕上卸载组件之前，要清除监听器或者定时器以避免内存泄漏。`useEffect`可以返回一个清除函数，来完成这项操作，如： 108 | ```js 109 | useEffect(() => { 110 | const subscription = props.source.subscribe(); 111 | return () => { 112 | // Clean up the subscription 113 | subscription.unsubscribe(); 114 | }; 115 | }); 116 | ``` 117 | #### 触发effect的时机 118 | 在组件每次渲染完毕之后触发effect，在此期间如果有输入变化，总是会重新建立effect。这里就引出了`useEffect`的第二个参数，他是一个数组类型，指的是产生effect所依赖的值。 119 | 120 | 比如我们将上述代码改为 121 | ```js 122 | useEffect(() => { 123 | window.addEventListener('keypress', listener); 124 | console.log('aaa') 125 | return () => window.removeEventListener('keypress', listener); 126 | }, [state.words]) 127 | ``` 128 | 指该effect依赖于`state.effect`这个字段，如果它变化的话，将会触发effect函数，在此例中只要输入，就会触发effect中的函数（如果你尝试此例的话，当你的键盘在输入时，会看到控制台在打印aaa）。那么，如果我们传入空数组，`useEffect`只会在`componentDidMount`和`componentWillUnmount`阶段触发，也就是仅仅触发一次（这时控制台只打印了一次aaa）。 129 | 130 | ## 参考链接 131 | 1. [react-conf-2018](https://github.com/ryanflorence/react-conf-2018) 132 | 2. [youtube视频 -- 90% Cleaner React - Ryan Florence - React Conf 2018](https://www.youtube.com/watch?v=wXLf18DsV-I) 133 | 3. [react api-【userState】](https://reactjs.org/docs/hooks-reference.html#usestate) 134 | 4. [react conf 2018主站](https://conf.reactjs.org/) 135 | 136 | -------------------------------------------------------------------------------- /学习笔记/react/flux和redux的前世今生.md: -------------------------------------------------------------------------------- 1 | ## 前言 2 | 我自己用`redux`差不多两年了，然而只是停留在“会用”和“表面理解”这个阶段，后来有人问我flux和redux对比，两者分别有什么区别，自己真的是答不出来。所以写出此篇文章，来终结自己的不求甚解吧！ 3 | ## flux 4 | ![demo](https://www.jdon.com/simgs/course/flux2.png) 5 | ### 联想 6 | 结合上图和flux的各个模块名，会发现flux很像外卖的模式。`action`相当于你从外卖app上下餐的指令，`dispatcher`是外卖平台，`store`是商家，`view`可以想象成是你自己，即发起订餐和接收餐品的角色。 7 | ``` 8 | 【action】 相当于外卖订单。他有一个actiontype（可以联想为唯一的订单编号），和其他信息（比如菜品、备注、电话等等等）。 9 | 10 | 【dispatcher】和外卖平台一样，通过你的订单编号，找到订单具体的信息，再派发给商家。 11 | 12 | 【store】 程序中可以表现为纯Object，或者是Immutable对象，可以想象是卖了一份餐商家就改变库存。（这里与redux不同，redux是只有一个store） 13 | 14 | 【controller-view】 顶层的view，比如你帮你同事订餐，外卖小哥给你打电话，你负责把餐品分发给其他同事(下层的view)。 15 | ``` 16 | ### 简单的示例 17 | 这个示例来源于facebook/flux中`Dispatcher.js`中的注释部分，比起上面的类比要更直观和准确。[=>完整源码，示例从第31行开始](https://github.com/facebook/flux/blob/master/src/Dispatcher.js) 18 | 19 | 场景是这样的：有一个需要填写航班目的地的表单，当你选择一个国家的时候，选择默认的城市。 20 | 21 | 1. 初始化，创建dispatcher和store 22 | ```js 23 | var flightDispatcher = new Dispatcher(); 24 | var CountryStore = {country: null}; 25 | var CityStore = {city: null}; 26 | var FlightPriceStore = {price: null} 27 | ``` 28 | 2. dispatcher注册回调，修改store 29 | ```js 30 | flightDispatcher.register(function(payload) { 31 | if (payload.actionType === 'city-update') { 32 | CityStore.city = payload.selectedCity; 33 | } 34 | }); 35 | ``` 36 | 3. dispatcher派发action 37 | ```js 38 | flightDispatcher.dispatch({ 39 | actionType: 'city-update', 40 | selectedCity: 'paris' 41 | }); 42 | ``` 43 | 4. 等待执行。 44 | ```js 45 | CountryStore.dispatchToken = flightDispatcher.register(function(payload) { 46 | if (payload.actionType === 'country-update') { 47 | CountryStore.country = payload.selectedCountry; 48 | } 49 | }); 50 | 51 | CityStore.dispatchToken = flightDispatcher.register(function(payload) { 52 | if (payload.actionType === 'country-update') { 53 | // `CountryStore.country` may not be updated. 54 | flightDispatcher.waitFor([CountryStore.dispatchToken]); 55 | // `CountryStore.country` is now guaranteed to be updated. 56 | 57 | // Select the default city for the new country 58 | CityStore.city = getDefaultCityForCountry(CountryStore.country); 59 | } 60 | }); 61 | ``` 62 | 在`dispatch({actionType: 'city-update',selectedCountry: 'beijing'})`时，`CountryStore`和`CityStore`两个store都注册了type为`country-update`的action。如果其中store A中的更新需要依赖于store B，就必须得保证store B先更新之后，再执行store A的更新。所以引入 了`waitFor`，等待`CountryStore`更新完成之后，才会更新`CityStore.city`。 63 | 64 | 从上面的示例，我们可以看出整个flux的思想就是，dispatcher发送一个action，通过action的type与`dispatcher`上注册的回调函数进行匹配，从而控制store上的数据更新。 65 | ## Redux 66 | ### 时间旅行 67 | ### 绝对的Pure 68 | ## 二者区别 69 | ### 1. 核心角色 70 | 如果想要更新`store`中的数据，在`flux`中主要是通过 `Dispatcher`上注册的回调函数操作的，而在 71 | 72 | ## 推荐文章 73 | 1. [Flux源码解析（一）](http://satanwoo.github.io/2015/09/23/flux-js-part-one/) 74 | 2. [facebook-flux-In Depth Overview](https://facebook.github.io/flux/docs/in-depth-overview.html#content) 75 | -------------------------------------------------------------------------------- /学习笔记/react/hoc妙用.md: -------------------------------------------------------------------------------- 1 | ## 扩展组件 2 | 3 | 1. collapse toogle 条 4 | 5 | 项目中有一个时间线组件，新需求是要根据 type 加 togglebar，把这个组件进行折叠或展示。如果在原组件基础上进行改动，代码可读性和维护性都变差了，而 react 现在更推崇函数式编程，而函数式编程的一个核心思想就是，一个函数只干一种事，只处理一项工作。 6 | 7 | 所以 hoc 非常好的解决了这个问题，我们用`withCollapse`, 这个高阶函数来处理这个问题。 8 | 9 | ```jsx 10 | export default function withCollapse(WrappedComponent) { 11 | return function(props) { 12 | const { showHead, showFoot, collapse = false } = props; 13 | const [visible, onVisible] = useState(false); 14 | const onHeaderClick = () => onVisible(!visible); 15 | const onFooterClick = () => {}; 16 | 17 | return collapse ? ( 18 |
19 | {showHead && ( 20 |
21 | 22 |
23 | )} 24 | {visible && } 25 | {showFoot && visible && ( 26 |
27 | 28 |
29 | )} 30 |
31 | ) : ( 32 | 33 | ); 34 | }; 35 | } 36 | ``` 37 | -------------------------------------------------------------------------------- /学习笔记/react/react diff算法详解.md: -------------------------------------------------------------------------------- 1 | ## 前言 2 | 本文是我阅读《深入React技术栈》所写的总结笔记。 3 | `reconciliation`调和，是`react`中最为核心的模块，它指的是将virtual dom树转换成actual dom树所耗费的最少操作。他需要进行`diff`->`patch`这两个过程。`diff`是计算virtual dom 树转换成另一棵树进行的最少操作，而`patch`是将差异更新到真实的`dom`节点。 4 | ## diff 5 | ### tree diff 6 | react为了让运行效率更高，tree diff只对树进行同层对比，不去比较跨层的节点。比如，在树A中第一层有一个节点B，想要将他移动到第二层，但并不会直接移动。而是会在第二层创建节点B，接着创建节点B的子节点，创建节点B的子节点的子节点...，然后再把之前第一层的B节点删除。 7 | 8 | ```html 9 | 10 | 11 | 12 | -> 13 | 14 | ``` 15 | 16 | ![demo](https://upload-images.jianshu.io/upload_images/5518628-d60043dbeddfce8b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/504/format/webp) 17 | ### component diff 18 | 因为react通过组件化开发，在对比组件差异上也采用上述算法。即，同一层只要出现不是同一类型的组件，就替换该组件的所有子节点。对于同一类型的组件，则通过`shouldComponentUpdate`去判断是否需要通过`diff`进行分析。`shouldComponentUpdate`默认为true。 19 | ### element diff 20 | element diff主要是根据`mountIndex`和`lastIndex`进行比较，在确定是否移动 ，`mountIndex`是A节点在旧节点结合中的位置，`lastIndex`指访问过的节点，在旧集合中最右的位置，每次遍历都有可能会更新。 21 | 22 | #### 算法描述 23 | 1. 遍历新节点集合 24 | 2. 如果出现旧节点集合中有与当前指针所指新节点A相同的节点，则通过对比节点位置进行判断操作，对比`mountIndex`和`lastIndex`： 25 | 26 | 如果`mountIndex>=lastIndex`：不做移动操作。并把`lastIndex`更新为`mountIndex`。 27 | 28 | 如果`mountIndex Tips：React中有提示说，要尽量避免将最后一个节点移动到第一个节点的操作。就是因为在一上来比较的时候，本来只需要将最后一个节点移动到第一个位置这一个操作。但按照`diff`算法的逻辑，`mountIndex`为最大值，所以`lastIndex`也更新为最大值，第一个节点之后的节点都需要进行移动操作。 36 | 37 | 不太明白的同学可以参考这篇文章->[《React之diff算法》](https://www.jianshu.com/p/3ba0822018cf)，里面有分步图文描述，更便于理解。 38 | 39 | #### 差异队列 40 | 在上一小节中，我们已经知道了diff是如何判断哪些节点要移动，哪些节点要删除或新增，这些修改的内容都被加入了差异队列当中。其中这三种节点操作，分别对应三种type：(在这之前通过了flattenChildren方法将子节点扁平化，key值相同的只取最后一个节点) 41 | ``` 42 | INSERT_MARKUP: 旧集合中有不存在的组件类型或节点，需要对组件或节点进行插入操作 43 | 44 | MOVE_EXISTING: 源码中要对比prevChild===nextChild，即旧集合中有与新集合完全一样的节点，书中说是类型相同且element是可更新的，复用以前的dom节点。 45 | 46 | REMOVE_NODE: 旧组件类型在新集合中也存在，但对应的element不同，不能更新和复用。或者旧组件中存在新集合中不存在的，也需要进行删除操作。 47 | ``` 48 | 源码中有三个函数`makeInsertMarkup`，`makeMove`和`makeRemove`，用来返回上述三个操作对象。(大家可以把这里看作`redux`中`action`的概念)。如下，是进行新增操作的对象 49 | ```js 50 | { 51 | type: ReactMultiChildUpdateTypes.INSERT_MARKUP, 52 | content: markup, 53 | fromIndex: null, 54 | fromNode: null, 55 | toIndex: toIndex, 56 | afterNode: afterNode, 57 | } 58 | ``` 59 | 在遍历的过程中，react不会一发现需要更新的节点就立即更新到真实dom上，而是将所有的上述差异对象，全部放入差异队列中，然后通过patch再将其更新到真实的dom上。 60 | ## patch 61 | patch是指遍历差异队列依次更新到真实dom上的操作。通过`switch`去匹配差异对象的type，然后进行对应的操作。 62 | [=>patch源码在这里](https://github.com/facebook/react/blob/v15.0.0/src/renderers/dom/client/utils/DOMChildrenOperations.js) 63 | ## 参考文档 64 | 1. [react源码--renderers/shared/reconciler/ReactMultiChild.js](https://github.com/facebook/react/blob/v15.0.0/src/renderers/shared/reconciler/ReactMultiChild.js) 65 | 2. [React源码之Diff算法](https://segmentfault.com/a/1190000010686582) -------------------------------------------------------------------------------- /学习笔记/react/react事件系统.md: -------------------------------------------------------------------------------- 1 | ## 阅读前的测试 2 | 想点↗x关闭的同学，先花一分钟进行测试，再来决定是否要继续阅读： 3 | 1. 点击button，最后的输出顺序是什么？ 4 | 2. B,E,F 处的type都是啥？ 5 | ```jsx 6 | export default class Test extends React.Component { 7 | componentDidMount() { 8 | document.querySelector('#btn').addEventListener('click', (e) => { 9 | console.log('A inner listener') 10 | setTimeout(() => { 11 | console.log('B inner listener timer', e.type) 12 | }) 13 | }) 14 | 15 | document.body.addEventListener('click', (e) => { 16 | console.log('C document listener') 17 | }) 18 | 19 | window.addEventListener('click', (e) => { 20 | console.log('D window listener') 21 | }) 22 | } 23 | 24 | outClick(e) { 25 | setTimeout(() => { 26 | console.log('E out timer', e.type) 27 | }) 28 | console.log('F out e', e.type) 29 | } 30 | 31 | innerClick = (e) => { 32 | console.log('G inner e') 33 | e.stopPropagation() 34 | } 35 | 36 | render() { 37 | return ( 38 |
39 | 40 |
41 | ) 42 | 43 | } 44 | } 45 | ``` 46 | 47 | ```md 48 | 1. 最后的输出顺序为 A C G F D B E 49 | 2. B,F处的type为click，而E处的type为null 50 | ``` 51 | 如果错了，不要紧~~咱们往下看吧。 52 | ## 合成事件（SyntheticEvent） 53 | 54 | 考虑到浏览器的兼容性和性能问题，react拥有自己的事件系统，即合成事件。在下文中将深入了解react事件系统。 55 | 56 | 与原生事件直接在元素上注册的方式不同的是，react的合成事件不会直接绑定到目标dom节点上，而是利用事件委托绑定到最外层document上，用一个统一的监听器去监听，这个监听器上保存着目标节点与事件对象的映射，当你挂载或删除节点时，所对应的事件就会从映射表上绑定或删除。（不理解事件委托或事件冒泡的同学可以看我的这篇文章[《举个栗子详解事件代理》](https://www.jianshu.com/p/bf1b882b277e)） 57 | 58 | ## 响应过程（对应第一问） 59 | 我们参照上题，详细说一下事件的响应过程： 60 | 61 | 1. 由于我们写的几个监听事件`addEventListener`，都没有给第三个参数，默认值为`false`，所以在事件捕获阶段，原生的监听事件没有响应，react合成事件没有实现事件捕获。所以在捕获阶段没有事件响应。 62 | 2. 接着到了事件绑定的阶段，`button`上挂载了原生事件，于是输出`"A"`，`setTimeout`中的`"B"`则进入`EVENT LOOP`。在上一段中，我们提到react的合成事件是挂载到`document`上,所以“G”没有输出。 63 | 3. 之后进入冒泡阶段，到了`div`上，与上条同理，不会响应`outClick`，继续向上冒泡。 64 | 4. 之后冒泡到了`document`上，先响应挂载到`document`的原生事件，输出`"c"`。之后接着由里向外响应合成事件队列，即输出`"G""F"`，将`'E'`放入`EVENT LOOP`。再向上冒泡。 65 | 5. 到了`window`上，响应`‘D’`，之后再处理`EVENT LOOP`上的事件，输出`'B' 'E'`. 66 | 67 | ## 合成事件对象 68 | react合成事件是原生事件的扩充，它符合w3c标准。下面是合成事件对象的属性： 69 | 70 | 属性名|类型|描述 71 | -|-|-| 72 | `bubbles`|boolean|事件是否可冒泡 73 | `cancelable`|boolean|事件是否可拥有取消的默认动作 74 | `currentTarget`|DOMEventTarget|事件监听器触发该事件的元素（绑定事件的元素） 75 | `defaultPrevented`|boolean|当前事件是否调用了 event.preventDefault()方法 76 | `eventPhase`|number| 事件传播的所处阶段[0:Event.NONE-没有事件被处理,1:Event.CAPTURING_PHASE - 捕获阶段，2:被目标元素处理,3:冒泡阶段（Event.bubbles为true时才会发生）] 77 | `isTrusted`|boolean| 触发是否来自于用户行为，false为脚本触发 78 | `nativeEvent`|DOMEvent|浏览器原生事件 79 | `preventDefault()`|void| 80 | `isDefaultPrevented()`|boolean|返回的事件对象上是否调用了preventDefault()方法 81 | `stopPropagation()`|void| 82 | `isPropagationStopped()`|boolean|返回的事件对象上是否调用了stopPropagation()方法 83 | `target`|DOMEventTarget|触发事件的元素 84 | `timeStamp`|number|事件生成的日期和时间 85 | `type`|string|当前 Event 对象表示的事件的名称，是注册事件的句柄，如，click、mouseover...etc. 86 | 87 | 注意`preventDefault()`和`stopPropagation()`，他们只能对react合成事件产生作用，尤其 88 | 注意`stopPropagation()`浏览器原生事件是不会被禁止传播的。比如我们把题目中的注释去掉，会发现“C”依然被输出，原因就在于合成事件其实是通过`document`上的监听器进行事件委托的（看不懂的同学接着看上一小节。） 89 | ## 事件池（对应第二问） 90 | 在react中，合成事件被调用后，合成事件对象会被重用，所有属性被置为`null`，所以题目中`outClick`中通过异步方式访问`e.type`是取不到任何值的，如果需要保留属性，可以调用`event.persist()`事件，会保留引用。 91 | 92 | > 彩蛋：如果对这里好奇的同学可以在控制台打印一下event，会发现不论是不是异步方法中的event，它的所有属性都是null。但为什么会得到它的属性值呢，大概是因为`get`方法吧，具体的原因我也没深入。如果了解原理的同学请在评论区留言~~~或者等我之后填坑 93 | 94 | ## 源码构成 95 | react事件系统的核心文件`renderers/shared/event/EventPluginHub.js`，感兴趣的同学可以去看看源码~~ 96 | ```js 97 | var EventPluginHub = { 98 | injection, 99 | putListener, 100 | getListener, 101 | deleteListener, 102 | deleteAllListeners, 103 | extractEvents, // 当顶层事件被触发，该方法中会传入原生事件，生成合成事件 104 | enqueueEvents,// 合成事件进入事件队列 105 | processEventQueue, // 调度事件队列上的所有合成事件 106 | } 107 | ``` 108 | ## 参考文档 109 | 1. [React事件系统和源码浅析](https://juejin.im/post/5bdf0741e51d456b8e1d60be) 110 | 2. [react事件系统源码](https://github.com/facebook/react/tree/v15.0.0/src/renderers/shared/event) 111 | 3. [react 官方文档 -- SyntheticEvent](https://reactjs.org/docs/events.html) -------------------------------------------------------------------------------- /学习笔记/react/redux middleware.md: -------------------------------------------------------------------------------- 1 | ## 前言 2 | 在平常使用`redux`的时候，我们经常会用到第三方`middleware`，或者自己写`middleware`，但是还是对这种写法比较疑惑，因此才产出此篇文章。 3 | 4 | 先看个例子，比如：写一个logger middleware，在每次`dispatch`时，都在控制台打印`action`。 5 | ```js 6 | const loggerMiddleware=({ dispatch, getState })=>next=>action=>{ 7 | console.log('action',action) 8 | next(action) 9 | } 10 | ``` 11 | ### 疑问 12 | 1. 为什么不直接传多参数？？ 比如写成这样：`(store,next,action)=>{next(action)}` 13 | 2. 为什么是store=>next=>action顺序，而不是其他？？ 14 | 15 | >在《深入react技术栈》中，作者提到柯里化的middleware写法主要有以下两个好处： 16 | >1. **易串联**：柯里化函数延迟执行，通过不断的currying形成的中间件可以累积参数，再配合`compose`，很容易形成`pipeline`来处理数据流 17 | >2. **共享store**：因为闭包的存在，每个中间件的store引用都指向同一个值，`applyMiddleware`之后才是新的store。 18 | 19 | 看了上面的描述我又不懂了，柯里化是怎么积累参数延迟执行的？`applyMiddleware`这个方法又是怎样工作的？相信读者和我有一样的疑问，那我们就带着疑问一步一步挖掘。 20 | ## 柯里化 21 | >在计算机科学中，柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术。 ————百度百科 22 | 23 | 其实说白了就是高阶函数，示例如下： 24 | ### 一个简单的示例 25 | ```js 26 | const curry = a => b => c => console.log(a, b, c) 27 | 28 | curry(1)(2)(3) // 输出1 2 3 29 | ``` 30 | 箭头函数太过抽象？将他写为普通函数 31 | ```js 32 | function curry(a){ 33 | return function(b){ 34 | return function(c){ 35 | console.log(a,b,c) 36 | } 37 | } 38 | } 39 | // 我们分步看下 40 | curry(1) 41 | // 闭包保存着a 42 | function (b){ 43 | return function(c){ 44 | console.log(a,b,c) 45 | } 46 | } 47 | 48 | curry(1)(2) 49 | // 闭包保存着a,b 50 | function(c){ 51 | console.log(a,b,c) 52 | } 53 | 54 | curry(1)(2)(3) 55 | // 执行上一步的匿名函数，闭包保存a,b,c 56 | console.log(a,b,c) // 1 2 3 57 | ``` 58 | 综合上例，我们类比`middleWare`的实现，也能够大概知道一点他是怎样累积参数的了。那么我们再看一下`applyMiddleware`是怎么把一个个中间件串起来，让他们共享一个`store`的。 59 | 60 | ## applyMiddleware源码解读 61 | 源码 62 | ```js 63 | export default function applyMiddleware(...middlewares) { 64 | return createStore => (...args) => { 65 | const store = createStore(...args) 66 | let dispatch = () => { 67 | throw new Error( 68 | `Dispatching while constructing your middleware is not allowed. ` + 69 | `Other middleware would not be applied to this dispatch.` 70 | ) 71 | } 72 | let chain = [] //用于存放中间件 73 | 74 | /* applyMiddleware主要作用：改造dispatch方法*/ 75 | const middlewareAPI = { 76 | getState: store.getState, 77 | dispatch: (...args) => dispatch(...args) 78 | } 79 | 80 | // 这里拿到的store引用都指向同一个值，因此store是共享的 81 | chain = middlewares.map(middleware => middleware(middlewareAPI)) 82 | dispatch = compose(...chain)(store.dispatch) 83 | 84 | return { 85 | ...store, 86 | dispatch 87 | } 88 | } 89 | } 90 | 91 | export default function compose(...funcs) { 92 | // 如果什么都没有传，则直接返回参数 93 | if (funcs.length === 0) { 94 | return arg => arg 95 | } 96 | // 如果funcs中只有一个中间件，那么就直接返回这个 中间件 97 | if (funcs.length === 1) { 98 | return funcs[0] 99 | } 100 | // reduce() 方法对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值。 101 | return funcs.reduce((a, b) => (...args) => a(b(...args))) 102 | } 103 | ``` 104 | 从源码中我们可以看到，`applyMiddleware`封装了`store`然后把这个参数传递给每个`middleware`。在`compose`中，进行了参数累加。 105 | 106 | 上面的核心逻辑我们可以压缩成以下代码： 107 | ```js 108 | // middlewares数组 109 | const chains = [ 110 | next => action => { console.log(action); next(action) }, 111 | next => action => { console.warn(action); next(action) }, 112 | next => action => { console.dir(action); next(action) }, 113 | ] 114 | 115 | // applyMiddleware方法的核心！！ 116 | function compose(chain) { 117 | // middlewares=[m1,m2,m3] 118 | return chain.reduce((a, b) => (...args) => a(b(...args))) 119 | } 120 | const dispatch = compose(chains)(store.dispatch) 121 | // 当执行dispatch时，相当于执行了m1(m2(m3(store.dispatch)))，每一个middleware会依次执行 122 | 123 | // reduce之后是这样的 action => { console.log(action); console.warn(action);console.dir(action); } 124 | dispatch({ type: 'hello' }) 125 | // 控制台将打印三条{ type: 'hello' } 126 | ``` 127 | ## 推荐阅读 128 | 1. [详解JS函数柯里化](https://www.jianshu.com/p/2975c25e4d71) -------------------------------------------------------------------------------- /学习笔记/react/reselect.md: -------------------------------------------------------------------------------- 1 | ## 前言 2 | 我从《深入浅出react和redux》中了解到`reselect`，发现它是`redux`官方社区的一个选择器库(selector library)，这里的“选择器”不是指css中的选择器，他的这个概念是出自[nuclear-js](https://github.com/optimizely/nuclear-js)。 3 | 4 | 选择器可以计算派生数据，允许redux存储最小的状态；他是可以组合的，可以用作其他选择器的输入；它也是有效的，不会被重复计算，除非它的参数真的改变了。 5 | ## 为什么需要reselect 6 | 当你在更新`state tree`的时候，操作他的`reducer`就会运行一次；这也就意味着如果你的`state tree`嵌套很深或是非常庞大，就会产生昂贵的系统开销，因此会带来性能问题。`reselect`是`redux`的一个中间件，它会帮助你避免这些重复计算。 7 | 8 | 你也不用再为不能直接改变state而烦恼，因为选择器自动会创造一份副本，我们只需定义函数，将`state`直接传入就好。 9 | ## 使用 10 | ```js 11 | import { createSelector } from 'reselect' 12 | 13 | const getVisibilityFilter = (state) => state.visibilityFilter 14 | const getTodos = (state) => state.todos 15 | 16 | export const getVisibleTodos = createSelector( 17 | [ getVisibilityFilter, getTodos ], 18 | (visibilityFilter, todos) => { 19 | switch (visibilityFilter) { 20 | case 'SHOW_ALL': 21 | return todos 22 | case 'SHOW_COMPLETED': 23 | return todos.filter(t => t.completed) 24 | case 'SHOW_ACTIVE': 25 | return todos.filter(t => !t.completed) 26 | } 27 | } 28 | ) 29 | ``` 30 | 在上面的例子中`getVisibilityFilter`和`getTodos`两个选择函数不会缓存选择的数据（non-memozied），但使用`createSelector`将`getVisibleTodos`转换为可缓存的选择器(memoized)。 31 | ## 将选择器与redux store连接 32 | 需要在`mapStateToProps`中调用选择器，在此例中是上文的`getVisibleTodos`。 33 | ```js 34 | const mapStateToProps = (state) => { 35 | return { 36 | todos: getVisibleTodos(state) 37 | } 38 | } 39 | const VisibleTodoList = connect( 40 | mapStateToProps, 41 | mapDispatchToProps 42 | )(TodoList) 43 | 44 | export default VisibleTodoList 45 | ``` 46 | 47 | 放在组件中： 48 | 49 | ```jsx 50 | import React from 'react' 51 | import Footer from './Footer' 52 | import AddTodo from '../containers/AddTodo' 53 | import VisibleTodoList from '../containers/VisibleTodoList' 54 | 55 | const App = () => ( 56 |
57 | 58 | 59 | 60 |
61 | ) 62 | ``` 63 | 如上，在多个组件中，我们的reducer应该根据`VisibleTodoList`的prop，`listId`进行数据操作。所以在`getTodos`中可能会写成： 64 | ```js 65 | const getTodos = (state, props) => 66 | state.todoLists[props.listId].todos 67 | ``` 68 | props可以从`mapStateToProps`传递给`getVisibleTodos`： 69 | ```js 70 | const mapStateToProps = (state, props) => { 71 | return { 72 | todos: getVisibleTodos(state, props) 73 | } 74 | } 75 | ``` 76 | 但是!拥有多个实例的`VisibleTodoList`不会正确的缓存状态。因为一个选择器只会创建一份缓存，如果我们在两个`VisibleTodoList`的实例上来回交替，每次的参数都是不一样的，所以选择器会一直重复计算，而不是返回存储好的缓存。 77 | ## 多个组件共享具有props的选择器 78 | 如果要在传递props和保留缓存状态的同时，使多个`VisibleTodoList`的实例共享选择器，组件的每个实例都需要他自己的选择器私有副本。让我们创建一个名为`makeGetVisibleTodos`的函数，每次调用它时都会返回`getVisibleTodos`选择器的新副本： 79 | ```jsx 80 | import { createSelector } from 'reselect' 81 | 82 | const getVisibilityFilter = (state, props) => 83 | state.todoLists[props.listId].visibilityFilter 84 | 85 | const getTodos = (state, props) => 86 | state.todoLists[props.listId].todos 87 | 88 | const makeGetVisibleTodos = () => { 89 | return createSelector( 90 | [ getVisibilityFilter, getTodos ], 91 | (visibilityFilter, todos) => { 92 | switch (visibilityFilter) { 93 | case 'SHOW_COMPLETED': 94 | return todos.filter(todo => todo.completed) 95 | case 'SHOW_ACTIVE': 96 | return todos.filter(todo => !todo.completed) 97 | default: 98 | return todos 99 | } 100 | } 101 | ) 102 | } 103 | 104 | export default makeGetVisibleTodos 105 | ``` 106 | 先需要调用一次`makeGetVisibleTodos`，获得`getVisibleTodos `，在将他传入`props`中，如下： 107 | ```js 108 | const makeMapStateToProps = () => { 109 | const getVisibleTodos = makeGetVisibleTodos() 110 | const mapStateToProps = (state, props) => { 111 | return { 112 | todos: getVisibleTodos(state, props) 113 | } 114 | } 115 | return mapStateToProps 116 | } 117 | ``` 118 | ## 参考资料 119 | 1. [reselect 官方文档](https://github.com/reduxjs/reselect#installation) -------------------------------------------------------------------------------- /学习笔记/three/readme.md: -------------------------------------------------------------------------------- 1 | # 目录 2 | 3 | ## 基础篇 4 | 5 | 1. [初探](./threejs-basic-1.md) 6 | 2. [响应式设计](./threejs-basic-2.md) 7 | -------------------------------------------------------------------------------- /学习笔记/three/threejs-basic-2.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: threejs系列-响应式设计 3 | tags: 4 | - three 5 | date: 2023-01-14 21:56:35 6 | --- 7 | 8 | 9 | ## 自适应 10 | 11 | ### 初始化 12 | 13 | 对于需要渲染的 canvas 和整体 html 的样式进行初始化： 14 | 15 | ```css 16 | html, 17 | body { 18 | margin: 0; 19 | height: 100%; 20 | } 21 | #c { 22 | width: 100%; 23 | height: 100%; 24 | display: block; 25 | } 26 | ``` 27 | 28 | ### 元素变形 ———— 更新相机 aspect 29 | 30 | 当变换窗口大小的时候，发现元素变形，这是因为窗口大小改变->canvas 宽高 100%变化-> 坐标系压缩/拉伸 -> 画布元素和相机也被拉伸。 31 | 32 | [![pSQ95oF.md.png](https://s1.ax1x.com/2023/01/14/pSQ95oF.md.png)](https://imgse.com/i/pSQ95oF) 33 | 34 | 这是要调节宽高比，将相机的宽高比调节为画布宽高比 35 | 36 | ```js 37 | // 相机随着屏幕宽高自适应aspect 38 | const cameraResponsive = (camera, renderer) => { 39 | const canvas = renderer.domElement 40 | camera.aspect = canvas.clientWidth / canvas.clientHeight 41 | camera.updateProjectionMatrix() 42 | } 43 | ``` 44 | 45 | #### PerspectiveCamera.updateProjectionMatrix 46 | 47 | 执行摄像机投影的更新，必须在设置参数之后执行。 48 | 49 | > Updates the camera projection matrix. Must be called after any change of parameters.[=> PerspectiveCamera.updateProjectionMatrix](https://threejs.org/docs/#api/en/cameras/PerspectiveCamera.updateProjectionMatrix) 50 | 51 | ### 分辨率过低、块状化 ———— 更新 canvas drawingbuffer 52 | 53 | canvas 元素有两个尺寸。一个是 canvas 在页面上的显示尺寸， 是我们用 CSS 来设置的。另一个尺寸是 canvas 本身像素的数量。这和图片一样。 比如我们有一个 128x64 像素的图片然后我们可以通过 CSS 让它显示为 400x200 像素。 54 | 55 | ```html 56 | 57 | ``` 58 | 59 | #### drawingbuffer canvas 绘图缓冲区 60 | 61 | canvas 的内部尺寸，就是 drawingbuffer 尺寸，当显示的尺寸与 drawingbuffer 尺寸相等时，才不会出现块状化的情况。 62 | 63 | 所以，在 threejs 中，可以调用`renderer.setSize`设置 canvas 的绘图缓冲区，当外部显示区域变化的时候，drawingbuffer 也要随之变化。 64 | 65 | 用一个函数来检查渲染器的 canvas 的内部尺寸是否与显示的尺寸一样，如果不一样就使其相等。 66 | 67 | ```js 68 | function resizeRendererToDisplaySize(renderer) { 69 | const canvas = renderer.domElement 70 | const width = canvas.clientWidth 71 | const height = canvas.clientHeight 72 | const needResize = canvas.width !== width || canvas.height !== height 73 | if (needResize) { 74 | renderer.setSize(width, height, false) // 传入false，禁止css样式更新 75 | } 76 | return needResize 77 | } 78 | ``` 79 | 80 | #### renderer.resize(width,height,updateStyle) 81 | 82 | ##### .setSize ( width : Integer, height : Integer, updateStyle : Boolean ) : undefined 83 | 84 | > Resizes the output canvas to (width, height) with device pixel ratio taken into account, and also sets the viewport to fit that size, starting in (0, 0). Setting updateStyle to false prevents any style changes to the output canvas. 85 | > [=> WebGLRenderer.setSize](https://threejs.org/docs/#api/en/renderers/WebGLRenderer.setSize) 86 | 87 | ### 组合自适应函数 88 | 89 | 将上面的两种自适应解决方案进行整合 90 | 91 | ```js 92 | // 相机随着屏幕宽高自适应aspect 93 | const cameraResponsive = (camera, renderer) => { 94 | const canvas = renderer.domElement 95 | camera.aspect = canvas.clientWidth / canvas.clientHeight 96 | camera.updateProjectionMatrix() 97 | } 98 | 99 | // 判断render是否需要 resize 100 | const resizeRendererToDisplaySize = (renderer) => { 101 | const canvas = renderer.domElement 102 | const pixelRatio = window.devicePixelRatio 103 | const width = (canvas.clientWidth * pixelRatio) | 0 104 | const height = (canvas.clientHeight * pixelRatio) | 0 105 | const needResize = canvas.width !== width || canvas.height !== height 106 | if (needResize) { 107 | renderer.setSize(width, height, false) 108 | } 109 | return needResize 110 | } 111 | ``` 112 | 113 | 在使用时，可写成 114 | 115 | ```js 116 | if (resizeRendererToDisplaySize(renderer)) { 117 | cameraResponsive(camera, renderer) 118 | } 119 | ``` 120 | 121 | 或是，直接抽成独立的函数 122 | 123 | ```js 124 | const responsive = (renderer, camera) => { 125 | if (resizeRendererToDisplaySize(renderer)) { 126 | cameraResponsive(camera, renderer) 127 | } 128 | } 129 | ``` 130 | 131 | 使用时，如 132 | 133 | ```js 134 | renderer.render(scene, camera) 135 | responsive(renderer, camera) 136 | requestAnimationFrame(render) 137 | ``` 138 | 139 | 最终效果 140 | 141 | [![pSQ9TJJ.md.png](https://s1.ax1x.com/2023/01/14/pSQ9TJJ.md.png)](https://imgse.com/i/pSQ9TJJ) 142 | 143 | ## 相关链接 144 | 145 | 1.[Transformations, Coordinate Systems, and the Scene Graph](https://discoverthreejs.com/book/first-steps/transformations/#coordinate-systems-world-space-and-local-space) 146 | -------------------------------------------------------------------------------- /学习笔记/小程序/小程序命令行上传代码.md: -------------------------------------------------------------------------------- 1 | 由于公司小程序迭代特别快，每次上传代码神烦，还得往钉钉群@领导，写了个伪!小程序发布命令，给有同样烦恼的开发者们提供思路。 2 | 3 | ``` 4 | 流程包括： 打开小程序ide-> 键入提交信息 -> 发布体验版本 -> git 提交-> 通知钉钉群。 5 | ``` 6 | 7 | p.s 为啥是“**伪**”，就是因为微信小程序官方没有提供直接发布的命令，需要自己手动提交审核正式版。 8 | 9 | ## step 1 10 | 先是配置好你的微信ide路径和项目路径，如下： 他做的工作是先打开ide，然后打开你的项目。强烈建议先自己手动打开ide，然后不执行初始化这段函数。 11 | 因为如果是用taro开发，在打包之后他有时会丢文件，直接上传的话就太那啥了。（这里吐槽一句，win 版小程序ide太难用了！！） 12 | 13 | ![init](https://wx1.sinaimg.cn/mw690/007N1Comly1g4lncu6tdzj30sg0gpacb.jpg) 14 | 15 | ## step 2 16 | 这里贴的图省去了输入过程的代码，主要上传版本号和提交信息。因为微信公共接口没有提供获取之前上传信息的接口， 17 | 为了每次自己不手填版本号，所以直接先在git上打标，然后拿到`git tag`上最后一个tag，+1，作为新版本号。有兴趣的小伙伴可以看我的源码（在文章最后）。 18 | 同样，也是调用微信ide的命令行。 19 | 20 | （其实这里的功能也可以写在`git hook`上，但感觉不太灵活就舍了。） 21 | 22 | ![upload](https://wx2.sinaimg.cn/mw690/007N1Comly1g4lncu6q36j30ok0d7q4w.jpg) 23 | 24 | ## 其他 25 | 附：[完整代码](https://github.com/mytac/mytac-scripts) 26 | 27 | 写的比较啰嗦，有好的建议请在下方留言~ -------------------------------------------------------------------------------- /学习笔记/布局/viewport的理解和使用.md: -------------------------------------------------------------------------------- 1 | ## viewport概念 2 | 移动端浏览器通常都在一个比屏幕更宽的虚拟窗口中渲染页面，这个虚拟窗口就是viewport，目的是正常展示没有做移动端适配的网页，可以让他们完整的展现给用户。我们有时用移动设备访问桌面版网页就会看到一个横向滚动条，这里可显示区域的宽度就是viewport的宽度。 3 | 4 | ## css中的像素和设备像素的区别 5 | 在桌面网页开发时，css中的1px就是设备上的1px；然而css中的1px仅仅是一个抽象的值，不代表实际像素为多少；而在移动设备中，不同设备的像素密度是不一样的，css中的1px可能并不等于真实设备的一个像素值。用户缩放也会改变css中的1px代表多少设备像素。这个比例就是devicePixelRatio 6 | ``` 7 | 物理像素/独立像素 = devicePixelRatio 8 | ``` 9 | 10 | 我们可以在浏览器中进行缩放，在控制台中打印`window.devicePixelRatio`来查看`devicePixelRatio`的大小。其中的独立像素可以理解为css中的px。 11 | 12 | ## 视口基础 13 | 一个典型的针对移动端优化的站点包含类似下面的内容： 14 | ``` 15 | 16 | ``` 17 | 以下为viewport的几个属性，这些属性可以混合来使用，多个属性同时使用要用逗号隔开。这里我们展开一个概念，叫做**ideal viewport**，指的是理想情况下的viewport，不需要用户缩放和横向滚动条就能正常查看网页的所有内容，并且能够看清所有文字，无论这个文字在css中定义为多小，显示出来时可以看清的。 18 | 19 | 属性 | 描述 20 | ---|--- 21 | `width`|控制视口的宽度，可以指定数字；或设置`device-width`来指定 22 | `height`| 控制视口的高度，这个属性不太重要，很少使用 23 | `initial-scale`| 控制页面最初加载时的在在`idealviewport`下缩放等级，通常设为1，可以是小数 24 | `maximum-scale`| 允许用户的最大缩放值，为一个数字，可以带小数 25 | `minimum-scale`| 允许用户的最小缩放值，为一个数字，可以带小数 26 | `user-scalable`| 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许 27 | ## viewport进阶 28 | ### 1.width和initial-scale 29 | 当设置了`width`和`initial-scale`时，浏览器会自动选择数值最大的进行适配。如设置： 30 | ``` 31 | 32 | ``` 33 | 浏览器会选择数值大的进行适配，如果当前窗口ideal viewport宽度为300，`initial-scale`值为1，取得是width为400的值；如果当前窗口的ideal viewport为480，则取480。 34 | 35 | 事实上，`width=device-width`和`initial-scale=1`都代表应用`ideal viewport`，但在ipad、iphone等移动设备和IE上，横竖屏不分，默认都取竖屏的宽度，兼容性最好的写法就是 36 | ``` 37 | 38 | ``` 39 | ### 2.动态改变属性 40 | #### a. document.write() 41 | ```js 42 | document.write('') 43 | ``` 44 | #### b.setAttribute 45 | ```js 46 | var mvp = document.getElementById('testViewport'); 47 | mvp.setAttribute('content','width=480'); 48 | ``` 49 | ## 参考资料 50 | 1. [MDN -- 在移动浏览器中使用viewport元标签控制布局](https://developer.mozilla.org/zh-CN/docs/Mobile/Viewport_meta_tag) 51 | 2. [移动前端开发之viewport的深入理解](https://www.cnblogs.com/2050/p/3877280.html) -------------------------------------------------------------------------------- /学习笔记/思维导图/css/css揭秘.xmind: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mytac/blogs/b8900063edda9b8c0ac8003614fdd8b7ad1eb4a3/学习笔记/思维导图/css/css揭秘.xmind -------------------------------------------------------------------------------- /学习笔记/思维导图/js/2019react学习路线.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mytac/blogs/b8900063edda9b8c0ac8003614fdd8b7ad1eb4a3/学习笔记/思维导图/js/2019react学习路线.png -------------------------------------------------------------------------------- /学习笔记/思维导图/js/ES6 & Beyond.xmind: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mytac/blogs/b8900063edda9b8c0ac8003614fdd8b7ad1eb4a3/学习笔记/思维导图/js/ES6 & Beyond.xmind -------------------------------------------------------------------------------- /学习笔记/思维导图/js/掘金面试题/1.xmind: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mytac/blogs/b8900063edda9b8c0ac8003614fdd8b7ad1eb4a3/学习笔记/思维导图/js/掘金面试题/1.xmind -------------------------------------------------------------------------------- /学习笔记/思维导图/js/深入react技术栈.xmind: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mytac/blogs/b8900063edda9b8c0ac8003614fdd8b7ad1eb4a3/学习笔记/思维导图/js/深入react技术栈.xmind -------------------------------------------------------------------------------- /学习笔记/机器学习/coursea笔记/1.导学：监督学习和无监督学习.md: -------------------------------------------------------------------------------- 1 | ## introduction 2 | 一个学习过程是，通过经验E，完成任务T，提升性能度量值P。 3 | ### 监督学习 (Supervised Learning) 4 | 有数据集且知道正确输出是什么样子的，认为输入输出之间有关系。 5 | #### classifiction 分类 （离散） 6 | 需要预测多个离散值，e.g：胸部肿瘤大小和肿瘤类型的关系（良性、恶性） 7 | 最后输出分类的枚举值。 8 | #### regression 回归 (连续) 9 | 最后可以映射为连续函数。 10 | ### 无监督学习 (Unsupervised Learning) 11 | 很少或不能预测输入和输出的关系。 12 | #### 聚类 (clustering) 13 | 将数据划分为不同的变量组（知道这些变量都是什么）。 14 | #### 非聚类 (non-clustering) 15 | 不知道变量是什么的情况下划分。 -------------------------------------------------------------------------------- /学习笔记/框架/taro的坑.md: -------------------------------------------------------------------------------- 1 | 1. `constructor`中获取不到props（taro v1.2.0-beta.2） 2 | 2. `getLocation()`，ios 12.1.2在调取地理位置时，如果获取不到地理信息，下一次再调起的时候，会一直挂起，没有异常抛出，导致之后的处理一直阻塞。我的解决方法是用`Promise.race([])`，如果挂起，超时后则返回预置信息。（taro v1.2.0-beta.2） -------------------------------------------------------------------------------- /学习笔记/浏览器/event loop宏任务、微任务.md: -------------------------------------------------------------------------------- 1 | ## 前言 2 | 在社区上看了不少关于`Event Loop`的文章，对于面试题来讲，是会做了，但还是感觉理解的深度不够。为什么要划分宏任务与微任务，event loop除了我们日常开发时会遇到的场景之外，还有哪些我不了解的知识。我在whatwg上找到了解释，同时也发现了很多自己不知道的新概念，所以产出此文和大家分享。如有错误的翻译和理解请在评论区指出，靴靴~~ 3 | ## Agent 4 | [github issue](https://github.com/tc39/ecma262/issues/882) 5 | ## Reaml 6 | https://github.com/tc39/proposal-realms 7 | ## whatwg上对event loop的解释 8 | [8.1.4 Event loops](https://html.spec.whatwg.org/multipage/webappapis.html#event-loops) 9 | >To coordinate events, user interaction, scripts, rendering, networking, and so forth, user agents must use event loops as described in this section. Each agent has an associated event loop. 10 | 11 | 渣翻：每个用户代理在协调事件，用户交互，脚本，渲染，网络等场景下都要使用event loop，每个用户代理都有自己相关的event loop。 12 | 13 | 它有三种类型，分别为window event loop,woker event loop,worklet event loop. 14 | 15 | **window event loop**是用在类似原始窗口代理([similar-origin window agents](https://html.spec.whatwg.org/multipage/webappapis.html#similar-origin-window-agent))上的事件循环。 比如说，我在chrome上访问 16 | -------------------------------------------------------------------------------- /学习笔记/浏览器/performance与浏览器渲染.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mytac/blogs/b8900063edda9b8c0ac8003614fdd8b7ad1eb4a3/学习笔记/浏览器/performance与浏览器渲染.md -------------------------------------------------------------------------------- /学习笔记/红宝书/自动切换焦点翻页.md: -------------------------------------------------------------------------------- 1 | 红宝书中的写法太麻烦了，还是先获取每个子节点，再进入循环查，代码啰嗦还看不懂。 2 | 3 | 完全可以用事件代理实现！ 4 | 5 | html代码举例： 6 | ```html 7 |
8 | 9 | 10 | 11 |
12 | ``` 13 | 14 | ```js 15 | const form=document.forms['form2'] 16 | const input=form.elements[0] 17 | 18 | const toward=(e,index)=>{ 19 | if(e.target.value.length===e.target.maxLength){ 20 | form.elements[index+1].focus() 21 | } 22 | } 23 | 24 | form.addEventListener('keypress',(e)=>{ 25 | const tar=e.target 26 | const index=[].indexOf.call(tar.parentNode.children,tar) //查当前节点是父元素的第几个节点 27 | toward(e,index) 28 | }) 29 | ``` 30 | 31 | ![示例](http://chuantu.biz/t6/166/1512378504x-1404817824.gif) -------------------------------------------------------------------------------- /学习笔记/设计模式/代理.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mytac/blogs/b8900063edda9b8c0ac8003614fdd8b7ad1eb4a3/学习笔记/设计模式/代理.md -------------------------------------------------------------------------------- /常用/awesome hoc/withContextMenu.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useRef } from "react"; 2 | 3 | /** 4 | * if you have multiple responsive area, 5 | * you should set an outer MenuComponent 6 | * rather than bind it in this function. 7 | * @param WrappedComponent:【Required】 8 | * @param renderMenu:【Required】Render function. 9 | */ 10 | export default function bindRightClickMenu(WrappedComponent, renderMenu) { 11 | return props => { 12 | const myRef = useRef(null); 13 | const childRef = useRef(null); 14 | const [visible, setVisible] = useState(false); 15 | const [pos, setPos] = useState([0, 0]); // Mouse Position 16 | let menuDOMOffset = null; // store the MenuComponent's offset 17 | 18 | const onContextMenu = e => { 19 | e.preventDefault(); 20 | setVisible(true); 21 | setPos([e.clientX, e.clientY]); 22 | }; 23 | 24 | const handleCancel = evt => { 25 | if (!renderMenu) return; 26 | const [a, b] = pos; 27 | const { clientX, clientY } = evt; 28 | const menuDOM = childRef.current; 29 | window.mytacdom = menuDOM; 30 | 31 | if (!menuDOMOffset) { 32 | const { offsetWidth, offsetHeight } = menuDOM; 33 | menuDOMOffset = [offsetWidth, offsetHeight]; 34 | } 35 | 36 | const [width, height] = menuDOMOffset; 37 | // checkout if the element except for the MenuComponent has been clicked. 38 | const wasOut = !( 39 | clientX >= a && 40 | clientX <= a + width && 41 | clientY >= b && 42 | clientY <= b + height 43 | ); 44 | if (wasOut) { 45 | setVisible(false); 46 | } 47 | }; 48 | 49 | const style = { position: "absolute" }; 50 | const [left, top] = pos; 51 | 52 | return ( 53 |
54 | 55 |
56 | {visible && renderMenu && renderMenu()} 57 |
58 |
59 | ); 60 | }; 61 | } 62 | -------------------------------------------------------------------------------- /常用/common.less: -------------------------------------------------------------------------------- 1 | .flexCenter { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | } 6 | 7 | .flexBetween { 8 | display: flex; 9 | justify-content: space-between; 10 | align-items: center; 11 | } -------------------------------------------------------------------------------- /研报/202003_猪肉.md: -------------------------------------------------------------------------------- 1 | ![母猪存栏量](http://n.sinaimg.cn/spider2020310/262/w650h412/20200310/dd68-iqrhckn1253578.jpg) 2 | 3 | ![2019年末能繁母猪](http://n.sinaimg.cn/translate/57/w650h207/20200310/2e27-iqrhckn1254521.jpg) 4 | 5 | ## 天邦股份 6 | 7 | ### 关于母猪存栏量 8 | 9 | 关于成本 10 | -------------------------------------------------------------------------------- /翻译/README.md: -------------------------------------------------------------------------------- 1 | # 翻译 2 | 日期 |翻译|原文链接 3 | ---|---|---| 4 | 2017.8.23|[WTF JavaScript](https://github.com/mytac/blogs/blob/master/%E7%BF%BB%E8%AF%91/WTF%20JavaScript.md)|[What the f*ck JavaScript?](https://github.com/denysdovhan/wtfjs)| 5 | 2018.4.8|[react组件生命周期（v16.3.1）](https://github.com/mytac/blogs/blob/master/%E7%BF%BB%E8%AF%91/react%E7%BB%84%E4%BB%B6%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%EF%BC%88v16.3.1%EF%BC%89.md)|[React.Component -- The Component Lifecycle](https://reactjs.org/docs/react-component.html) 6 | 2018.4.10|[react refs and dom(v16.3.1).md](https://github.com/mytac/blogs/blob/master/%E7%BF%BB%E8%AF%91/react%20refs%20and%20dom(v16.3.1).md)|[Refs and the DOM](https://reactjs.org/docs/refs-and-the-dom.html) 7 | 8 | -------------------------------------------------------------------------------- /自我提升/学习方法/单核工作法图例.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mytac/blogs/b8900063edda9b8c0ac8003614fdd8b7ad1eb4a3/自我提升/学习方法/单核工作法图例.webp -------------------------------------------------------------------------------- /自我提升/收录文章列表/2017.md: -------------------------------------------------------------------------------- 1 | ## 时间管理 2 | 1. [番茄工作法升级版：单核工作法来了](https://mp.weixin.qq.com/s?__biz=MjM5NjA3OTM0MA==&mid=2655711905&idx=1&sn=a3c954c4de69f5e213de001efb73c509&chksm=bd50e1228a2768349cddf8dcdf3dcbe41de3606547173c663d49af961c23b2817cd2946e03be&mpshare=1&scene=21#wechat_redirect) 3 | 4 | ## 习惯 5 | 1. [【荐读】自我管理的8个好习惯](https://mp.weixin.qq.com/s?__biz=MjM5MjAxNDM4MA==&mid=2666177583&idx=4&sn=6612a8defbe113ec375e5bcbf59bf12d&chksm=bdb2cd6c8ac5447aae669527ea5f801fc2baef11fee72126f314c9353b9a93aa28c747468a0d&mpshare=1&scene=21#wechat_redirect) 6 | 2. [有时你要先变坏才能变好 | 改掉5种让人不开心的思维模式](https://mp.weixin.qq.com/s?__biz=MzA4NjcyMDU1NQ==&mid=2247489810&idx=1&sn=94ac8aecf341fc64c2f1070e10100df0&chksm=9fc53056a8b2b9405fe2fc617bb92483e3f0d739c5287775360099ac14a9ac552dac69844a55&mpshare=1&scene=21#wechat_redirect) 7 | 8 | ## 人际 9 | 1. [12条建议，助你成为人际交往的高手](https://mp.weixin.qq.com/s?__biz=MjM5NjAxOTU4MA==&mid=3009203926&idx=1&sn=f4b4c0db146a541167465abf5a105164&chksm=9047c2c5a7304bd35be7b0c9583dd1a6163c191bd2f30f1c8c089334c60f2d7f48950c71bca3&mpshare=1&scene=21#wechat_redirect) 10 | 2. [内心成熟的人都是如何索取爱的？](https://mp.weixin.qq.com/s?__biz=MjM5NTU0NTYxNA==&mid=2652647892&idx=1&sn=bcef406e9103a9c4534929c7afb8a2ea&chksm=bd1e46b58a69cfa3fbb4c99a34faddcd9d0a1bafa0de7a0407f5baeff20483ccb170f16ab7e7&mpshare=1&scene=21#wechat_redirect) 11 | 3. [我为何唯独被ta吸引？| 如何停止喜欢上那些错误的人 ](https://mp.weixin.qq.com/s?__biz=MzA4NjcyMDU1NQ==&mid=2247490964&idx=1&sn=5426af536a9d9cebced653d8d1dc0a3e&chksm=9fc534d0a8b2bdc6a567df96d549f469a84a7a93700a4853a3f15b8acd7ada4b4f65aebb2024&mpshare=1&scene=21#wechat_redirect) -------------------------------------------------------------------------------- /遇到的问题/css-tips.md: -------------------------------------------------------------------------------- 1 | ### 1. 有时候双击或者多次点击一个地方，会自动选中。 2 | 下列方法任一解决 3 | ```css 4 | // css 5 | body{ 6 | -webkit-user-select: none; 7 | -moz-user-select: none; 8 | -ms-user-select: none; 9 | user-select: none; 10 | } 11 | ``` 12 | ```js 13 | //js 14 | document.onselectstart=new Function("return false"); 15 | ``` 16 | ### 2. 绝对定位居中 17 | 18 | 比如写个组件需要单个元素节点居中，就可以这样写 19 | ```html 20 |
21 |
22 | 没有宽度
23 | 照样居中，嘿嘿嘿 24 |
25 |
26 | ``` 27 | ### 3.transition 无效的原因 28 | 过渡效果只应用于两个数值类型！！不能用`auto`，`none`之类的非数值。如: 29 | ```css 30 | div{ 31 | height:0; 32 | transition:height 1s; 33 | } 34 | div.addition{ 35 | height:auto; // 无效 36 | height:10rem; // 生效 37 | } 38 | ``` 39 | ### 4. 按照滚动位置显示进度条 40 | 内容背景线性过渡，用伪元素前置设置背景颜色，露出一部分进度条高度。[参考](https://juejin.im/post/5c35953ce51d45523f04b6d2) 41 | ```css 42 | div.container { 43 | position: relative; 44 | background-image: linear-gradient(to right top, green 50%, red 50%); 45 | background-size: 100% calc(100% - 100vh + 10px); 46 | background-repeat: no-repeat; 47 | z-index: 1; 48 | } 49 | 50 | div.container::after { 51 | content: ""; 52 | position: fixed; 53 | top: 5px; 54 | left: 0; 55 | right: 0; 56 | bottom: 0; 57 | z-index: -1; 58 | background-color: #fff; 59 | } 60 | ``` -------------------------------------------------------------------------------- /遇到的问题/flutter.md: -------------------------------------------------------------------------------- 1 | 1. 模拟器白屏： 命令 `flutter run --enable-software-rendering` 2 | 2. unexpectly spend long time: `flutter clean` 先把build文件清了 3 | 3. vscode debug 4 | ``` 5 | "configurations": [ 6 | { 7 | "name": "Flutter", 8 | "request": "launch", 9 | "type": "dart", 10 | "program": "./lib/main.dart", 11 | "args": [ 12 | "--enable-software-rendering" 13 | ] 14 | } 15 | ] 16 | ``` -------------------------------------------------------------------------------- /遇到的问题/git-tips.md: -------------------------------------------------------------------------------- 1 | 1. 如何不切换到master分支直接merge，用 2 | ``` 3 | git fetch -a 4 | git merge --no-ff origin/ 5 | ``` 6 | 7 | -------------------------------------------------------------------------------- /遇到的问题/python/命令行.md: -------------------------------------------------------------------------------- 1 | ## pip 2 | 安装包 `python -m pip install 包名` 3 | 升级pip `python -m pip install -U pip setuptools` 4 | 查看本机的安装的所有模块 `python -m pip list` -------------------------------------------------------------------------------- /遇到的问题/常用命令行总结.md: -------------------------------------------------------------------------------- 1 | ### 文件操作 2 | 1. 创建文件夹`mkdir ...` 3 | ### 权限 4 | 1. 管理员权限`sudo ...` 5 | 2. 文件读写权限在某个文件夹下执行`chmod 777 -R * ` 6 | ### 包管理 7 | 1. 安装包`apt install ...` 8 | ### 科学上网 9 | 1. miredo 10 | 2. 11 | ``` 12 | sudo apt-get install gw6c 13 | sudo apt-get install gogoc 14 | ``` 15 | ## 网络 16 | ### nslookup 17 | nslookup可以指定查询的类型，可以查到DNS记录的生存时间还可以指定使用哪个DNS服务器进行解释。 在已安装TCP/IP协议的电脑上面均可以使用这个命令。 主要用来诊断域名系统 (DNS) 基础结构的信息 18 | ```s 19 | nslookup www.baidu.com 20 | ``` 21 | 结果 22 | ``` 23 | nslookup www.baidu.com 24 | 服务器: www.a.shifen.com 25 | Addresses: 61.135.169.121 26 | 61.135.169.125 27 | Aliases: www.baidu.com 28 | 29 | DNS request timed out. 30 | timeout was 2 seconds. 31 | DNS request timed out. 32 | timeout was 2 seconds. 33 | *** 请求 www.baidu.com 超时 34 | ``` -------------------------------------------------------------------------------- /遇到的问题/我的工具集.md: -------------------------------------------------------------------------------- 1 | ## vscode扩展 2 | 常用的就这几个，没有什么花哨的插件 3 | 1. gitLens 团队项目必备插件 4 | 2. vscode wxml，vscode-wechat 小程序代码提示 5 | 3. Chinese (Simplified) Language Pack for Visual Studio Code vscode中文语言扩展 6 | 4. CSS Formatter / Sass Lint 7 | 5. ES7 React/Redux/GraphQL/React-Native snippets 8 | 6. Markdown Preview Enhanced 9 | 10 | 11 | 12 | ```json 13 | { 14 | "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe", 15 | "eslint.autoFixOnSave": true, 16 | "files.eol": "\n", 17 | "workbench.statusBar.visible": true, 18 | "editor.minimap.enabled": false, 19 | "window.menuBarVisibility": "toggle", 20 | "workbench.activityBar.visible": true, 21 | "editor.formatOnSave": true, 22 | // 支持decorator 23 | "javascript.implicitProjectConfig.experimentalDecorators": true, 24 | "emmet.includeLanguages": { 25 | "ejs": "html", 26 | "tsx": "html", 27 | "jsx": "html", 28 | }, 29 | "emmet.triggerExpansionOnTab": true, 30 | "tslint.autoFixOnSave": true, 31 | "tslint.nodePath": "C:\\Windows\\System32\\cmd.exe", 32 | "search.exclude": { 33 | "**/node_modules": true, 34 | "**/bower_components": true, 35 | "**/dist": true 36 | }, 37 | "editor.showUnused": false, 38 | "eslint.validate": [ 39 | "javascript", 40 | "javascriptreact", 41 | { 42 | "language": "vue", 43 | "autoFix": true 44 | }, 45 | "html", 46 | "vue" 47 | ], 48 | "dart.flutterSdkPath": "C:\\flutter", 49 | "http.proxy": "http://127.0.0.1:8080", 50 | "http.proxyStrictSSL": false, 51 | "python.linting.lintOnSave": false, 52 | "editor.accessibilitySupport": "on" 53 | } 54 | ``` 55 | -------------------------------------------------------------------------------- /遇到的问题/汇总/RN踩坑填坑记录.md: -------------------------------------------------------------------------------- 1 | ## 服务无法启动 2 | ### 1.报错501：Ambiguous resolution 3 | 应该是有多个node_modules文件夹：运行`npm start -- --reset-cache`，删除缓存。如果还不行，就看看新增了哪个依赖，删除这个依赖再试试，如果还不行，删除整个项目，重新安装。 4 | ### 2.确保安装了所有依赖，启动服务时说某个module没找到 5 | ``` 6 | rm ./node_modules/react-native/local-cli/core/__fixtures__/files/package.json 7 | ``` 8 | ## link失效 9 | ### 1.无论link了多少次，重装后依然不生效： 10 | 有可能是`android\app\src\main\java\com\echoesnet\futures\MainWithUpdateActivity.java`的问题，修改代码 11 | ``` 12 | // add 引入包 13 | import com.lwansbrough.RCTCamera.RCTCameraPackage; 14 | ...... 15 | private void doVocationalWork(String localBundle) { 16 | if (TextUtils.isEmpty(localBundle)) { 17 | Log.i("dev-liu|", "use dev-env, maybe work at 'Running Metro Bundler on port 8081.'"); 18 | mReactInstanceManager = ReactInstanceManager.builder() 19 | // add this line 20 | .addPackage(new RCTCameraPackage()) 21 | ... 22 | }else{ 23 | // add 24 | .addPackage(new RCTCameraPackage()) 25 | } 26 | ``` 27 | ## 打包出错 28 | 1. 用android-studio跑命令 -------------------------------------------------------------------------------- /遇到的问题/汇总/axios发送json后台接收不到的问题.md: -------------------------------------------------------------------------------- 1 | ## 问题描述 2 | 按照[axios官网](https://github.com/axios/axios)例子发起请求传递json，后台接受到的数据为空，一直卡在options阶段。 3 | 4 | ## 尝试的方法 5 | 开始以为是接口有问题，使用postman测试下，一切正常，百思不得其解，看了好多issue也解决不了，加了`headers:{'content-type':'application/json'}`也没用。 6 | 7 | 官网上是说，传json就按`application/json`进行处理，然而并没有卵用；之后套了一层`JSON.stringify(data)`，`content-type`又变成表单格式了==。 8 | 9 | 然后翻自己之前的代码，发现写法如出一辙，怀疑是版本号的问题，然而并不是==。。。。考虑到可能和服务端有关系。 10 | 11 | 原代码如下： 12 | ```js 13 | import axios from 'axios'; 14 | 15 | export default function request(url, params) { 16 | return axios.post(`xxxxxx/${url}`, params) 17 | .then((response) => { 18 | console.log('response', response); 19 | return response; 20 | }) 21 | .catch((error) => { 22 | console.log('error', error); 23 | return error; 24 | }); 25 | } 26 | ``` 27 | 28 | 最后想想还是用`fetch`吧（确实用了，发现还是有这个问题，现在深度怀疑是服务端将参数类型卡的太死了，还有polyfill的问题就放弃了，如果有知道的小伙伴请留言告诉我，谢谢），实在不行就`ajax`（还要封装成promise，哭）。出于对`axios`的坚持，终于找到了解决方法。 29 | ## 解决方法 30 | 31 | 就是添加`qs`库，将json序列化之后传递，详见这个[issue](https://github.com/axios/axios/issues/1195)。 32 | 33 | 代码： 34 | ```js 35 | import axios from 'axios'; 36 | import qs from 'qs'; 37 | 38 | export default function request(url, params) { 39 | return axios.post(`https://xxxxxxxx/${url}`, qs.stringify(params)) 40 | .then((response) => { 41 | console.log('response', response); 42 | return response; 43 | }) 44 | .catch((error) => { 45 | console.log('error', error); 46 | return error; 47 | }); 48 | } 49 | ```` -------------------------------------------------------------------------------- /遇到的问题/汇总/eslint.md: -------------------------------------------------------------------------------- 1 | ## flow 2 | 安装 `eslint-plugin-flowtype` 3 | 4 | ``` 5 | npm install eslint --save-dev 6 | npm install babel-eslint --save-dev 7 | npm install eslint-plugin-flowtype --save-dev 8 | ``` 9 | 配置`.eslintrc` 10 | ``` 11 | { 12 | "parser": "babel-eslint", 13 | "plugins": [ 14 | "flowtype" 15 | ], 16 | "rules": { 17 | .... 18 | } 19 | ``` 20 | ### 报错处理 21 | #### 1. "Cannot read property 'type' of undefined" 22 | 用以下版本解决： 23 | ``` 24 | "babel-core": "6.26.0", // 目前babel7还再测试，用6更稳定 25 | "eslint": "4.13.0", // 官方也指定这个版本不会报这个错 26 | "eslint-plugin-flowtype": "^2.49.3", // 这个可以是最新版 27 | ``` -------------------------------------------------------------------------------- /遇到的问题/汇总/mongodb安装.md: -------------------------------------------------------------------------------- 1 | ## 下载 2 | 官网下步骤贼多，从网上搜到[Windows系统各个64位版本下载地址](http://dl.mongodb.org/dl/win32/x86_64) 3 | 下.msi文件 4 | 5 | ## 安装及配置 6 | 按照[ 详细图解mongodb 3.4.1 win7x64下载、安装、配置与使用2017/01/16](http://blog.csdn.net/qq_27093465/article/details/54574948)文章的步骤配置并安装。 7 | 8 | 但是最后运行``` net start MongoDB```还是报**服务名无效错误解决** 9 | 10 | 参照[net start MongoDB 服务名无效错误解决](http://blog.csdn.net/grs294845170/article/details/77848114)这篇文章配置后能成功启动服务。 11 | 12 | ## 安装可视化工具 13 | 下载[robomongo](https://robomongo.org/download) 14 | 15 | 安装好之后，左上角有一个connect，新建一个localhost，如图 16 | ![demo](https://wx2.sinaimg.cn/mw690/6f8e0013ly1fm97venzedj20g40krmxq.jpg) -------------------------------------------------------------------------------- /遇到的问题/汇总/vim.md: -------------------------------------------------------------------------------- 1 | ### ctrl c无法退出 2 | 连按两次大写Z即可。 -------------------------------------------------------------------------------- /遇到的问题/汇总/xx-net.md: -------------------------------------------------------------------------------- 1 | # ipv6的问题 2 | [开启ipv6](https://github.com/XX-net/XX-Net/issues/6918#issuecomment-335667804) 3 | ``` 4 | netsh interface isatap set state default 5 | netsh interface teredo set state default 6 | netsh interface teredo set state server=teredo.remlab.net 7 | netsh interface ipv6 set teredo enterpriseclient 8 | cmd 9 | netsh int ipv6 add route ::/0 "Teredo Tunneling Pseudo-Interface" 10 | ``` 11 | 12 | [开teredo隧道报错 显示未能打开隧道适配器](https://github.com/XX-net/XX-Net/issues/8739) -------------------------------------------------------------------------------- /遇到的问题/汇总/开发node时的tips.md: -------------------------------------------------------------------------------- 1 | 在开发过程中，每次修改代码保存后，我们都需要手动重启程序，才能查看改动的效果。使用 supervisor 可以解决这个繁琐的问题，全局安装 supervisor： 2 | 3 | `npm i -g supervisor` 4 | 5 | 运行 `supervisor index` 启动程序 -------------------------------------------------------------------------------- /遇到的问题/编辑器的一些tips.md: -------------------------------------------------------------------------------- 1 | ## Webstorm 2 | 1. 无法识别有扩展名的文件，将某些带扩展名的文件默认为txt处理： 3 | File—Editor—FileTypes找到Text类型，将其中的index.js格式从中取消，apply—ok 4 | ## typescript 5 | [typescript alias vscode报错](https://www.imooc.com/article/47192) -------------------------------------------------------------------------------- /量化/收藏的库/库.md: -------------------------------------------------------------------------------- 1 | 1. [easyquotation](https://github.com/shidenggui/easyquotation) 2 | 快速获取新浪/腾讯的全市场行情, 网络正常的情况下只需要 200+ms 3 | 可以抓基金数据 4 | -------------------------------------------------------------------------------- /附件/各大算法复杂度图示.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mytac/blogs/b8900063edda9b8c0ac8003614fdd8b7ad1eb4a3/附件/各大算法复杂度图示.png -------------------------------------------------------------------------------- /面试题/js/js内存泄漏.md: -------------------------------------------------------------------------------- 1 | ## 什么是内存泄漏（Memory Leak） 2 | 内存泄漏可以简单地被认为没有被应用所使用，但也没有被操作系统回收掉的内存。可以说是为它分配了内存，但没有被使用，没有被及时释放或无法释放。这通常只有开发者决定哪个地方不再需要这些内存，并将其释放。所以长时间占用久了，内存会占用越来越多，最终导致内存不足，整个程序崩坏。 3 | 4 | 不单独说任何一种开发语言，内存的生命周期都是： 5 | 6 | 1. 分配你需要的内存 7 | 2. 使用这些内存进行读写操作 8 | 3. 不需要时释放这些内存 9 | 10 | ## 垃圾回收机制（GC -- Garbage Collection） 11 | 而高级语言嵌入了一个名为“垃圾回收”的机制，他的工作是跟踪内存分配和使用情况，以便找到何时不再需要分配内存的情况，它会自动释放，但他也有局限性。GC机制造成内存泄漏最常见的原因是无效引用，我想们先了解一下GC的算法。 12 | ### 标记清除算法(mark-and-sweep) 13 | 这个算法假设了一组名为根的东西（在js中为全局对象）。垃圾回收器将会定期地，从根上遍历查找根上的引用，并标记为引用状态。从这些根开始查找所有可访问的对象，收集不可访问的对象（未被标记的对象），所有未被标记的内存块视为垃圾内存，回收机将回收这一块内存返还给系统。 14 | 15 | 无效引用指的是，被标记但被开发者确认无用的内存块的引用。在js上下文中，无效引用即代码中那些引用了内存但没有被释放的变量，大多数人认为，无效引用的产生主要是开发人员的错误导致，所以可以人为规避。 16 | ## 原因及分析 17 | ### 1.全局变量 18 | 比如我们在某个作用域中定义某个变量，但没有使用声明变量的关键字如`var`、`let`、`const`，这样做就会使这个变量变成了全局变量，这里的内存就会泄漏。 19 | ```js 20 | function foo(){ 21 | a=1 22 | } 23 | ``` 24 | 等同于 25 | ```js 26 | function foo(){ 27 | window.a=1 28 | } 29 | ``` 30 | ### 2.被遗忘的计时器 31 | 没有清除定时器上对dom的引用，即使这个节点不被需要，计时器仍然在工作状态，内存并没有被释放。 32 | ```js 33 | setInterval(function() { 34 | const node = document.getElementById('Node'); 35 | if(node) { 36 | node.innerHTML = JSON.stringify(someResource)); 37 | } 38 | }, 1000); 39 | ``` 40 | 最佳实现还是要显式地将定时器取消掉。 41 | ### 3.DOM以外的引用 42 | 比如下面这个例子：我们可能会在对象中存储dom节点，这时实际上每个dom节点就会有两个地方在引用，一个是dom树中，另一个在对象中。如果需要，我们要保证所有引用的地方都是不可跟踪的！如节点被清空，但绑定到节点上的事件仍会导致内存泄漏。 43 | ```js 44 | var elements = { 45 | button: document.getElementById('button'), 46 | }; 47 | function doStuff() { 48 | button.click(); 49 | } 50 | 51 | function removeButton() { 52 | document.body.removeChild(document.getElementById('button')); 53 | // 这时，我们仍然有一个引用指向全局中的饿elements。button这个节点仍在内存中，不会被回收。 54 | } 55 | ``` 56 | ### 4.闭包不会引起内存泄漏，循环引用才是罪魁祸首！ 57 | 查了不少资料，都说闭包是引起内存泄漏的原因，但事实上只有在IE9以下的ie浏览器中才会产生内存泄漏，如下例：如果`element`不是dom对象，是不会产生内存泄漏的~ 58 | ```js 59 | function assignHandler(){ 60 | var element = document.getElementById("someElement"); 61 | element.onclick = function(){ 62 | alert(element.id); 63 | }; 64 | } 65 | ``` 66 | 67 | 以上代码创建了一个作为element元素事件处理程序的闭包，而这个闭包则又创建了一个循环引用。由于匿名函数保存了一个对`assignHandler()`的活动对象的引用，因此就会导致无法减少`element`的引用数。只要匿名函数存在，`element`仍被引用，因此它所占用的内存就永远不会被回收。 68 | 69 | 70 | 解决方法是把引用置空 71 | ```js 72 | element=null 73 | ``` 74 | ## 如何解决 75 | chrome->performace 录制查看是否有阶段性起伏 76 | 77 | ![demo](http://chuantu.biz/t6/262/1521794248x-1566688706.png) 78 | ## 参考文档 79 | 1.[JavaScript 常见的内存泄漏原因](https://juejin.im/entry/58158abaa0bb9f005873a843) 80 | 81 | 2.[【译】JavaScript 内存泄漏问题](http://octman.com/blog/2016-06-28-four-types-of-leaks-in-your-javascript-code-and-how-to-get-rid-of-them/) 82 | 83 | 3.[mdn -- Memory Management](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management#Release_when_the_memory_is_not_needed_anymore) -------------------------------------------------------------------------------- /面试题/js/prototype.md: -------------------------------------------------------------------------------- 1 | ## 前言 2 | prototype是js面向对象的一个重要机制，于是总结了以下几个问题，理解起来会比较有针对性。 3 | ## 1. `prototype` 和 `__proto__` 的关系是什么？ 4 | `prototype`是只有函数才会有的属性；而`__proto__`是所有对象都有的属性。 5 | 6 | 几乎所有的函数都有一个`prototype`属性，`prototype`上挂载的所有属性和方法都可以被这个函数的实例继承。 7 | 8 | 9 | 对于 10 | ```js 11 | function Foo(){} 12 | const foo=new Foo() 13 | // 注意这里：无论在实例化前后在prototype上添加属性实例都会继承 14 | Foo.prototype.isTestable=true 15 | console.log(foo.isTestable) // true 16 | ``` 17 | 有 18 | ```js 19 | Foo.prototype===foo.__proto__ //true 20 | foo.constructor===Foo // true 21 | Foo.constructor===Function // true 22 | Foo===foo.__proto__.constructor // true 23 | ``` 24 | 是不是看起来很乱？祭上我多年收藏的此图！！OVO 25 | 26 | ![demo](https://pic.xiaohuochai.site/blog/JS_ECMA_grammer_proto.png) 27 | 28 | ## 2. 自有属性和原型属性又是什么？ 29 | 上面的例子中，在调用`foo.isTestable`时，先会在实例上查询是否有`isTestable`这个属性；如果没有找到，再往它的`__proto__`上查询这个属性；直至查到底层没有则返回`undefined`。 30 | ```js 31 | function Foo(){} 32 | const foo=new Foo() 33 | Foo.prototype.isTestable=true 34 | console.log(foo.isTestable) // true 35 | ``` 36 | 37 | 那么如何区分某个对象的属性时其自身的还是继承的呢？我们就需要`hasOwnProperty()`这个方法来确认。 38 | 39 | 其中`isTestable`这个属性对于`foo`来说就是原型上的属性，所以它返回`false` 40 | ```js 41 | foo.hasOwnProperty('isTestable') // false 42 | ``` 43 | 如果我们在`foo`上直接添加`isTestable`这个属性，那么他与`__proto__`上的`isTestable`是否冲突？ 44 | ```js 45 | function Foo(){} 46 | const foo=new Foo() 47 | foo.isTestable=false 48 | Foo.prototype.isTestable=true 49 | 50 | console.log(foo.hasOwnProperty('isTestable')) // true 51 | console.log(foo.isTestable) // false 52 | console.log(foo.__proto__.isTestable) // true 53 | // 删除实例上的isTestable属性 54 | delete foo.isTestable 55 | console.log(foo.hasOwnProperty('isTestable')) // false 56 | console.log(foo.isTestable) // true 这时又从__proto__上找到isTestable了 57 | // 来，我们把__proto__上面的也删掉 58 | delete foo.__proto__.isTestable 59 | console.log(foo.isTestable) // false， isTestable终于没了 60 | ``` 61 | 当然`hasOwnProperty()`只能知道某个属性是否在实例上，如果我们想要知道某个属性是否在`__proto__`上，就需要自己写一个函数： 62 | ```js 63 | const hasPrototypeProperty=(obj,key)=>(key in obj)&&(!obj.hasOwnProperty(key)) 64 | ``` 65 | ## 3. 每个实例之间的关系是什么？ 66 | 对于以下由一个构造函数创建的实例 67 | ```js 68 | function Foo(){} 69 | const foo1=new Foo() 70 | const foo2=new Foo() 71 | ``` 72 | 有下列关系 73 | ```js 74 | foo1==foo2 // false,这是因为在这里都指向不同的内存，{}==={} // false 75 | JSON.stringify(foo1)===JSON.stringify(foo2) // true 76 | foo1.constructor===foo2.constructor // true 这里的构造函数都指向Foo，所以为true 77 | foo1.__proto__===foo2.__proto__ // 当然这个也为true 78 | foo1.__proto__===Foo.prototype // true 79 | Object.getPrototypeOf(foo1)===Object.getPrototypeOf(foo2) // true 80 | ``` 81 | ## 4. 在构造函数中添加属性后实例怎么继承 82 | 对于在构造函数内部添加的属性，它的实例会继承它的属性； 83 | ```js 84 | function Foo(){this.name='foo'} 85 | Foo.age=10 86 | const foo1=new Foo() 87 | ``` 88 | 然而直接挂载在Foo上的属性不会在实例上被继承； 89 | ```js 90 | foo1.name // 'foo' 91 | foo1.age // undefined 92 | ``` 93 | 如果实例上和原型上都挂载了同样的属性，会优先从实例上获取： 94 | 95 | ```js 96 | function Foo(){this.name='foo'} 97 | const foo1=new Foo() 98 | foo1.name='ahaha' 99 | 100 | foo1.name //'ahaha' 101 | ``` 102 | 103 | ## 参考文档 104 | 1. [详解prototype与__proto__区别](https://blog.csdn.net/ligang2585116/article/details/53522741) 105 | 2. [一张图理解prototype、proto和constructor的三角关系](https://www.cnblogs.com/xiaohuochai/p/5721552.html) -------------------------------------------------------------------------------- /面试题/js/内部api实现.md: -------------------------------------------------------------------------------- 1 | ## 实现deepclone 2 | 以下是比较简陋的版本，更简陋的版本是`JSON.parse(JSON.stringify(...))` 3 | ```js 4 | const typeString = (item) => Object.prototype.toString.call(item).slice(8, -1) 5 | 6 | const deepClone = (target) => { 7 | let result, targetType = typeString(target) 8 | if (targetType === 'Object') { 9 | result = {} 10 | } else if (targetType === 'Array') { 11 | result = [] 12 | } else { 13 | return target 14 | } 15 | for (let i in target) { 16 | const value = target[i] 17 | const valueType = typeString(value) 18 | if (valueType === 'Object' || valueType === 'Array') { 19 | result[i] = deepClone(value) 20 | } else { 21 | result[i] = value 22 | } 23 | } 24 | return result 25 | } 26 | 27 | function person(pname) { 28 | this.name = pname; 29 | } 30 | const Messi = new person('Messi'); 31 | function say() { 32 | console.log('hi'); 33 | } 34 | const obj = { 35 | a: [1, { x: 2 }, 3], 36 | b: 'hello', 37 | c: { x: 1, y: [2, 3, 4] }, 38 | d: new RegExp(), 39 | e: new Date(), 40 | f:say 41 | } 42 | 43 | console.log(deepClone(obj)) 44 | ``` 45 | ## Promise 46 | 首先，promsie又三个状态：`pending`,`resolved`,`rejectd`。 47 | 基本的调用方法是： 48 | ```js 49 | const p=new Promise((reslove,reject)=>{ 50 | if(...){ 51 | resolve(successData) 52 | } 53 | reject(error) 54 | }) 55 | 56 | p.then((successData)=>{ 57 | // resolve 58 | }).catch((error)=>{ 59 | // reject 60 | }) 61 | ``` -------------------------------------------------------------------------------- /面试题/js/模拟bind.md: -------------------------------------------------------------------------------- 1 | ## Function.prototype.bind介绍 2 | `bind`和`apply`、`call`一样是创建某个新函数，其具有将上下文绑定到某函数上的功能，这个新函数被调用时，它内部的`this`指向被赋予的上下文。如： 3 | ```js 4 | var context = { 5 | name: 'mytac', 6 | }; 7 | 8 | function original(a, b) { 9 | console.log(this.name) 10 | console.log('a', a) 11 | console.log('b', b) 12 | } 13 | 14 | var foo = original.bind(context, 1) 15 | foo(2) 16 | // mytac 17 | // a 1 18 | // b 2 19 | ``` 20 | ## 模拟实现 21 | 我们需要在`Function`的原型链上创建函数，其参数要求和原生`bind`一样，包含一个上下文参数和多个传入该函数的实参。注意要将上下文`this`传入返回的匿名函数中，而不是在返回的匿名函数中获得上下文`this`，因为这时的匿名函数中`this`为调用该函数时的上下文，即`Window`。对于`this`概念比较模糊的小伙伴可以看我的这篇文章[《一篇文章完全搞懂this》](https://www.jianshu.com/p/4792dbddfc81)。 22 | ```js 23 | Function.prototype.bindFn = function bind(thisArg) { 24 | if (typeof this !== 'function') { 25 | throw new TypeError(this + 'must be a function'); 26 | } 27 | // 存储函数本身 28 | var self = this; 29 | // 去除thisArg的其他参数 转成数组 30 | var args = [].slice.call(arguments, 1); 31 | return function () { 32 | // bind返回的函数 的参数转成数组 33 | var boundArgs = [].slice.call(arguments); 34 | // apply修改this指向，把两个函数的参数合并传给self函数，并执行self函数，返回执行结果 35 | return self.apply(thisArg, args.concat(boundArgs)); 36 | } 37 | } 38 | ``` 39 | ## es6实现 40 | 使用es6就简单多了，尤其是对参数的处理上。`...`spread操作符可以将类数组转成数组，原理是`...`调用了类数组上的`iterator`。（这里可以看我的另一篇文章[《ES6扫盲：用自定义iterator创建斐波那契数列》](https://www.jianshu.com/p/6c57be7f12e4)，会介绍`iterator`的神奇之处。） 41 | ```js 42 | Function.prototype.bindFn = function bind(ctx, ...args) { 43 | const self = this 44 | return function (...args2) { 45 | return self.apply(ctx, [...args, ...args2]) 46 | } 47 | } 48 | ``` 49 | ## 参考链接 50 | 1. [MDN-Function.prototype.bind](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) -------------------------------------------------------------------------------- /面试题/其他/Cookie、session和localStorage、以及sessionStorage之间的区别.md: -------------------------------------------------------------------------------- 1 | ## Cookie 2 | cookie是由服务器发送到浏览器的小量信息，浏览器会将cookie保存下来，下次请求同一网站时会将cookie发送给服务器。 3 | ## session 4 | session是指一个用户与交互进行通信的时间间隔，比如登录到登出的这一过程所需要的时间。具体到web中就是用户浏览某个网站时，从进入网站到关闭浏览器所经过的这段时间。注意!!**session是一个时间概念，并非客观存在的东西**。 5 | 6 | 当程序需要为某个客户端的请求创建一个session时，服务器首先检查浏览器中是否包含session标识（称为session id），如果已包含则说明为此客户端创建过session，服务器按照这个session id把session对象检索出来使用；如果不包含则为客户端创建一个session并且生成一个对应的session id，并且在响应中返回给客户端，客户端可以将他保存为cookie格式。 7 | ## cookie和session的区别 8 | 9 | ---| Cookie | session对象 10 | ---|---|---| 11 | 存储位置 | 客户端（设置过期时间在硬盘；没设置在内存中） | 服务端 12 | 时效性|自定义的过期时间（没设置关闭浏览器则消除）|session不活动时超出设置时间失效 13 | 存储类型|字符串|对象 14 | 安全性|明文（可以加密后存放）|放在服务器内存中，安全 15 | 16 | ## localStorage 17 | `localStorage`和`sessionStorage`都属于Web Storage。 18 | 19 | `localStorage`以键值对的形式存储在浏览器中，永久存储，永不失效，除非手动删除。 20 | ## sessionStorage 21 | sessionStorage 属性允许你访问一个 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面会初始化一个新的会话，这点和 session cookies 的运行方式不同。 22 | ## localStorage 和 sessionStorage 的区别 23 | ---| localStorage | sessionStorage 24 | ---|---|---| 25 | 有效期|永久存储，永不失效，除非手动删除|关闭会话窗口失效 26 | 作用域|同源窗口|仅在同一个标签页中 27 | 28 | ## 参考资料 29 | 1. 百度百科 30 | 2. [Cookie、session和localStorage、以及sessionStorage之间的区别](https://www.cnblogs.com/zr123/p/8086525.html) -------------------------------------------------------------------------------- /面试题/其他/页面从输入URL到展现发生了什么.md: -------------------------------------------------------------------------------- 1 | ## 1.DNS解析 2 | 我们在浏览器上输入地址时，如`www.qq.com`，需要把这个地址解析成ip地址，其中就需要dns解析。 3 | DNS(Domain Name System)是域名系统的英文缩写，他的服务是用来将主机名和域名转换为ip地址的工作。 4 | ### dns域名 5 | ![dns域名](https://pic2.zhimg.com/80/79b9fd2666e989ab24024966632ae63f_hd.jpg) 6 | ### 工作流程 7 | 浏览器在查找这个服务器ip的时候， 8 | 9 | 1. 首先寻找本地hosts文件是否有这个地址映射关系，如果有就先调用这个ip地址映射，完成域名解析 10 | 2. 如没有，浏览器发送请求到本地dns服务器，本地dns服务器由网络运营商提供 11 | 3. 查询输入的网址的dns请求到达本地dns服务器后， 则会先查询他的缓存记录，有这条记录则直接返回；没有则向dns根服务器进行查询 12 | 4. 根dns服务器没有，则告诉本地dns服务器，向dns域服务器进行查询，并给出域服务器的地址 13 | 5. 本地dns服务器继续向域服务器发请求，域服务器收到请求后，**并不会直接返回域名和ip地址的对应关系**，而是告诉本地dns服务器，你的域名解析服务器的地址。 14 | 6. 最后，本地dns服务器向域名的解析服务器发出请求，从而获得一个ip地址和域名的对应关系，将他返回给浏览器并将这个关系保存在缓存中 15 | 16 | ![dns域名解析基本过程](http://www.maixj.net/wp-content/uploads/2015/10/dns.jpg) 17 | 18 | ## 2.发送HTTP请求 19 | 最终拿到ip地址，浏览器根据这个ip地址和端口号构造一个tcp连接请求，这个请求通过各种路由设备后达到服务端，进入到网卡，接着进入TCP/IP协议栈，最终到达服务端web程序，建立TCP/IP的连接。 20 | 21 | 建立了tcp连接后，发起一个http请求。一个典型的http请求头包括请求方法（GET,POST,etc.）；还需要一些请求信息：请求方法和请求附带的数据等。 22 | 23 | ![一个请求头](http://chuantu.biz/t6/288/1523949903x-1566688574.png) 24 | ## 3.服务器处理请求并返回HTTP报文 25 | 后端从固定的端口接收到tcp报文，对tcp链接进行处理，对http协议进行解析，按照报文格式进一步封装为http request对象，这一部分地工作通常由web服务器进行处理。 26 | 27 | http响应头也是由三部分组成：状态码、响应报头、响应报文。 28 | ### 状态码 29 | 状态码由三位数字组成，第一位数字代表响应类别： 30 | 1. 1xx 请求已接受，继续处理（100：continue；101：Switching Protocols） 31 | 2. 2xx 请求成功接受、处理、解析 32 | 200：ok； 33 | 34 | 204 No Content 成功，但不返回任何实体的主体部分； 35 | 36 | 206 Partial Content 成功执行了一个范围（Range）请求 37 | 3. 3xx 重定向 要完成的请求必须进行更进一步的操作 38 | 39 | 301 Moved Permanently 永久性重定向，响应报文的Location首部应该有该资源的新URL 40 | 41 | 302 Found 临时性重定向，响应报文的Location首部给出的URL用来临时定位资源 42 | 43 | 303 See Other 请求的资源存在着另一个URI，客户端应使用GET方法定向获取请求的资源 44 | 45 | 304 Not Modified 服务器内容没有更新，可以直接读取浏览器缓存 46 | 47 | 307 Temporary Redirect 临时重定向。 48 | 4. 4xx 客户端错误 请求有语法错误或请求无法实现 49 | 50 | 400 Bad Request 表示客户端请求有语法错误，不能被服务器所理解 51 | 52 | 401 Unauthonzed 表示请求未经授权，该状态代码必须与 WWW-Authenticate 报头域一起使用 53 | 54 | 403 Forbidden 表示服务器收到请求，但是拒绝提供服务，通常会在响应正文中给出不提供服务的原因 55 | 56 | 404 Not Found 请求的资源不存在，例如，输入了错误的URL 57 | 5. 5xx 服务端出错 服务端未能处理合法的请求 58 | 59 | 500 Internel Server Error 表示服务器发生不可预期的错误，导致无法完成客户端的请求 60 | 61 | 503 Service Unavailable 表示服务器当前不能够处理客户端的请求，在一段时间之后，服务器可能会恢复正常 62 | 63 | 64 | ![响应报头](http://chuantu.biz/t6/288/1523950258x-1566688748.png) 65 | ### 响应头 66 | ![响应头](https://images2015.cnblogs.com/blog/776370/201703/776370-20170322193336611-2098719977.png) 67 | ### 响应报文 68 | 通常就是服务器返回给浏览器的文本信息了，通常是html、css、js等静态资源放在这里。 69 | ## 4.浏览器解析渲染页面 70 | 浏览器在收到html、css、js等文件后，按照下图的过程进行渲染： 71 | 72 | 解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树 73 | 74 | ![demo](https://pic1.zhimg.com/80/e8bc40d7006f13fa0a191d774b7db36a_hd.jpg) 75 | 76 | ### 解析渲染过程 77 | 当浏览器获得html文件时，会“自上而下”地进行加载，并在加载的过程中进行解析和渲染。 78 | 1. 浏览器先将html解析成一个dom树，dom树的构建过程是一个深度遍历的过程，意思是必须加在完当前节点的所有子节点才能加载当前节点的下一个兄弟节点。 79 | 2. 在解析过程中需要下载js或css等资源时，异步新建进程进行下载，并继续把html解析成dom树。 80 | 3. 其中，js通过dom api修改dom，通过cssom api修改样式作用到render tree上，css则解析为css rule。 tree，浏览器将css规则树和dom树结合起来构建render tree。（在文档加载过程中遇到js文件，则会挂起渲染过程，等待js文件下载并解析之后，再继续进行渲染！） 81 | 4. 在渲染的过程中会出现回流（reflow）和重绘（repaint） 82 | 83 | ### 回流与重绘 84 | #### 回流（reflow） 85 | 只要修改了dom或改变了元素的形状或大小等会改变布局的操作就会触发reflow 86 | #### 重绘（repaint） 87 | 只是改变了颜色，不影响周围元素或布局，会引起浏览器的重绘 88 | #### 减少reflow与repaint 89 | 1. 不要一条一条的修改样式，应该固定写一个class，更换className，减少reflow次数 90 | 2. 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。 91 | 3. 为动画的 HTML 元件使用`position:fixed 或 absolute` ，那么修改他们的 CSS 是不会 reflow 的。 92 | 4. 避免使用table布局，一个很小的改动会造成整个table reflow！ 93 | 94 | ## 6.连接结束 95 | 96 | ## 参考文档 97 | 1. [【原】老生常谈-从输入url到页面展示到底发生了什么](https://www.cnblogs.com/xianyulaodi/p/6547807.html) 98 | 2. [浏览器加载、解析、渲染的过程](https://blog.csdn.net/xiaozhuxmen/article/details/52014901) 99 | 3. [浏览器加载网页时的过程是什么？ - 陈金的回答 - 知乎](https://www.zhihu.com/question/30218438/answer/84704484) 100 | 4. [前端经典面试题: 从输入URL到页面加载发生了什么？](https://segmentfault.com/a/1190000006879700) -------------------------------------------------------------------------------- /面试题/目录.md: -------------------------------------------------------------------------------- 1 | # js 2 | 1. [js内存泄漏](https://github.com/mytac/blogs/blob/master/%E9%9D%A2%E8%AF%95%E9%A2%98/js/js%E5%86%85%E5%AD%98%E6%B3%84%E6%BC%8F.md) 3 | # html 4 | 1. [页面从输入URL到展现发生了什么](https://github.com/mytac/blogs/blob/master/%E9%9D%A2%E8%AF%95%E9%A2%98/html/%E9%A1%B5%E9%9D%A2%E4%BB%8E%E8%BE%93%E5%85%A5URL%E5%88%B0%E5%B1%95%E7%8E%B0%E5%8F%91%E7%94%9F%E4%BA%86%E4%BB%80%E4%B9%88.md) 5 | # 基础 6 | 1. [Cookie、session和localStorage、以及sessionStorage之间的区别](https://github.com/mytac/blogs/blob/master/%E9%9D%A2%E8%AF%95%E9%A2%98/%E5%85%B6%E4%BB%96/Cookie%E3%80%81session%E5%92%8ClocalStorage%E3%80%81%E4%BB%A5%E5%8F%8AsessionStorage%E4%B9%8B%E9%97%B4%E7%9A%84%E5%8C%BA%E5%88%AB.md) --------------------------------------------------------------------------------