# Front-end-learning-to-organize-notes

**Repository Path**: orangecola/Front-end-learning-to-organize-notes

## Basic Information

- **Project Name**: Front-end-learning-to-organize-notes
- **Description**: ☀小狮子前端の学习☁整理笔记❤   Front-end-learning-to-organize-notes 帮你整理好前端知识体系、更高效地吸收经验成果；另附小狮子前端进阶小册食用指北，敬请关注！
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2020-11-07
- **Last Updated**: 2024-08-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

##  :sunny:Front-end-learning-to-organize-notes

<p align="center">
<a href="http://hits.dwyl.com/Chocolate1999/Front-end-learning-to-organize-notes"><img src="http://hits.dwyl.com/Chocolate1999/Front-end-learning-to-organize-notes.svg" alt="HitCount"></a><a href="https://www.gnu.org/licenses/"> <img src="https://img.shields.io/github/license/Chocolate1999/Front-end-learning-to-organize-notes.svg" alt="License"></a><a href="https://github.com/Chocolate1999/Front-end-learning-to-organize-notes/network"> <img src="https://img.shields.io/github/forks/Chocolate1999/Front-end-learning-to-organize-notes.svg" alt="GitHub forks"></a> <a href="https://github.com/Chocolate1999/Front-end-learning-to-organize-notes/stargazers"> <img src="https://img.shields.io/github/stars/Chocolate1999/Front-end-learning-to-organize-notes.svg" alt="GitHub stars"></a><img src="https://camo.githubusercontent.com/cb8cb80af654f3dae14a4aa62e44bf62f16953d6/68747470733a2f2f6a617977636a6c6f76652e6769746875622e696f2f73622f6c616e672f6368696e6573652e737667"></img></p>

## :seedling:仓库地址

传送门：https://github.com/Chocolate1999/Front-end-learning-to-organize-notes/

## :loudspeaker:公告
感谢访问本站，若喜欢请收藏，star支持一下 ✿✿ヽ(°▽°)ノ✿

## :snowman:笔记网站（更新）

https://yangchaoyi.vip/ （基于hexo-butterfly主题搭建的博客，整理面试记录）

https://yangchaoyi.vip/iBook/ （基于vuepress搭建的前端学习笔记，目前还在建设当中）

为了让您更好的阅读本仓库笔记，考虑还是建了个人网站，本仓库内容陆续都会更新到网站上，你可以根据分类找到你想阅读的文章，隆重感谢给本仓库点 Star 的小伙伴!


##  :sunny:小狮子前端Vue进阶小册 食堂开饭啦

