来自掘金的你——挖 "掘" 淘 "金" 之 前端闯关历险记学习资料汇总 #4
Comments
jawil
changed the title
|
有错误或者不好的地方麻烦大家批评指正 |
|
+1 |
|
老哥，稳！ |
|
赞，学习了！ |
|
32个赞 |
|
star |
|
mark~ |
|
老哥太稳了 |
|
发图不发种。。。滴，学生卡 |
|
稳 |
|
大神也是文学爱好者啊，肯定读了不少书吧~ |
|
可以的老司机 |
|
服 |
|
感谢分享，下来好好学习。发现一个笔误，第四部分第一句应该是“看山是山” |
|
大大的整理真的是很好，现在才发现希望不迟哈 |
10 tasks
|
能不能有点简单的东西，我也想进入互联网捞金啊 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
零、起因
世间万物，为我所用。
掘金不仅是一个很好的在线同性交友平台，也是一个学习交流和分享技术场所，更是程序猿和程序媛获取养料的精神家园。
分享是一个杂乱无章的环节，这无可厚非，因为在这里人人平等，每个人都可以分享自己看到的精品文章，也可以创作记录分享自己的成果，这是平台带给大家的优势，同时，面对零零散散的文章，对于我们来说，很困惑，我到底该学什么，从入门到精通的过程是怎样的？我该如何系统的学习这门语言？
汪洋大海，我该如何探寻所需的宝藏？
学习路途，我该如何寻找最佳的曲线？
去年开始看掘金，收藏了很多文章，也收获了很多知识，但是对于上面的疑问一直也在摸索当中，这里先感谢掘金这个平台，让我能学习到很多新的未知的东西，但在用掘金的这段时间内，也发现看的东西虽然很多，但是很杂，没有系统化的去深入了解一个东西，于是诞生了把自己看到过的，错过的，还有将要发表的，一起做一个整理和集合。
看见好的文章就收藏，后来发现收藏了几百篇，很多都是重复的，也不够系统化，资源如浩瀚大海，找起来也麻烦，无疑给自己增加了负担，在此，为了方便大家系统的学习前端这门课程，找准自己的定位，我利用空余时间，把掘金有屎以来分享的前端文章做了一个归类，方便掘金的朋友学习和收藏，喜欢的朋友可以收藏一下，这篇文章会持续更新，也欢迎关注【我的GitHub博客】获取最新动态。
贵有恒何必三更眠五更起，最无益只怕一日曝十日寒。 一天更新一点，每天看一点，坚持就是胜利，如果只整理和收藏不花时间看，一切都是徒劳。✌️
一、推荐规则
二、代码规范篇
没有规矩，无以成方圆。
为什么把这个放在首位呢？好的代码规范不仅自己看起来赏心悦目，心情舒畅，我怎么就这么牛逼写出这么好看的代码（熏疼自己三秒钟，这往往只是错觉），别人看起来也直观一目了然，后来接手维护的人看了这种高逼格的代码也不会出现这种情况：这尼玛什么几把玩意，简直一坨翔，坑死劳资了（反正我走了也听不到🙉，你就骂吧）
2.1 前端开发规范总览
2.2 HTML规范
2.3 CSS规范
2.4 JS规范
2.5 ES6规范
三、前言
国学大师王国维自己的著作《人间词话》中说：
古今之成大事业、大学问者，必经过三重境界：
第一境界:昨夜西风凋碧树,独上高楼,望尽天涯路。
第二境界:衣带渐宽终不悔,为伊消得人憔悴。
第三境界:众里寻他千百度,蓦然回首,那人却在灯火阑珊处。
其实我觉得学习JavaScript也要经历类似的三种阶段：
第一境界:看山是山，看水是水。
第二境界:看山不是山，看水不是水。
第三境界:看山还是山，看水还是水。
国学大师王国维精妙地以三句词道破人生之路：起初的迷惘，继而的执着和最终的顿悟。
我以瞎几把乱扯三句词道破学习JavaScript之路：起初的表象，继而的本质和最终的本质回归到现象。
四、JavaScript基础篇
看是是山，看水是水。
万丈高楼平地起，胸有丘壑宏图画。
合抱之木,生于毫末;九层之台,起于累土;千里之行,始于足下。任何事情都要从基础做起，打好基础，不浮躁，才能做好一件事，学习一门语言也是一样，从“Hello World!"开始，踏踏实实，夯实基础，基础知识是整个学习体系的根本,没有牢固的基础知识作为根基,我们的学习和努力必将事倍功半,学习提纲是巩固基础知识的一种有效手段.五、JavaScript进阶篇
看山不是山，看水不是水。
其实地上本没有坑，踩的人多了，于是就有了。
JS是一门玄学，是一门很灵活的语言，当然里面有很多不好懂的概念，尤其是学完基础之后，对
执行环境、this、类型转换、作用域链、闭包、原型链、继承、eval、JS左值与引用、浅复制与深复制、IIFE、模块化、函数式编程等等都有着这样或那样的不解之惑，想要成为JS大神这些门槛和坑不得不踩。5.1 内存空间
因为JavaScript具有自动垃圾回收机制，所以对于前端开发来说，内存空间并不是一个经常被提及的概念，很容易被大家忽视。特别是很多不是计算机专业的朋友在进入到前端之后，会对内存空间，内存管理，内存释放的认知比较模糊，甚至有些人干脆就是一无所知。5.2 执行上下文与作用域
首先来说说js中的执行环境，所谓执行环境（也称执行上下文–execution context）它是JavaScript中最为重要的一个概念。执行环境定义了变量或函数有权访问的其他数据 ，决定了它们各自的行为。而每个执行环境都有一个与之相关的变量对象，环境中定义的所有变量和函数都保存在这个对象中。当代码在一个环境中执行时，会创建变量对象的一个作用域链（scope chain）。作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问。作用域链包含了执行环境栈中的每个执行环境对应的变量对象.通过作用域链，可以决定变量的访问和标识符的解析。5.3 变量对象
深入理解执行上下文中的变量对象，从原理上解释变量提升，为接下来理解作用域链，闭包，原型打下坚实的理论基础，值得基础知识不牢固的盆友一阅。5.4 作用域链与闭包
当代码在一个环境中执行时，会创建变量对象的一个作用域链（scope chain）。作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问。作用域链包含了执行环境栈中的每个执行环境对应的变量对象.通过作用域链，可以决定变量的访问和标识符的解析。关于闭包的概念，是婆说婆有理。因而，我就翻阅了**红皮书(p178)**上对于闭包的陈述：
闭包是指有权访问另外一个函数作用域中的变量的函数这概念有点绕，拆分一下。从概念上说，闭包有两个特点：
在ES 6之前，Javascript只有函数作用域的概念，没有块级作用域（但catch捕获的异常 只能在catch块中访问）的概念（IIFE可以创建局部作用域）。每个函数作用域都是封闭的，即外部是访问不到函数作用域中的变量。
5.5 this
This,传说中的天使还是魔鬼？对于新手来说，this的指向一直是很头疼的地方，用的好就是天使，用的差就是魔鬼了，人人都想成为代码中的天使，为了避免成为魔鬼，我们必须好好深入学习一下this的作用机理和一些常见的坑。5.6 原型链
在JS里，万物皆对象。方法（Function）是对象，方法的原型(Function.prototype)是对象。因此，它们都会具有对 象共有的特点。 即：对象具有属性__proto__，可称为隐式原型，一个对象的隐式原型指向构造该对象的构造函数的原型，这也保证了实例 能够访问在构造函数原型中定义的属性和方法。5.7 继承
Javascript 这门语言对于习惯了众多传统 OOP 语言 (c++,Java 等) 的 coder 来说其实是一门很奇怪的语言, 因为 Javascript 的 OOP 方式是基于原型的, 而非传统的类继承,主要有原型链继承，借用构造函数继承,组合继承，寄生式继承，寄生组合继承。5.8 arguments
每个函数都会有一个 Arguments 对象实例 arguments，它引用着函数的实参，可以用数组下标的方式”[]” 引用 arguments 的元素。arguments.length 为函数实参个数，arguments.callee 引用函数自身。5.9 类型转换
如果把通过函数或方法调用，明确的将某种类型转换成另一种类型称为显示转换 ，相反则称为隐式类型转换 。google和维基百科中没有找到“显示类型转换”，“隐式类型转换”的字眼。暂且这么称呼。 JavaScript的数据类型是非常弱的（不然不会叫它做弱类型语言了）！在使用算术运算符时，运算符两边的数据类型可以是任意的，比如，一个字符串可和数字相加。之所以不同的数据类型之间可以做运算，是因为JavaScript引擎在运算之前会悄悄的把他们进行了隐式类型转换的，如下是数值类型和布尔类型的相加：5.10 IIFE
全拼Imdiately Invoked Function Expression，立即执行的函数表达式。立即执行函数在模块化中也大有用处。用立即执行函数处理模块化可以减少全局变量造成的空间污染，构造更多的私有变量。立即执行函数写法大全：
5.11 setTimeout
平时的工作中，也许你会经常用到setTimeout这个方法，可是你真的了解setTimeout吗？本系列想通过总结setTimeout的用法，顺便来探索javascript里面的事件执行机制。在一个基础阶段，理解JavaScript定时器的工作原理的是非常重要的。通常它们看起来不那么直观，因为它们处于单线程中。5.12 Object.defineProperty()函数
该方法允许精确添加或修改对象的属性。一般情况下，我们为对象添加属性是通过赋值来创建并显示在属性枚举中（for...in 或 Object.keys 方法）， 但这种方式添加的属性值可以被改变，也可以被删除。而使用 Object.defineProperty() 则允许改变这些额外细节的默认设置。例如，默认情况下，使用 Object.defineProperty() 增加的属性值是不可改变的。 对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。数据描述符是一个拥有可写或不可写值的属性。存取描述符是由一对 getter-setter 函数功能来描述的属性。描述符必须是两种形式之一；不能同时是两者。5.13 call、apply、bind
今天看博客时，看到了这样的一段js代码： var bind = Function.prototype.call.bind(Function.prototype.bind); 上面那段代码涉及到了call、bind，所以我想先区别一下call、apply、bind的用法。这三个方法的用法非常相似，将函数绑定到上下文中，即用来改变函数中this的指向。这个系列就是让大家深入理解其中的差异。5.14 深拷贝与浅拷贝
首先深复制和浅复制只针对像 Object, Array 这样的复杂对象的。简单来说，浅复制只复制一层对象的属性，而深复制则递归复制了所有层级。5.15 正则表达式
还记得被称为正则小王子的jQuery作者吗？但正则表达式对于我来说一直像黑暗魔法一样的存在。手机正则去网上搜，邮箱正则去网上搜，复杂点的看看文档拼凑一下，再复杂只能厚着脸皮让其他同事给写一个。从来没有系统的学习过，搞完这个系列是不是准备拿下它。直接来个
膜法小编 的收藏集：
5.16 事件
JavaScript 程序采用了异步事件驱动编程（Event-driven programming）模型，维基百科对它的解释是：
事件驱动程序设计（英语：Event-driven programming）是一种电脑程序设计模型。这种模型的程序运行流程是由用户的动作（如鼠标的按键，键盘的按键动作）或者是由其他程序的消息来决定的。相对于批处理程序设计（batch programming）而言，程序运行的流程是由程序员来决定。批量的程序设计在初级程序设计教学课程上是一种方式。然而，事件驱动程序设计这种设计模型是在交互程序（Interactive program）的情况下孕育而生的5.17 其他混淆点
其他一些容易混淆的难点就不单独开一个类型，这里就统一做一个系列说明，也是平时经常遇到的一些痛点和难点吧，主要是区分一些概念，知道彼此之间的异同，以下简称一张图系列。六、JavaScript高手篇
看山还是山，看水还是水。
如果学习JavaScript不是为了成为高手，那将毫无意义。
其实，高手有一颗寂寞的心，因为高手的造就本就是用寂寞堆积而成。
6.1 JavaScript数据结构与算法篇
程序设计=数据结构+算法
6.1.1 数组去重
6.1.2 排序
6.1.3 查找
6.1.4 数据结构
6.1.5 其它
6.2 JavaScript跨域
** 由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。具体可以查看下表（来源）**
6.3 JavaScript设计模式
为什么要学习设计模式？ 做事情之前问个为什么总是好的。关于设计模式的好坏，我在知乎上也看过一些讨论，有知友对其提出过一些疑问，里面有一些关于设计模式的观点：任何事物的出现都有其道理，任何语言都有其不足之处，设计模式是对语言不足的补充（Peter Norvig)。设计模式也是编程经验的总结，我想学习它对像我这样的前端新手的能力会有很大的提升。细说说它的好处：
设计模式能让你用更少的词汇做更充分的沟通；
谈话在模式层次时，不会被压低到对象和类这种琐碎的事情上；
懂设计模式的团队，彼此之间对于设计的看法不容易产生误解；
共享词汇能帮助初级人员快速成长。
6.4 JavaScript函数式编程
什么是函数式编程？
6.5 JavaScript高阶函数
具体来说，在 JavaScript 中，我们可以将一个函数 A 作为参数传给另一个函数 B，或者，在函数 B 中将函数 A 作为返回值返回。那么这里的函数 B 就是上面所说的高阶函数。 在《javascript设计模式和开发实践》中是这样定义的。 函数可以作为参数被传递； 函数可以作为返回值输出。6.6 JavaScript性能优化
天下武功，无坚不摧，唯快不破。
Javascript是一门非常灵活的语言，我们可以随心所欲的书写各种风格的代码，不同风格的代码也必然也会导致执行效率的差异，作用域链、闭包、原型继承、eval等特性，在提供各种神奇功能的同时也带来了各种效率问题，用之不慎就会导致执行效率低下,开发过程中零零散散地接触到许多提高代码性能的方法，整理一下平时比较常见并且容易规避的问题。6.7 JavaScript 柯里化
就像最早听到斐波拉切数列一样，第一次听到柯里化我也是懵逼的
柯里化又称部分求值，字面意思就是不会立刻求值，而是到了需要的时候再去求值。如果看的懵逼，没事，看完整篇文章再回过头来看这里你就会豁然开朗。 反柯里化的作用是，当我们调用某个方法，不用考虑这个对象在被设计时，是否拥有这个方法，只要这个方法适用于它，我们就可以对这个对象使用它。6.8 JavaScript调试
如今 Chrome 浏览器无疑是最受前端青睐的工具，原因除了界面简洁、大量的应用插件，良好的代码规范支持、强大的 V8 解释器之外，还因为 Chrome 开发者工具提供了大量的便捷功能，方便我们前端调试代码，我们在日常开发中是越来越离不开 Chrome，是否熟练掌握 Chrome 调试技巧恐怕也会成为考量前端技术水平的标杆。 介绍 Chrome 调试技巧的文章很多，本文结合我自己的开发经验，希望从实际运用的角度为大家再一次谈一谈这些功能，也希望对大家都有所帮助和启发。 在chrome的开发者工具中，通过断点调试，我们能够非常方便的一步一步的观察JavaScript的执行过程，直观感知函数调用栈，作用域链，变量对象，闭包，this等关键信息的变化。因此，断点调试对于快速定位代码错误，快速了解代码的执行过程有着非常重要的作用，这也是我们前端开发者必不可少的一个高级技能。6.9 前端安全
天下武功，唯快不破。算法越快，越容易破。
6.10 技巧和效率
技巧恰似黑魔法，效率堪比加速器，都是开发过程中不可或缺的一部分，善用技巧，提高效率。
高手之所以高，很大一部分在于技巧巧妙，效率高，让人自愧不如，所以成了我们眼中的高手，其实高手也是从菜鸟过来的，由于长期的学习和经验的积累，再加上善于总结，自然一步步成长成为高手，为了加速自己成为高手，我们可以向高手取经，学习他们分享的一些技巧和解决问题思维方式。七、JavaScript框架篇
青，取之于蓝而青于蓝；冰水为之而寒于水。
jQuery:一年没写链式JQ了，在这个人手一个MVVM框架的年代，JQuery就不做推荐，想要了解可以自行学习。
vue.js react.js,angularjs···此处省略一万篇文章和略干文字。
关于框架的学习，最好多看看官方文档，多多实践，我这里就不多做介绍了，框架太多，我用的也不多，这里也就不献丑推荐什么的，自己对框架也一知半解，没有深入去研究底层的实现，仅仅停留在够用就行没去深究的层面，大家想学什么框架可以自己去搜索相关资料和教程。
八、HTTP和HTTPS篇（待续，下一步学习中）
九、前端工程化篇
解放双手，成就你的梦想。
十、全栈篇之Node.js（待续，正在学习中nodejs）
十一、面试篇
11.1 简历模板
简历好比人的一张脸，不能丑了别人，爽了自己。
对于开发者与设计师们，一封好的的简历会让自己的面试增色不少。本次分享的简历简介精致，而且样式多种多样。包含 INDD、IDML、PDF、PSD、DOCX 等格式，方便自由修改和学习。11.2 面试题
任凭风吹雨打，胜似闲庭信步。
首先我希望表达的一点，就是面试的评判跟学校里的考试完全是两回事，太多的人把面试当做考试而把注意力放在题目上。 事实上面试中未必是所有题目全都回答"正确"就一定会通过或者较高评价。面试是面试官和面试者双方"挖掘与展示才能"的过程，参考前面提到的面试过程，全部回答正确的情况很可能是因为面试官不感兴趣懒得追问。 对于面试官而言，基本评判原则就是"我要不要这个人做我的同事？"，多数情况下，这个答案会非常清楚。一些题目是充分的，也就是"回答对了说明这个人具有可以依靠的才能"，一些题目则是必要的，也就是"回答错了说明这个人无法胜任我们的工作"。11.3 面试技巧、经验与感悟
他山之石，可以攻玉。
经验犹如一所大学校，它能使你认识到自己是个什么样的傻瓜。
人生就是不断的推销自己，不停的面试，狭义的面试我们认为就是工作上的面试，而广义的面试就是做人的面试，到处就是展示推销自己。看看别人面试心得，取经一下，避免别人已经犯过的错误，也是一种进步。十二、资源汇总
积土成山,风雨兴焉;积水成渊,蛟龙生焉。
善于积累，善于总结，也是学习的一门功课，积累是一个循序渐进的过程，搜集总结同时也是一个费时费力的过程，看看别人的积累和总结，不禁感叹于别人的知识面和认真的态度，自己会觉得有压力从而产生动力，此时的自己会不会蠢蠢欲动，给自己所学所看来一个强势的总结呢？十三、插件
插件是我们开发时候的左膀右臂。
平时自己写插件主要有下面几个问题：
（1）开发插件需要时间，可能拖延项目工期，如果工期紧急不建议选用这种方式
（2）自己造的轮子未必有现有轮子的好用，要考虑到队友是否适用
（3）需要比较高的开发水平
这里搜集一些常用的插件供大家参考使用。
十四、工具篇
工欲善其事，必先利其器。
张三和李四都要上山砍柴，但他们的斧头都有点钝了，张三没有理会，拿着斧头就上山了，因为他的斧头不利，砍的都是比较细的树柴……李四就不同了，他拿来磨刀石，用劲地把斧头先磨好，虽然他比张三慢了起步，但是他的准备工夫做到家了，砍柴砍得很快。到太阳下山了，张三只背了小小的一捆柴下来，但是李四，背着一大捆的柴下来…… 由此可见，准备工夫做好了，可以事半功倍！十五、鸣谢
十六、广告
本文分享首发【掘金】，同时收录在【我的GitHub博客】，觉得本文写的不算烂的，可以点击【我的GitHub博客】顺便登录一下账号给个星星✨鼓励一下，关注最新更新动态，大家一起多交流学习，欢迎随意转载交流，不要钱，文末有福利哦😯，你懂的😉。
登高自卑，与君共勉。
十七、福利
文武之道，一张一弛，要劳逸结合，是不是？
老司机镇楼，投币上车。骚年，看了这么多这么累，是不是该撸一发呢😄，我好想射点什么，先撸一盘LOL去了，哈哈，大家别想歪了。
待续的今后继续更新完善。
The text was updated successfully, but these errors were encountered: