Bootstrap严格来说不是一个前端框架,它是一个组件库,相当于在这个框架内它提前设定好了各个类该如何呈现,我们在做WEB开发的时候,引用bootstrap之后直接将这些类名套用到元素上,就能快速地对元素修改样式。

Bootstrap的确非常方便,上手很快:

  • 它需要我们自己去定义的东西很少,我们只用搭积木似的把元素往页面上安装就可以了,一个类名就对应了一组样式
  • 它是用于响应式布局、移动设备优先的框架,能够帮我们快速搞定大屏幕和小屏幕的布局
  • 它的兼容性比较好
阅读全文 »

新改版的FreeCodeCamp把前端框架单独拆出来,除了旧版就有的Bootstrap和jQuery库的内容之外,补全了Sass内容,添加了React和Redux内容。

FCC前端框架

  • Bootstrap
  • jQuery
  • Sass
  • React
  • Redux
  • React and Redux
  • Front End Libraries Projects
    • Build a Random Quote Machine
    • Build a Markdown Previewer
    • Build a Drum Machine
    • Build a JavaScript Calculator
    • Build a Pomodoro Clock

函数式编程是新添加的一个模块,其中重点讲了函数式编程的特点以及一些能用于函数式编程的方法。

函数式编程的特色

  • 方法独立:对于环境变量的依赖小
  • 用法单纯:输入相同的参数总是产生相同的结果
  • 对环境污染小:会谨慎控制对函数外部数据产生的影响

函数式编程的准则

  • 不改变任何东西,无论是全局变量还是对象
  • 明确依赖,把函数依赖的对象直接作为参数传递给函数

函数式编程相关的概念

  • callback回调函数
  • first class function一级函数
  • high-order function高阶函数
  • lambda函数
阅读全文 »

这部分没有具体的知识点,全都以习题的形式来巩固之前的内容。这里我直接将题目和解答思路放上来:

阅读全文 »

面向对象编程是JS里一个非常核心的思想,几乎所有面试的习题也都会涉及到这部分内容。这次FCC改版后的习题也单独把这部分内容做成了一个模块。以线性的创建父类和子类的顺序来讲解知识点。

阅读全文 »

Learning Card

  • 规则
    • 只要等号两边形式相同,就可以将右边的值赋予左边的变量
    • 有遍历接口的类型都可以解构赋值(字符串、数组、Set、generator函数…)
  • 数组的解构赋值
    • 完全解构 左边完全等同于右边
    • 不完全解构 左边形式仅为右边形式的一部分
  • 对象的解构赋值
    • 变量与属性同名,根据属性赋值
  • 默认值
    • 等号左边形式中给变量赋值
    • 对应变量的值严格等于undefined即可生效
  • 字符串的解构赋值
    • 转换成类似数组的对象
  • 数值和布尔值的解构赋值
    • 县转换为对象
  • 函数的参数也可以解构赋值
  • 常见用途
    • 交换变量的值
    • 函数返回多个值
    • 提取JSON数据
    • 遍历Map结构
    • 输入模块的指定方法
阅读全文 »

在第一篇inbox体系里提到的知识管理的4个阶段:

输入 ==> 加工整理 ==> 建立体系 ==> 内化&输出

其中,第二阶段「加工整理」重点讲了我们如何处理知识(费曼技巧)以及我们如何管理知识(Evernote印象笔记)。第3课「工具论」是对使用印象笔记方法的一个概括。

我们在使用工具的时候,最初的目标都是提供学习/工作的效率,然而,我们很容易陷入两个极端,一种叫做「工具癖」,就是找来很多工具,每个都试一试,花很多实际研究它们,最后忘记了为什么使用工具;还有一种属于「工具恐惧症」,这类人害怕使用工具,就像《禅与摩托车维修艺术》里的那对夫妻,他们不愿意了解和学习使用新工具,比如电子产品,内心对使用这些新鲜事物充满了恐惧。

事实上,我就是一个典型的工具癖,对于感兴趣的主题的app,我一般都会下载好几个来试一试,然后再确定最终使用哪一个。而且每次发现有新的好玩的APP,我也一定会下载下来。遇到好看的app会格外的爱不释手。虽然有时候也的确觉得自己花费了太多时间在尝试上,但是这些尝试的过程还挺有有趣的。

课程里提倡使用工具之前需要明白工具设计的目的,先梳理工作流程,再确定怎么使用。这点我还挺同意的,因为如果不是出于目的去使用某个工具的话,之后根本就不太会用到这个工具,只是留在手机或者电脑里占空间。但如果是按需使用的话,会不断强化对工具的熟悉,从而在工具本身提升效率的基础之上,再提升使用工具的效率。

此外,课程还提出使用20%的核心操作与80%的奇淫巧技,认为只需要掌握20%的核心操作即可,这点我认为不能这么专断地下结论,对于课程里提到的比如印象笔记、forest等工具,实际上我们的使用都不止20%,像印象笔记,课程还花了挺多篇幅来介绍用法。此外,像程序员使用的sublime text或者atom, vs code这类编辑器都会在很多场合下不断扩展它的用途。何况研究工具本身也是帮我们了解自己工作需求的一个过程,很多时候我都是通过工具本身的功能来了解到工作流程中还有哪些方面是可以有改进的。使用工具到底是被工具驾驭还是驾驭工具根本上还是看个人,工作方法也一定会因人而异。

这一课用来举例的工具是印象笔记,课程以使用印象笔记来整理资料的基本流程来解释了我们该如何使用它。

比如我们要做的第一步就是「收集」资料,这里我们就可以通过注入浏览器的web clipper插件、微信号「我的印象笔记」等来收集,这一点我在第一篇里也写过,像Alfred和PopClip都有相关插件可以使用。

第二步是「整理加工」,这一步的方法就是上一篇提到过的通过高光和卡片来实现费曼技巧,此外还可以结合印象笔记的「本地链接」和「网络链接」来实现知识之间的互通,在使用XMind一类的思维导图软件时,都可以将链接加入进去,从而慢慢构建出一个系统性的知识框架。

第三步是系统管理印象笔记内的知识,这里提出要构建一个笔记本体系,具体方法将在下一篇中详细解释。

总之,使用工具的核心都应该是克制和极致的。不在工具上纠结而浪费时间,使用工具只为解决问题,并在使用上达到极致。

这部分习题难度不大,复习和巩固了很多数据结构基础部分提到的处理字符串和数组的方法,但是有些平时容易觉得自己明白的内容还是有很多迷惑人的地方,容易让习题出错。

我按照习题的顺序来梳理出现的知识点(以下是我自己的解法,可能不是最优方法),另外附加几个我觉得重点辨析在最后面:

阅读全文 »

这部分主要列举了一些实际写代码过程中容易犯的错误和测试方法.

阅读全文 »
0%