![](https://cdn.jsdelivr.net/gh/chocolate1999/cdn/img/20200902104534.png)

<a href="https://yangchaoyi.vip/posts/20200902/">秋招投递清单传送门</a>

## :rabbit2:仓库内容

| Ⅰ| Ⅱ|Ⅲ|Ⅳ|  Ⅴ | Ⅵ| Ⅶ| Ⅷ | Ⅸ|
|:--------:|:-------------:|:-------------:|:-------------:|:-------------:|:-------------:|:-------------:|:-------------:|:-------------:|
| <a href="https://github.com/Chocolate1999/Front-end-learning-to-organize-notes/tree/master/HTML">HTML 总结</a> | <a href="https://github.com/Chocolate1999/Front-end-learning-to-organize-notes/tree/master/CSS">CSS 总结</a>   |  <a href="https://github.com/Chocolate1999/Front-end-learning-to-organize-notes/tree/master/JS">JS 总结</a> |  <a href="https://yangchaoyi.vip/tags/%E9%9D%A2%E8%AF%95/">面试经历</a>  | <a href="https://github.com/Chocolate1999/leetcode-javascript">LeetCode刷题 </a>    | <a href="https://github.com/Chocolate1999/Front-end-learning-to-organize-notes/tree/master/Vue%E5%8F%8A%E6%BA%90%E7%A0%81">Vue及源码</a> |    <a href="https://github.com/Chocolate1999/Front-end-learning-to-organize-notes/tree/master/%E9%9D%A2%E8%AF%95%E6%8A%80%E5%B7%A7">面试技巧</a>  | <a href="https://github.com/Chocolate1999/Front-end-learning-to-organize-notes/tree/master/%E5%B7%A5%E5%85%B7%E6%80%BB%E7%BB%93">工具总结</a>|   <a href="https://github.com/Chocolate1999/Front-end-learning-to-organize-notes/tree/master/Interview%20Questions">前端全家桶 </a>  | 

## :seedling:前端下饭厨师长の自我介绍
大家好，我是 **Chocolate**，计算机领域的 `ycy`，CSDN博客专家，平常习惯就是写博客，总结所学知识，因为我觉得计算机领域知识特别多，并且更新速度很快，今天才学的东西明天就更新换代都是可能的，并且知识如果不长期巩固是容易遗忘的，写博客总结就是一个很好的输入输出过程。

 考虑了许久之后，还是申请了这个专栏。与其说是专栏，我还是更喜欢叫它小册，因为我更想让它成为一本书籍。那么你食用这本小册能够学到什么？


<a href="https://blog.csdn.net/weixin_42429718/article/details/107134349">小狮子前端Vue进阶小册 开通食用指北</a>

## :pushpin:小册介绍

本小册用于学习知识整理，并不是只关于前端知识，涉及面很广：

- 1、Vue源码分析
- 2、手把手教 保姆级 撸代码
- 3、无惧面试，学以致用，继承创新
- 4、谈谈前端发展与学习心得
- 5、手写源码技术栈，附上详细注释
- 6、从源码中学习设计模式，一举两得
- 7、编程思想的提升及代码质量的提高
- 8、通过分析源码学习架构，看看优秀的框架
- 9、项目实战开发
- 10、面试准备，完善个人简历
- 11、经典面试题整理
- 12、算法刷题题库思路整理
- 13、面试经历分享
- 14、好书推荐，日常生活记录
- 15、未完待续...


## :loudspeaker:适宜人群
-  希望入门前端、寻找学习资料的小白
- 具备基本的 JavaScript、HTML 等前端技能，希望进一步提升自己的开发者
- 技术栈主要为 Vue 的程序员们
- 希望寻找一个更好工作机会的开发者
- 希望了解前端的大致知识框架的开发者
- 希望了解大厂常考知识点的开发者
- 为面试实习找工作做准备的求职者
- 需要灵感的面试官
- 愿意为博主打赏，请博主冰阔落的 dalao 们

## :balloon: 购买须知
本小册每篇博文几乎是上万字，预计会发布50篇左右原创文章。
全部文章预计 2021年6月23日之后不再更新；
购买用户可享有小册永久的阅读权限；
本小册为虚拟内容服务，一经购买成功概不退款；
小册版权归作者所有，任何机构、媒体、网站或个人未经本网协议授权不得转载、链接、转贴或以其他方式复制发布/发表，违者将依法追究责任；
在小册阅读过程中，如有任何问题，可以私信博主。


## :tada:项目经历

| 项目名称 |  时间    |项目地址|
|:--------:| :-------------:| :-------------:|
|     J2EE项目-OnlineSchool（前后端分离的IT教育网站）      |     2019.07-2019.12  |  <a href="https://gitee.com/miaochuanpeng/Java-EE">传送门</a>         |
|  Vue全家桶开发电商管理系统（Element-UI） | 2019.12-2020.01|<a href="https://gitee.com/Chocolate666/vue_shop">传送门</a> |
|  Vue-family-bucket-SSR-Koa2-full-stack-development-from-Meituan（高仿美团）  | 2020.03-2020.04 |<a href="https://github.com/Chocolate1999/Vue-family-bucket-SSR-Koa2-full-stack-development-from-Meituan">传送门</a>  | 
| hexo-blog-lionkk（基于hexo-butterfly:butterfly:主题魔改博客源码开放）| 2020.04-2020.07| <a href="https://github.com/Chocolate1999/hexo-blog-lionkk">传送门</a> |
| vue-shop（ :cat: Vue全家桶开发电商管理系统（Element-UI 重制上线版））| 2020.06-2020.07|  <a href="https://github.com/Chocolate1999/vue-shop">传送门</a>|
| Vue-MVVM（:star:剖析vue实现原理，动手实现一个简单版的mvvm:+1:）|  2020.07 | <a href="https://github.com/Chocolate1999/Vue-MVVM">传送门</a> |   

## :bulb:前言


前端还是一个年轻的行业，新的行业标准， 框架， 库都不断在更新和新增，正如赫门在2015深JS大会上的《前端服务化之路》主题演讲中说的一句话：“每18至24个月，前端都会难一倍”，这些变化使前端的能力更加丰富、创造的应用也会更加完美。所以关注各种前端技术，跟上快速变化的节奏，也是身为一个前端程序员必备的技能之一。

读者根据自己需要选择性阅读，面试题是对理论知识的总结，让自己学会应该如何表达。

><div>整理的仓库笔记目前还不全面，可能也会出现一些瑕疵问题，欢迎Star和提交issues。</div>

## :hourglass:面试注意点

面试有几点需注意：(来源<a href="https://weibo.com/wintercn">寒冬winter </a>老师，github:@wintercn)

 1. 面试题目： 根据你的等级和职位的变化，入门级到专家级，广度和深度都会有所增加。

 2. 题目类型： 理论知识、算法、项目细节、技术视野、开放性题、工作案例。

 3. 细节追问：可以确保问到你开始不懂或面试官开始不懂为止，这样可以大大延展题目的区分度和深度，知道你的实际能力。因为这种知识关联是长时期的学习，临时抱佛脚绝对是记不住的。

 4. 回答问题再棒，面试官（可能是你面试职位的直接领导），会考虑我要不要这个人做我的同事？所以态度很重要、除了能做事，还要会做人。（感觉更像是相亲(
    •̣̣̣̣̣̥́௰•̣̣̣̣̣̥̀ )）

 5. 资深的前端开发能把absolute和relative弄混，这样的人不要也罢，因为团队需要的是：你这个人具有可以依靠的才能（靠谱）。

## :pushpin:仓库介绍
文章内容多为学习记录而来，参考了部分优秀文章，文章排版以及内容都是本人整理的，希望对您有所帮助。

欢迎对改善本仓库提出好的意见，也欢迎Contributor，谢谢！

座右铭: 学如逆水行舟，不进则退

博客地址：https://chocolate.blog.csdn.net/


## :shaved_ice:前端开发所需掌握知识点概要

- HTML&CSS：

	对Web标准的理解（结构、表现、行为）、浏览器内核、渲染原理、依赖管理、兼容性、CSS语法、层次关系，常用属性、布局、选择器、权重、盒模型、Hack、CSS预处理器、
	CSS3、Flexbox、CSS Modules、Document flow、BFC、HTML5（离线 & 存储、Histoy,多媒体、WebGL\SVG\Canvas）		
- JavaScript：

    数据类型、运算、对象、Function、继承、闭包、作用域、事件、Prototype、RegExp、JSON、Ajax、DOM、BOM、
    内存泄漏、跨域、异步请求、模板引擎、模块化、Flux、同构、算法、ECMAScript6、Nodejs、HTTP

- 其他：

    主流MVVM框架(React\Vue\Angular)、Hybrid App\React Native\Weex、TypeScript、RESTFul、WEB安全、前端工程化、依赖管理、性能优化、
    重构、团队协作、可维护、易用性、SEO、UED、前端技术选型、快速学习能力等

## :christmas_tree:前端学习网站推荐




（以下排名不分先后）

|网站名称 | 网站地址      | 简要介绍 |
|:--------:| :-------------:|:-------------:|
| OSCHINA | <a href=" https://www.oschina.net/">https://www.oschina.net/</a> |  中文开源技术交流社区|
|       九章算法                        |                 <a href="https://www.jiuzhang.com/"> https://www.jiuzhang.com/</a>                            |           硅谷顶尖IT人员教授面试技巧          |
|         LeetCode                       |            <a href=" https://leetcode-cn.com/problemset/all/">https://leetcode-cn.com/problemset/all/</a>                                 |         面试找工作必刷            |
|             CSDN                   |            <a href=" https://chocolate.blog.csdn.net/"> https://chocolate.blog.csdn.net/</a>                                 |        优秀的博客           |
|            掘金                   |         <a href="https://juejin.im/">https://juejin.im/</a>                                    |   帮助开发者成长的社区                  | 
|          开源社区_深度开源                     |         <a href="https://www.open-open.com/">https://www.open-open.com/</a>                                    |       一切开源              |
|            慕课网                   |                 <a href=" http://www.imooc.com/">http://www.imooc.com/</a>                            |        程序员的梦工厂             |
|              div.io                 |                 <a href=" http://div.io">http://div.io</a>                             |    高质量前端资源汇聚                 |
|            推酷                   |           <a href="https://www.tuicool.com/">https://www.tuicool.com/ </a>                                   |          IT人专属个性阅读社区           |
|         Hacker News                      |        <a href="https://news.ycombinator.com/news">https://news.ycombinator.com/news</a>                                     |         新闻            |
|           InfoQ                    |           <a href=" https://www.infoq.cn/">https://www.infoq.cn/</a>                                   |               软件开发及领域知识传播-中文版      |
|             w3cplus                  |            <a href=" http://www.w3cplus.com/"> http://www.w3cplus.com/</a>                                 |        国内前端行业的技术博客             |
|           Stack Overflow                     |       <a href=" http://stackoverflow.com/">http://stackoverflow.com/</a>                                      |        为开发人员提供支持             |
|            w3school                   |           <a href=" http://www.w3school.com.cn/">http://www.w3school.com.cn/</a>                                   |       领先的 Web 技术教程 - 全部免费              |
|           MDN                    |             <a href=" https://developer.mozilla.org/zh-CN/docs/Web/">https://developer.mozilla.org/zh-CN/docs/Web/</a>                                |      Web 开发技术分享               |


## :rice_scene:官方文档推荐

- <a href="https://docs.huihoo.com/jquery/jquery-fundamentals/zh-cn/index.html">jQuery 基本原理</a>
- <a href="https://es6.ruanyifeng.com/">ECMAScript 6 入门 作者：阮一峰</a>
- <a href="http://bonsaiden.github.io/JavaScript-Garden/zh/">JavaScript 秘密花园</a>
- <a href="http://css.doyoe.com/">web前端开发参考手册系列之CSS参考手册</a>
- <a href="https://wangdoc.com/javascript/">JavaScript 教程</a>





## :gift_heart:贡献

将会持续分享关于前端面试真题，从零到拿到满意的Offer！觉得不错，来个Star!

同时，也欢迎你对本仓库的贡献，欢迎您的面试经验分享，如需贡献，公众号留言即可。

## :sunflower:版权申明

博客中的每篇文章都是我一字一句敲出来的，如需转载，请附上原文链接，表示对原作者的尊重。谢谢合作！

## :page_with_curl:排版

笔记内容按照 <a href="https://mazhuang.org/wiki/chinese-copywriting-guidelines/">中文文案排版指北</a>进行排版。

## :trophy:结尾

<font color=chocolate>欢迎关注微信公众号：小狮子前端Vue</font>

谢谢您的支持！✿✿ヽ(°▽°)ノ✿

注：本仓库不参与商业行为，也请各位读者周知。(This warehouse is not involved in commercial activities.)

转载使用请注明出处，谢谢！

## License

MIT