├── .gitignore ├── LICENSE ├── README.md ├── examples └── funtioncal-programming │ ├── demo.html │ └── demo.js ├── k-前端狂想录群的日常问题清单以及解决方案 ├── .gitkeep ├── 2019-02-下旬.md ├── 2019-02-中旬.md ├── 2019-03-上旬.md ├── 2019-03-下旬.md ├── 2019-03-中旬.md ├── 2019-04-上旬.md ├── 2019-04-下旬.md ├── 2019-04-中旬.md ├── 2019-05-上旬.md ├── 2019-05-下旬.md ├── 2019-05-中旬.md ├── 2019-06-上旬.md ├── 2019-06-中旬.md ├── images │ ├── 2-16-1.png │ ├── 2-20-1.png │ ├── 2-20-2.png │ ├── 2-21-1.png │ ├── 2-21-2.png │ ├── 2-21-3.png │ ├── 2-21-4.png │ ├── 2-21-5.png │ ├── 2-21-6.png │ ├── 2-21-7.png │ ├── 2-21-8.png │ ├── 2-21-9.png │ ├── 2-22-1.png │ ├── 2-22-2.png │ ├── 2-22-3.png │ ├── 2-22-4.jpeg │ ├── 2-22-5.jpeg │ ├── 2-25-1.png │ ├── 2-26-1.png │ ├── 2-26-2.png │ ├── 2-26-3.png │ ├── 2-26-4.png │ ├── 2-26-5.png │ └── 2-27-1.png ├── 模板.md └── 狂想群分享的资料和连接.md ├── website ├── docs │ ├── .vuepress │ │ ├── config.js │ │ ├── override.styl │ │ ├── public │ │ │ └── blog.png │ │ └── style.styl │ ├── README.md │ ├── blog │ │ └── README.md │ ├── mini │ │ └── README.md │ ├── qa │ │ └── README.md │ ├── react │ │ └── README.md │ └── vue │ │ └── README.md └── package.json ├── 一些想搞的事情.md ├── 前端狂想录所有小分队注意事项.md ├── 前端狂想录的成长之路.md └── 前端狂想录的花名册.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /website/docs/.vuepress/dist/ 4 | /website/npm 5 | /website/.deploy.js 6 | 7 | # Log files 8 | npm-debug.log* 9 | yarn-debug.log* 10 | yarn-error.log* 11 | 12 | # Editor directories and files 13 | .idea 14 | .vscode 15 | *.suo 16 | *.ntvs* 17 | *.njsproj 18 | *.sln 19 | *.sw* -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 杨昆 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![北冥有鱼](https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/0A/0F/ChMkJ1ju4YqIG2K9AAK6BOHpGz8AAbn4gA849sAAroc468.jpg) 2 | 3 |

北冥有鱼的笔记

4 | 5 |

6 | Build Status 7 | Build Status 8 | Build Status 9 |

