kbmjj123 DEV-大前端技术栈

前言 时间是真实存在的”变量”，必须重视它的一个存在感。假如活到80岁，那么每一个人都将拥有960个月的生命时间(这里我们假定成为960个格子)，每消耗一个月，格子的数量就减少一个，这听起来非常地震撼。既然我们的时间是如此般的有限，那么我觉得更加有必要来深入了解什么是时间？如何才能拥有/赚取更多的时间？ 什么是时间在固定稀缺时间内来赚取更多的时间 马👨曾说过类似这样子一句话：有的人将365天活成了1天。🈯 的是有的人每天都在重复一样的事情，这对于时间的利用效率极为低下，唯有出现了不同的经历之后，才有可能出现新的意义，因此，我们应当活在当下，给自己”赚取”更多的时间。时间的赚取可以分为两个维度来分析： 单位时间内做事的数量 单位时间内做事的类型两者都是必须要在短时间通过大量的练习迅速达到一个再花时间下去，投入与产出比就不划算了的想法，尝试切到不同的事情上去安排时间 每个人的时间都很重要 每个人假定都拥有同等稀缺的960个月的时间，自己的时间重要了，那么别人的时间也是肯定同等地重要，因此在珍惜自己时间的同时，也尽量不去浪费到别人的时间，采用一种共赢的态度。当我们处理一件事情的时 ...

前言 金钱是什么？重新认识金钱有什么好处呢？应该以怎样的一个角度来认识金钱呢？金钱是一般物品等价交换的货币，用于衡量物品的价值！有句话：钱是万恶之源！其实说的有点片面了，我觉得 💰 每个人都like，但是呢，有的人以”非合规”的方式来取得的话，就不大好了，君子爱财，取之有道，说的也正是这个意思。只有真正理解了什么是钱，拥有更多的关于 💰 方面的知识，深知拥有更多的钱也就是拥有了更多的可用来换取更多/更大价值的物品这一简单的道理，用此来达成自己目的，钱就是完成自己目的的过程中的一个媒介而已。💰 无道德属性，只不过赚钱的途径 🈶 ，而且这个道德属性还是主管判断来的！！ 🌠 钱是价值的外在表现，别人付给我钱，是因为我向别人提供了价值，帮助了他们，所以如果我想要赚取更多的钱，意味着我需要提供更多的价值，帮助他人或者帮助更多的人。唯有这样，才是赚取更多的钱的根本路径！ 好运都是自己创造的 存储了足够的让好运发生的契机，穷人与富人的一个最大区别在于穷人没有想要成为富人的野心，如果一个人成长在充满野心的环境中的话，这有可能会倒逼自己成为那个充满野心的人，就像现在的互联网环境一样，行 ...

前言 大家应该都有过这样一个体验，看完一本书，过一阵子就忘，再看一遍，过一阵子再忘，再看再忘，如此反复！为什么会出现如此的浪费时间的反复无效动作呢？我想，应该是知识没有转变成为自己的知识吧，始终只是表面的简单接收书本 📖 中所表达出来的知识而已。👉 那么什么是知识？如何才能够获得知识呢？ 知识的特性 首先，知识拥有一定的属性：客观存在、在一定的知识框架领域内、相对正确。这理解起来也比较简单，比如在数学领域内，1+1=2，而在脑筋急转弯的领域内，1➕1未必等于2，可能是11，也可能是1等等，在不同领域内的知识，它们都是相对真确的！！ 知识的层次结构 首先来看 👆 的一个关于知识的分层结构图，从下而上，依次是 底层知识：通过简单阅读、吸收他人所发达的知识都属于底层知识，获取途径多，获取成本较低，仅需要付出时间即可获得； 加工知识：对简单习得的底层知识进行一个自己的思考、论证，从而转换为自己的方式来表达，并整理成为自己的知识输出； 知识框架：将一系列的加工知识，遵循自己一定的连接规则进行归纳、总结，形成自己的一整套知识框架体系，指导并影响加工知识的获取； 智慧：无形的一套产品， ...

前言 每个人的大脑，其实就像是一个电脑的CPU，正常情况下，它负责接收最基本的数据信息，然后进行一个加工，最后输出目标结果，而人与人之间的差异，在于对同一个基础的信息的录入后，产生了不同的加工方式，由于其逻辑算法的不同(长期的积累而形成的)，导致拥有了不同输出结果，如下图所示： 要从根本上提升自身的认知水平，需要从最基础的大脑的工作过程来分析，一点一点地来剖析自己！👇 从几个方面来认清自己！！ 生而为人，坦然面对 一切从自身出发，自己的情绪、行为的理解，从根本上来理解自己为什么”会”这样子做？为什么”要”这样子做？”会”可能意味着自己是在无意识的情况下做出的，而”要”则表示是自己个人的一个意图，可能带有某种结果意图。👉 从而来更加深入地了解自己、剖析自己，这与之前学习的复盘其实是有所关联的，充分了解自己自身的一个局限性，掌握自己的一个能力范围，从而来制定一个个的计划来尝试突围自己，根据自身的实际能力范围，来一点一点地突破自己的能力界限，达到另外的一个层次境地！！🌠 须知自己也是一个普通的人，有着个人独特的情绪、行为，有大部分普通并无区别，但是，我们可以尝试着让自己在 ...

前言 第一次看见BEM，万脸懵逼，以前从来没有见过，而且也没人提及过，感觉这块 🈶点被前端开发佬们给忽视掉的样子，通过对官方文档的学习，原来我们一直都在接触着BEM，只不过用着舒服，但没有去里面具体深究而已！！ 那么，什么是BEM？为什么要使用BEM？如何来使用BEM呢？ 在开始介绍什么是BEM之前，先来看对比看一下未使用BEM以及使用了BEM之后的效果，比如🈶 以下的一个效果需要用css来实现出来： 👇 首先来看一下在此之前的一个常规写法： ⭐ 从 ☝ 我们可以看出这里的css其实是 🈶不少重复的地方的，接下来进行一波优化改进： 🌟进行了一波的优化之后，首先实现了同样的目标结果，然后将公共的部分进行了一个抽离，让每一次额外的css样式都以追加样式类的方式来加入，而且命名上也比较符合实际的运用场景！！ 那么如果使用了本文所要普及的BEM之后，又会是怎样的一个结果呢？ 🌠 进行了BEM化之后的样式，看起来好像 🆚之前的增加了代码量，但这里遵循了一个规则，就是所有的button ...

今天，跟大家分享一下我自己个人连续读半年的书后，发生了什么变化！ 可能大家都会觉得自己没有时间读书，每天都有做不完的活之类的话语，或者说是道理我都懂，但就是懒！难到就真的只是懒而已吗？其实不是，如果真的懂道理，就不会有这个情况的出现了。 首先这里并不是吹捧自己多厉害，阅读了有多少的书籍之类的，这里⚠️重要的是想跟大家分享一下，在平时忙碌的工作中，抽空来给自己充电🔋，补充自己的知识空缺，努力使自己成为千里马，避免自己怀才不遇，让自己怀的才是老板所想要遇到的！ 1、从如何阅读一本书、到培养自己的逻辑脑 ，从根本上认识自己的大脑🧠的构造以及其工作原理，从大脑的发散性思维，到实际工作项目中的思维导图的绘制，提供了一整套工作流程，得益于军哥平时经常提及的工作方法：在开启每一个产品的需求设计阶段时，将每一个功能点一一列出来，不管多复杂，只要是在闭环关联流程中所涉及到的，都全部列出来，然后将涉及到的各个领域的功能模块进行一一地串联组合，形成完成的整个产品所需要的功能细项，并划分为每个版本闭环功能点，而不是凭空产生需求功能，让每一个功能都有它应当存在的必然性； 2、从不懂管理自己的团队 ...