10 | 11 | > 掘金博客 `TP` :[源码终结者](https://juejin.im/user/5ae087fbf265da0b9c104fa4/posts) 12 | 13 | ## 不定期更新中———— 14 | 15 | ### 深入原理 16 | —— 持续更新中 17 | - [不敢阅读 npm 包源码?带你揭秘 taro init 背后的哲学](https://github.com/godkun/blog/issues/30) 18 | - [可能是最全面最易懂的解析前端浮动的文章](https://github.com/godkun/blog/issues/18) 19 | - [帮你揭开函数式编程的底层面纱](https://github.com/godkun/blog/issues/45) 20 | 21 | ------------------- 22 | 23 | 24 | ### 如何编写高质量的函数 25 | —— 持续更新中 26 | - [如何编写高质量的函数 -- 敲山震虎篇](https://github.com/godkun/blog/issues/33) 27 | - [如何编写高质量的函数 -- 命名/注释/鲁棒篇](https://github.com/godkun/blog/issues/37) 28 | - [如何编写高质量的函数 -- 打通任督二脉篇[理论卷]](https://github.com/godkun/blog/issues/42) 29 | - [如何编写高质量的函数 -- 打通任督二脉篇[实战卷]](https://github.com/godkun/blog/issues/43) 30 | 31 | ### 结对编程记 32 | —— 持续更新中 33 | - [如何在新时代下的结对编程中将代码玩出花来](https://github.com/godkun/blog/issues/44) 34 | 35 | --------------------- 36 | 37 | ### WebGL 38 | —— 持续更新中 39 | - [飞一般的webGL之唱起3D编程前的战歌](https://github.com/godkun/blog/issues/1) 40 | 41 | --------------------- 42 | 43 | 44 | ### 读书笔记 45 | —— 持续更新中 46 | - [一个前端工程师看完《代码大全》后的二三总结](https://github.com/godkun/blog/issues/17) 47 | - [前端读书寻宝记之读《包容性Web设计》有感](https://github.com/godkun/blog/issues/11) 48 | - [新时代下前端工程师的推荐书籍和必备知识](https://github.com/godkun/blog/issues/36) 49 | 50 | --------------------- 51 | 52 | ### 猎奇系列 53 | —— 持续更新中 54 | - [前端猎奇系列之探索Python来反补JavaScript——上篇](https://github.com/godkun/blog/issues/23) 55 | - [探索 Python 来反补 JavaScript,带你 Cross Fire —— JS 数据类型的奥秘](https://github.com/godkun/blog/issues/26) 56 | 57 | --------------------- 58 | 59 | ### 计算机知识 60 | —— 持续更新中 61 | - [通过讲故事搞定前端网络知识](https://github.com/godkun/blog/issues/32) 62 | 63 | --------------------- 64 | 65 | ### 掘金所写文章答疑篇 66 | —— 持续更新中 67 | - [如何编写高质量的函数 -- 敲山震虎的答疑篇](https://github.com/godkun/blog/issues/34) 68 | 69 | --------------------- 70 | 71 | ### 前端狂想录介绍 72 | 73 | [前端狂想的成长之路](https://github.com/godkun/blog/blob/master/%E5%89%8D%E7%AB%AF%E7%8B%82%E6%83%B3%E5%BD%95%E7%9A%84%E6%88%90%E9%95%BF%E4%B9%8B%E8%B7%AF.md) 74 | 75 | --------------------- 76 | 77 | ### 前端狂想录组织成员的高质量文章集合 78 | —— 持续更新中 79 | - [从零到一开发你的专属JavaScript库 80 | ](https://juejin.im/post/5c7a697c518825347a56283c) 81 | - [从一个数组中找出 N 个数,其和为 M 的所有可能--最 nice 的解法](https://juejin.im/post/5c81d543f265da2deb6ad691) 82 | 83 | --------------------- 84 | 85 | ### 前端狂想录群的日常问题清单以及解决方案 86 | —— 持续更新中 87 | - [2019年2月中旬问题及解决方案清单](https://github.com/godkun/blog/blob/master/k-%E5%89%8D%E7%AB%AF%E7%8B%82%E6%83%B3%E5%BD%95%E7%BE%A4%E7%9A%84%E6%97%A5%E5%B8%B8%E9%97%AE%E9%A2%98%E6%B8%85%E5%8D%95%E4%BB%A5%E5%8F%8A%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/2019-02-%E4%B8%AD%E6%97%AC.md) 88 | - [2019年2月下旬问题及解决方案清单](https://github.com/godkun/blog/blob/master/k-%E5%89%8D%E7%AB%AF%E7%8B%82%E6%83%B3%E5%BD%95%E7%BE%A4%E7%9A%84%E6%97%A5%E5%B8%B8%E9%97%AE%E9%A2%98%E6%B8%85%E5%8D%95%E4%BB%A5%E5%8F%8A%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/2020-02-%E4%B8%8B%E6%97%AC.md) 89 | - [2019年3月上旬问题及解决方案清单](https://github.com/shibaobao/blog/blob/master/k-%E5%89%8D%E7%AB%AF%E7%8B%82%E6%83%B3%E5%BD%95%E7%BE%A4%E7%9A%84%E6%97%A5%E5%B8%B8%E9%97%AE%E9%A2%98%E6%B8%85%E5%8D%95%E4%BB%A5%E5%8F%8A%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/2019-03-%E4%B8%8A%E6%97%AC.md) 90 | - [2019年3月中旬问题及解决方案清单](https://github.com/shibaobao/blog/blob/master/k-%E5%89%8D%E7%AB%AF%E7%8B%82%E6%83%B3%E5%BD%95%E7%BE%A4%E7%9A%84%E6%97%A5%E5%B8%B8%E9%97%AE%E9%A2%98%E6%B8%85%E5%8D%95%E4%BB%A5%E5%8F%8A%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/2019-03-%E4%B8%AD%E6%97%AC.md) 91 | 92 | 93 | ### 风之语 94 | 95 | 想加入群一起讨论,一起成长的,可以扫下面二维码加我好友,我拉你进群。 96 | 97 | ![](https://user-gold-cdn.xitu.io/2019/1/13/16842e04aabfe171?w=674&h=896&f=png&s=205265) 98 | 99 | --------------------- 100 | 101 | ### 勘误及提问 102 | 103 | 如果有疑问或者发现错误,可以在相应的 issues 进行提问或勘误。 104 | 105 | 如果喜欢或者有所启发,欢迎 star,对作者也是一种鼓励。 106 | 107 | --------------------- 108 | 109 | ### License 110 | 111 | 所有文章采用[知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议](http://creativecommons.org/licenses/by-nc-sa/3.0/cn/)进行许可。 112 | -------------------------------------------------------------------------------- /examples/funtioncal-programming/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /examples/funtioncal-programming/demo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 优化下面的写法 3 | * document.querySelector('#msg').innerHTML = '

Hello World'

' 4 | */ 5 | 6 | const compose = ( ...fns ) => fns.reduce( ( f, g ) => ( ...args ) => f( g( ...args ) ) ); 7 | -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godkun/blog/f9b9199739a25f18fd277041d314e98e251dad59/k-前端狂想录群的日常问题清单以及解决方案/.gitkeep -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/2019-02-下旬.md: -------------------------------------------------------------------------------- 1 | ## 20日 2 | 3 | ### NO1 4 | 5 | #### 问题描述 6 | 看到 `ECStack` 有点懵了,怎么理解它? 7 | 8 | #### 问题解答 9 | 10 | > 群主回答: 11 | 12 | 不要紧,把 `ECStack` 抽象成上下文堆栈,一个数组,栈结构。 13 | 14 | ### NO2 15 | 16 | #### 问题描述 17 | 有没有大佬做过,把 `react` 项目当作一个依赖, 其他 `react` 项目安装进去?可以说说大致方法么? 18 | 19 | #### 问题解答 20 | > 群主回答: 21 | 22 | `react` 这个事情,虽然没有做过,但是思想应该跑不掉,可以借鉴一下 `react-xxxx` 包,因为他们都算是 `react` 项目,你可以想一下,你这边该怎么做。 23 | 24 | ### NO3 25 | 26 | #### 问题描述 27 | 有没有用 `ionic2` 以上,开发过完整 `APP` 的大佬,我现在用了懒加载,用了 `prod` 打包,但是在差的手机上首屏加载还是有点慢,该怎么解决? 28 | 29 | #### 问题解答 30 | 31 | 先上个骨架页过渡。 32 | 33 | #### 问题追问 34 | 35 | 哪位大佬实践过 `Vue` 的骨架屏,有推荐的 `github` 或者文章吗? 36 | 37 | #### 追问回答 38 | 39 | 文章链接: 40 | 41 | > https://xiaoiver.github.io/coding/2017/07/30/%E4%B8%BAvue%E9%A1%B9%E7%9B%AE%E6%B7%BB%E5%8A%A0%E9%AA%A8%E6%9E%B6%E5%B1%8F.html 42 | 43 | ### NO4 44 | 45 | #### 问题描述 46 | 大佬们,想自己写个博客栈,有没有好的推荐架构? 47 | 48 | #### 问题解决 49 | 50 | > 回答一 51 | 52 | `hexo` 就可以满足 53 | 54 | > 群主回答 55 | 56 | 群主的博客栈,csdn-->XXX --> hexo -->github --> 掘金 57 | 58 | 至于为什么最后选择 `github` 和掘金,因为: 59 | 60 | 第一:他们是目前前端很被认可的地方。 61 | 62 | 第二:可以感受到自己努力分享技术后的收获,比如你们的鼓励与加油,一个赞,一个 `star` 。这可以让人获得满足感(实话实说)。然后就算累点,也能坚持下来。 63 | 64 | 毕竟做技术最重要的是成就感吧。 65 | 66 | #### 问题解答 67 | 不要紧,把ecs抽象成上下文堆栈,一个数组,栈结构。 68 | 69 | ### NO5 70 | 71 | #### 问题描述 72 | 哪位读过 `vue` 的源码,有问题想请教一下,如下图所示: 73 | 74 | ![](https://github.com/godkun/blog/blob/master/k-%E5%89%8D%E7%AB%AF%E7%8B%82%E6%83%B3%E5%BD%95%E7%BE%A4%E7%9A%84%E6%97%A5%E5%B8%B8%E9%97%AE%E9%A2%98%E6%B8%85%E5%8D%95%E4%BB%A5%E5%8F%8A%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/images/2-20-1.png?raw=true) 75 | 76 | `package.json` 里面的 `git` 钩子,我安装了依赖,怎么 `lint` 修复不生效,我在脚本里做了标记,但是并没有走。 77 | 78 | 报错如下图: 79 | 80 | ![](https://github.com/godkun/blog/blob/master/k-%E5%89%8D%E7%AB%AF%E7%8B%82%E6%83%B3%E5%BD%95%E7%BE%A4%E7%9A%84%E6%97%A5%E5%B8%B8%E9%97%AE%E9%A2%98%E6%B8%85%E5%8D%95%E4%BB%A5%E5%8F%8A%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/images/2-20-2.png?raw=true) 81 | 82 | 提问者目的:通过对源码打断点,一步步看。 83 | 84 | #### 问题解答 85 | 86 | `precommit` 需要 `husky` 87 | 88 | 但是`vue`源码中使用的`gitHooks`是尤大fork`husky`修改后的`yorkie`,使用了这个库,所以才可以响应这个钩子 89 | 90 | ## 21日 91 | 92 | ### NO1 93 | 94 | #### 问题描述 95 | 96 | 大家看源码是如何入手的?有时看源码不理解,不知道怎么破,各位有什么建议? 97 | 98 | #### 问题解答 99 | 100 | // TODO: 101 | 102 | ### NO2 103 | 104 | #### 问题描述 105 | 今天提一个问题,大家可以没事的时候想一想,也可以发表自己的看法,问题是: 106 | 107 | > 你现在的工作,比如你做前端,做其他岗位,做学生等。你目前的瓶颈和现状,急需要你去做相应的改变,那这个改变你心里清楚是什么吗?如果清楚,那有去付出行动么,在付出行动的过程中,一定有过颓废和停滞,这很正常,但是有多少人会在颓废和停滞的过程中慢慢的放弃了?这里我特别想问你们,你们放弃的原因是什么?是坚持不下去,是没有同行的伙伴,是没有相应的辅助工具,是跟不上大家的步伐,还是什么原因? 108 | 109 | 问题说完了,来点哲学的狂想录还是很不错的,大家可以好好想想。我自己也放弃过很多东西,因素也有很多,比如没有同行的伙伴,坚持不下去(曾经考 `CET6` )等。所以你们肯定也有,这里提这个问题就是想让大家再次去思考一下你自己的人生之路中的那些放弃和不放弃,对你现在而言,究竟是一种什么样的 `answer` 。 110 | 111 | #### 问题解答 112 | 113 | 回答一:你现在之所以还能放弃,说明你身边还有人能为默默你承担,你的生活并没有走到绝境 114 | 115 | 回答二:感觉自己在慢慢堕落,每次立好 `flag` ,坚持一个月,然后就慢慢的淡忘了,我的天,得强迫自己 116 | 117 | 回答三: 我现在是太闲了 118 | 119 | 回答四:能坚持就是因为兴趣吧 120 | 121 | 回答五:坚持下去真的是兴趣驱动的 122 | 123 | 回答六:就比如说我为啥一直这么优秀,还不是我都习惯了 而且我也有变得优秀的兴趣,所以一直保持优秀啊 124 | 125 | 回答七:习惯这个词,是比较有新意的答案,好比你没有放弃每天去呼吸,去吃饭,去关注你的家人,那你可能都觉察不到,因为你习惯了 126 | 127 | 回答八:想想自己穷 128 | 129 | 回答九:对于自控力不好的人,不要去刻意去坚持做一件事。 如果你真的需要这去做这件事,到点了自然会去做。刻意坚持,频繁放弃,只会让你反复觉得自己是个废物。 130 | 131 | 回答十:所以要么一直坚持,要么干脆不做了 132 | 133 | 回答十一:坚持到最后,其实回头看还是那样 134 | 135 | 回答十二:正反都能活 找适合自己的就行 136 | 137 | 回答十三:丰富自个为了现在 `5000` ,想一万,再想二万,再想三万,再想年薪,然后失业了。`99%` 注定平凡 138 | 139 | 回答十四:我上面的问题中,有一个核心关键点,就是:你从出生到现在,**人生 = N个放弃 + N个不放弃。** 放弃了太多不该放弃的东西可能会导致不满意现状。如果你的现状和以前放弃了太多不该放弃的东西,那我就觉得你应该需要做一些改变了。如果你的放弃和不放弃处于一种平衡状态,是不是平衡状态,你心里深处应该清楚的。那也可以不用做出改变,活的开心就好。 140 | 141 | ### NO3 142 | 143 | #### 问题描述 144 | 配置别名失败 找不到原因。如下图: 145 | 146 | ![](https://github.com/godkun/blog/blob/master/k-%E5%89%8D%E7%AB%AF%E7%8B%82%E6%83%B3%E5%BD%95%E7%BE%A4%E7%9A%84%E6%97%A5%E5%B8%B8%E9%97%AE%E9%A2%98%E6%B8%85%E5%8D%95%E4%BB%A5%E5%8F%8A%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/images/2-21-1.png?raw=true) 147 | 148 | ![](https://github.com/godkun/blog/blob/master/k-%E5%89%8D%E7%AB%AF%E7%8B%82%E6%83%B3%E5%BD%95%E7%BE%A4%E7%9A%84%E6%97%A5%E5%B8%B8%E9%97%AE%E9%A2%98%E6%B8%85%E5%8D%95%E4%BB%A5%E5%8F%8A%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/images/2-21-2.png?raw=true) 149 | 150 | #### 问题解决 151 | 152 | 报错缺了 `src` 这一层 路径问题。 153 | 154 | 你这是 `vue-cli3.0` 中, `vue.config.js` 的配置域名,你配置的 `alias` 是 `components` 为什么引入还要用 `./components` 呢 155 | 156 | `@c` 替换 `set` 里面的第一个入参 `component` 。 157 | 158 | 159 | ### NO3 160 | #### 问题描述 161 | 162 | 请问,引入图片,为什么没有效果呢,代码片段如下图: 163 | 164 | ![](https://github.com/godkun/blog/blob/master/k-%E5%89%8D%E7%AB%AF%E7%8B%82%E6%83%B3%E5%BD%95%E7%BE%A4%E7%9A%84%E6%97%A5%E5%B8%B8%E9%97%AE%E9%A2%98%E6%B8%85%E5%8D%95%E4%BB%A5%E5%8F%8A%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/images/2-21-5.png?raw=true) 165 | 166 | #### 问题解决 167 | 168 | 使用绝对路径,如下图: 169 | 170 | ![](https://github.com/godkun/blog/blob/master/k-%E5%89%8D%E7%AB%AF%E7%8B%82%E6%83%B3%E5%BD%95%E7%BE%A4%E7%9A%84%E6%97%A5%E5%B8%B8%E9%97%AE%E9%A2%98%E6%B8%85%E5%8D%95%E4%BB%A5%E5%8F%8A%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/images/2-21-6.png?raw=true) 171 | 172 | ### NO3 173 | #### 问题描述 174 | 175 | 出现两个相同的路由页面,如下图: 176 | 177 | ![](https://github.com/godkun/blog/blob/master/k-%E5%89%8D%E7%AB%AF%E7%8B%82%E6%83%B3%E5%BD%95%E7%BE%A4%E7%9A%84%E6%97%A5%E5%B8%B8%E9%97%AE%E9%A2%98%E6%B8%85%E5%8D%95%E4%BB%A5%E5%8F%8A%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/images/2-21-7.png?raw=true) 178 | 179 | ![](https://github.com/godkun/blog/blob/master/k-%E5%89%8D%E7%AB%AF%E7%8B%82%E6%83%B3%E5%BD%95%E7%BE%A4%E7%9A%84%E6%97%A5%E5%B8%B8%E9%97%AE%E9%A2%98%E6%B8%85%E5%8D%95%E4%BB%A5%E5%8F%8A%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/images/2-21-9.png?raw=true) 180 | 181 | 182 | #### 问题解决 183 | 不要在 `router` 中既加 `link` 又加 `review` ,比如把这个里面的 `router-view` 注释了。 184 | 185 | ### NO3 186 | #### 问题描述 187 | 哪位大佬在 `react` 项目里面用过 `sentry` 的呀? 188 | 189 | #### 问题解决 190 | // TODO: 待解决 191 | 192 | ## 22日 193 | 194 | ### NO1 195 | 196 | #### 问题描述 197 | 198 | 需要学习的知识过多,怎么办? 199 | 200 | #### 问题解决 201 | 202 | 可以在一段时间学习新知识: 203 | 204 | 1. 同步学习(学习一个知识,学完再学另一个) 205 | 206 | 2. 异步学习(同时学习多个不同知识) 207 | 208 | 在学习一个知识点的时候,里边会涉及到一些不会的知识点,这时再把不会的知识点一块看。 209 | 210 | > PS: 同时学习多个知识点,那得合理分配好时间。 211 | 212 | ### NO2 213 | 214 | #### 问题描述 215 | 216 | 想问个特简单的问题,如下代码优化下大量的 `if - else`: 217 | 218 | ```js 219 | let x, y, z, m 220 | if (x > 0) { 221 | if (y === 1) { 222 | m = 1 223 | return 2 224 | } else { 225 | if (z === 3) { 226 | m = 2 227 | } else { 228 | m = 3 229 | } 230 | return 3 231 | } 232 | } 233 | m = 4 234 | return 1 235 | ``` 236 | 237 | #### 问题解决 238 | 三目还不如 `if else` 清晰,可以用 `switch`。 239 | 240 | 最好的方法就是使用 **责任链模式** ,可分配不同的类,可以根据你不同的块去做处理,不过一般用在业务多点的地方。 241 | 242 | 责任链式模式可以让复杂程度很高的项目在后期维护上变得轻松和高效。 243 | 244 | 资料链接: 245 | 246 | > [JS 责任链模式](http://ife.baidu.com/note/detail/id/3173) 247 | 248 | ## 22日 249 | 250 | ### NO1 251 | 252 | #### 问题描述 253 | 怎么才能成为高级前端,初级,中级,高级前端大概的标准是啥样的。 254 | 255 | #### 问题解决 256 | 257 | // TODO: 258 | 259 | ### NO2 260 | 261 | #### 问题描述 262 | 263 | 怎么才能成为高级前端 264 | 265 | #### 问题解决 266 | 267 | ### NO3 268 | 269 | #### 问题描述 270 | 如下图: 271 | 272 | ![](https://github.com/godkun/blog/blob/master/k-%E5%89%8D%E7%AB%AF%E7%8B%82%E6%83%B3%E5%BD%95%E7%BE%A4%E7%9A%84%E6%97%A5%E5%B8%B8%E9%97%AE%E9%A2%98%E6%B8%85%E5%8D%95%E4%BB%A5%E5%8F%8A%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/images/2-22-1.png?raw=true) 273 | 274 | 这是有 `echarts` 的页面,老报这个错,用了 `this.nextTick()` ,把 `id` 换成 `ref` 都试过,也是不行,怎么解决呢? 275 | 276 | #### 问题解决 277 | // TODO: 278 | 279 | ### NO4 280 | 281 | #### 问题描述 282 | `element ui` 树形组件模糊搜索怎么不显示子集? 283 | 284 | #### 问题解决 285 | // TODO: 286 | 287 | ### NO5 288 | 289 | #### 问题描述 290 | 大家是怎么理解 `peerDependency` 这个东西的? 291 | 292 | #### 问题解决 293 | 可以类比一下,例如 `koa` 或者 `express` 的 `middleware` 脱离 `koa` 或 `express` 不能独自使用,但是如果项目已经安装 `koa` 或 `express` ,则可以正常使用。那么这些 `middleware` 库的 `peerDependency` 就是 `koa` 或者 `express` 。 294 | 295 | `rollup-plugin-xxx` 也是一样的 这些库不需要用到 `rollup` 的方法,但是却不能脱离 `rollup` 运行,所以他们的 `peerDependency` 就是 `rollup` 。 296 | 297 | **很好的回答。** 298 | 299 | ### NO6 300 | 301 | #### 问题描述 302 | 写了个 `js` 的二分法查找 `demo` : 303 | 304 | > https://www.jianshu.com/p/c6a1ac6a681c 305 | 306 | 有时间的大佬帮忙 `review` 一下,挑挑刺,看看有没有优化的地方。 307 | 308 | 309 | #### 问题解决 310 | // TODO: 311 | 312 | ### NO7 313 | 314 | #### 问题描述 315 | 问个问题,如果用 `vue` 开发,但不使用 `wepback` , 怎么组织代码,多个组件怎么整合和更换? 316 | 317 | #### 问题解决 318 | 链接: 319 | 320 | > https://cn.vuejs.org/v2/guide/components.html 321 | 322 | ### NO8 323 | 324 | #### 问题描述 325 | 326 | 不用背景图片怎么实现?简单点,不用多个盒子拼,有没有好的方案? 327 | 328 | #### 问题解决 329 | > 回答一: 330 | 331 | 百度度 `css3` 矩形切角 332 | 333 | > 回答二: 334 | 335 | 贝塞尔曲线 336 | 337 | > 回答三: 338 | 339 | `clip path` 340 | 341 | ### NO9 342 | 343 | #### 问题描述 344 | 为啥 `video` 标签下边会留一个缝。 345 | 346 | 效果图如下: 347 | 348 | ![](https://github.com/godkun/blog/blob/master/k-%E5%89%8D%E7%AB%AF%E7%8B%82%E6%83%B3%E5%BD%95%E7%BE%A4%E7%9A%84%E6%97%A5%E5%B8%B8%E9%97%AE%E9%A2%98%E6%B8%85%E5%8D%95%E4%BB%A5%E5%8F%8A%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/images/2-22-4.jpeg?raw=true) 349 | 350 | 代码图如下: 351 | 352 | ![](https://github.com/godkun/blog/blob/master/k-%E5%89%8D%E7%AB%AF%E7%8B%82%E6%83%B3%E5%BD%95%E7%BE%A4%E7%9A%84%E6%97%A5%E5%B8%B8%E9%97%AE%E9%A2%98%E6%B8%85%E5%8D%95%E4%BB%A5%E5%8F%8A%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/images/2-22-5.jpeg?raw=true) 353 | 354 | #### 问题解决 355 | 给 `video` 设置一个 `vertical-align:middle` ,来去除 `img` 三像素 `bug` 。 356 | 357 | ## 23日 358 | 359 | ### NO1 360 | 361 | #### 问题描述 362 | 363 | 我们有一个大屏幕演示系统,挂在墙上的那种,可以用鼠标来进行操作,然后给客户展示的时候,也会在 `ipad` 这种移动设备中展示,但是在 `ipad` 上也会显示一个鼠标的箭头,滑来滑去很不爽,总结就是一个 `pc` 网页在手机屏幕上显示了,然后手机屏幕上会有鼠标箭头,跟电脑上一样 364 | 。这种情况该怎么解决呢? 365 | 366 | #### 问题解决 367 | 368 | > https://blog.csdn.net/zhao19890429/article/details/13771405 369 | 370 | 上面链接中,最后的代码可以抹平两端差异。 371 | 372 | 373 | ### NO2 374 | 375 | #### 问题描述 376 | 调用微信接口实现图片上传,微信对图片进行压缩了吗?如果压缩了,那压缩的大小可以知道么? 377 | 378 | #### 问题解决 379 | 官网 `API` 链接: 380 | 381 | > https://developers.weixin.qq.com/miniprogram/dev/api/wx.chooseImage.html 382 | 383 | 问题解决链接: 384 | 385 | > https://segmentfault.com/q/1010000012346002 386 | 387 | 388 | ## 25号 389 | 390 | ### NO1 391 | 392 | #### 问题描述 393 | 不做前端和学历没有关系吧? 394 | 395 | #### 问题解决 396 | > 回答一 397 | 398 | 我是入职后,第一天老大丢了本 `javascript` 的书让我看,从此入了前端,之前从来没接触过 399 | 400 | > 回答二 401 | 402 | 我也是入职之后 老大丢了本 `React` 的书给我看 403 | 404 | > 回答三 405 | 406 | 我去年实习,入职的时候,老大给我丢了本 `angular` ,然后那本书就在桌上吃灰了 407 | 408 | > 回答三 409 | 410 | 我之前实习的时候,啥书也没丢,项目一半是 `angular` 写的,一半是 `vue` ,然后让我把 `an` 的部分重构成 `vue` ,然后就没有然后了 411 | 412 | > 回答四 413 | 414 | 我是入职后,第一天老大丢了离职报告让我看,从此入了前端,之后再也没见到他了 415 | 416 | ### NO2 417 | 418 | #### 问题描述 419 | 420 | 请教各位大佬,开发一个 `js` 库的话,测试是放在 `build` 前,还是 `pre-commit` ,还是交给 `CI` 。 421 | 422 | #### 问题解答 423 | 424 | `ci` 好些。 `build` 和 `pre-commit` 都过于复杂了。 425 | 426 | 427 | ### NO3 428 | 429 | #### 问题描述 430 | 前端工程师有想创业的吗? 431 | 432 | #### 问题解答 433 | 434 | 创业的话遵循一点就可以,那就是不要用自己的钱,尽可能的去找各种投资,来降低风险。因为创业失败了,对于投资方来说,没什么质的损失,但是如果你把家底都押进去了,你失败了,那对你来说,可就意味着很多事情。 435 | 436 | 437 | ### NO4 438 | 439 | #### 问题描述 440 | 441 | `vue` 中 `window.location.href` ,为啥不跳转有遇到过的没? 442 | 443 | #### 问题解答 444 | 445 | > https://blog.csdn.net/weixin_39818813/article/details/79706274 446 | 447 | ### NO5 448 | 449 | #### 问题描述 450 | 基于 `web component` 的 `omi` 怎么样 451 | 452 | #### 问题解答 453 | > 群友一: 454 | 455 | `omi` 盖范围太大,就做不了太新的东西,因为要兼容旧的。框架,库可以说是自己或者团队技术的积累,但是如果没市场的话,开源项目也得不到发展。国内的开源大部分都是这样,用的人多,但是贡献的人很少。出事还要喷。再加上前端的环境太浮躁。学习成本高的也没人自愿去学。只有市场需要才会去学。 456 | 457 | ### NO6 458 | 459 | #### 问题描述 460 | 自定义间隔时间的轮播图怎么做,给点思路,就是每个图片到下个图片的间隔都不一样。场景就是我现在在做一个大屏,需要自动切屏。 461 | 462 | #### 问题解答 463 | 464 | 本质上,这种还是 `if else` 的业务问题,建议你这样,把可变的抽出一个 `config` 对象出来,使用策略模式来应对不同场景。后续可以很好的扩展。 465 | 466 | 467 | ### NO7 468 | 469 | #### 问题描述 470 | 现在我们需要有个折线图,只要数据库数据库变化了,折线图就要变化,有什么办法能做到吗? 471 | 472 | #### 问题解答 473 | > 回答一: 474 | 475 | 最简单的在前端搞个轮询就好了,比如加个 `setTimeout` ,递归调接口。 476 | 477 | > 回答二: 478 | 479 | 使用 `WebSocket` 技术 480 | 481 | ### NO8 482 | 483 | #### 问题描述 484 | 用户输入的表情是怎么存储的呢? 485 | #### 问题回答 486 | 487 | > 回答一: 488 | 489 | 定制编码表,`utf8 mb4` 编码。 490 | 491 | 这个不会改动数据库编码,你只是存的字符串,然后取出来的时候在前端在解析一遍,变成对应的表情就行了。 492 | 493 | > 回答二: 494 | 495 | `mysql` 不改数据库编码不行,存不进去,怎么存之前这么做过,倒是之前我写过一个表情拦截器。 496 | 497 | 498 | ### NO9 499 | 500 | #### 问题描述 501 | 502 | 请教下各位,`url` 都加上 `https` 协议,这样写有没有什么隐患。 503 | 504 | 如图所示: 505 | 506 | 2-25-1 507 | 508 | #### 问题回答 509 | 510 | 如果有隐患,你可以把三种情况都考虑进去,`https` , `http` , 不带协议头。 511 | 512 | 513 | ## 26日 514 | 515 | ### NO1 516 | 517 | #### 问题描述 518 | 519 | 教个js高级程序设计中组合继承和寄生组合继承的问题 520 | 521 | 如图所示: 522 | 523 | 2-26-1 524 | 525 | 个人觉得 inheritPrototype 的作用和 组合继承 SubType.protoype = new SuperType()并无区别啊 526 | 527 | 528 | #### 问题回答 529 | 530 | new SuperType() 执行了一遍SuperType 531 | 532 | 533 | 如图: 534 | 535 | 2-26-2 536 | 537 | 所以this.name=name就没有。就是父级的属性会多继承一次吧~我这个示例写得不太好 538 | 539 | 540 | ### NO2 541 | 542 | #### 问题描述 543 | 箭头函数 ()=>{}和_=>{}有啥区别吗 544 | 545 | #### 问题回答 546 | 没啥区别,只是简写而已 547 | 548 | 549 | ### NO3 550 | 551 | #### 问题描述 552 | 没有想过为什么箭头函数没有自己的this,前端箭头函数的出现解决了什么问题? 553 | 554 | #### 问题回答 555 | 556 | > 回答一: 557 | 558 | 解决了 var that = this 559 | 560 | 陌上 2019/02/26 下午5:55 561 | java和swift都带箭头,只不过是'->' 562 | 563 | 墨明棋妙 2019/02/26 下午5:56 564 | 人家箭头函数有2中:胖箭头函数 和 瘦箭头函数 565 | 566 | Jeffrey 2019/02/26 下午6:10 567 | 箭头函数看babel的转意就是使用了外部的this,也就是在定义时就确定了this指向,而普通函数的this指向得在运行时判断 568 | 569 | Jeffrey 2019/02/26 下午6:11 570 | 额,那应该也就是说箭头函数里的this是可以用静态检查例如ts直接检测到的? 571 | 572 | 掘金 Logan70 2019/02/26 下午6:12 573 | 进一步贯彻静态词法作用域吧,如果不涉及对象方法,构造函数及原型链,dom回调,我们其实是不希望别人可以动态更改我们的this和arguments的,直接了当地当做普通变量来处理 574 | 575 | 掘金 Logan70 2019/02/26 下午6:13 576 | 应该不可以,谁知道箭头函数外面包的是什么,外面的this有可能是动态可变的 577 | 578 | Jeffrey 2019/02/26 下午6:14 579 | 没试过还,一般也不怎么写this,嗯 580 | 581 | 陌上 2019/02/26 下午6:15 582 | 如过是普通函数内部再用箭头,还是要外部函数执行才知道,不是静态的 583 | 584 | 掘金 Logan70 2019/02/26 下午6:19 585 | 另外少了this绑定和arguments初始化,也算是性能提升吧 586 | 587 | Jeffrey 2019/02/26 下午6:19 588 | 的确,在ts中会提示隐士any,tslint配置的话,只允许在类内使用this 589 | 590 | 陌上 2019/02/26 下午6:19 591 | 感觉是this指向它所在函数运行时的this,有点拗 592 | 593 | 掘金 Logan70 2019/02/26 下午6:21 594 | 就当做普通变量就行,只取决于定义时环境 595 | 596 | 炫 2019/02/26 下午6:21 597 | 问个问题,this 的本质是什么?执行上下文依据调用方式不同对this 进行赋值,this 是当前执行它的上下文吗? 598 | 599 | cuteyk 2019/02/27 上午10:34 600 | 箭头函数的 this 这个事情吧,我个人觉得可以思考,首先 箭头函数执行的时候,里面是没有this的。 601 | 602 | 这点非常重要,如果没有this的话,那我在箭头函数里面使用 this 了 会怎么办呢?当然就会使用 外层作用域的 this 了 ,谁最近用谁的。 603 | 604 | 这 和我们平常写的 let that = this 是一个道理。只不过这里就好比是 写了 let this = this 605 | 606 | cuteyk 2019/02/27 上午10:34 607 | 本着一个观念,没有就去找,找不到就基本是 undefined 608 | 609 | cuteyk 2019/02/27 上午10:35 610 | 如果执行的时候,有this的话,那就会按照 判定 this 的那一套方案去确定 this 指向谁 611 | 612 | 613 | 614 | 615 | 616 | 617 | ### NO4 618 | 619 | #### 问题描述 620 | 请问 这2个函数 要怎么提取成一个呢? 621 | 622 | 如图所示: 623 | 624 | 625 | #### 问题回答 626 | 627 | 简单把两个函数的逻辑写到一个函数里面,然后传个参数进来用于判断要走add的逻辑还是mins的逻辑不行么,传参1或者-1用于区分add或者min,然后乘以(current-end),这样比较符就一致了 628 | 629 | ### NO5 630 | 631 | #### 问题描述 632 | 633 | 如图所示: 634 | 635 | 2-26-4 636 | 637 | 这个p // ["Hello", {y: "World"}] 我懂, 但为啥x // "Hello" 638 | y // "World"还会再结构,不应该算解构不成功吗 639 | 640 | 641 | #### 问题回答 642 | 643 | Du小强🍪 2019/02/26 下午6:23 644 | 这个p // ["Hello", {y: "World"}] 我懂, 但为啥x // "Hello" 645 | y // "World"还会再结构,不应该算解构不成功吗 646 | 647 | 陌上 2019/02/26 下午6:24 648 | 你xy是数组解构,按照index的吧 649 | 650 | 陌上 2019/02/26 下午6:25 651 | x是数组第一个,{y}这个对象是数组第二个,数组第二个里面有一个y,没什么毛病啊 652 | 653 | Du小强🍪 2019/02/26 下午6:28 654 | 前面还有一个p, 我意思是解构完之后把["Hello", {y: "World"}]赋给p了,但为啥后面的还会继续结构出来x,y啊,没有对应项了,内部是怎么回事,也把后面的x,y给结构了 655 | 656 | Du小强🍪 2019/02/26 下午6:28 657 | let [x, y, ...z] = ['a']; 658 | x // "a" 659 | y // undefined 660 | z // [] 661 | 662 | Jeffrey 2019/02/26 下午6:28 663 | @Du小强🍪 你可以把第二个p理解为一个占位符,解决的就是你即想用p,又想用p里面某个属性的问题 664 | 665 | Du小强🍪 2019/02/26 下午6:29 666 | 不是应该向这个吗,没有就不给zhi了 667 | 668 | Jeffrey 2019/02/26 下午6:29 669 | 一个是数组结构,一个是对象结构啊 670 | 671 | Du小强🍪 2019/02/26 下午7:33 672 | 知道了,对象的结构不是按照顺序来的,不存在解构不全,就是按照属性名来进行所有的匹配 673 | 674 | Du小强🍪 2019/02/26 下午7:36 675 | 想偏了 676 | 677 | 678 | ## 27日 679 | 680 | ### NO1 681 | 682 | #### 问题描述 683 | 大佬们有没有遇到过 升级到webpack4之后 Ctrl + C 无法停止node进程的问题啊? 684 | 685 | 看上去是停止了,但是没有释放端口,导致下次启动的时候·端口占用,必须换一个端口才行。 686 | #### 问题解答 687 | 688 | Anx& 2019/02/27 上午9:30 689 | lsof -i 查查哪个进程 690 | 691 | Anx& 2019/02/27 上午9:30 692 | kill掉它 693 | 694 | レイン 2019/02/27 上午9:30 695 | 用这种方法是可以kill 但是总要找到原因 696 | 697 | レイン 2019/02/27 上午9:31 698 | 不能每次都kill 啊 太麻烦了 699 | 700 | レイン 2019/02/27 上午9:31 701 | 而且是只在mac上有这个问题 702 | 703 | レイン 2019/02/27 上午9:32 704 | windows上是好的 705 | 706 | 707 | ### NO2 708 | 709 | #### 问题描述 710 | 如图所示: 711 | 712 | 26-5 713 | 代码这么写 易懂嘛 714 | #### 问题解答 715 | > 回答一: 716 | 717 | 加注释,这个方法的作用是什么,每一行的作用是什么,想到达到什么目的。 718 | 719 | > 回答二: 720 | 721 | 抽象封装 722 | 723 | ### NO3 724 | 725 | #### 问题描述 726 | 动画的性能比较 727 | 728 | #### 问题解答 729 | 730 | 动画分固定的动画和交互的动画。css3方便服务于固定长度的动画化。 731 | 732 | vue,react 动画比 jquery 动画更出色 733 | 734 | ### NO4 735 | 736 | #### 问题描述 737 | dom和它下面的一系列方法,是不是建模的产物? 738 | #### 问题回答 739 | 740 | 我的小羊在睡觉 2019/02/27 下午5:57 741 | 是滴 742 | 743 | 陈随易 2019/02/27 下午5:58 744 | 那么,(DOM 文档对象模型),这个(对象模型)怎么理解呢? 745 | 746 | 陈随易 2019/02/27 下午5:59 747 | 哦,应该这样拆分,文档对象+模型。 748 | 749 | 我的小羊在睡觉 2019/02/27 下午5:59 750 | 就是操作网页的各种方法和属性 751 | 752 | 我的小羊在睡觉 2019/02/27 下午5:59 753 | 模型就是dom树 754 | 755 | 我的小羊在睡觉 2019/02/27 下午5:59 756 | 用js来操作节点的增删改 757 | 758 | 759 | ### NO5 760 | #### 问题描述 761 | 你们了解过观察者模式吗 762 | 763 | 网上看了个代码 不大清楚是怎么触发 764 | https://cloud.tencent.com/developer/article/1021939 765 | 766 | 不大明白这块是怎么触发的,有人方便能帮忙解答一下吗 767 | 768 | 下图: 769 | 770 | 771 | #### 问题回答 772 | 773 | 你去买房子,在售楼小姐lily那儿留了你的电话号码,告诉她如果有房子了通知你一下。然后过了一阵子,她给你打电话来了。告诉你有房了,房价多少多少的一堆信息。你开心的笑了起来 774 | 775 | ### NO6 776 | #### 问题描述 777 | 请教下child_process.execSync(eslint)和使用eslint的node引擎,会有什么差别 778 | 779 | 由于需要同时支持js和ts,希望只设置一个源码类型,lint工具自动切换,而不是去修改packagejson的scripts,所以需要将lint在node内实现,execSync是我能想到最简洁的,但是不知道有没有什么隐患,希望有老哥能解惑 780 | 781 | #### 问题回答 782 | 783 | 你去买房子,在售楼小姐lily那儿留了你的电话号码,告诉她如果有房子了通知你一下。然后过了一阵子,她给你打电话来了。告诉你有房了,房价多少多少的一堆信息。你开心的笑了起来 784 | 785 | ## 28日 786 | 787 | ### NO1 788 | #### 问题描述 789 | 大佬们,设计图给的字体大小在iphone5下换行了,怎么解决好 790 | 791 | 792 | 793 | #### 问题回答 794 | 795 | レイン 2019/02/28 下午2:41 796 | 讲道理设计稿上没换行,做出来就不会换行啊 797 | 798 | 李小健 2019/02/28 下午2:42 799 | 同上 800 | 801 | 简默丶Xs 2019/02/28 下午2:44 802 | 用的那个蓝湖 803 | 804 | 简默丶Xs 2019/02/28 下午2:45 805 | 他在375px(苹果6)字体大小是18px,他在320px(苹果5)字体大小是14px 806 | 807 | 简默丶Xs 2019/02/28 下午2:45 808 | 所以他没换行 809 | 810 | 简默丶Xs 2019/02/28 下午2:45 811 | 我肯定是按照苹果6的写18px啊 812 | 813 | 简默丶Xs 2019/02/28 下午2:45 814 | 我再写个媒体查询? 815 | 816 | 李小健 2019/02/28 下午2:45 817 | 你是怎么适配移动端的? 818 | 819 | 陌上 2019/02/28 下午2:46 820 | rem适配啊 821 | 822 | 简默丶Xs 2019/02/28 下午2:46 823 | 写的rem也没用 824 | 825 | 陌上 2019/02/28 下午2:46 826 | 这都多少年前的方案了,随便去百度一下 827 | 828 | 陌上 2019/02/28 下午2:46 829 | 注意浏览器不会让你小于12px 830 | 831 | 简默丶Xs 2019/02/28 下午2:47 832 | [图片] 833 | 834 | 简默丶Xs 2019/02/28 下午2:47 835 | 我忘了这一茬 836 | 837 | 简默丶Xs 2019/02/28 下午2:47 838 | 可能在手机上就好了 839 | 840 | 天窗上的蚂蚁 2019/02/28 下午2:48 841 | 你们文字大小也用rem适配吗? 842 | 843 | 。。林三岁啊 2019/02/28 下午2:48 844 | 我们也用的蓝湖 845 | 846 | 李小健 2019/02/28 下午2:51 847 | 有没有用vw适配移动端的? 848 | 849 | 天窗上的蚂蚁 2019/02/28 下午2:55 850 | 我用过vw布局,好用 851 | 852 | 李小健 2019/02/28 下午2:56 853 | 文字大小也可以用vw的 854 | 855 | 天窗上的蚂蚁 2019/02/28 下午2:56 856 | vw在移动端兼容性很好 857 | 858 | 李小健 2019/02/28 下午2:57 859 | https://www.w3cplus.com/mobile/vw-layout-in-vue.html 860 | 861 | 天窗上的蚂蚁 2019/02/28 下午2:57 862 | 我文字大小是写死的 863 | 864 | レイン 2019/02/28 下午2:57 865 | 对,这既是我想问的, 我记得看过说font-size如果用rem不好 866 | 867 | レイン 2019/02/28 下午2:58 868 | 文字建议用px,那你们是怎么做适配的 用px 869 | 870 | 天窗上的蚂蚁 2019/02/28 下午2:59 871 | 我是这样 872 | 873 | 天窗上的蚂蚁 2019/02/28 下午2:59 874 | [图片] 875 | 876 | レイン 2019/02/28 下午3:00 877 | 根据设备dpr设定三个尺寸? 878 | 879 | 天窗上的蚂蚁 2019/02/28 下午3:01 880 | 嗯 881 | 882 | レイン 2019/02/28 下午3:01 883 | 那岂不是要写三套代码 884 | 885 | 天窗上的蚂蚁 2019/02/28 下午3:02 886 | 还好,本来字体大小也就那么几个 887 | 888 | 天窗上的蚂蚁 2019/02/28 下午3:03 889 | 我不知道这种好不好,我是一直这样弄得 890 | 891 | 892 | ### NO2 893 | 894 | #### 问题描述 895 | 896 | 如何做到 a页面输入了数据,点击a页面某个链接,进入b页面,然后返回a页面,刚才选择的数据保持呀 897 | 898 | 899 | 900 | #### 问题解答 901 | 902 | 快雪时晴 2019/02/28 下午3:44 903 | 缓存 904 | 905 | 。。林三岁啊 2019/02/28 下午3:44 906 | 你让b在新窗口打开不就好了 907 | 908 | 快雪时晴 2019/02/28 下午3:44 909 | vue store 910 | 911 | A? 2019/02/28 下午3:44 912 | 咋么做呢 913 | 914 | 李小健 2019/02/28 下午3:44 915 | 用keep-alive 916 | 917 | レイン 2019/02/28 下午3:44 918 | vue可以用keep-alive,或者ls 919 | 920 | A? 2019/02/28 下午3:45 921 | 因为进入b页面后,拿到b页面数据,返回a,这个数据要渲染进去,但是a页面,表单之前选择的数据,要保持 922 | 923 | A? 2019/02/28 下午3:45 924 | 这个怎么做呢 925 | 926 | A? 2019/02/28 下午3:46 927 | 也就是a页面数据部分更新 928 | 929 | 小池 2019/02/28 下午3:46 930 | 突然想到Vuex 931 | 932 | 快雪时晴 2019/02/28 下午3:46 933 | 我是用vuex管理全局状态数据 934 | 935 | A? 2019/02/28 下午3:47 936 | 部分要更新 937 | 938 | A? 2019/02/28 下午3:47 939 | 有办法吗 940 | 941 | 快雪时晴 2019/02/28 下午3:47 942 | 路由跳转将更新参数带进来 943 | 944 | A? 2019/02/28 下午3:48 945 | 这个我知道 946 | 947 | A? 2019/02/28 下午3:49 948 | 但是用户另外选的数据 949 | 950 | A? 2019/02/28 下午3:49 951 | 怎么保存呢 952 | 953 | 李小健 2019/02/28 下午3:49 954 | vuex 955 | 956 | A? 2019/02/28 下午3:51 957 | 怎么做呀 958 | 959 | 肥宅的健怡可乐 2019/02/28 下午4:00 960 | session 961 | 962 | Jeffrey 2019/02/28 下午4:11 963 | 你这页面是单页面还是多页面啊,多页面就localstorage,单页面就状态管理器啊 964 | 965 | 我想养只小边牧🐶 2019/02/28 下午4:13 966 | 感觉放在前端不是很合适 967 | 968 | 半 2019/02/28 下午4:16 969 | 「 A?: 因为进入b页面后,拿到b页面数据,返回a,这个数据要渲染进去,但是a页面,表单之前选择的数据,要保持 」 970 | - - - - - - - - - - - - - - - 971 | 本地储存确实是一种方案 972 | 973 | 炫 2019/02/28 下午4:21 974 | 使用 vuex 或 带着数据 进入b 页面,再把数据带回a 页面 975 | 976 | 977 | 978 | ### NO3 979 | 980 | #### 问题描述 981 | debug的时候 怎么让他不跳到其他文件吗 982 | 983 | #### 问题解答 984 | 985 | Dailoge 2019/02/28 下午5:36 986 | 啥意思,是因为map文件引起的吗 987 | 988 | 太阳当空照 2019/02/28 下午5:36 989 | 就打断点 调试的时候 能不能不让限制断点就在当前页面 990 | 991 | undefined 2019/02/28 下午5:37 992 | next function call 我记得肯定是会跳到其他文件的 993 | 994 | 太阳当空照 2019/02/28 下午5:37 995 | 那 怎么从其他文件直接跳出来呢 996 | 997 | 太阳当空照 2019/02/28 下午5:38 998 | [捂脸]然后继续当前页面的断点 999 | 1000 | undefined 2019/02/28 下午5:38 1001 | 在当前页面多大几个断点呀 1002 | 1003 | 太阳当空照 2019/02/28 下午5:41 1004 | 不确定报错原因 只能从报错的点开始找下去。。 1005 | 1006 | undefined 2019/02/28 下午5:43 1007 | debug的最后一个按钮,会在出现异常的时候暂停,可以试一下 1008 | 1009 | undefined 2019/02/28 下午5:43 1010 | pause on exception 1011 | 1012 | 太阳当空照 2019/02/28 下午5:43 1013 | 我试试 1014 | 1015 | 太阳当空照 2019/02/28 下午5:45 1016 | 6 谢谢了 大佬 1017 | 1018 | undefined 2019/02/28 下午5:45 1019 | 客气啦 1020 | 1021 | 1022 | 1023 | 1024 | 1025 | 1026 | 1027 | 1028 | 1029 | 1030 | 1031 | 1032 | 1033 | 1034 | 1035 | -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/2019-02-中旬.md: -------------------------------------------------------------------------------- 1 | ## 15日 2 | 3 | ### NO1 4 | 5 | #### 问题描述 6 | 可以讲讲正则么,想深入了解下。 7 | 8 | #### 问题解答 9 | 10 | > 群主回答: 11 | 12 | 如果你想深入,那你可以先从 `API` 开始,正则这东西,`API` 味道过重,规则都是定死的。该记不住的还是记不住,时间长肯定忘。 13 | 14 | 玩好正则的话,你要准备好属于你自己的正则总结,并实践。然后去看几篇好博客的总结,比如掘金上有几篇很不错的文章。可以看看,对比一下,然后再次总结。 15 | 16 | 深入了解下的话,你可以看看源码,比如 `vue` 的源码,里面的一些字符串正则匹配,尝试去理解一下。 17 | 18 | 再深入,你可以学习一下 `python` ,看看正则究竟可以做到什么程度。 19 | 20 | 再深入,你可以研究一下正则的底层实现。 21 | 22 | > PS: 有时候知识不能学的太深,但也可以学的很深,主要看这个知识重不重要。比如,正则持续研究一年,对你究竟有什么好处么,前端用到的正则的地方不多,就那么几个场景。`react` 你研究一年,对你很有好处,`WebGL`,函数式编程你研究一年,也对你很有好处。正则这个,我个人建议,花个几天时间就 `OK` 了。 23 | 24 | 25 | ## 18日 26 | 27 | ### NO1 28 | 29 | #### 问题描述 30 | 一直搞不懂前端模块化、`commonjs` ,打包工具这一块,有点搞不懂概念,大佬有时间能给解答解答么,`commonjs` 是规范 规范是用来实现的对吧? 31 | 32 | > 问题者述: 我看到的文章都是上来就介绍 `commonjs` 的用法,跟我说原生 `js` 不支持模块,然后通过 `commonjs` ,我们就可以实现模块化。 33 | 34 | #### 问题解答 35 | 36 | > 群主回答: 37 | 38 | 如果你搞不懂概念,那你可以尝试看一下 `nodejs` 中的模块实现机制,看看 `require` 是怎么实现的,看了你就知道为什么 `commonjs` 可以实现模块化。 39 | 40 | 刚才你说原生 `JS` 不支持模块化,这个感觉不严谨,原生 `JS` 可以实现模块化。不支持模块化这个不对,`ES6` 已经支持了,`ES6` 就是原生。 41 | 42 | ### NO2 43 | 44 | #### 问题描述 45 | 公司招前端实习生,一般是要那种进去就能干活的,还是招进去培养两天再让他干活? 46 | 47 | #### 问题解答 48 | 49 | > 回答一: 50 | 51 | 基本都是希望进公司 `1` 到 `4` 周要参与项目吧,说培养的无非就是自己看看之前源码,不懂问问。有些中小公司是送去培训机构培养,你懂的。 52 | 53 | > 回答二: 54 | 55 | 看公司吧,进去能干活也是要有时间的,一般给你几天时间熟悉项目。看一下实习工资,如果实习工资挺高,那也就意味着后面可能会把你当成正式员工那种。 56 | 57 | > 回答四: 58 | 59 | 实习生都是打杂的。 60 | 61 | ### NO3 62 | 63 | #### 问题描述 64 | 65 | 招聘需求上好多要求熟悉三大框架之一,那比如说我现在相对熟悉 `vue` ,结果进去之后项目用的是 `react` ,那是不是就要现场学 `react` 。 66 | 67 | #### 问题解答 68 | 是的,如果目前你只能参加 `r` ,那你就得学,但是面试时候,面试官会了解清楚的,个人认为不会这么傻逼,如果他觉得你学习能力不错,那也许会这样干。 69 | 70 | ### NO4 71 | 72 | #### 问题描述 73 | 现在公司会愿意招毫无项目经验的实习生吗 74 | 75 | #### 问题解答 76 | 77 | // TODO: 78 | 79 | ### NO5 80 | 81 | #### 问题描述 82 | `tensorflow` 现在是可以用 `js` 跑了吧? 83 | 84 | #### 问题解答 85 | > 群主回答: 86 | 87 | 可以用的。但是如果前端想学人工智能,建议去学 `escher` 框架,也就是达芬奇系统。 88 | 89 | 为什么说 `escher` ,因为这是我参加今年 `d2` 的时候,一个 `speaker` 说的前端怎么去参与人工智能,给出了一个建议的框架。 90 | 91 | ### NO6 92 | 93 | #### 问题描述 94 | 前端要把 `node` 学到什么程度才行啊 95 | 96 | 97 | #### 问题解答 98 | > 群主回答: 99 | 100 | 这个,看你想成为什么样 `level` 的人。 101 | 102 | ### NO7 103 | 104 | #### 问题描述 105 | 106 | 自己现在就是个小白,现在只想搞清楚一件事,现代工程化的前端代码是怎么运行的😂,`vue-cli` 一把梭, `webpack` 一把梭,感觉很迷,自己只是在一个个文件中写业务代码,不知道整体是怎样的,只见树木不见森林的感觉。 107 | 108 | 就是运行机制这块儿很迷,`webpack` 和 `npm` 上很多模块经常给我一种: **原来还有专门做这个事情的东西存在** 的感觉 109 | 110 | #### 问题解答 111 | 112 | > 回答一: 113 | 114 | 工程化是编译你的代码,执行的是编译后的代码 115 | 116 | > 群主回答: 117 | 118 | 去看一下掘金的相关博客,你看一下输出文件,可以大致推出 `w` 打包的机制。你暂时理解一下就 `ok` 了。你想知道怎么运行的,那你可以搜一下 `w` 的运行机制。 119 | 120 | **你应该多想想为什么前端越来越工程化。** 121 | 122 | 当你知道了为什么前端越来越工程化的原因后,那你用工程化的工具的时候,也就不那么困惑了。 123 | 124 | 就算你不了解怎么运行,也不会太困惑。就像 `java` 代码,工程化的更厉害,有多少知道 `java` 代码那一套工程化的运行机制的呢,不可能的也不现实,你没那个精力。当然,对于进阶前端,运行机制肯定要知道的,不然你无法在它的机制上进行扩展各种功能实现。 125 | 126 | 现在的大多数有名的包,比如 `babel` `webpack` `gulp` 等等等,都会提供一个能力,让开发者去按照它提供的模型去实现第三方功能,民间俗称各种插件, 为什么可以这么玩,本质上是语言层面的一致性。 127 | 128 | 129 | ### NO8 130 | 131 | #### 问题描述 132 | 一张 `100×100` 的图片,通过 `CSS` 设置它 `{ width:100px; height:100px }` 。在普通密度桌面显示屏的电脑上打开,没有什么问题,但假设在手机或者 `Retina` 屏幕的 `Mac` 上,图片就会变得模糊,为什么 `Retina` 屏幕看起来更加清晰?但是为什么用四个物理像素来渲染一个 `css` 像素就会使得图片变模糊呢?一个像素很低的图片,在高分辨率下怎么显示的问题?为什么呢? 133 | 134 | > 提问者再描述: 135 | 136 | 我们通常说 `Retina` 屏幕更加清晰,是不是我们在非 `Retina` 设备上和 `Retina` 设备上看到的图片根本就不是同一张图?比如说淘宝首页,我在非 `Retina` 屏手机上打开感觉很清晰,然后我在 `iPhone8` 上打开感觉加倍清晰了,这是不是因为两个手机上看到的图片根本不是同一张图,前者是一倍图,而后者是包含更多像素数的两倍图? 137 | 138 | #### 问题解答 139 | 140 | 因为逻辑像素比较低。 141 | 142 | 不是同一张图,通过判断,来加载图片的。你去看一下响应式和自适应方面的知识,然后把 `dpr` 看一下。这也是一个面试常考点,其实这个还可以讨论,就是目前来说,是否真的有一种方案可以完美解决目前前端关于自适应和响应式的各种问题。 143 | 144 | ## 19日 145 | 146 | ### NO1 147 | 148 | #### 问题描述 149 | 我想问的是 `GC` 是存在于 `js` 语言中, 还是 `js` 的 运行环境中,这块一直不懂。 150 | 151 | #### 问题回答 152 | 153 | > 群主回答: 154 | 155 | 底层模块,`V8` 引擎中的。不懂的情况基本都是因为,无法在脑中搭建宏观层面的世间,所以要多去读书,慢慢的在脑子形成宏观世界,比如你要去学习数据结构,计算机组成,计算机网络,`linux` ,算法,`C` ,`C++` ,了解 `PY` ,`go` 等吧。 156 | 157 | 我举个例子,比如作用域链,知道吧,如果你熟悉数据结构后。 158 | 159 | 你会发现没有什么东西,函数的作用域链,就是个链表而已,自己作用域里面没有,就沿着链表向后查找。是一个闭环,查找不到,回到自己的话,那就返回 `undefined` 。 160 | -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/2019-03-上旬.md: -------------------------------------------------------------------------------- 1 | ## 1号 2 | 3 | ### NO1 4 | 5 | #### 问题描述 6 | 大佬们早,请教一个发布流程的问题,公司有多台服务器,怎么解决在发布那天总有用户在模版(html) 和静态资源发布的间隙访问页面导致资源不匹配的问题啊? 7 | 8 | #### 问题解答 9 | undefined 2019/03/01 上午9:28 10 | nginx做健康检查 11 | 12 | undefined 2019/03/01 上午9:29 13 | 不过你静态资源发布不上CDN吗? 新的静态资源发布老的也会还在呀 14 | 15 | レイン 2019/03/01 上午9:32 16 | 我们是覆盖式发布 17 | 18 | レイン 2019/03/01 上午9:32 19 | 老得不会在 20 | 21 | ChasLui 2019/03/01 上午9:33 22 | 蓝绿部署, 灰度发布 23 | 24 | レイン 2019/03/01 上午9:33 25 | 都上cdn的 26 | 27 | ChasLui 2019/03/01 上午9:34 28 | 好吧 29 | 30 | undefined 2019/03/01 上午9:34 31 | 静态资源做下hash吧,覆盖式发布比较难避免 32 | 33 | . 2019/03/01 上午9:34 34 | 他是发布间隙.. 35 | 36 | . 2019/03/01 上午9:34 37 | 说的是发布间隙 38 | 39 | レイン 2019/03/01 上午9:35 40 | 就是因为灰度发布才会有这个问题啊,我5台服务器先发了A服务器用户从A访问我的页面,然后再加载页面中的静态资源的时候,我没有办法保证它还从A服务器访问啊,可能它就去B服务器取这个静态了,而此时B服务器还没发 41 | 42 | レイン 2019/03/01 上午9:36 43 | 多台服务器的话,即是是非覆盖式发布好像也会有问题 44 | 45 | 陌上 2019/03/01 上午9:36 46 | 静态资源不覆盖,用版本号标示,不同版本的页面加载不同版本的静态资源,这样可以不 47 | 48 | レイン 2019/03/01 上午9:36 49 | 除非只有一台超级服务器 50 | 51 | 断线人偶 2019/03/01 上午9:36 52 | 静态页面带hash,先部署静态资源,然后再部署动态请求的服务 53 | 54 | 断线人偶 2019/03/01 上午9:36 55 | 静态资源带上hash 56 | 57 | レイン 2019/03/01 上午9:37 58 | 怎么可能html 带hash 59 | 60 | レイン 2019/03/01 上午9:37 61 | 不会这么做的 62 | 63 | undefined 2019/03/01 上午9:37 64 | 那就做健康检查呀,机器开始发布的时候,告诉nginx忽略这台机器,第一台机器好的时候,封闭其他服务器访问就可以了 65 | 66 | ☀💤喵喵 2019/03/01 上午9:37 67 | 这项目好大啊,还用几个服务器 68 | 69 | ☀💤喵喵 2019/03/01 上午9:37 70 | [什么] 71 | 72 | ☀💤喵喵 2019/03/01 上午9:37 73 | 为啥要用那么多服务器呀 74 | 75 | 断线人偶 2019/03/01 上午9:37 76 | html不带hash,我是说静态资源带hash 77 | 78 | undefined 2019/03/01 上午9:38 79 | 为什么静态资源会和html在一台服务器上,cdn不是单独的服务器么。。 80 | 81 | 陌上 2019/03/01 上午9:38 82 | 这有什么为啥的,业务需求 83 | 84 | 断线人偶 2019/03/01 上午9:38 85 | 然后如果html是老的,无非是请求老的静态资源 86 | 87 | レイン 2019/03/01 上午9:38 88 | 公司大啊,所以小公司不会存在这个问题[捂脸] 89 | 90 | 断线人偶 2019/03/01 上午9:38 91 | 然后新的html走新的静态资源 92 | 93 | 陌上 2019/03/01 上午9:38 94 | 所以你静态资源不要覆盖就行了 95 | 96 | 陌上 2019/03/01 上午9:38 97 | 就按照版本分开同时存在,定期清理老的 98 | 99 | 断线人偶 2019/03/01 上午9:38 100 | 我这边部署时,静态资源都是带hash的,不进行覆盖部署 101 | 102 | ChasLui 2019/03/01 上午9:39 103 | 估计你们是静态资源都没带版本号也没带 hash 吧 104 | 105 | ChasLui 2019/03/01 上午9:39 106 | 每次发布等于覆盖了 107 | 108 | 陌上 2019/03/01 上午9:39 109 | 你直接带hash不分版本,到后期东西越来越多维护起来都麻烦 110 | 111 | レイン 2019/03/01 上午9:40 112 | 带了版本号的 113 | 114 | 陌上 2019/03/01 上午9:40 115 | 带了版本号还有什么问题 116 | 117 | undefined 2019/03/01 上午9:40 118 | 。。他的意思应该是,请求从A服务器获取Html但是从B服务器获取静态资源了 119 | 120 | レイン 2019/03/01 上午9:40 121 | 带了版本号跟非覆盖式发布是两回事 122 | 123 | レイン 2019/03/01 上午9:40 124 | 带了版本号是覆盖式发布 125 | 126 | レイン 2019/03/01 上午9:40 127 | 对 128 | 129 | レイン 2019/03/01 上午9:40 130 | undefined 懂我 131 | 132 | 断线人偶 2019/03/01 上午9:41 133 | 你说的版本号是指url的查询字符串中带了版本号吧…… 134 | 135 | undefined 2019/03/01 上午9:41 136 | CDN应该是一个单独的集群 137 | 138 | レイン 2019/03/01 上午9:41 139 | 是的 140 | 141 | 陌上 2019/03/01 上午9:41 142 | 你静态资源不是单独集群么 143 | 144 | レイン 2019/03/01 上午9:41 145 | vue发布的时候都是build后无差别的把构建后的包发布到各个节点 146 | 147 | レイン 2019/03/01 上午9:42 148 | 模版和资源在一起的 149 | 150 | レイン 2019/03/01 上午9:42 151 | 你们都是分开的? 152 | 153 | undefined 2019/03/01 上午9:42 154 | 恩 155 | 156 | 断线人偶 2019/03/01 上午9:42 157 | 单独的 158 | 159 | 陌上 2019/03/01 上午9:42 160 | 单独做的啊,我们静态资源是放oss的 161 | 162 | undefined 2019/03/01 上午9:42 163 | 静态资源单独上CDN 164 | 165 | レイン 2019/03/01 上午9:42 166 | 你们cdn只放静态资源 不放html模版? 167 | 168 | 断线人偶 2019/03/01 上午9:42 169 | 静态资源单独上CDN+1 170 | 171 | undefined 2019/03/01 上午9:43 172 | html走vanish 173 | 174 | レイン 2019/03/01 上午9:43 175 | 那你们模版单独放一个服务器还是多个 176 | 177 | 断线人偶 2019/03/01 上午9:43 178 | 多个 179 | 180 | 断线人偶 2019/03/01 上午9:43 181 | 但静态资源是带hash的,也就是说新老资源是同时存在的 182 | 183 | レイン 2019/03/01 上午9:44 184 | 那就没差啊,还是会有问题 185 | 186 | 断线人偶 2019/03/01 上午9:44 187 | 如果请求到的是老的html,就走老的资源,请求到新的html就走新资源 188 | 189 | 断线人偶 2019/03/01 上午9:44 190 | 不会有问题 191 | 192 | ChasLui 2019/03/01 上午9:44 193 | 不会有问题 访问老 html 加载老资源 访问新 html 加载新资源 194 | 195 | 陌上 2019/03/01 上午9:44 196 | 你进A服务器,新的html,访问的是CDN新的资源。有人进了B服务器,是老的html,访问CDN上老的资源 197 | 198 | 陌上 2019/03/01 上午9:45 199 | 还是有问题的问题出在哪 200 | 201 | レイン 2019/03/01 上午9:45 202 | 所以你们是先发布静态 再发布模版对吧 203 | 204 | ChasLui 2019/03/01 上午9:45 205 | 当然啊 206 | 207 | レイン 2019/03/01 上午9:45 208 | 等等我缕缕 209 | 210 | 陌上 2019/03/01 上午9:45 211 | 静态资源肯定是先上传的 212 | 213 | レイン 2019/03/01 上午9:45 214 | 有点乱 215 | 216 | 断线人偶 2019/03/01 上午9:46 217 | 肯定是先发布静态资源……不然就会出现请求404了 218 | 219 | undefined 2019/03/01 上午9:46 220 | 一般的过程是先构建,再发布,构建把页面build了,静态资源上cdn,然后再一台一台机器发布html 221 | 222 | . 2019/03/01 上午9:49 223 | 为什么不凌晨再release 224 | 225 | 呼吸 2019/03/01 上午9:49 226 | 紧急发布不能等 227 | 228 | undefined 2019/03/01 上午9:49 229 | 一般不是非常大的改动,不需要凌晨release吧 230 | 231 | 呼吸 2019/03/01 上午9:49 232 | [奸笑] 233 | 234 | 陌上 2019/03/01 上午9:50 235 | 选时间只是降低了问题带来的副作用但是并没有解决问题 236 | 237 | レイン 2019/03/01 上午9:50 238 | 好像是没有问题了 239 | 240 | レイン 2019/03/01 上午9:50 241 | 按照你们的套路来 242 | 243 | 陌上 2019/03/01 上午9:50 244 | 你这样就等于变成滚动式发布了 245 | 246 | 陌上 2019/03/01 上午9:50 247 | 肯定没问题啊 248 | 249 | レイン 2019/03/01 上午9:50 250 | 都是凌晨发的。。。。 251 | 252 | レイン 2019/03/01 上午9:50 253 | 凌晨三点 254 | 255 | ChasLui 2019/03/01 上午9:51 256 | 凌晨发布不是解决问题的根本办法 257 | 258 | レイン 2019/03/01 上午9:51 259 | 中午我得给我老大说一下,昨晚他把我搞蒙了 260 | 261 | レイン 2019/03/01 上午9:51 262 | 关键还是要非覆盖式发布啊 263 | 264 | undefined 2019/03/01 上午9:51 265 | 嗯啊 266 | 267 | 陌上 2019/03/01 上午9:51 268 | 覆盖式有问题的 269 | 270 | 陌上 2019/03/01 上午9:52 271 | 比如你上线发现了问题,也没有办法很快回滚,静态资源都覆盖了,还要重新把上版本代码重新打包发布 272 | 273 | ChasLui 2019/03/01 上午9:52 274 | 而且也方便回滚, 要是万一出问题了, 把 html 还原就好了 275 | 276 | レイン 2019/03/01 上午9:52 277 | 不,其实关键是要把html 和静态资源分开 278 | 279 | レイン 2019/03/01 上午9:52 280 | 不能放一起上 281 | 282 | レイン 2019/03/01 上午9:53 283 | 多谢 大佬们🙏 284 | 285 | 286 | 287 | ### NO2 288 | 289 | 290 | #### 问题描述 291 | 请问vue-cli 3.0 怎么配置 配置 https://aaa.bbb.tech/index.html, , build时改成 成 https://aaa.bbb.tech/staff/index.html 这种额 这种额 292 | #### 问题解答 293 | https://cli.vuejs.org/zh/config/#baseurl 294 | 295 | 去看看chain-webpak的api应该都有 296 | 297 | ### NO3 298 | 299 | #### 问题描述 300 | 大佬们,有个换系统主题样式的需求,字体颜色可以解决,但是图标颜色有没有好的建议哈? 301 | 302 | 图标我现在是用的图片 303 | #### 问题解答 304 | Anx& 2019/03/01 上午11:11 305 | svg 还是 font-icon 306 | 307 | undefined 2019/03/01 上午11:12 308 | 原来是红色图标 要粉色就叠个CSS的白色透明遮罩上去,当然还是font-icon最好 309 | 310 | 简默丶Xs 2019/03/01 上午11:13 311 | @undefined font-icon有文档吗,可以给我看看吗 312 | 313 | L - 勋 2019/03/01 上午11:16 314 | 字体颜色是以什么方式换的,是更换样式文件吗?如果要换ui给的图片,直接改背景图路径不就行了 315 | 316 | 简默丶Xs 2019/03/01 上午11:16 317 | 不可能项目里放那么多不同颜色的图片1 318 | 319 | 简默丶Xs 2019/03/01 上午11:16 320 | 不现实啊 321 | 322 | undefined 2019/03/01 上午11:16 323 | iconfont.cn 324 | 325 | undefined 2019/03/01 上午11:17 326 | 阿里的图标库,你可以参考下他的使用方式 327 | 328 | undefined 2019/03/01 上午11:17 329 | 可以直接修改color来改变图标颜色的 330 | 331 | 332 | ### NO4 333 | 334 | #### 问题描述 335 | レイン 2019/03/02 14:27:04 336 | 337 | 你们公司的产品迭代没有做持续集成吗?发布的时候是怎么把build完后的包中的模版跟静态资源拆分开分别发的? 338 | 按你说的先发静态再发模版的方式,是本地拆好后发上去的吗? 339 | 340 | #### 问题解答 341 | 陌上 2019/03/02 14:28:37 342 | 343 | 我们是把静态资源打包到static文件夹,然后把static上传到oss(阿里云的服务),其他的就传到对应服务器。 344 | 345 | レイン 2019/03/02 14:31:05 346 | 347 | 那你们这两部操作是在哪里进行的,本地?我们这边是写的shell脚本在jenkins上做的构建打包,然后再打到服务器上的,这样就把构建完的产物整个都部署到服务器了没法拆分静态。 348 | 349 | 陌上 2019/03/02 14:31:32 350 | 351 | 打包机上运行的 352 | 353 | レイン 2019/03/02 14:32:29 354 | 355 | 那你们也是用脚步做的拆分的工作?还是说你们的打包配置本来就没把模版和静态打到一起? 356 | 357 | 陌上 2019/03/02 14:33:19 358 | 359 | 打包配置就分开了,然后脚本负责对不同的文件做不同的上传。当然我觉得你打包完成以后用node去处理一下文件的目录结构也是可以的。 360 | 361 | レイン 2019/03/02 14:34:57 362 | 363 | 打完再处理,感觉脚本会比较难写。 364 | 365 | 陌上 2019/03/02 14:40:48 366 | 367 | 还可以,毕竟你打包机肯定有node环境,用js写脚本就行了,在打包结束node运行一下。 368 | 369 | 370 | ### NO5 371 | 372 | #### 问题描述 373 | A? 374 | 375 | 有人知道vue如何实现主动传值给父组件吗,就是只要子组件值变化了,就传给父组件 376 | 377 | #### 问题解答 378 | 子组件触发父组件事件,把数据带过去 379 | 380 | 381 | ### NO6 382 | 383 | #### 问题描述 384 | A? 385 | 386 | 微信一直没拿到openid,有大佬遇到过吗? 387 | 388 | #### 问题解答 389 | 断线人偶 390 | 391 | 拿openid,除了文档上的调用顺序外,就是关于公众号后台相关的配置了,而且有安全域名的限制,然后微信公众号后台还有一些配置,主要是配置安全域名之类的。 392 | 393 | A? 394 | 395 | 是不是走注册中心时,报错了 396 | 397 | 断线人偶 398 | 399 | 看一下后端的日志,另外,前端我记得微信js-sdk有一个debug的选项,可以看到具体是什么错 400 | 401 | A? 402 | 403 | 微信菜单和后台是怎么交互的 404 | 405 | 断线人偶 406 | 407 | 微信的菜单只是配置一些安全调用域名以及ip白名单之类的,然后需要获取openid时,前端页面发ajax请求到后台,后台按微信文档的要求拼接好请求串后加给前端,前端直接访问,此时微信中的H5页面就会弹窗让用户授权,用户授权之后会将授权码返回给你之前拼接的回调地址拿,然后授权码,再拼接请求用户信息的url,请求正常返回就可以拿到用户的信息了…… 408 | 409 | 410 | ### NO7 411 | 412 | #### 问题描述 413 | A? 414 | 415 | JS 如何定义一个数组啊? 416 | 417 | #### 问题解答 418 | 姬如雪 419 | 420 | var a = new Array(); 421 | var a = ["first", "second", "third"]; 422 | 423 | A? 424 | 425 | 能直接a=b,把b数组赋值给a吗? 426 | 427 | 姬如雪 428 | 429 | js里的数组就是指针,你这样是让a和b指向同一块内存 430 | 431 | ### NO8 432 | 433 | A? 434 | ``` 435 | function fun (n, o) { 436 | console.log(o); 437 | return { 438 | fun: function (m) { 439 | return fun(m, n); 440 | } 441 | } 442 | } 443 | 444 | var c = fun(0).fun(1); 445 | c.fun(2); 446 | c.fun(3); 447 | 448 | 我有问题请教,var c = fun(0).fun(1); 这里怎么调用的? 449 | ``` 450 | 451 | #### 问题解答 452 | 白熊 453 | 454 | fun(0),第二个参没传,打印ubdefined,返回一个对象,有一个fun属性,然后点fun(1)就是调用这个fun属性,此时m是1,n是上次传的0,就是fun(1,0),又返回一个对象(最后赋值给c),有一个fun属性,之后的调用c.fun(x),不管传什么,打印的都是最近一次调用fun函数时传进来的第一个参数,就是打印1 455 | 456 | ### NO9 457 | 458 | #### 问题描述 459 | 问个api, 我记得有一个api, 给出一个数字100,就能返回一个数组[0,1,2,3,.......99,100] 460 | 461 | #### 问题解答 462 | ChasLui 463 | 464 | Array.from({length:100}, (v,k) => k) 465 | 466 | ### NO10 467 | 468 | #### 问题描述 469 | 有没有写过Node.js的C++ Addons的大佬,macOS debug环境是用lldb还是cppvsbdg啊 470 | 471 | #### 问题解答 472 | 吃圡死月不會碼代碼 473 | 474 | lldb 启动 node 475 | 476 | ### NO11 477 | 478 | #### 问题描述 479 | 宁柏龙 480 | 481 | 大家是怎么避免 图片加载引起的回流的? 482 | 483 | #### 问题解答 484 | undefined 485 | 486 | 提前占位,如果知道图片比例的话 487 | 488 | 宁柏龙 489 | 490 | ?怎么个张占法?抱一个宽度固定的盒子吗? 491 | 492 | . 493 | 494 | 图片路径后面带尺寸参数 495 | 496 | undefined 497 | 498 | padding-bottom占位 499 | 500 | 宁柏龙 501 | 502 | @.这个不是很灵活吧? 503 | 504 | . 505 | 506 | 看应用场景。绝对灵活性能没有那么好吧 507 | 508 | 宁柏龙 509 | 510 | 我在css里写了宽高,然后把netwrok模拟成3g,肉眼可以看到 图片先加载 再改变布局... 511 | 512 | 王思远 513 | 514 | 防止重排不管什么方式都需要知道图片的信息吧,不论是尺寸还是具体的宽高,否则一定会重排的吧? 515 | 516 | 517 | ### NO12 518 | 519 | #### 问题描述 520 | 521 | 路飞提问 522 | 523 | 第一个问题:目前前端,存不存在一套完美的自适应方案,比如H5自适应这块。比如后面要来的方屏(华为) 524 | 525 | 第二个问题:在缓存上,全栈级别的缓存是如何做的,前端缓存的难点在哪,有没有bp。 526 | 527 | 第三个问题:能不能以一种通俗的角度去理解构造函数和对象互为实例这个结论。 528 | 529 | 第四个问题:如何用派生类型去分析对象之间存在的原型关系。 530 | 531 | 欢迎讨论,发表看法。 532 | 533 | 534 | ### NO13 535 | 536 | #### 问题描述 537 | 龙骑士-尹志平 538 | 539 | 问一下大家,你们公司中,后台管理系统的权限是怎么实现的?完全有后台来控制还是前端来实现? 540 | 541 | #### 问题解答 542 | 雪鹰 543 | 544 | 我们的是后端控制的,有模块权限的 545 | 546 | ISXMG 547 | 548 | 都要实现,前端根据权限数据动态注册菜单和路由,后端拦截控制api访问 549 | 550 | 我要割麦子 551 | 552 | @龙骑士-尹志平 你可以了解下rbac和auth,两种权限管理系统的设计与实现 553 | 554 | 龙骑士-尹志平 555 | 556 | 我公司的后台管理系统是后台返给前端,前端取到对应的字段来判断显示与否 557 | 558 | 我要割麦子 559 | 560 | 这个都是在后端处理吧,前端没有数据源怎么知道显示? 561 | 562 | ChasLui 563 | 564 | @龙骑士-尹志平 可以参考下这篇文章 https://juejin.im/post/5c30c666518825261c1b7191 565 | 566 | 我要割麦子 567 | 568 | 这个是用rbac实现的 569 | 570 | 571 | ### NO14 572 | 573 | #### 问题描述 574 | . 575 | 576 | 有没有什么什么工具函数能比较两个对象并且返回差异的那部分? 577 | 578 | #### 问题解答 579 | QUJU 580 | 581 | http://ramda.cn/docs/#symmetricDifference @.,这个是比较数组的,我之前用过,对象的应该也好实现 582 | 583 | . 584 | 我找到了这个,https://www.npmjs.com/package/diff 585 | 586 | A 587 | 588 | Lodash 589 | 590 | . 591 | 我找了lodash没看到,数组就有,在写mongodb的增量更新 592 | 593 | 路飞 594 | 595 | 比较对象的,返回差异的。是浅比较还是深比较,可以尝试在一些源码库里搜一下对应的关键词,可以搜一下 value-equal.js,改一改就好了 596 | 597 | value-equal.js 598 | ``` 599 | var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; 600 | 601 | function valueEqual(a, b) { 602 | if (a === b) return true; 603 | if (a == null || b == null) return false; 604 | if (Array.isArray(a)) { 605 | return Array.isArray(b) && a.length === b.length && a.every(function (item, index) { 606 | return valueEqual(item, b[index]); 607 | }); 608 | } 609 | var aType = typeof a === 'undefined' ? 'undefined' : _typeof(a); 610 | var bType = typeof b === 'undefined' ? 'undefined' : _typeof(b); 611 | if (aType !== bType) return false; 612 | if (aType === 'object') { 613 | var aValue = a.valueOf(); 614 | var bValue = b.valueOf(); 615 | if (aValue !== a || bValue !== b) return valueEqual(aValue, bValue); 616 | var aKeys = Object.keys(a); 617 | var bKeys = Object.keys(b); 618 | if (aKeys.length !== bKeys.length) return false; 619 | return aKeys.every(function (key) { 620 | return valueEqual(a[key], b[key]); 621 | }); 622 | } 623 | return false; 624 | } 625 | export default valueEqual; 626 | ``` 627 | 628 | ### NO15 629 | 630 | #### 问题描述 631 | Ng Ui-hua 632 | 633 | 现在要让我加个请求错误跳转错误页,求支招,error的回调要写哪里呀 634 | 635 | #### 问题解答 636 | 路飞 637 | 638 | @Ng Ui-hua 你或许可以对post动手,通过一层代理完成ajax。当然如果这种形式很确定,是不是可以写一个babel插件来转换一下。胡诌完毕。 639 | 640 | Ng Ui-hua 641 | 642 | 写一层代理还是要对写在各个文件的post进行手动改动?写babel插件这么高端的工作我是做不来😂 643 | 644 | 路飞 645 | 646 | @Ng Ui-hua babel插件不高端,你可以去看看开源的插件怎么玩的。照猫画虎可以的。当然还得考虑现实情况,看你心情吧。ctrl c ctrl v快乐了也可以 647 | 648 | 649 | ### NO16 650 | 651 | #### 问题描述 652 | 路飞 653 | 654 | 突然想到一个问题,前端跨域,各种什么顶级域名不同不行,子域名不同不行。ip不同不行。那浏览器底层是通过一种方式进行判断的呢。字符串比较?正则?总不能死记硬背各种规则api 655 | 656 | #### 问题解答 657 | 炫 658 | 659 | 这个不是在浏览器判定的吧,好像在服务端吧? 660 | 661 | 波比小金刚 662 | 663 | @炫 跨域是浏览器拦截的 664 | 665 | 炫 666 | 667 | 在浏览器的请求中,跨域是不是只在ajax这种异步请求中出现? 668 | 669 | . 670 | 671 | @炫 还有iframe,浏览器的同源策略了解一下 672 | 673 | 炫 674 | 675 | 正在看这方面内容 676 | 前文提到的由 XMLHttpRequest 或 Fetch 发起的跨域 HTTP 请求。 677 | Web 字体 (CSS 中通过 @font-face 使用跨域字体资源), 因此,网站就可以发布 TrueType 字体资源,并只允许已授权网站进行跨站调用。 678 | WebGL 贴图 679 | 使用 drawImage 将 Images/video 画面绘制到 canvas 680 | 样式表(使用 CSSOM) 681 | 682 | 683 | ### NO17 684 | 685 | #### 问题描述 686 | レイン 687 | 688 | 大佬们,我们为啥引得是这个版本啊 689 | 690 | #### 问题解答 691 | . 692 | 693 | @レイン 因为webpack是基于node的模块打包工具,所以用common的比用esm的直接 694 | 695 | レイン 696 | 697 | 嗯嗯 那我们为啥不用vue.runtime.common.js ???,不是说好了,我build的时候会自动把模版编译好的吗?为啥还要用完整版的构建,有这么多版本 698 | 699 | . 700 | 701 | 因为你开发过程中他需要编译模板吧。最终打包进bundle里的应该只有runtime部分 702 | 703 | レイン 704 | 开发过程中的编译是vue-loader做的还是vue做的?没看见哪里说最终打包进去的只有runtime啊 705 | 706 | Ng Ui-hua 707 | 708 | vue loader我记得是识别.vue文件 709 | 710 | . 711 | 712 | @レイン 会split,splitChunks,只打包进被用到的代码,如果生产环境只需要runtime部分的话,就只打包这一部分 713 | 714 | 715 | ### NO18 716 | 717 | #### 问题描述 718 | 狼 719 | 720 | 大佬们,升级node的时候,报Error: invalid version 11.10.1,有什么办法处理吗 721 | 722 | #### 问题解答 723 | 我的小羊在睡觉 724 | 725 | 把电脑中的所有东西删干净,就是node的包 726 | 727 | undefined 728 | 729 | 你是怎么安装的node? 730 | 731 | 狼 732 | 733 | 直接用命令升级,安装了一个n命令,然后n stable,@我的小羊在睡觉 要手动清除吗 734 | 735 | 我的小羊在睡觉 736 | 737 | 嗯,手动 738 | 739 | 狼 740 | 741 | 搞好了,谢谢 742 | 743 | 744 | ### NO19 745 | 746 | #### 问题描述 747 | 太阳当空照 748 | 749 | let a = [{id:1},{id:2}] 有没有很简单操作 可以从a得到 b=[1,2] 750 | 751 | #### 问题解答 752 | . 753 | a.map(item => item.id) 754 | 755 | 756 | ### NO20 757 | 758 | #### 问题描述 759 | 追梦人 760 | 761 | websocket连接被拒绝是什么原因?有人遇到过没 762 | 763 | #### 问题解答 764 | 我要割麦子 765 | 766 | 端口号开了吗? 767 | 768 | 追梦人 769 | 770 | 我写端口号了 771 | 772 | 我要割麦子 773 | 774 | 服务端的端口号呢? 775 | 776 | 追梦人 777 | 778 | 也写了 779 | 780 | 我要割麦子 781 | 782 | 你得看下服务端的这个端口号是空闲的吗,不是写不写的问题啊,是被占用的问题,你写的这个端口号可能在干别的事情 783 | 784 | 追梦人 785 | 786 | 昨天刚学的,不太理解,怎么看端口号又没又被占用 787 | 788 | ### NO21 789 | 790 | #### 问题描述 791 | 有人知道js怎么解析二进制不?怎么运用到js中? 792 | 793 | 794 | #### 问题解答 795 | > 林键燃: 796 | 797 | 我做过一个应用场景是读取图片,然后上传给服务器,你需要一个具体的应用场景,比如移动端读取用户相册图片,压缩,上传 798 | 799 | > 追梦人: 800 | 801 | 那数据不是从后端读取过来的吗 802 | 803 | > 林键燃: 804 | 805 | 手机里的图片,是客户端,上传后,通过对应的 URI 就是访问到该图片。当然这张图片是被图片服务器正确处理的,使用 JS 的 FileReader 可以读取二进制大文件,然后就可以上传给服务器了 806 | -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/2019-03-下旬.md: -------------------------------------------------------------------------------- 1 | ### NO1 2 | 3 | #### 问题描述 4 | vue 怎么让二级路由和三级路由走同一个 keep-alive 5 | 6 | #### 问题解答 7 | 无法走同一个 keep-alive 8 | 9 | ### NO2 10 | 11 | #### 问题描述 12 | 各位大佬们,你们用的单元测试包是哪款呀? 13 | 14 | #### 问题解答 15 | 16 | 使用 `jest` 集成 `enzyme` 做 `react` 单测很舒服。 17 | 18 | 测试框架的比较可以点击下面链接: 19 | 20 | > https://stackshare.io/stackups/jasmine-vs-jest-vs-mocha 21 | 22 | 23 | ### NO3 24 | 25 | #### 问题描述 26 | 27 | 上传图片非常慢是什么原因丫? 28 | 29 | > 比如我们调用微信接口,同时上传最多八张图片,然后后台通过逻辑处理,包括图片和文字审核,审核图片是否违规。审核通过上传到服务器就很慢 30 | 31 | #### 问题解答 32 | 33 | 压缩,采用异步上传,优化图片格式。 34 | 35 | 36 | ### NO4 37 | 38 | #### 问题描述 39 | 40 | 如何处理接口返回的 code , 有的接口没有 code ,有的接口有 code 41 | 42 | #### 问题解答 43 | 44 | 用请求拦截器中统一处理。 45 | 46 | 47 | ### NO5 48 | 49 | #### 问题描述 50 | 51 | ![](https://user-gold-cdn.xitu.io/2019/6/12/16b4c32f7b81a11a?w=593&h=240&f=png&s=168789) 52 | 53 | 如图所示,这种该怎么优化 54 | 55 | #### 问题解答 56 | 57 | 1. 先解构赋值,然后使用 assign 58 | 59 | > 优化这个事情,也是分优先级的。优先级最高的应该是鲁棒性和异常处理。 60 | 61 | 62 | ### NO6 63 | 64 | #### 问题描述 65 | 66 | ![](https://user-gold-cdn.xitu.io/2019/6/12/16b4c4613f6bc2b2?w=461&h=632&f=png&s=72897) 67 | 68 | 如图所示,浅色和深色代表什么意识? 69 | 70 | #### 问题解答 71 | 72 | 深色是可遍历的,浅色不可遍历。 73 | 74 | 地址: 75 | 76 | > https://stackoverflow.com/questions/36535221/what-do-the-colors-mean-in-chrome-developer-tools-scope-panel 77 | 78 | 79 | ### NO7 80 | 81 | #### 问题描述 82 | 83 | ![](https://user-gold-cdn.xitu.io/2019/6/12/16b4c4aa57f8985a?w=474&h=708&f=png&s=242897) 84 | 85 | 请教大佬们一个问题,在项目中,有必要把页面的请求单独拎出来吗?如果有,那能给解释一下吗?我是习惯在页面写请求。除了一些请求城市之类的功能拎出来 86 | 87 | #### 问题解答 88 | 拎出来就是在解耦,而解耦是需要的。 89 | 90 | 如果你觉得这些 `js` 命名等看起来不直观,这里你可以把这些 `js` 分一下类,比如几个 `js` 是属于上传类的,几个 `js` 是处理 `image` 的等,再通过创建一个对应功能的类,然后把这些请求挂载到实例的方法上。 91 | 92 | 93 | 94 | 95 | ### NO7 96 | 97 | #### 问题描述 98 | ![](https://user-gold-cdn.xitu.io/2019/6/12/16b4c528beb183b7?w=1674&h=240&f=png&s=86006) 99 | 100 | 客户端注入 `runtime` ,怎么理解 `runtime` ? 101 | 102 | #### 问题解答 103 | 104 | 1. 运行时可以理解成不是你写,但是是维持你代码正确运行所必须的代码(JS 引擎的代码、依赖库的代码等。 105 | 2. 离开了runtime 你写的那些代码就是一坨文本 106 | 107 | 108 | 109 | ### NO8 110 | 111 | #### 问题描述 112 | 113 | ![](https://user-gold-cdn.xitu.io/2019/6/12/16b4c56c8c6d44c8?w=874&h=128&f=png&s=36268) 114 | 115 | 这种交互展示当天+7个自然日 这种交互怎么实现? 哪位大佬指点下。前端实现当天然后再加7个自然日 116 | 117 | #### 问题解答 118 | 119 | 抛开平年闰年大月小月,timestamp 是不受规则影响的,就是毫秒数。不用去考虑那么复杂,通通时间戳就解决了。 120 | 121 | 122 | ### NO9 123 | 124 | #### 问题描述 125 | 126 | generator yield 和 async await 的区别和应用场景有什么不同? 127 | 128 | #### 问题解答 129 | 130 | 如果玩过 dva的同学应该知道 在 dva的写法中用到的是 yield 131 | 132 | 如图所示: 133 | 134 | ![](https://user-gold-cdn.xitu.io/2019/6/12/16b4c5a7e2f044f2?w=2134&h=988&f=png&s=238699) 135 | 136 | 想一个问题,这段代码,为什么没有用await ,大家可以想一想。想通这个,就知道上面的区别了 137 | 138 | 139 | ### NO10 140 | 141 | #### 问题描述 142 | 143 | 有没有大佬用过canvas的库,可以实现比如用户点击画图的? 144 | 有那种能响应事件的吗,比如我点了四个点,就生成一个四边形 145 | 146 | #### 问题解答 147 | 148 | pixijs 149 | 150 | 151 | ### NO11 152 | 153 | #### 问题描述 154 | 哪位大佬做过H5页面,点页面里的分享按钮,能直接打开分享页面,而不用点击右上角 三个点 155 | 156 | #### 问题解答 157 | 这种劫持按钮的api一般都会有域名限制,他们内部都会针对每个api维护白名单。所以就算知道怎么用也不一定可以用 158 | 159 | ### NO12 160 | 161 | 162 | #### 问题描述 163 | 大家有用过这样的vue组件吗?日历组件,上下要有倾斜的幅度的 164 | 165 | #### 问题解答 166 | weixin147CY 此哥们写过一个这种组件。请联系他微信号 -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/2019-03-中旬.md: -------------------------------------------------------------------------------- 1 | ### NO1 2 | 3 | #### 问题描述 4 | for in 出来的 key 有必要重新检查一遍吗? 使用 for in 总是要用 hasOwnProperty 方法对每个 key 做一次校验? 5 | 6 | #### 问题解答 7 | > 断线人偶: 8 | 9 | in的方式是会将原型链上的属性都枚举出来的,所以用hasOwnProperty来判断是否是自身的属性,校验这个要看你具体的使用场景了,也就是说是不是要区分是自己的属性还是原型链上的属性。 10 | 11 | ### NO2 12 | 13 | #### 问题描述 14 | .container{ 15 | height: calc(100% - 40px); //注:减号前后要有空格,否则很可能不生效!! 16 | } 17 | 在移动端开发的过程中,常常会遇到头部高度是40px,而内容页是除去头部,占满视窗的整个高度,有时候是用js来处理,现在用css的calc是非常方便的 18 | 19 | 为什么不用margin-top 或者padding-tap呢? 20 | 21 | #### 问题解答 22 | > 你在我的航线上: 23 | 24 | 因为移动端可能要内嵌app或者内嵌微信小程序,会有双页头情况出现,这时候很有可能就需要把原来的页面的页头去掉,如果用margin-top会有空出,目前碰到有这种逻辑,可能这个也是这个计算方式出现的原因之一 25 | 26 | > Cloud: 27 | 28 | 嗯嗯,可以解决这种内嵌去掉原来页头的问题。我的页面h5页面带页头,内嵌到app里面,那这种是以我的页头为准还是app页面里面的页头? 29 | 30 | > 断线人偶: 31 | 32 | 这个要看app端对webview的设置吧,你们说的页头是自己的dom还是指title的设置? 33 | 34 | 35 | ### NO3 36 | 37 | #### 问题描述 38 | ios端禁止输入表情包的正则该怎么写啊= = 39 | 40 | #### 问题解答 41 | > 何呆呆: 42 | 43 | 百度知道,https://blog.csdn.net/liyujia6636/article/details/77600187 44 | 45 | 46 | ### NO4 47 | 48 | #### 问题描述 49 | 解释一下Nginx反向代理?在开发过程中如果前端配置了chrome支持跨域,就没必要用nginx了吧 50 | 51 | #### 问题解答 52 | > 断线人偶: 53 | 54 | 就是你的请求还是发往自己的域,通过nginx进行转发到真正请求的地方 55 | 56 | > ChasLui: 57 | 58 | https://juejin.im/post/5c85a64d6fb9a04a0e2e038c?utm_source=gold_browser_extension#heading-10,看看 59 | 60 | > Anx&: 61 | 62 | 服务端不存在同源策略,交给服务端去请求的意思 63 | 64 | 后端没有域名哪里来的跨域,直连指向后端服务器的ip。 65 | 66 | ### NO5 67 | 68 | #### 问题描述 69 | 70 | 获取下一个不明确的兄弟节点,用哪种方式更好?nextSbiling这个方法有点问题,问题在哪? 71 | 72 | #### 问题解答 73 | 74 | querySelector('dom + *') 75 | 76 | ### NO6 77 | 78 | #### 问题描述 79 | 80 | 如果对接一个模块 不同后端返回的字段名不一致,有啥比较好的方法处理返回的数据吗 81 | 82 | #### 问题解答 83 | 84 | 在node的代理层统一处理的。BFF 85 | 86 | 比如结构是:前端页面->node代理层->服务端接口。前端的一个ajax请求,到node层后,可能是需要node层同时请求服务端的多个接口,然后把数据封装成前端要的结构返回 87 | 88 | ### NO7 89 | 90 | #### 问题描述 91 | 这个需求是以一个新的数据合并并覆盖前面一个数据,如果后面对象数组数据为空,合并前一个时,把之前的数据覆盖。需要深层 merge 92 | 93 | #### 问题解答 94 | 使用 Immutable.js 95 | 96 | 97 | ### NO8 98 | 99 | #### 问题描述 100 | new Date获取的是计算机上面的显示的时间吗。 101 | 102 | 有个需求就是选的时间不能早于服务器时间,这个要怎么做呀,用VUE写的 103 | 104 | #### 问题解答 105 | https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date 106 | 107 | 委托的方法是从服务端送个时间节点过来 108 | 109 | ### NO9 110 | 111 | #### 问题描述 112 | this.theadFilter = this.theadFilter === key ? '' : key 弱弱的问下 这个先运算哪个?这会忘了 113 | 114 | #### 问题解答 115 | 优先级和结合性:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence 116 | 117 | ### NO9 118 | 119 | #### 问题描述 120 | 有哪位大佬有封装过小程序发送请求的接口,或者类似的库吗 121 | 122 | #### 问题解答 123 | ```js 124 | module.exports = api => { 125 | return (options, ...params) => { 126 | return new Promise((resolve, reject) => { 127 | api(Object.assign({}, options, { success: resolve, fail: reject }), ...params) 128 | }) 129 | } 130 | } 131 | ``` 132 | 133 | ### NO10 134 | 135 | #### 问题描述 136 | 如下图的样式 137 | 138 | ![](https://user-gold-cdn.xitu.io/2019/3/22/169a19baf5713282?w=360&h=600&f=png&s=212256) 139 | 140 | 这种怎么弄 141 | 142 | #### 问题解答 143 | 144 | css的masker去了解一下就知道怎么做了。 145 | 146 | ### NO11 147 | 148 | #### 问题描述 149 | 150 | 二进制转浮点,浮点在转二进制,怎么做? 151 | 152 | #### 问题解答 153 | 154 | 传给你 arrayBuffer,你 new DataView(buffer),然后 DataView.prototype.getFloat64() 155 | 156 | ### NO11 157 | 158 | #### 问题描述 159 | 你们有没有遇到过安装新包后总是报错缺少模块,要把node_modules删了重新install才能😓 160 | 161 | #### 问题解答 162 | 不要用cnpm 换回npm就好了。cnpm 会安装额外的包 163 | 164 | 用yarn 165 | 166 | ### NO12 167 | 168 | #### 问题描述 169 | 有人晓得 什么操作会让vue里的data 失去响应式的特性 170 | 171 | #### 问题解答 172 | 173 | https://github.com/vuejs/vue/issues/3596 174 | 175 | -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/2019-04-上旬.md: -------------------------------------------------------------------------------- 1 | ### NO1 2 | 3 | 4 | #### 问题描述 5 | 为啥我用nuxt,第一次进入这个页面可以请求到数据,刷新这个页面,就白屏呢? 6 | 7 | #### 问题解答 8 | weixin147CY 此哥们写过一个这种组件。请联系他微信号 9 | 10 | ### NO2 11 | 12 | 13 | #### 问题描述 14 | 大家有用过这样的vue组件吗?日历组件,上下要有倾斜的幅度的 15 | 16 | #### 问题解答 17 | weixin147CY 此哥们写过一个这种组件。请联系他微信号 18 | 19 | 20 | ### NO3 21 | 22 | 23 | #### 问题描述 24 | ![](https://user-gold-cdn.xitu.io/2019/6/13/16b4e6c01f850c34?w=723&h=502&f=png&s=55895) 25 | 26 | 27 | ![](https://user-gold-cdn.xitu.io/2019/6/13/16b4e6c578bb1f8b?w=875&h=208&f=png&s=47317) 28 | 29 | 运行时报错 30 | 31 | #### 问题解答 32 | 33 | mode 实际上就是定义process.env.NODE_ENV。上面的两张图是重复定义了,所以报错了。 34 | 35 | ### NO4 36 | 37 | 38 | #### 问题描述 39 | dva的model可以写单测吗 40 | 41 | #### 问题解答 42 | 43 | > https://www.jianshu.com/p/5cda9724e14e 44 | 45 | 46 | ### NO4 47 | 48 | 49 | #### 问题描述 50 | 拍照的图片太大,前端压缩图片,有什么好的方案 51 | 52 | #### 问题解答 53 | 54 | 1. picdiet.js 55 | 2. canvas压缩 56 | 3. https://github.com/bosscheng/canvas-rotate-image 结合 exif.js 57 | 58 | 59 | 60 | ### 其他问题 61 | 62 | 63 | #### 1 64 | 65 | 大神们,我们使用 H5 做移动 App,或者进行移动网站开发时。如果文本输入框在整个页面的下方,当我们点击输入框要输入文字时,系统弹出的虚拟键盘就会将输入框给挡住,怎么解决? 66 | 67 | 68 | 69 | #### 2 70 | 71 | 你们用什么工具将本地项目打包到线上啊 72 | 73 | 74 | #### 3 75 | 76 | 前后端分离前端模拟后台接口你们都是怎么搞的 77 | 78 | 1. mock.js 79 | 2. magic tools: DOClever ------ 大部分时间用doclever 只是用来约束java的- - ,我的java小伙伴容易放飞自我,然后改字段 80 | 3. easy mock 81 | 82 | 83 | #### 4 84 | 85 | 问个移动端适配的问题。我写的 html中 font-size: 13.3333vw;那么在750px的设计稿中 1rem也就等于100px了。长度宽度都没问题,但是我的字体转换后出奇的大,什么原因 86 | 87 | 88 | #### 5 89 | 90 | 另一个管理系统嵌入vue写的管理系统该怎么嵌入。另个系统还没上线,只能在本地和测试环境下跑 91 | 92 | 93 | #### 6 94 | 95 | 纯css怎么实现,兼容ie7 96 | 三栏布局 25% 50% 25% 97 | 三栏都限制最小宽度,如(320px,640px,320px) 98 | 在窗口满足最小宽度时,宽度始终为(320px,640px,320px) 99 | 100 | 101 | #### 7 102 | 长期对着电脑工作,应该如何选择眼药水? 103 | 104 | 1. 日本的FX眼药水挺好用 105 | 106 | #### 8 107 | 108 | nodejs是不是不能实现ping? 109 | 110 | 1. https://github.com/QuantumSheep/node-icmp/blob/master/index.js 111 | 112 | > 不过其实这种东西嘛,也不一定非要用 node 去实现它。可以有很多种方案的。 113 | 1、子进程调用 ping 命令,解析返回的结果 114 | 2、C++ 扩展使用 ICMP 协议 115 | 3、通过 TCP 确定网络连通性 116 | 4、通过 node.js 通过 SOCK_RAW 简单实现 117 | 118 | 119 | #### 9 120 | 121 | 群友遇到的面试题 122 | 123 | 1. 写过 webpack 的 loader吗。 Loader为什么是function,Plugin为什么是class 124 | 2. 口述观察者模式 125 | 3. 手写Bind 126 | 4. 说一说 vuex 为什么需要commit 这么麻烦的步骤,直接改就是了,vue为什么要这么做 127 | 128 | 129 | #### 10 130 | 131 | 问大家一个css问题,为啥他俩之间有缝隙呢,pc正常,用手机模式浏览就有缝隙 132 | 133 | 1. 缺少 设置。少了 viewport 的设置 134 | 135 | 136 | ### 其他 137 | 138 | #### 1 139 | 140 | 既有数组又有对象的数据该怎么确保属性值都有效,比如表单验证 141 | 142 | 1. 递归 143 | 2. 遍历一下,碰到数组就拍平再读key,碰到对象就直接读key 144 | 3. async-validator 或者 orm 或者 yup 或者 joi 145 | 146 | 147 | #### 2 148 | 149 | antd table组件在没让里面的内容轮播。表头固定,滚动table 150 | 151 | 1. 在table上写个 transition: transform .3s ease-out;然后用 js 控制transform的值 152 | 2. scrollBy 153 | 154 | 155 | ```css 156 | .ant-table-wrapper ::-webkit-scrollbar 157 | { 158 | width: 0px; 159 | height: 0px; 160 | background-color: #F5F5F5; 161 | } 162 | 163 | /*定义滚动条轨道 内阴影+圆角*/ 164 | .ant-table-wrapper ::-webkit-scrollbar-track 165 | { 166 | box-shadow: inset 0 0 1px rgba(0,0,0,0); 167 | border-radius: 10px; 168 | background-color: #F5F5F5; 169 | } 170 | 171 | /*定义滑块 内阴影+圆角*/ 172 | .ant-table-wrapper ::-webkit-scrollbar-thumb 173 | { 174 | border-radius: 0; 175 | box-shadow: inset 0 0 6px rgba(0,0,0,.3); 176 | background-color: #f00; 177 | } 178 | ``` 179 | 180 | #### 2 181 | 182 | create-react-app 生成的项目 怎么配置使用less 183 | 184 | 1. 如果要自定义配置文件,需要eject 185 | 186 | -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/2019-04-下旬.md: -------------------------------------------------------------------------------- 1 | ### NO1 2 | 3 | #### 问题描述 4 | ```js 5 | [ 6 | {id: 1, parentId: -1, name: 1}, 7 | {id: 2, parentId: 1, name: 2}, 8 | {id: 3, parentId: 2, name: 3} 9 | ] 10 | 11 | 怎么处理成 12 | 13 | { 14 | id: 1, 15 | parentId: -1, 16 | name: 1, 17 | children: [ 18 | { 19 | id: 2, 20 | parentId: 1, 21 | name: 2, 22 | children: [ 23 | { 24 | id: 3 25 | } 26 | ] 27 | } 28 | ] 29 | } 30 | ``` 31 | 32 | #### 问题解答 33 | 34 | 1. map 35 | 2. reduce 36 | 3. 递归 37 | 38 | ### NO2 39 | 40 | #### 问题描述 41 | 怎么修改element-ui的字体样式,我用!importrant覆盖不了他原有的样式。 42 | 43 | 44 | #### 问题解答 45 | 不要用deep,不要用scoped 直接在根组件重写class的样式,覆盖掉。类似reset的概念 46 | 47 | 48 | ### 其他问题 49 | 50 | #### 1 51 | 52 | 分片,上传进度条,用什么比较好。 53 | 54 | 1. setTimeout 和 节流 55 | 56 | 57 | #### 2 58 | 59 | 在业务组件嵌套很深的情况下如何保持 BEM 60 | 61 | 1. 感觉用bem后期找一个样式要找好久 62 | 2. 文件名 vue 的 component 的 name 还有 class 都是一样的 63 | 64 | 65 | #### 3 66 | 67 | lodash 什么场景好用 68 | 69 | 1. B端业务随便用,debounce和throttle都好用 70 | 71 | #### 4 72 | 73 | 1. vuex-pathify 推荐, 再也不用写一堆的 mutation 和 getter 了 74 | 2. vuex-orm 推荐, 结合,vuex-orm axios ,简直是crud 神器, 后端接口也要约定好 75 | 3. joi 76 | 77 | 78 | #### 5 79 | 80 | element ui table得formatter我想给他返回html标签可以吗 81 | 82 | 1. 用插槽啊 绑到v-html上就能传过去了 83 | 2. 你可以给他加个props啊,要用的地方就为true,默认不显示就好了啊 84 | 3. v-html要慎用哟 85 | 86 | #### 6 87 | 88 | 各位大佬,react项目里埋点,有什么好的方案吗。我要打死业务怎么办? 89 | 90 | 1. 通用数据sdk统一打点 独特的数据通过HOC集中到一起,尽量和业务解耦吧 91 | 2. 想过这种方式,不过层次会多一层,每次埋点的地方都要用HOC替换。vue里面可以使用指令实现,react没有这种功能 92 | 3. 死业务也要集中 埋点格式 数据都要集中一下 暴露一个方法给业务组件调用就好了 93 | 4. 组件导出的时候用HOC包一下就好了 其实没什么耦合 fragement也不会增加实际的DOM层次 94 | 95 | 96 | #### 7 97 | 98 | axios的拦截器能做什么 99 | 100 | 1. 增加全局加载 101 | 102 | #### 8 103 | 104 | 你们富文本编辑器用的是什么? 105 | 106 | 1. VueQuilEditor 107 | 108 | #### 9 109 | 110 | get方法的 queryString 是不是只能传 string? 不能 number 或 bool 之类的? 111 | 112 | 1. http协议不认识数据结构,传的都是字符串,后台接收,把字符串转成对应的数据结构,比如nodejs转成json,php转成array 113 | 114 | #### 10 115 | 116 | 使用vue router 点击浏览器的后退按钮 你们知道其中执行了什么操作吗,有的页面按后退 返回的404页面[捂脸] 是路由配置有啥问题吗 117 | 118 | 1. 看样子是history模式,history模式服务器需要设置下重定向,建议不要用history,麻烦太多 119 | 2. 建议调试用hash,上线再改成history 120 | 3. devServer有个配置项 historyApiFallback 设置为true试试 121 | 122 | 123 | #### 11 124 | 125 | 使用mock.js总是拦截不到ajax请求 126 | 127 | 1. 应该是开了proxy,把整个proxy注释掉试试 128 | 2. 因为影响到mock,所以没用dva 和umi 129 | 130 | 131 | #### 12 132 | 133 | react怎么配置路由懒加载 134 | 135 | 1. [脑阔疼的webpack按需加载](https://juejin.im/post/5bf61082f265da616a474b5c) 136 | 2. [如何搭建一个REACT全家桶框架](https://juejin.im/post/5c9d88ea6fb9a070c6189d69#heading-19) -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/2019-04-中旬.md: -------------------------------------------------------------------------------- 1 | ### NO1 2 | 3 | #### 问题描述 4 | axios跨域问题怎么解决 5 | 6 | > 状态码200 但是报错 axios 也设置了请求头 7 | 8 | #### 问题解答 9 | 10 | > 第一个解决方案: 11 | 12 | 前端 起一个 proxy 走转发,比如在package.json中增加一个proxy字段 13 | 14 | > 第二个解决方案: 15 | 16 | 让后端配置一下,设置好跨域 比如 Access-Control-Allow-Origin: '*'`` 17 | 18 | 19 | ### NO2 20 | 21 | #### 问题描述 22 | 23 | 24 | #### 问题解答 25 | 26 | 27 | 28 | ### 其他问题 29 | 30 | 31 | #### 1 32 | 33 | 为什么 npm run serve 就可以 直接运行vue-cli-service serve就不行了 34 | 35 | 1. 因为你没有全局安装 要 `npx vue-cli-service serve` 36 | 37 | #### 2 38 | 39 | h5 input 输入框 吊起键盘输入文字 之后 怎么下来 40 | 41 | 1. scrollIntoView 可以解决这个问题 42 | 43 | #### 3 44 | 45 | cors问题 46 | 47 | 1. 要么在服务器加cors 要么你本地用个chrome 的 acess alow插件 48 | 49 | 50 | #### 4 51 | 52 | ![](https://user-gold-cdn.xitu.io/2019/6/19/16b6d4bc4666e218?w=1451&h=723&f=png&s=251787) 53 | 54 | 55 | ![](https://user-gold-cdn.xitu.io/2019/6/19/16b6d4bd828cf085?w=1152&h=111&f=png&s=21825) 56 | 57 | 如果所示,请教一个问题,这里有 i 个 p 元素, 循环改变 每一个p的width的时候, 58 | 为什么只有一次 Recalculate Style ? 59 | 60 | 1. 可能是浏览器的问题,重绘回合并,在chrome中,reflow 也会合并 61 | 62 | #### 5 63 | 64 | 在用Flux架构解决了mvc数据混乱的问题之后,mvvm比mvc还有什么优势么... 65 | 66 | 67 | #### 6 68 | 69 | 请教一个问题 在开发chrome插件的时候如何让插件打开一个我自带的html页面 70 | 71 | #### 7 72 | 73 | 你们在写组件库的时候,单个组件的样式是写在组件目录里,还是写在单独的style中。 74 | 75 | 1. 我更倾向一种混合式的模式。 76 | 有一个module,里面维护着 color.less、block.less......diy.less 77 | 虽然大部分时候,ui框架足够强大,但是细节的定制化却难以权衡。 78 | 更多时候diyElement 成为一种选择,一般这些细节定制化,还是写在对应组件内,经过长期的这么干,觉得两者混合起来写,能剩不少力气,也不用把自己局限在某个ui框架上 79 | 80 | 1. 从个人角度看怎么方便debug 就怎么来😂 81 | 82 | 83 | #### 8 84 | 85 | 写项目时,前端的功能模块,目前已什么样的方式输写会比较好呀;以下两种方式,哪种会多一点呢; 86 | 87 | 1. 方式一: 功能分类(所有controller放一个目录,所有service放一个目录,所有dto放一个目录,所有配置放一个目录,等。。。) 88 | 2. 方式二:模块分类(以业务模块归类,将一个业务对应的controller,service,dto,entity等放在一个目录下) 89 | 90 | #### 9 91 | 92 | 我在发布更新新版本的时候,用户恰巧打开系统,此时用户访问的是浏览器之前缓存的页面和数据,但是刷新一下页面之后就不会有这种问题了 有什么好的办法或者思路可以提供吗? 93 | 94 | 1. SSE 长连接 成本高 95 | 2. 关键问题就是检查静态资源版本和最新版本是否一致,然后提示弹窗刷新页面。没那么复杂,这种实时性要求不高的轮询就够用了 96 | 3. webSocket 97 | 98 | #### 10 99 | 100 | nodejs 怎么支持 import 101 | 102 | ![](https://user-gold-cdn.xitu.io/2019/6/19/16b6d804cfe2c6d5?w=678&h=498&f=png&s=213012) 103 | 104 | #### 11 105 | 106 | 大佬们管理前后端接口文档用什么工具 107 | 108 | 1. YApi --------- 人多 109 | 2. swagger 110 | 3. wiki 111 | 4. rap2 112 | 5. vuepress 113 | 114 | 115 | #### 12 116 | 117 | 你们知道为啥在vue 项目中 有时候debugger 在谷歌上看不是对应的debugger位置吗。。。 118 | 119 | 1. 好像脚手架debuggerr调试看到的东西不是真实log出来的东西 120 | 2. 找bug断点 老断到html去 121 | 3. 好像有这种情况 有时候console也不是那个位置 122 | 123 | #### 13 124 | 125 | 老哥们,现在有个需求,两个下拉菜单是 1-1的关系,选一个都会改变另外一个。vue除了watch两个下拉选,还有什么更好的方法吗 126 | 127 | 1. 不用watch,computed 可以直接直接用组件的@change事件去做逻辑修改 change就足够了 128 | 129 | 130 | #### 14 131 | 132 | 如何杜绝后端接口返回各种奇葩数据 133 | 134 | 1. 我这边后端返回如果没有数据的话,我们做的中间层会返回一个{},node处理好返回过来保证不是乱七八糟的东西 135 | 2. 我这边就是在http请求后做了拦截器 固定了格式 136 | 3. 我们做了ssr,很顺手的起了node服务,所有接口都是客户端发给node,node进行转发 137 | 4. node做网关层其实挺好的 138 | 139 | #### 15 140 | 我们都知道组件件传递消息有eventBus和vuex,或者用props等等的方式循环递归去写,那么你还知道有什么更优雅的方式吗 141 | 142 | 1. websocket分发 143 | 2. cookie,localStorage -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/2019-05-上旬.md: -------------------------------------------------------------------------------- 1 | ### NO1 2 | 3 | #### 问题描述 4 | redux 中存的是 immutable 类型的, 但 redux devtools 调试的时候,为什么能直接看到普通对象呢? 5 | 6 | 我认为 redux devtools 扩展里面看到的应该也是 immutable 类型 的呀 7 | 8 | #### 问题解答 9 | 无法走同一个 keep-alive 10 | 11 | ### NO2 12 | 13 | #### 问题描述 14 | 目前前端界,主流的状态管理方案。比如 vuex redux mobx dva 15 | 16 | 相同点是什么,不同点是什么。有没有其他好的不为人知的方案 17 | 18 | 在用完这些方案后的个人感受 19 | 20 | #### 问题解答 21 | Vuex、Flux、Redux、Redux-saga、Dva、MobX 22 | 23 | https://zhuanlan.zhihu.com/p/53599723 24 | 25 | ### 其他问题 26 | 27 | 28 | #### 1 29 | 30 | 请问如何在node中获取delete方式发起的请求的参数 31 | 32 | 1. req.body 33 | 2. get也可以从body传 postman可以 axios没试过 34 | 35 | 36 | 37 | #### 2 38 | 39 | 你们在vue项目中,如何规范 mixin 的方法和变量的命名规范的? 40 | 41 | 42 | #### 3 43 | 44 | 大家有没有遇到过vue 的父组件更新prop属性 info.amount 然后子组件监听info.amount 然后父组件修改的时候 不触发子组件的watch 45 | 46 | 1. 加 deep true watch的深度监听 47 | 48 | 49 | #### 4 50 | 51 | 有办法用css控制svg的渐变吗,background控制不到svg,很难受,fill可以,但是也只能单色 52 | 53 | 1. 你试试先写一个渐变的svg 然后将要渐变的svg的url指向他 54 | 55 | #### 5 56 | 57 | 大佬们 如何优雅的判断一个数在某个区间 比如说将 0-360的角度分为8个方向 怎么不用一直都是 if else if 58 | 59 | ``` 60 | var angles = [ 61 | [0, 45, 'A'], 62 | [45, 90, 'B'], 63 | [90, 135, 'C'], 64 | [135, 180, 'D'] 65 | ] 66 | var num = 88, 67 | pos; 68 | for(let i = 0, len = angles.length; i < len; i++) { 69 | if (num >= angles[i][0] && num < angles[i][1]) { 70 | pos = angles[i][2]; 71 | break; 72 | } 73 | } 74 | 75 | console.log(pos) 76 | ``` 77 | 78 | #### 5 79 | 80 | 这么一个场景:a页面引入一个js,这个js里面有一些屏蔽键盘事件的方法,然后切换到b页面,怎么消除这个js带来的影响(vue) 81 | 82 | 1. 在上一个页面的beforedestroy里面,把事件解绑 83 | 84 | 85 | #### 6 86 | 87 | 在一个svg图片中引入另有一个svg图片应该怎么做?? 88 | 89 | 多个SVG图形集成到一个SVG图形上 : https://www.cnblogs.com/Man-Dream-Necessary/p/5715843.html 90 | 91 | 如果上面的不好使,那用url指向另一个svg试试,看看好不好使 svg css -> url 92 | 93 | 94 | #### 7 95 | 96 | 移动端1px 97 | 98 | 1. scale 99 | 100 | 101 | #### 8 102 | 103 | rxjs的使用场景 104 | 105 | 1. 一般多用于时序比较密集的应用吧,像直播,或者在某一个时间段内要处理大量复杂的异步操作 106 | 2. 流程操作易掌控,而且方便统一数据来源,而且还得处理很多异步数据源 107 | 3. 在于数据映射吧。。 rx可以很好地控制变与不变,把一个数据源的内容映射到多个stream里面。然后数据一旦发生变化就能订阅这个stream的数据, 108 | 不用关心怎么变的,只需要管你变了没。 109 | 4. redux 就是rx的一个scan , rx就是一个util库。rx和redux即使一起用都可以的 就是会比较重 110 | 5. rx做数据映射 redux做数据管理 111 | 6. redux-observable 就是 redux和rx的结合 112 | 113 | #### 9 114 | 115 | rx和redux结合有什么best practice吗? 116 | 117 | 举个示例,类似这样的超时重试就能方便简洁 118 | 119 | ![](https://user-gold-cdn.xitu.io/2019/6/19/16b6e1ad8ba875f1?w=717&h=616&f=png&s=96725) 120 | 121 | #### 10 122 | 123 | 用hooks的时候每次serState就会触发useEffect 能不能只让他触发一次。我想延迟1s干一件事情 然后不用在触发了 可以我这样写每次每隔一秒都会触发一次 也就是说只要setState了就会触发useEffect 124 | 125 | 1. 单例模式 126 | 2. https://github.com/streamich/react-use 127 | 3. useEffect第二个参数设为[] 128 | 129 | #### 11 130 | 131 | 你们平时多个项目中的公用组件,除了搭建私服处理以外,还有没其他办法处理? 132 | 133 | #### 12 134 | 135 | nuxt asyncData里面请求数据 刷新页面就不会重新渲染 有人遇到过嘛 136 | 137 | 138 | #### 13 139 | 140 | 小的知识点 141 | 142 | 1. include 里面写的是 组件的 name 143 | 2. 一直觉得组件的name是个鸡肋 都没用过。你用递归组件的时候,也会用到 name 144 | 145 | 146 | #### 14 147 | 148 | 给数组添加元素的时候,使用concat还是push 149 | 150 | 1. concat 151 | 2. 扩展符号 [...arr, item] 152 | 153 | #### 15 154 | 155 | 一个方法内有同步、异步操作,该方法在一直循环的情况下,能否让异步操作一直在同步操作之后 156 | 157 | 1. async await 158 | 159 | #### 16 160 | 161 | iOS系统下的h5页面滑动卡顿,添加-webkit-overflow-scrolling:touch后,滑动的时候上下定位的元素会被遮挡住 162 | 163 | 1. 苹果的不要用fixed,要用 position: -webkit-sticky!important; 164 | 165 | #### 17 166 | 167 | 有什么方法可以校验上传到服务器的图片是否完整吗 168 | 169 | 1. 在客户端和服务端分别做下MD5,比较下两个MD5的值应该是可行的吧~ 170 | 2. 做一个上传进度,就知道是否完整了 171 | 3. 强制文件类型检查交给后端去做,前端就扩展名过滤,没有好办法。md5前端做校验已经很重了 172 | 4. 如果一个人负责前后端,那就得分割好边界。如果前端不支持fileReader,连md5都 搞不定。别加太多需求给前端 173 | 174 | 175 | 176 | #### 18 177 | 178 | rn的webview和内嵌的html页面怎么传递给html页面 179 | 180 | #### 19 181 | 182 | pages/index/index?a=b=123 183 | 请问怎么才能把b=123当作a的属性值拿出来? 184 | 185 | ```js 186 | 'pages/index/index?a='+encodeURIComponent("b=123") 187 | ``` 188 | 189 | #### 20 190 | 191 | js动画库推荐几个 192 | 193 | 1. anime.js 194 | 2. gsap.js 195 | 196 | 197 | #### 21 198 | 199 | 大佬们好,请问一下,本地热开发的时候,这里的模版文件是需要先打包出来的? 200 | 201 | 1. 这是server端的热加载吧 和前端的包没关系啊?如果你能做到前端热打包 那就没问题了 202 | 203 | -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/2019-05-下旬.md: -------------------------------------------------------------------------------- 1 | ### NO1 2 | 3 | #### 问题描述 4 | vue 怎么让二级路由和三级路由走同一个 keep-alive 5 | 6 | #### 问题解答 7 | 无法走同一个 keep-alive 8 | 9 | ### NO2 10 | 11 | #### 问题描述 12 | 比较复杂的表单 新增和编辑时, 你们是复用一个页面(根据参数做一些变动,编辑时有些字段不能修改 禁用掉)还是两个页面 13 | 14 | 如果A是提交页面,但是要从BCDEFG多个页面拿值,你们一般怎么处理 15 | 16 | 那你localStorage 会不会出现页面代码很难维护的情况下,毕竟你如果提交的数据多了呢 17 | 18 | #### 问题解答 19 | 1. 看情况吧,如果复杂表单可以进行一个复用的话,复用当然是最好的,不过既然是复杂表单的话,最主要的还是数据的校验还有数据传递这俩个难点吧 20 | 2. 新增/编辑 两个页面去实现的话, 也会有多层组件传值这种情况(页面拆分了多个组件) 21 | 3. 我刚好才做过,我用的是localStorage 提交前会做验证。每次登录的时候清除localStorage 22 | 4. localStorage 不推荐这个, vue有好多方法啊。 eventBus / vuex / $attrs / provide 但是这样你得考虑页面刷新 23 | 5. 传入对象,一个验证规则,然后遍历对象,根据验证规则判断 24 | 6. 用localstorage封装一个vuex一样的东西 25 | 7. vuex数据保存那个我记得有一个插件,vuex-persist 26 | 8. vuex数据保存那个我记得有一个插件,vuex-along 27 | ### 其他 28 | 29 | #### 1 30 | 31 | 集成方案 32 | 33 | 1. github 有 circleCi 和 travisCi 34 | 35 | 36 | #### 2 37 | 38 | vue 背景音乐播放一次是怎么个思路 39 | 40 | #### 3 41 | 42 | 大佬们问个问题呀 做了个H5页面嵌入到原生APP中去 但这个H5页面需要接入微信支付 这个微信支付该怎样做 或者说该由谁来做 43 | 44 | 1. 在App环境内 肯定是App客户端做 45 | 2. H5只能做微信js 或者跳转到weixinwap 然后打开微信吧 46 | 3. 一般都是中间页跳微信 47 | 4. 全由H5来做是不可能的 48 | 5. 通过访问一个URL,然后native做拦截,调起支付。这个其实和扫描二维码是一样的 49 | 6. 微信jssdk,里面有支付。最终都是调起微信 50 | 7. 这个是h5做,客户端拦截scheme调起微信或者支付宝 51 | 52 | 53 | #### 4 54 | 55 | 各位大佬有了解rxjs的么。能否分享下最佳实践的文章或者心得呢?看样子rx6用管道代替了链式操作。请问这是为什么呢? 56 | 57 | 1. https://zhuanlan.zhihu.com/p/45005457 58 | 2. 链式其实是把所有操作装到了一个Class上面,比较臃肿,不易于扩展 59 | 60 | 61 | #### 5 62 | 63 | 有写过vscode 插件开发的小伙伴么 64 | 65 | 66 | #### 6 67 | 68 | 后端给的数据格式不一致,是不是前台要处理啊 69 | 70 | 1. 前端想统一处理,那就在拦截器里面做 71 | 2. 后端也要进行统一中间件处理 72 | 73 | #### 7 74 | 75 | 好用的 react 表单库 76 | 77 | 1. UForm 78 | 79 | 80 | #### 8 81 | 82 | 各位大佬 请教个问题:页面里的图片在浏览器和安卓手机里面显示正常,但是在苹果手机里面有一部分不显示,有没有遇到过的或者知道怎么回事的?图片时base64格式的。 83 | 84 | 1. https://github.com/google/ios-webkit-debug-proxy 85 | 2. 如果是系统问题,就开模拟器。调试 86 | 87 | #### 9 88 | 89 | 国内代码托管网站怎么选择 90 | 91 | 1. 外包和私人项目放coding,开源的放码云 92 | 2. coding不关注个人版,只关注企业 93 | 94 | #### 10 95 | 96 | 中后台的技术方案 97 | 98 | 1. umi搭中后台 99 | 2. 中台:搭建系统,PC Weex h5 小程序 原生搭建 100 | 3. fusion比较重,不能拆小包 101 | 4. PC 无线统一搭建,也支持h5搭建,小程序原生搭建 102 | 5. 无线用rax 103 | 6. 后台系统用到 node redis metaq 104 | 105 | #### 11 106 | 107 | 骨架屏的技术方案 108 | 109 | 1. 将数据和组件打到页面上,然后在前端渲染 110 | 2. 不直出html 111 | 3. 服务端没有CPU计算的压力 112 | 113 | 114 | #### 12 115 | vue验证用什么,之前用的vue-validate,感觉不是很好 116 | 117 | 1. 自己写vertify函数更方便 118 | 119 | 120 | #### 13 121 | 122 | 3.0有没有什么移动端的ui库,可以直接通过vue插件安装的那种 123 | 124 | 1. 移动端用vant 不要用vux minit-ui。这几个都不行了 125 | 2. iview主要是那种后台管理的,PC。我现在改的这个不是后台管理,是一个webApp 126 | 127 | #### 14 128 | 129 | 大佬们,nuxt服务端渲染,压测时nodejs cpu 使用率特别高,从哪方面入手解决啊 130 | 131 | 1. node性能分析工具,我觉得可能是编译生成字符串这块挺耗cpu的 132 | 2. 之前有看到一篇基于egg的ssr性能分析的文章,可以用 alinode 在渲染的各个阶段做快照 看看哪些阶段cpu任务比较繁重 133 | 134 | #### 15 135 | 136 | 打扰下,咨询个问题, 我们做的vue项目打包后,能获取到vue实例吗,现在公司想留个后门万一出现问题,重写里面的方法 137 | 138 | 1. window.vm = new Vue 139 | 140 | 141 | #### 16 142 | 143 | 咨询一下vue项目中嵌套 iframe 为什么页面不显示 144 | 145 | 1. 高度问题 146 | 147 | #### 17 148 | 149 | 这两个state区别在哪儿啊,一直都是写下边的这种,今天看到上面的写法 150 | 151 | ![](https://user-gold-cdn.xitu.io/2019/6/20/16b70d64026fd6d7?w=408&h=510&f=png&s=212505) 152 | 153 | 1. http://es6.ruanyifeng.com/#docs/class 154 | 155 | 156 | #### 18 157 | 158 | WEEX EN FLUTTER 159 | 160 | 1. flutter 不能热更新 161 | 2. rn可以热更新 162 | 163 | 164 | #### 19 165 | 166 | css 有没有样式 可以让俩个叠加 就是比如一个一个红色区域与蓝色区域 重叠区域颜色是叠加起来的 167 | 168 | 1. css混合模式 https://developer.mozilla.org/zh-CN/docs/Web/CSS/blend-mode 169 | 170 | #### 20 171 | 172 | 大佬们 问个问题, vue-router动态路由,顶级路由下有两个动态路由,这个顶级路由的redirect怎么写? 173 | 174 | 1. 再包裹一层 175 | 176 | ![](https://user-gold-cdn.xitu.io/2019/6/20/16b70ed5cc32474a?w=739&h=588&f=png&s=292840) 177 | 178 | 179 | #### 21 180 | 181 | 小程序的上拉加载数据有什么优化方式没,现在用的是concat追加方式,现在有分类数据很多,超过了setData的最大值,并且最后越来越卡 182 | 183 | 1. https://juejin.im/post/5ca08a3f6fb9a05e4f057a47 184 | 185 | #### 22 186 | 187 | 大佬们,后端跟我说配置了Nginx但是还是有跨域,是我前端需要在webpack中再做什么配置吗。已经是线上的包了 188 | 189 | 1. webpack配置的proxy又不会对生产有影响,还是你nginx配错了 190 | 2. https://github.com/bosscheng/element-starter2/blob/master/build/preview.js 191 | 3. 跨域一般只要http服务器改就行,nginx配置那块发出来看一下 192 | 4. http://oskarhane.com/avoid-cors-with-nginx-proxy_pass/ 193 | 194 | 195 | #### 23 196 | 197 | 最近在做图片上传 我们后端要我直接吧图片的流传过去 198 | 199 | 1. js可以把图片转换成blob啊,fileReader接口就是blob,file本身就是blob的子类 200 | 2. 不传流你传啥 201 | 3. 传base64 202 | 4. 那就是在before-upload钩子里处理那个文件,转换成blob,然后自己发ajax -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/2019-05-中旬.md: -------------------------------------------------------------------------------- 1 | ### NO1 2 | 3 | #### 问题描述 4 | vue 怎么让二级路由和三级路由走同一个 keep-alive 5 | 6 | #### 问题解答 7 | 无法走同一个 keep-alive 8 | 9 | ### NO2 10 | 11 | #### 问题描述 12 | 我一个文件夹下面有很多图片,我希望都做preload。有办法一次性import进来么,我不想写那么多文件名 13 | 14 | #### 问题解答 15 | 1. vue-lazyload,你值得拥有,图片为什么要import 16 | 2. Webpack有个context,请看webapck文档 17 | 3. 用requireContent的API自己写个webapck插件来解决 18 | 19 | 20 | ### 其他问题 21 | 22 | #### 1 23 | 24 | 你们觉得像图标这种资源,应该放在src里面还是外面 25 | 26 | 1. 看下cli3图片放哪就说明官方推荐放哪 27 | 2. 大的话放外面。小的放里面。 28 | 3. 图标为什么不用iconfont,svg-icon,你值得拥有。妈妈再也不用我的图标影响页面性能啦 29 | 30 | > 你在iconfont上下载你要的图标,然后在那个demo文件里有告诉有Unicode,class和svg三种格式,svg-icon是个vue组件,只是适合vue用。字体图标其实兼容性最好,不过只能单色,svg方案可以做多色,渐变,以及动画。 31 | 32 | 33 | #### 2 34 | 35 | 想问一下大佬们在多人协作开发项目中,怎么确保每个人的代码都是测试过没有问题的,还有如果其中一个模块上线,别的模块还没开发完怎么处理 36 | 有什么工具可以做这件事吗 37 | 38 | 1. https://coding.net/ 39 | 2. git hooks 每次提交都可以主动触发持续集成 40 | 3. jetbrains有两套工具可以用。如果本地部署的话。一个codereview,一个DevOps 41 | 42 | 43 | #### 3 44 | 45 | 请教一下,h5监听Android软键盘的弹出和收起可以监听 resize 事件的高度变化来判断。但是嵌套在 app 壳子中失效,有什么办法可以解决?只在 h5 端做修改 46 | 47 | 1. 让app告诉你,交互一下方法 48 | 2. 我记得H5是拿不到关闭键盘的回调的 49 | 3. 只在 h5 端做修改貌似无解,只得互相配合 50 | 51 | #### 4 52 | 53 | 我有好几个页面特别相同的但是有好几个按钮不同,怎么让它跳转一次路由啊 54 | 55 | 1. 写成组件,vue用slot,react用prop 56 | 2. 一个页面多重显示效果。那么你就需要一个或者多个判断条件。那么,这些条件从哪里来呢。如果是路由组件,那就带query字符串。如果是普通组件,就绑Props 57 | 58 | 59 | #### 5 60 | 61 | a.vue页面有个表格和一个按钮,点击按钮跳转到b.vue页面去添加数据,然后回到a.vue页面table要增加一条数据的,但是created方法没有再执行一次,各位大佬,这是啥问题 62 | 63 | 64 | #### 6 65 | 66 | vue做的后台管理 不同用户权限显示不同界面 是使用动态生成路由吗 67 | 68 | 1. 可以参考antd-pro-vue的写法哈 69 | 2. element-admin的写法应该也差不多,不过还是看antd的比较好 70 | 71 | #### 7 72 | 73 | 有没有大佬熟悉liner-gradient,用了这个属性 竟然在safari滑动会出现拖影,背景使用了liner-gradient 74 | 75 | 1. 把translate3d改成translate就行了 76 | 2. filter注释掉 77 | 78 | #### 8 79 | 80 | 有人知道vue可以和layui.js一起怎么使用吗?我看官方不支持啊 81 | 82 | 1. 单纯UI组件可以用,比如vue用数据驱动试图。jq直接操作。 83 | 2. 自己封吧。UI组件没什么问题的。直接上class,功能组件的话,其实也好封。把操作的部分换成数据。 84 | 85 | > 我写页面之前先看原型和交互,然后思考一下数据,再设计页面怎么写,哪些写在一起,哪些是分开的。UI和原型他们把每个页面都写出来了。但是我们用Vue的话,其实是可以把多个页面写成一个路由组件。 86 | 87 | 88 | #### 9 89 | 90 | v-if和v-for的位置 91 | 92 | 1. 尽量把v-if放到v-for的父级 93 | 94 | #### 10 95 | 96 | 有没有遇到过在 RN 中 ios 设置zIndex 无效啊。设置了弹出层 zindex在安卓上正常显示,在ios上被背景遮住了 97 | 98 | 1. 确实存在层叠问题,zindex失效,判断下设备两套style就行。就是一个变量装这个样式,然后按照不同的设备渲染不同的style。 99 | 100 | 101 | > 在ios失效的原因就是你的外层的zidex和内层的zindex的问题。你在判断设备为ios的时候你把外层盒子也设置zindex,比内层的低一级。外层position:"relative",zIndex:19,内层zIndex:20,position:"absolute。必须判断设备不然这样在安卓上就会失效zindex。 102 | 103 | 104 | #### 11 105 | 106 | nginx有没有人会,根据cookie打开不同的文件,现在一直404 107 | 108 | > https://www.jianshu.com/p/b8fa8adb5119 109 | 110 | 111 | #### 12 112 | 113 | 有封装过 node 的 child_process 类的小伙伴么,在写一个 vscode 插件, 需要用到进程通信执行第三方的 python 命令。但懒得封装 child_process 了, 看看能不能抄过来 114 | 115 | 116 | #### 13 117 | 118 | h5页面A页面跳到B页面,B页面返回A页面 window.history.go(-1) A页面不刷新是啥原因。vue h5页面 点击返回栏的返回 不刷新上一页面 119 | 120 | 场景如下图所示 121 | ![](https://user-gold-cdn.xitu.io/2019/6/19/16b6faf1f00225e2?w=1682&h=1282&f=png&s=219025) 122 | 123 | 1. vue能在进入页面不走生命周期我只能想到keep-alive 124 | 2. keep-alive导致的 去掉这个 在B页面用 window.history.go(-1)这个都可以刷新A页面 125 | 126 | ```js 127 | window.addEventListener('popstate',() => { 128 | window.location.reload(); 129 | }) 130 | ``` 131 | 132 | 133 | #### 14 134 | 135 | 节流和防抖的区别 136 | 137 | ![](https://user-gold-cdn.xitu.io/2019/6/19/16b6fe2691a37def?w=1806&h=658&f=png&s=64890) 138 | 139 | 140 | ![](https://user-gold-cdn.xitu.io/2019/6/19/16b6fe2974daebce?w=1718&h=654&f=png&s=62802) 141 | 142 | 143 | #### 15 144 | 145 | 怎么比较两个对象是否相等,当一个对象是另一个对象的子对象的时候 146 | 147 | 1. 有一个很愚蠢的方法,随便遍历其中一个,然后用遍历的 key 去另外一个对象取值,判断值是不是相等 148 | 2. lodash 149 | 3. 通过Object.values(),得到2个对象的值数组,然后去重,得到的数组长度恒等于Object.keys()的长度。就是相等了 150 | 4. stringify 151 | 152 | 153 | #### 16 154 | 155 | 我想问下现在hooks能代替class component吗?hooks的方式,怎么创建一个ref呢 156 | 157 | #### 17 158 | 159 | vw vh,移动端用得多了吗目前? 160 | 161 | 1. 多,新的移动端适配就用这个,能够像素级还原设计图 162 | 2. vw,vh+rem要比百分比好用,计算好比例,可以直接跟pc端设置多少px一样设置样式,只不过改成rem,很方便的,还原出的设计稿也是最接近的 163 | 3. 可以用插件px2rem,直接写px 164 | 4. rem单位只能分割一个方向,不能同时分割宽度,高度,这样,它就只能替代vw和vh中的一个 165 | 5. rem其实只是一个倍数,跟同时分割宽高没什么关系。。宽度可以用rem,高度也可以。它只是表示相对于根元素字体大小的倍数。跟vw,vh就不是一个类型,也无需相互替代 166 | 6. 横屏的时候没问题,竖屏的时候,vw 和 vh就颠倒了。就乱套了。而rem可以用代码控制,代表横着或者竖着的那个单位,但是,没法模拟两个单位。 167 | 7. 竖屏可以控制的 [H5开发:横屏适配](https://www.jianshu.com/p/b98f5263262b) 168 | 8. 横屏竖屏的样式可以通过响应式控制 169 | 9. 问题是,百分比是相对于父级的,不是相对于整个窗口的,不是很方便,虽然也行。这是响应式高度不定,游戏是宽高固定就是全屏。只能用百分比了看来 170 | 171 | #### 18 172 | 173 | 问老铁们一个问题 为什么 ps中显示的字体是28px 但是我在项目里面写的是 14px才是正常显示呢 174 | 175 | 1. 适配的问题,要看视觉稿的。选择750px的尺寸就好了。 176 | 2. 推荐几个软件,蓝湖,pxcook 177 | 178 | #### 19 179 | 180 | 前端如何通过 Universal Link 唤起app 181 | 182 | 1. 你的唤端的前提是需要 app 也支持 Universal Link 吧 https://developer.apple.com/documentation/uikit/inter-process_communication/allowing_apps_and_websites_to_link_to_your_content 183 | 2. 要在safari里面访问这个连接 184 | 185 | #### 20 186 | 187 | 怎么从pug模版中把服务端渲染传过来的数据 传到js中使用 188 | 189 | 1. 渲染一个script标签,把值存到一个变量里面 190 | 191 | ```js 192 | const orders = !{JSON.stringify(orders)}; 193 | ``` 194 | 195 | 196 | #### 21 197 | 198 | 微信小程序 我封装了一个授权框在需要授权登陆的页面 但是在一个页面授权后 切换到另一个页面 会有闪一下的感觉,有没有什么方法解决啊。就是第一次切换的时候会出现 再切换就好了 199 | 200 | 201 | #### 22 202 | 203 | 大佬们,你们是怎么实现小程序的全局状态的管理的? 204 | 205 | 1. mpvue 206 | 2. wepy-redux 207 | 208 | #### 23 209 | 210 | 我想问一下么让外部变量获取函数内部变量的值,比如让这个nomb1获取到no1的值 211 | 212 | -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/2019-06-上旬.md: -------------------------------------------------------------------------------- 1 | ### NO1 2 | 3 | #### 问题描述 4 | 请问一下 vue里面用template包裹元素 template本身不会渲染dom节点。react里面对应template的是什么来着了? 5 | 6 | #### 问题解答 7 | 无法走同一个 keep-alive 8 | 9 | ### NO2 10 | 11 | #### 问题描述 12 | 13 | 14 | #### 问题解答 15 | 16 | 17 | ### 其他问题 18 | 19 | #### 1 20 | 21 | 前端自动化打包部署的方案 22 | 23 | 1. jenkins 24 | 25 | #### 2 26 | 27 | axios跨域,jq不跨域 28 | 29 | 1. axios会先发一个options请求,jq不会。所以options请求需要后端去配置 30 | 31 | 32 | #### 3 33 | 34 | 群里有知道,webpack里如何单纯引入js,有种直接合并,不搞模块化。我只想部分js单纯合进去 35 | 36 | 1. 安装commjs方式写代码,配置一下webpack.config.js,运行webpack命令,所有的js文件就能打包成一个js文件 37 | 2. 你在babel-loader的时候,加入相应的文件,忽略掉不行吗。exclude 38 | 39 | 40 | #### 4 41 | 42 | 如何学习css 43 | 44 | #### 5 45 | 46 | h5唤起录像机抓取视频中的任何一帧的照片可以实现不。就是需求就是用户要类似支付宝那种眨眨眼 抬抬头去判断活体 47 | 48 | 1. 我记得firebox有个插件,能监控canvas走到那一帧了 49 | 2. 试试先暂停,然后截图,我记得好像有js截图的工具 50 | 3. webRTC应该可以。 就是用getUserMedia打开摄像头,然后把流地址给video,需要拍照的时候用canvas的drawImage把video绘制到画布。视频能播放,但是不是录像 51 | 4. 随机拍照,识别图片,我的思路是这样的 52 | 53 | 54 | #### 6 55 | 56 | nodejs数据库连接,入口文件require引入的时候,如何保证mysql已经连接上了? 57 | 58 | 1. 你不需要require的时候保障连接上了,你需要在操作数据库的时候保障连接上了,然后把增删改查相应的方法暴露出来 59 | 2. 还有一种,就是遍历类的方法,把数据库连接写成前置钩子,执行完再执行真正的函数 60 | 3. mysql不是很清楚,说不定人家的api里已经判断过了,一般情况可以把判断是否链接封装成一个Promise 61 | 4. 连接成功再进行下一步,没成功直接reject,返回个message就行了。 62 | 63 | #### 7 64 | 65 | 问大家一个问题,像微信聊天列表这样很顺滑的上拉加载和下拉加载,是怎么实现的,web能实现吗,最近也在搞聊天,发现做不到微信这样的 66 | 67 | 68 | 1. 因为原生的列表做了优化 69 | 2. 原生的上拉加载体验肯定是web不能比的 70 | 71 | #### 8 72 | 73 | 请教各位大佬,小程序canvas海报图,如何适配各个设备。(我目前是:根据设备的windowsWidth、windowsHeight,根据设计稿ios6(375*603)进行比例是适配的。iphonex则是1448rpx 74 | 75 | #### 9 76 | 77 | 大佬们,前端直传oss给服务器回调 和 前端上传服务器再上传oss 78 | 79 | 1. 直传oss 80 | 81 | 82 | #### 10 83 | 84 | 我用了动态组件切换页面,怎么在切换的时候加上动画。我的问题是我这是个圣杯布局,上面和中间各是一个动态组件,两个同时加transition可以吗? 85 | 86 | 1. 在app.vue里,Transiton 包裹动态组件,或者在根组件的RooterView中用 Transiton 包裹。就有动画了 87 | 2. 动态组件component那边套transition试试,router-view管不到这儿 88 | 89 | #### 11 90 | 91 | 比如说一个抽奖,今天是圆盘,明天是九宫格,怎么通用 92 | 93 | 1. 业务逻辑可以封装,ui可以A/B引入 94 | 95 | #### 12 96 | 97 | 富文本编辑器,前台怎么给后台传数据 98 | 99 | 请求头的格式:text/plain 100 | 101 | 两种方案: 102 | 103 | 1. 图片前端上传,直传OSS或者给后台接口,返回图片路径,写入最后提交的数据,再全部提交给后台。 104 | 2. post,请求。第一个域是html文本。里面有插值。后面的域是图片。又后台去处理。 105 | 3. 传base64就过分了。 106 | 107 | #### 13 108 | 109 | nuxt 种怎么启用css autoprefix 110 | 111 | 1. 新版本采用对象语法 nuxt.config.js 112 | 113 | 114 | #### 14 115 | 116 | 不是定位失效,目前3个动画,底部淡入,图片旋转放大,然后还有个,如果我在这个动画上面在定位一个东西,动画就失效了,为什么啊。还有这个有个弹动效果,如果加了这个,第二个旋转放大的动画就失效了 117 | 118 | 1. https://www.jianshu.com/p/5eeb1e0ab87d 119 | 120 | #### 15 121 | 122 | :class="{ item.class[0] : item.class[1]}" 这种写法好像不行。 123 | 124 | ```js 125 | :class="{ [item.class[0]] : item.class[1]}" 126 | ``` 127 | 128 | ```js 129 | :class="{ `${item.class[0]}`: item.class[1]}" 130 | ``` 131 | 132 | #### 16 133 | 134 | 关于yarn.lock文件 135 | 136 | 刚才说到yarn.lock文件问题,如果你是项目负责人,能负责小版本的升级那你可以选择代码提交时一起更新,不是的话不建议。这么说吧,服务器上的lock文件你只适合你拉取,不适合你更新,你要是能决定项目就随便更新 137 | 138 | 一般使用别人的包都是直接用的,包模块出问题叫项目主要负责人改或者更新,新人自己更新提交不乱套了吗 139 | 140 | 提交了也不一定合并到主分支了,你们没用git flow吗,merge没人审核吗。如果不提交,比如你这边用了一个包版本0.1,过几天这个包作者升级了0.2,api全部变了 141 | 142 | 所以稳妥起见不建议对lock进行提交,当然了,你把代码发布的时候一定要有lock文件的 143 | 144 | #### 17 145 | 146 | 刷新页面,还停留在对应的页面位置 147 | 148 | 1. query,然后传到钩子函数中,进行处理 149 | 150 | #### 18 151 | 152 | 部署到容器的测试环境,怎么查看前端日志 153 | 154 | 1. dockers logs命令 155 | 156 | 157 | #### 19 158 | 159 | nodejs和java做服务端渲染哪个处理请求的速度更快 160 | 161 | 1. ssr是cpu密集型计算 -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/2019-06-中旬.md: -------------------------------------------------------------------------------- 1 | ### NO1 2 | 3 | #### 问题描述 4 | vue 怎么让二级路由和三级路由走同一个 keep-alive 5 | 6 | #### 问题解答 7 | 无法走同一个 keep-alive 8 | 9 | ### NO2 10 | 11 | #### 问题描述 12 | 13 | 14 | #### 问题解答 15 | 16 | 17 | ### 其他问题 18 | 19 | #### 1 20 | 21 | 有没有办法在组件中获取到全局注册的filter 22 | 23 | 1. 换种思路,把filter函数抽出来,哪里需要哪里导 24 | 2. 可以注册到全局直接用,不需要每次都引 25 | 26 | ![](https://user-gold-cdn.xitu.io/2019/6/20/16b71467c15e2ffe?w=1080&h=1920&f=png&s=279819) 27 | 28 | 29 | #### 2 30 | 31 | 小程序可以做报表么 32 | 33 | 1. 可以 34 | 35 | 36 | #### 3 37 | 38 | 大佬们 有做过地图下钻的吗 39 | 40 | 41 | ![](https://user-gold-cdn.xitu.io/2019/6/20/16b7149c851435f5?w=994&h=584&f=png&s=121169) 42 | 43 | 1. https://gallery.echartsjs.com/editor.html?c=xbxUJPSiG9 44 | 2. https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all 45 | 46 | 47 | #### 4 48 | 49 | 有什么vue插件可以做流程图 50 | 51 | #### 5 52 | 53 | dva跳二级路由 页面得刷新一下才出来 有大佬知道怎么回事吗 54 | 55 | 1. 因为路由数据改了以后,connect内部有一个类似shouldcmpupdate的东西返回了false不允许更新,对路由信息不敏感了 -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/images/2-16-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godkun/blog/f9b9199739a25f18fd277041d314e98e251dad59/k-前端狂想录群的日常问题清单以及解决方案/images/2-16-1.png -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/images/2-20-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godkun/blog/f9b9199739a25f18fd277041d314e98e251dad59/k-前端狂想录群的日常问题清单以及解决方案/images/2-20-1.png -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/images/2-20-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godkun/blog/f9b9199739a25f18fd277041d314e98e251dad59/k-前端狂想录群的日常问题清单以及解决方案/images/2-20-2.png -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/images/2-21-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godkun/blog/f9b9199739a25f18fd277041d314e98e251dad59/k-前端狂想录群的日常问题清单以及解决方案/images/2-21-1.png -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/images/2-21-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godkun/blog/f9b9199739a25f18fd277041d314e98e251dad59/k-前端狂想录群的日常问题清单以及解决方案/images/2-21-2.png -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/images/2-21-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godkun/blog/f9b9199739a25f18fd277041d314e98e251dad59/k-前端狂想录群的日常问题清单以及解决方案/images/2-21-3.png -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/images/2-21-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godkun/blog/f9b9199739a25f18fd277041d314e98e251dad59/k-前端狂想录群的日常问题清单以及解决方案/images/2-21-4.png -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/images/2-21-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godkun/blog/f9b9199739a25f18fd277041d314e98e251dad59/k-前端狂想录群的日常问题清单以及解决方案/images/2-21-5.png -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/images/2-21-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godkun/blog/f9b9199739a25f18fd277041d314e98e251dad59/k-前端狂想录群的日常问题清单以及解决方案/images/2-21-6.png -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/images/2-21-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godkun/blog/f9b9199739a25f18fd277041d314e98e251dad59/k-前端狂想录群的日常问题清单以及解决方案/images/2-21-7.png -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/images/2-21-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godkun/blog/f9b9199739a25f18fd277041d314e98e251dad59/k-前端狂想录群的日常问题清单以及解决方案/images/2-21-8.png -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/images/2-21-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godkun/blog/f9b9199739a25f18fd277041d314e98e251dad59/k-前端狂想录群的日常问题清单以及解决方案/images/2-21-9.png -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/images/2-22-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godkun/blog/f9b9199739a25f18fd277041d314e98e251dad59/k-前端狂想录群的日常问题清单以及解决方案/images/2-22-1.png -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/images/2-22-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godkun/blog/f9b9199739a25f18fd277041d314e98e251dad59/k-前端狂想录群的日常问题清单以及解决方案/images/2-22-2.png -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/images/2-22-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godkun/blog/f9b9199739a25f18fd277041d314e98e251dad59/k-前端狂想录群的日常问题清单以及解决方案/images/2-22-3.png -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/images/2-22-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godkun/blog/f9b9199739a25f18fd277041d314e98e251dad59/k-前端狂想录群的日常问题清单以及解决方案/images/2-22-4.jpeg -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/images/2-22-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godkun/blog/f9b9199739a25f18fd277041d314e98e251dad59/k-前端狂想录群的日常问题清单以及解决方案/images/2-22-5.jpeg -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/images/2-25-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godkun/blog/f9b9199739a25f18fd277041d314e98e251dad59/k-前端狂想录群的日常问题清单以及解决方案/images/2-25-1.png -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/images/2-26-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godkun/blog/f9b9199739a25f18fd277041d314e98e251dad59/k-前端狂想录群的日常问题清单以及解决方案/images/2-26-1.png -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/images/2-26-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godkun/blog/f9b9199739a25f18fd277041d314e98e251dad59/k-前端狂想录群的日常问题清单以及解决方案/images/2-26-2.png -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/images/2-26-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godkun/blog/f9b9199739a25f18fd277041d314e98e251dad59/k-前端狂想录群的日常问题清单以及解决方案/images/2-26-3.png -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/images/2-26-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godkun/blog/f9b9199739a25f18fd277041d314e98e251dad59/k-前端狂想录群的日常问题清单以及解决方案/images/2-26-4.png -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/images/2-26-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godkun/blog/f9b9199739a25f18fd277041d314e98e251dad59/k-前端狂想录群的日常问题清单以及解决方案/images/2-26-5.png -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/images/2-27-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godkun/blog/f9b9199739a25f18fd277041d314e98e251dad59/k-前端狂想录群的日常问题清单以及解决方案/images/2-27-1.png -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/模板.md: -------------------------------------------------------------------------------- 1 | ### NO4 2 | 3 | #### 问题描述 4 | 5 | #### 问题解答 6 | 7 | ### NO5 8 | 9 | #### 问题描述 10 | 11 | #### 问题解答 -------------------------------------------------------------------------------- /k-前端狂想录群的日常问题清单以及解决方案/狂想群分享的资料和连接.md: -------------------------------------------------------------------------------- 1 | ****## 2019年2月分享合集 2 | 3 | - [盘点 Mac 上那些相见恨晚的软件](https://mp.weixin.qq.com/s/Cvqetqb1uHcqPU1B4xLuZw) 4 | 5 | - [node debugger相关知识](https://codeblog.dotsandbrackets.com/nodejs-core-dump-llnode-lldb/) 6 | 7 | - [前端如何优雅的解耦](https://mp.weixin.qq.com/s/EsuR1ztDaaQaupdYh_C36g) 8 | 9 | - [Node.js调试之llnode篇](https://mp.weixin.qq.com/s/0ZhhnwUMAM6RA8xZbegcig) 10 | 11 | 12 | - [谷歌出了lit-element和lit-html](https://lit-element.polymer-project.org/) 13 | 14 | > 自定义组件,`shadow DOM` 。基本上新版本都支持,`web component` 。如果浏览器原生支持了,那 `JSX` 都没什么用了,直接上模板字符串,不用编译。之前腾讯的当耐特写了个 `omi` ,也是基于 `web component` 15 | 16 | 17 | - [JavaScript深入之从ECMAScript规范解读this](https://github.com/mqyqingfeng/Blog/issues/7) 18 | 19 | > 从ecma规范讲this 20 | 21 | - [全屏HTML 5适配 个人见解](https://juejin.im/post/5c78c9f96fb9a04a0a5fe2b6?utm_source=wechat&from=singlemessage&isappinstalled=0) 22 | 23 | 24 | - [2018上半年掘金微信群日报优质文章合集:前端篇](https://juejin.im/post/5b3adfe2e51d4555b17e85df) 25 | 26 | - [分享一个程序架构的文章,从MVC到MVVM](https://www.oschina.net/translate/wpf-mvvm-step-by-step-basics-to-advance-level?print) 27 | 28 | - [webpack4.0源码分析之Tapable](https://juejin.im/post/5abf33f16fb9a028e46ec352) 29 | 30 | - [vue源码 逐行分析的](http://hcysun.me/vue-design/art/) 31 | 32 | - [CSS 宣布支持三角函数,下一步是什么?](https://mp.weixin.qq.com/s/a887uoHgGnH78cxNfoUhPw) 33 | 34 | - [有代码,不知道运行效果时,可以在这里面先试试](https://es6console.com/) 35 | 36 | - https://es5.github.io/#x11.13.1 37 | 38 | - [https://astexplorer.net/](https://astexplorer.net/) 39 | 40 | - [https://github.com/justjavac/free-programming-books-zh_CN](https://github.com/justjavac/free-programming-books-zh_CN) 41 | 42 | - [2019年大前端技术趋势深度解读](https://mp.weixin.qq.com/s/WWqsd-SnILUWbiKEnSArDQ) 43 | 44 | - 各种评测,比如 jest vs mocha:https://stackshare.io/stackups/trending 45 | 46 | 47 | - [jasmine-vs-jest-mocha](https://stackshare.io/stackups/jasmine-vs-jest-vs-mocha) 48 | 49 | - 程序员鄙视链图片 50 | 51 | ![](https://user-gold-cdn.xitu.io/2019/6/12/16b4b1e4d989155f?w=500&h=1105&f=png&s=195480) 52 | 53 | - url的真谛 54 | 55 | ![](https://user-gold-cdn.xitu.io/2019/6/12/16b4b22127706d03?w=1622&h=964&f=png&s=105412) 56 | 57 | 58 | - [ES2015 WeakMap的学习和使用](https://zhuanlan.zhihu.com/p/25454328) 59 | 60 | 61 | - [js内存数据库](http://lokijs.org/#/) 62 | 63 | - [WPF MVVM 循序渐进 (从基础到高级)](https://www.oschina.net/translate/wpf-mvvm-step-by-step-basics-to-advance-level?print) 64 | 65 | 66 | - react的表单库 formik 67 | 68 | 69 | - [用 JavaScript 写成的 JavaScript 解释器,意义是什么?](https://www.zhihu.com/question/20004379/answer/18600484) 70 | 71 | - [虚拟机随谈(一):解释器,树遍历解释器,基于栈与基于寄存器,大杂烩](https://rednaxelafx.iteye.com/blog/492667) 72 | 73 | - https://github.com/jrainlau/canjs 手写js解释器 74 | 75 | - https://www.tslang.cn/docs/handbook/declaration-files/introduction.html 76 | 77 | 78 | - setapp 79 | 80 | 81 | - https://codepen.io/jcoulterdesign/pen/zdwajv 82 | 83 | - https://github.com/bosscheng/simple-extend 84 | 85 | - vscode检查代码复杂度扩展 codeMetrics 86 | 87 | - jest+enzyme也可以测react的 88 | 89 | - 由设计稿一键智能生成代码的大厨 https://imgcook.taobao.org/ 90 | 91 | - 思维导图:mindnode xmind 92 | 93 | - 或者用alfred/code snippet也可以快捷键一段代码段 94 | 95 | - docker 96 | 97 | - 不是基于 vdom 的 dom diff 库 https://github.com/DylanPiercey/set-dom 98 | 99 | - react-admin 100 | 101 | - https://github.com/NARKOZ/hacker-scripts 102 | 103 | - 封装和抽象的区别是什么 https://www.zhihu.com/question/20266563 104 | 105 | - react ts文档 https://github.com/Microsoft/TypeScript-React-Starter 106 | 107 | - [2019 年,Rust 与 WebAssembly 将让 Web 开发更美好](https://blog.csdn.net/csdnnews/article/details/86216570) 108 | 109 | - [几张图让你看懂WebAssembly](https://www.jianshu.com/p/bff8aa23fe4d) 110 | 111 | - https://rustwasm.github.io/docs/book/ 112 | 113 | - http://www.autopiano.cn/#/ 114 | 115 | - [快速上手三大基础 React Hooks](https://juejin.im/post/5c8918ca6fb9a049f572023e?utm_source=gold_browser_extension#comment) 116 | 117 | - [Flutter 成为多平台框架,支持移动、Web、桌面和嵌入式设备](https://www.oschina.net/news/106527/flutter-io19) 118 | 119 | - https://ant.design/docs/spec/colors-cn 120 | 121 | - https://github.com/Microsoft/vscode/issues/32257#issuecomment-489474744 122 | 123 | - [译] Javascript 中 Array.push 要比 Array.concat 快 945 倍!🤯🤔 https://juejin.im/post/5cd67fb9f265da037129bb64?utm_source=gold_browser_extension 124 | 125 | - [一百行js代码实现一个校验工具](https://juejin.im/post/5cc16951e51d45400f5d5852) 126 | 127 | - [什么便捷、功能和安全,Chrome一把梭](https://mp.weixin.qq.com/s/3ezqYqumuUzzTVA9uJfkQw) 128 | 129 | - [性能为何至关重要](https://developers.google.cn/web/fundamentals/performance/why-performance-matters/) 130 | 131 | - [用简单易懂的方式,开发基于VUE的单页应用](https://github.com/chenbimo/yivue) 132 | 133 | - https://tomotoes.com/ 134 | 135 | - https://riccio.gitee.io/panel-magic/#/mock 这个项目就是用 ng 结合 rxjs 写的 136 | 137 | - 很好看的ui https://firenzia.github.io/sakura-ui/views/design/color/ 138 | 139 | - https://juejin.im/post/591aa14f570c35006961acac#comment 140 | - https://panjiachen.github.io/vue-element-admin/#/dashboard 141 | 142 | - 《D2日报》 或 《前端日报》 https://daily.fairyever.com/ 143 | 144 | - https://d2admin.fairyever.com/#/index 145 | 146 | - [调试iOS H5 项目的另一种选择-ios-webkit-debug-proxy](https://www.jianshu.com/p/4d05f36f6538) 147 | 148 | - https://midwayjs.org/midway/ 149 | 150 | - https://github.com/bosscheng/suning-share-resource/blob/master/WEEX%E7%BB%84%E4%BB%B6%E5%8A%A8%E6%80%81%E6%9E%84%E5%BB%BA%E5%AE%9E%E8%B7%B5.pdf 151 | 152 | ### 好用的工具 153 | 154 | 1. cache killer 155 | 2. resize 156 | 3. JSON-Handle 157 | 4. tempermonkey 158 | 5. Visual Event 159 | 6. https://github.com/Hammerspoon/hammerspoon 160 | 161 | 162 | ### 格式化标准 163 | 164 | 1. eslint + Prettier 165 | 2. 如果统一的话。可以弄个规则文件,上传到npm。然后VSCode装个插件,项目上加个prettier 166 | 167 | -------------------------------------------------------------------------------- /website/docs/.vuepress/config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | title: '前端狂想录组织', 3 | locales: { 4 | '/': { 5 | lang: 'zh-CN', 6 | description: '前端狂想录', 7 | }, 8 | }, 9 | serviceWorker: {}, 10 | themeConfig: { 11 | repo: '', 12 | lastUpdated: 'Last Updated', 13 | editLinks: true, 14 | docsDir: 'docs', 15 | serviceWorker: { 16 | updatePopup: { 17 | message: 'New content is available.', 18 | buttonText: 'Refresh', 19 | }, 20 | }, 21 | locales: { 22 | '/': { 23 | selectText: '选择语言', 24 | label: '简体中文', 25 | editLinkText: '在 GitHub 上编辑此页', 26 | nav: [ 27 | { text: '前端狂想录群聊天问题记录', link: '/qa/' }, 28 | { text: '群主的博客', link: '/blog/' }, 29 | { text: 'vue小分队', link: '/vue/' }, 30 | { text: 'react小分队', link: '/react/' }, 31 | { text: '小程序小分队', link: '/mini/' } 32 | ], 33 | sidebar: { 34 | '/qa/': [ 35 | { 36 | title: '前端狂想录群聊天问题记录', 37 | collapsable: false, 38 | children: [ 39 | '' 40 | ], 41 | } 42 | ], 43 | '/blog/': [ 44 | { 45 | title: '群主的博客', 46 | collapsable: false, 47 | children: [ 48 | '' 49 | ], 50 | } 51 | ], 52 | '/vue/': [ 53 | { 54 | title: 'vue小分队', 55 | collapsable: false, 56 | children: [ 57 | '' 58 | ], 59 | } 60 | ], 61 | '/react/': [ 62 | { 63 | title: 'react小分队', 64 | collapsable: false, 65 | children: [ 66 | '' 67 | ], 68 | } 69 | ], 70 | '/mini/': [ 71 | { 72 | title: '小程序小分队', 73 | collapsable: false, 74 | children: [ 75 | '' 76 | ], 77 | } 78 | ], 79 | }, 80 | }, 81 | }, 82 | }, 83 | }; 84 | -------------------------------------------------------------------------------- /website/docs/.vuepress/override.styl: -------------------------------------------------------------------------------- 1 | $accentColor = #029ffd 2 | $textColor = #2c3e50 3 | $borderColor = #eaecef 4 | $codeBgColor = #282c34 5 | -------------------------------------------------------------------------------- /website/docs/.vuepress/public/blog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godkun/blog/f9b9199739a25f18fd277041d314e98e251dad59/website/docs/.vuepress/public/blog.png -------------------------------------------------------------------------------- /website/docs/.vuepress/style.styl: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/godkun/blog/f9b9199739a25f18fd277041d314e98e251dad59/website/docs/.vuepress/style.styl -------------------------------------------------------------------------------- /website/docs/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | home: true 3 | actionText: 欢迎加入前端狂想录组织 → 4 | actionLink: /guide/ 5 | features: 6 | - title: 技术氛围好 7 | details: 技术氛围好 8 | - title: 大前端 9 | details: 大前端 10 | - title: 乐于分享 11 | details: 乐于分享 12 | footer: MIT Licensed | Copyright © 2019-present 13 | --- 14 | 15 | ### 狂想录组织 16 | 17 | Github | 微信群| 18 | |-----|-----| 19 | [godkun](https://github.com/godkun) | |  -------------------------------------------------------------------------------- /website/docs/blog/README.md: -------------------------------------------------------------------------------- 1 | # 群主的博客 -------------------------------------------------------------------------------- /website/docs/mini/README.md: -------------------------------------------------------------------------------- 1 | # 小程序小分队 -------------------------------------------------------------------------------- /website/docs/qa/README.md: -------------------------------------------------------------------------------- 1 | # 前端狂想录群聊天问题记录 -------------------------------------------------------------------------------- /website/docs/react/README.md: -------------------------------------------------------------------------------- 1 | # react小分队 -------------------------------------------------------------------------------- /website/docs/vue/README.md: -------------------------------------------------------------------------------- 1 | # vue小分队 -------------------------------------------------------------------------------- /website/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ghost-doc", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "scripts": { 7 | "dev": "vuepress dev docs", 8 | "build": "vuepress build docs", 9 | "deploy": "yarn build && cross-env NODE_ENV=dev node ./npm/deploy/index.js" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /一些想搞的事情.md: -------------------------------------------------------------------------------- 1 | 1. 我们准备不用 react 了😂 准备基于 lit-html 写一套 web-component 的库 2 | 2. 3 | -------------------------------------------------------------------------------- /前端狂想录所有小分队注意事项.md: -------------------------------------------------------------------------------- 1 | 2 | **一个好结果离不开好的开始和好的过程。** 3 | 4 | ## 曙光 5 | 6 | 这是目前前端狂想录所有小分队在学习成长中的一些注意事项。 7 | 8 | ### 缺少什么 9 | 10 | 我们缺少 `UI` 设计师和 `产品经理`。 11 | 12 | 怎么解决:目前没想好,大家可以提提意见。 13 | 14 | ## 注意事项 15 | 16 | 一个项目,我们必须要有以下几个过程。 17 | 18 | ### 头脑风暴 19 | 20 | 这是必须要有。基本方向要确定,确定好这个 `idea` 的价值,对小分队的价值,对小分队的帮助和成长,对前端行业的贡献。 21 | 22 | ### 确定需求 23 | 24 | 这个必须要有。确定要做什么,这个要十分的谨慎和明确。 25 | 26 | ### 技术选型 27 | 28 | 这个必须要有。需求确定好后,大家要讨论完成该需求,最适合团队的技术选型。比如: 29 | 30 | 1. 是否需要使用框架,如果需要,那使用什么框架 31 | 2. 是否需要规定代码风格,如果需要,那使用什么样的代码风格 32 | 3. 是否需要测试,如果需要,那使用什么样的测试风格 33 | 4. 等等 34 | 35 | 要确定好大致的技术选型。这里的技术选型,是根据大家的技术水平和团队的实力做出的一个平衡的解决方案,并不涉及到技术调研。 36 | 37 | 一般来说,这里的选型普遍会趋于容易和简单的方向。所以还需要有经验的人来把握住方向,尽可能的 `hold` 住日后的各种变化。 38 | 39 | ### 技术调研 40 | 41 | 这个必须要用。当技术选型完成后,大家要做技术调研,一般会安排一个人或者两个去做技术调研。但是我建议,每个小伙伴都应该去参与技术调研,具体调研啥,如下: 42 | 43 | 44 | 1. 该技术的优缺点 45 | 2, 该技术在国内著名网站的相关博客量和高赞文章,比如掘金高赞文章。 46 | 3. 该技术在国内国外的相关发展趋势 47 | 4. 等等 48 | 49 | ### 彻底确定一系列技术方案 50 | 51 | 技术选型和技术调研后,小分队就必须要真正确定好一套技术方案了,这里不可更改,要做到一次成功,建立起这种自信。 52 | 53 | ### 分配任务和排期 54 | 55 | 必须要有 `deadline` 。小分队需要选出一个组织者,其来根据团队人员特点和意愿来分配任务和排期。必须要认真按照排期和任务来执行。 56 | 57 | ### 测试和体验 58 | 59 | 这个也要有,测试又小分队自己去参与,体验有其他小分队和小分队自己一起体验。 60 | 61 | ### 完成和总结分享 62 | 63 | 这个必须要有,目前已经准备好了一些著名网站的公共账号,每一个努力都要有总结和分享,让小分队通过实践加总结更深刻的掌握知识。 64 | 65 | 通过分享,让更多的人知道,去参与进来,为前端贡献出微薄的力量。 66 | 67 | 68 | ## 想参与的小伙伴请点击 69 | 70 | [前端狂想录的成长之路](https://github.com/godkun/blog/blob/master/%E5%89%8D%E7%AB%AF%E7%8B%82%E6%83%B3%E5%BD%95%E7%9A%84%E6%88%90%E9%95%BF%E4%B9%8B%E8%B7%AF.md) 71 | 72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /前端狂想录的成长之路.md: -------------------------------------------------------------------------------- 1 | **今天很残酷,明天更残酷,但是后天很美好,但是大多数人死在了明天的晚上。** 2 | 3 | > 本文会持续更新最新内容 4 | 5 | ## 引言 6 | 7 | 一个人做一个事情是很困难的,很多人坚持不下去,如果有很多人一起做一件事情,相互努力,相互帮忙,那一定是一件又开心又快乐的事情,而且很容易坚持下去,因为一起参与,当你想放弃的时候,总会有不同的人鼓励你,这就是我建了前端狂想录的目的。 8 | 9 | 这是前端狂想录的一个里程碑,前端狂想录的小伙伴们,我希望大家可以一起努力,通过一起组织不同兴趣小组的形式,让大家可以参与到不同技术栈的学习和实践中,从而可以更快更好的提升自己的能力。 10 | 11 | ## 标粗声明 12 | 13 | 可能会有人问,组织者会不会有什么目的,这个我可以肯定的回答,本项目不存在任何盈利性的行为,请各位小伙伴放心和监督。 14 | 15 | 当然肯定有很多其他目的,比如: 16 | 17 | - 组织者本人也会在这个过程中提升自己的能力(这实话实说)。 18 | - 大家也可以提示很多自己的技术水平。 19 | - 萍水相逢,一起交个朋友,缘分就这样续上了。 20 | - 分享业内优秀的知识和技术趋势。 21 | - 提高工作效率,增强技术上的自信心。 22 | - 开心的 `coding` 。 23 | - 提示能力,获得更多伯乐的青睐。 24 | 25 | ## 开始前的准备 26 | 27 | 大致有以下准备 28 | 29 | 第一个准备:知乎专栏,微信公众号,掘金公共账号已有。 30 | 31 | 第二个准备:具体方向已有,目标明确。 32 | 33 | 第三个准备:`github` 组织已经建好,后续项目都放在组织里,没有加入组织的请私聊联系我。微信号:`jz1314521520` 34 | 35 | 第四个准备:组织者会尽可能的提供技术上的资源和协助。 36 | 37 | 最重要的准备:要有一群志同道合的小伙伴(嘻嘻)。 38 | 39 | 后期大家的成果,大家可以通过开源项目,博客或者分享会的形式,分享出去,会标注个人作者和署名的。这样也可以让更多的小伙伴知道我们的组织,然后说情怀上,就是为前端做出一些贡献吧。 40 | 41 | ## 内容 42 | 43 | 我考虑了很多天,最后还是决定使用微信群的方式,前面想过用钉钉等,但是还是算了,没必要。就微信群吧,虽然群多了,但是只要质量高,也无妨,最重要的是你从群里学到了什么。 44 | 45 | 下面我列出前端狂想录的一些微信群,这里直接扫码进群,但是有要求: 46 | 47 | 第一:**不要加所有的群,按照之前投票的意愿加群,没有投票的请想一想你最想提升的技术是什么,只能加三个。** 48 | 49 | 第二:**为了保证群的质量,针对一些加很多群的,我会观察的,如果在群里不做任何贡献或者参与的话,我会请出群的。** 50 | 51 | > PS:大群我不会这样做,潜水就潜水,没事,但是下面的这些群是要真正的做事情的,希望加群前认真考虑下。 52 | 53 | 54 | ## 狂想录小分队各自首页 55 | 56 | 总的首页:https://github.com/refactoring-now/X-Team 57 | 58 | - [算法小分队](https://github.com/refactoring-now/X-Team/tree/master/%E7%AE%97%E6%B3%95%E5%B0%8F%E5%88%86%E9%98%9F%E7%9F%A5%E8%AF%86%E5%90%88%E9%9B%86) - 大佬坐镇 59 | - [fp小分队知识合集](https://github.com/refactoring-now/X-Team/tree/master/fp%E5%B0%8F%E5%88%86%E9%98%9F%E7%9F%A5%E8%AF%86%E5%90%88%E9%9B%86) - 大佬坐镇 60 | - [设计模式小分队知识合集](https://github.com/refactoring-now/X-Team/tree/master/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E5%B0%8F%E5%88%86%E9%98%9F%E7%9F%A5%E8%AF%86%E5%90%88%E9%9B%86) - 大佬坐镇 61 | - [重构小分队知识合集](https://github.com/refactoring-now/X-Team/tree/master/%E9%87%8D%E6%9E%84%E5%B0%8F%E5%88%86%E9%98%9F%E7%9F%A5%E8%AF%86%E5%90%88%E9%9B%86) - 大佬坐镇 62 | - [nodejs小分队知识合集](https://github.com/refactoring-now/X-Team/tree/master/nodejs%E5%B0%8F%E5%88%86%E9%98%9F%E7%9F%A5%E8%AF%86%E5%90%88%E9%9B%86) - 大佬坐镇 63 | - [flutter小分队知识合集](https://github.com/refactoring-now/X-Team/tree/master/flutter小分队知识合集) - 大佬坐镇 64 | - [源码终结小分队知识合集](https://github.com/refactoring-now/X-Team/tree/master/%E6%BA%90%E7%A0%81%E7%BB%88%E7%BB%93%E5%B0%8F%E5%88%86%E9%98%9F%E7%9F%A5%E8%AF%86%E5%90%88%E9%9B%86) - 大佬坐镇 65 | - [小程序小分队知识合集](https://github.com/refactoring-now/X-Team/tree/master/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%B0%8F%E5%88%86%E9%98%9F%E7%9F%A5%E8%AF%86%E5%90%88%E9%9B%86) - 大佬坐镇 66 | - [react小分队知识合集](https://github.com/refactoring-now/X-Team/tree/master/react%E5%B0%8F%E5%88%86%E9%98%9F%E7%9F%A5%E8%AF%86%E5%90%88%E9%9B%86) - 大佬坐镇 67 | - [vue小分队知识合集](https://github.com/refactoring-now/X-Team/tree/master/vue%E5%B0%8F%E5%88%86%E9%98%9F%E7%9F%A5%E8%AF%86%E5%90%88%E9%9B%86) - 大佬坐镇 68 | - [图形编程小分队知识合集](https://github.com/refactoring-now/X-Team/tree/master/%E5%9B%BE%E5%BD%A2%E7%BC%96%E7%A8%8B%E5%B0%8F%E5%88%86%E9%98%9F%E7%9F%A5%E8%AF%86%E5%90%88%E9%9B%86) - 大佬坐镇 69 | - [端智能小分队知识合集](https://github.com/refactoring-now/X-Team/tree/master/%E7%AB%AF%E6%99%BA%E8%83%BD%E5%B0%8F%E5%88%86%E9%98%9F%E7%9F%A5%E8%AF%86%E5%90%88%E9%9B%86) - 大佬坐镇 70 | - [面试小分队知识合集](https://github.com/refactoring-now/X-Team/tree/master/%E9%9D%A2%E8%AF%95%E5%B0%8F%E5%88%86%E9%98%9F%E7%9F%A5%E8%AF%86%E5%90%88%E9%9B%86) - 大佬坐镇 71 | - [高效工具分享小分队知识合集](https://github.com/refactoring-now/X-Team/tree/master/高效工具分享小分队知识合集) - 大佬坐镇 72 | - [多语言编程小分队知识合集](https://github.com/refactoring-now/X-Team/blob/master/%E5%A4%9A%E8%AF%AD%E8%A8%80%E7%BC%96%E7%A8%8B%E5%B0%8F%E5%88%86%E9%98%9F%E7%9F%A5%E8%AF%86%E5%90%88%E9%9B%86/README.md) - 大佬坐镇 73 | - [pwa小分队知识合集](https://github.com/refactoring-now/X-Team/tree/master/pwa%E5%B0%8F%E5%88%86%E9%98%9F%E7%9F%A5%E8%AF%86%E5%90%88%E9%9B%86) - 大佬坐镇 74 | - [webAssembly小分队知识合集](https://github.com/refactoring-now/X-Team/tree/master/webAssembly%E5%B0%8F%E5%88%86%E9%98%9F%E7%9F%A5%E8%AF%86%E5%90%88%E9%9B%86) - 大佬坐镇 75 | 76 | 77 | ## X-Team 78 | 79 | 前端狂想录组织的首页: 80 | 81 | [X-Team](https://github.com/refactoring-now/X-Team) 82 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /前端狂想录的花名册.md: -------------------------------------------------------------------------------- 1 | 2 | # 花名册 3 | 4 | 这是每一个属于前端狂想录的独一无二的花名册,具有唯一性。 5 | 6 | # 花名册内容 7 | 8 | 9 | 1. **群主:路飞** 10 | 2. 鸣人 11 | 3. 龙骑士-尹志平 12 | 4. 阿丽塔 13 | 5. 飞鼠 14 | 6. 风清扬 15 | 7. 白熊 16 | 8. C.C 17 | 9. 奈奈生 18 | 10. 琴酒 19 | 20 | 21 | --------------------------------------------------------------------------------