前言 相信不少前端童鞋一开始接触前端，就直接是上三方的ui框架，但有没有想过这个第三方的ui框架，大部分是从bootstrap中演变而来的，形成更加方便的开发模式，那么假如撇开三方的ui框架，仅借助于bootstrap框架，我是否能够编写出轻量级的网站呢？答案肯定是可以的，那么关于bootstrap应当如何使用呢？为什么它能够号称自己的移动优先的响应式ui框架呢？ 关于媒体查询在bootstrap中的运用 在bootstrap中一般使用的是ems或者rem来定义绝大部分的尺寸，而px则被用来定义容器的媒体查询断点，也就是目前bootstrap中关于媒体查询断点单位的由来！关键原因在于：视口区域都会以像素为单位的，而且并不会随着字体尺寸变换而变化。 在bootstrap中关于不同的媒体查询断点具体如下表所示： Extra small <576px Small ≥576px Medium ...

前言 近期在编写博客以及在编写这个gitbook的时候，发现在gitbook上有一个插件，就是可以将平时自己编写的在线demo，以链接的方式，集成到gitbook中，再也不用自己去截图，并附加上额外的说明信息了，现特别整理出来关于它的一个集成过程，以及在实际的编写过程中的一个使用。 gitbook集成codepen(gitbook-plugin-codepens) 首先，安装好对应的插件(gitbook-plugin-codepens)，建议采用npm的方式来安装，配置好国内的源之后，速度就嗖嗖嗖的了；1npm install gitbook-plugin-codepens 然后在对应的book.json中配置对应的codepen配置1234567891011{ "plugin": ["codepens"], "pluginsConfig": { "codepen": { "height": 600, "theme": 13200, "description": "我是描述文件", "defaultTab": "html" } ...

前言 css所作用的载体显示设备，则是对应的媒体，对于不同的媒体设备，其展现效果由于硬件设备的原因，需要对应的有所区别，虽然平时在日常的业务或者编码过程中很少涉略到，但是一旦遇到，如果只是淡出的度娘别人的代码，自己反而不知道里面各种原因的话，那么无疑是埋了个雷在代码中。🤔我想要从根本上理解关于媒体的使用、媒体查询的使用，在不同媒体中的作用效果等，无需再去依赖别人的代码，而且，有一个关键的地方，别人的未必是100%准确，可能有不适合自身业务场景。 媒体查询 得益于html与css定义的媒体查询(media query)机制，我们可以针对样式表做出限制，只应用于特定的媒体(屏幕或者印刷品)和符合指定条件的媒体.根据使用方式，可以使用以下三种方式的媒体查询机制： 在style标签中使用media属性，并赋上对应的值 123<style type="text/css" media="print"> body{ font-family: "Times New Roman"; }</style> 在每个css样式表中导入的时候来限定 1@import url(x ...

前言 我想要实现一个⚽️自由落体的过程动画？在未接触到动画之前，我想除了度娘或者谷哥之外，别无选择，但是，我想自己利用动画，实现出这样子的一个效果出来，意味着我需要学习关于动画方面的相关知识点，才能够来实现这里提及到的效果。 那么，什么是动画？它与之前习🉐️的过渡有什么区别呢？我需要掌握哪些知识点，才能够实现这里说到的动画呢？动画都有哪些属性呢？具体这些属性如何配合来使用的呢？下面一一道来！！ 与过渡的区别 相同点： css属性的值都在一段时间内发生变化！！不同点： 动画对变化的方式有很大的控制权，尤其是通过关键帧实现的css动画能设定是否以及如何重复动画，还能够深度控制整个动画的过程； 过渡触发的是属性值的隐式变化，而动画变化过程中用到的属性值要在关键帧中显式声明； 动画改变的属性值可以不在元素的前后两个状态中，比如在它的默认状态下，或者根本没有。 动画的相关概念关键帧 若想要给元素添加动画效果，就必须要有一个关键帧，一个具有名字的关键帧，采用关键词@keyframe来定义可复用的css关键帧动画，然后将该名字赋予要设置动画的元素。 关键帧选择符 关键帧选择符是动画持续 ...

前言 css过渡代表的是在一段时间内，把css属性的初始值变成终止值，这种转变的触发是由于某种操作的响应，一般是由用户触发的，可以是对类、id、其他状态等方式所引起的，正常情况下，无特殊说明的话，该动作是瞬间完成的！ css过渡属性 transition-property transition-duration transition-timing-function transition-delay transition(复合简写属性) ✨ 观察以下👇的一个例子： 12345678910<div> 我是hover测试块 <ul> <li>我是菜单</li> <li>我是菜单</li> <li>我是菜单</li> <li>我是菜单</li> <li>我是菜单</li> </ul></div> 12345678910111213141516171819div{ border: 1px ...

前言 之前关于css变形(transform)只停留在2d级别上的简单理解，一旦涉及到较为负责组合的变形或者是旋转亦或者是缩放等变形操作的时候，就一头雾水，万脸懵逼，根本不晓得它是如何变化而来的。在从2d进入到3d的世界的时候，个人觉得可以是借助于一个正方体，如下图所示：从上图我们可以晓得，在2d的世界里，我们只是以正视图的角度来看待的一个元素，而z轴是从原点指向人视口的位置，这里以一个正方体来描述的话，然后再从侧视图的角度来看的话，关于x轴、y轴、z轴的位置，就会很明确了！！！ 而css中的变形(transform)则是基于上面👆3个轴方向上的平移、缩放、旋转、偏移的变形操作来实现，因此掌握变形的几个要素的基础的话，对于掌握变形就能够迎刃而解了！！！ 基本用法 transform变形其实就一个属性而已，然而它是借助于不同的取值函数，来实现了不同样子的变换，一般它的取值由一个或者多个有效的、按照一定顺序的变形函数来组成，而变形的元素拥有自己的堆叠上下文，经过缩放后的元素可能比变形前大或者小，但由一点需要⚠️的是：元素在页面上所占据的空间与变形前保持不变，这一点对于所有的变形函数都成 ...

前言 近期，学习了关于栅格布局的一个知识点，看着一头雾水，属性的值不确定，且规律多变，看着好像毫无规则可言，而且与其他的布局也可以配合使用，个人觉得🈶️必要对习得的知识点进行一个总结，加深自身对该知识点的一个理解与使用，以便于后续能够很顺畅的来使用，而不是单纯的copy度娘到的别人家的代码，也不知道个中缘由！！！ 栅格属性一览首先甩出这边针对属性以及其组成，整理的一个脑图吧： 🪐 刚开始初步学习完成栅格布局，有点不明白为毛要整如此复杂的布局，在完成自己设置的例子demo出来了之后，发现它的强大之处，比起其他的布局，比如弹性盒子布局、盒子模型、定位、浮动等等，具有重大的优越性，也渐渐地明白了它的一个存在意义，这里整理了以下关于布局的一些相关的优越性： 减少html节点的层数，提高渲染效率；我想这个应该是每个前端人都应该关注的，如今写代码的人到处都有，刚毕业的应届生都能够胜任基本的编码工作，如果对于布局编码方面，没有编写出普适性、兼容性高的代码，那么是没有多大的竞争优势的； 屏幕兼容性高，可伸缩延展； 实战 👇 将通过一两个简单的例子来使用栅格布局 实战一：实现类似目前的商 ...

前言 之前一直认为栅格布局距离自己那么的遥远，对于其愈发又是如此的复杂又感觉深不可测的样子，在看到别人编写了关于栅格布局的相关代码时，看着云里雾里的，按照官方所说的栅格布局时最普适的布局系统，那么我觉得这个很有必要来学习并驾驭它，从而布局自己更加强大的布局系统！栅格布局依赖于行和列，无需考虑各个部分在源文档中的顺序，利用自定义的超级灵活而又复杂的组合来创建对应的栅格线，形成至于对应的栅格轨道，来满足于不同场景下的栅格布局，栅格之内还可以嵌套栅格布局，也可以在栅格中使用表格或弹性容器。🤔 这里提及到的栅格布局、栅格线、栅格轨道都是些什么？如何使用栅格布局来布局自己的系统界面？栅格布局真的🈶️那么的普适吗？👇一一道来！！！ 栅格容器的创建 与弹性盒子布局类似，栅格布局也包括有普通栅格容器与行内栅格容器，通过使用display: grid以及display: inline-grid来创建对应的容器。 栅格容器的特点 虽然普通栅格容器是块级的，但是只是它的行为与块级容器很像而已，两者之间还是有一定的区别的： 浮动的元素不会打乱栅格容器，这意味着栅格容器不会移动到浮动元素的下方； 栅 ...

前言 弹性盒是一种简单而强大的布局方式，通常可以通过弹性盒指明空间的分布方式、内容的对齐方式和元素的视觉顺序，把不同的组件放置在页面中，内容可以横向或者纵向排布，还可以沿着一个轴布局，或者折成多行。🪐 弹性盒模型布局最突出的一个特点就是，能让元素对不同的屏幕尺寸和不同的显示器设备做好适配工作，在响应式网站中表现较好，因为其内容能根据可用空间的大小来增减尺寸！，弹性盒依赖于父子关系，在容器节点上声明display: flex或者display: inline-flex，便激活弹性盒布局，而设置了这个属性的元素则称之为弹性容器 🤔 为什么要叫弹性一词呢？我想原因应该有以下几个： 容器与尺寸均不设置尺寸，可以按照其内容进行伸缩； 适配性高，从布局上控制元素的摆放，又可以让元素自身控制其摆放； 元素的伸缩适配； 元素行的伸缩适配； 主轴与垂轴 弹性盒子中的元素沿着主轴的方向来排布，主轴的方向可能是水平的，也有可能是竖直方向上的，主要来自于👇的flex-direction的控制以下附带相关的概念以及对应的位置的一个介绍： 弹性容器 声明了display: flex/inline-f ...

前言 定位属性position，我想这个属性应该是绝大多数前端基本都滚瓜烂熟的了吧，什么”父相子绝”的快速记住其使用方法；🤔 但是这里如果采用了非强制限定定位元素的尺寸、位置，定位元素可以被允许按照其内容来”安排”自己的话，是否就是可以实现到灵活性更高的布局以及内容的自适应的展示呢？ 基本概念 positions属性 描述 取值 static / relative / sticky / absolute / fixed 初始值 static 适用于 所有元素 继承性 否 ✨ position的各个属性描述如下： static: 正常生成元素框，块级元素生成矩形框，位于文档流中，行内元素生成一个/多个框，跟随父元素流动； relative: 元素框偏移一定的距离，元素的形状以及所占据的空间不变； absolute: 元素框完全从文档流中移除，相对容纳块定位； fixed: 相对于视区进行absolute； sticky: 元素以开始留在常规的文档流中，达到触发粘滞的条件是，从常规的文档流中移除，但原本所占据的空间仍然保留，在此中情况下，相当于相对于容纳块a ...

前言 之前自己较少使用float属性，在月度他人的代码，或者是在使用的时候，总是抱着尝试的方式，并借助于浏览器开发工具，一遍又一遍的尝试，对每次调整的属性值感觉信心不够充足，而且，还经常的出现，调整了一个属性，导致另外一个属性也跟随者变化，或者出现自己意想不到的效果。我想要摆脱这样子的困境，我需要从根本上来学习关于float以及float的使用完整规则 浮动 浮动的元素将告诉其父元素容纳块，请将我浮动到您的左侧或者右侧！！！ 浮动的元素脱离了常规的文档流，不过对布局仍然有影响，元素设置为浮动后，其他内容将围绕它流动。⚠️ 以下有两种情况需要特别注意的： 浮动元素四周的外边距并不会折叠； 非置换元素若设置为浮动，必须🉐️设置它的宽度，否则该元素将趋近与0⃣️。 属性 取值 取值 left/right/none 初始值 none 适用于 所有元素 继承性 否 基础概念容纳块：在深入了解浮动之前，必须要建立容纳块的思维，在之前的学习，我们可以知道，所有的容纳块，其实就是某个子元素所在的最近的块级祖先元素。 使用规则 浮动元素的左(或者右)外边界不能超过容 ...

前言 css中每一个元素都会生成一个矩形框，也就是元素框，在正常的节点元素摆放的过程中，如果按照默认的规则来摆放的话，则会按照其占据的空间，按照流式布局方面进行一个一个来摆放。网上已遍布同质化的学习知识较多，这边仅整理关于额外同类型的知识点的重复说明，这里想整理一个关于自己在学习过程中的不一样的见解！！！ 盒子模型 直接上图，一图胜千言 复值的规则 像padding、border、margin这些属性，一般遵循上、右、下、左的顺序来摆放，如果有重复的值的定义的话，可以采取节省值的方式，比如只有一个值的时候，代表4个方向的边都设置为这个值，设置为两个值的时候，代表设置的上下、左右方向的值。 行内元素的适用规则⚠️ 根据上图，影响一个行中元素的竖直方向上的，只有竖直属性才会影响到，也就是只有横向方向的padding才生效了！！！ 行内非置换元素的运用padding在行内元素的使用 置换元素中的padding属性，都会出现在内容的四周，并且背景色会填充到内边距区域，也就是padding会将border推开，远离内容 border在行内元素的使用 规则基本上与块级元素的处理方式一直 ...

前言 我想直接摆脱关于css的胡乱使用现象，从根本上理解css在浏览器代理中的渲染机制，掌握视觉渲染模型的工作原理，自行判断所遇到的怪异行为！！！通过学习css的基本原理，从根本上理解关于css的的布局逻辑，从而面对后续的特殊效果/复杂效果，更加游刃有余 元素框基础 不管是什么元素，css都嘉定每个元素都会生成一个或者多个矩形框，我们称之为元素框，如下图所示： 通过👆图的展示，对元素有一个大概的轮廓！ 而对于css中关于元素框的分类，主要有一下几种，这边👇的文章也是针对这几种进行阐述 相关概念容纳快容纳块： 表示的是某个节点元素最近的块级父元素，如有以下的例子： 12345 <body> <div> <p>这个是一个段落</p></div></body> div是p段落最近的容纳块 🤔 为什么要解释容纳块呢？✨ 因为容纳块决定了元素所能获得的最大宽度！！！ 调整元素的显示方式 改变元素的显示方式 下面开始来深入了解display属性的使用 display属性 描述 取值 ...

前言 文本是网页编程中的重要元素，提供了很多的相关的属性操作，以不同的方式配合来控制文本的展示，比如可以影响文本中相对一行中其他内容的内置，可以将文本设置为上标等等，针对平时常用的文本属性的学习，加深对文本属性的使用，结合几个常见的文本效果的学习，领略文本属性的魅力！！！！最最最主要的是，我不想一遇到稍微有一点点特殊的文本样式，就是度娘，对自己没有半毛钱提升！！！ 行内与块级傻傻分不清 元素 外观 height/line-height/margin 宽度 容纳元素 块级元素 总是在新的一行开始 可控制 默认100% 容纳行内元素以及其他块级元素 行内元素 和其他元素在同一行上 不可控制 文字/图片宽度，不可变 正常只能容纳文本或其他行内元素 缩进 text-indent: 50px;规定文本块中首行文本的缩进尺寸 值 描述 取值 定义的固定的缩进值，默认是0 初始值 0 适用于 块级元素 继承性 是 对齐行内对齐 根据文字的书写方向，来控制元素中文本行的对齐方式 text-align/text-align-last 值 描述 ...