作者：Chris Coyier 翻译：疯狂的技术宅 来源：css-tricks ?...UI 在变得花里胡哨的人该怎么办？...我认为这是一个非常有趣的问题。 此外，这段时间每当看到 时，我的大脑被触发到如果是 MP4 会怎样？！...使用工具把提供的单个动画源生成其他动画源是一件很酷的事情！我打赌你可以用 Cloudinary 之类的东西来解决这个问题。...即使 不是替换元素，浏览器仍然会感到困惑并且不喜欢它。甚至根本不会渲染它。这没什么大不了的，我们还可以使用包装器。
1494897692559029057.png 在上图中，我们可以看它的路径是“D:\电影”，该路径下又有一个文件夹【疯狂动物城 2016】，里面是这样的 1494897702152088854.png...同理，如果我在同一个Controller里面设置两个相同的RequestMapping 1494897766027073622.png 编译是可以通过的，但是当我启动tomcat后， 我通过url “http...再来看RequestMapping，最终对应的必然是一个方法，方法的功能无非就是进行一些业务的操作，或者返回一个什么东西。...1.3 @ResponseBody的作用 在Controller里面，我们经常可以看到@ResponseBody这个注解，它的意思很简单，就是说明这个方法返回的东西会通过IO流的方式写入到浏览器。..."; } 最终在浏览器获得的效果是这样的： 1494897809137032549.png
然后我们在src目录下面新建一个app.vue文件，里面就可以写一些关于项目的业务代码： div id="test">{{text}}div> 的，我们希望使用模块依赖，因为项目中会做很多可复用的代码，把它写到一个模块里面去，这样的话当我们再去写一个新项目的时候，不用再把原来的代码重新写一遍，或者是拷贝一份。...这样看起来，名称就变得更加的合理。...以后新建的文件不要乱放，因为项目一旦做大，维护时间比较久的时候，可能两三个月里面都有一个文件你不会去碰它。到时候如果要去找一个东西的时候，你会找不到它，这是非常令人难受的一件事情。...最重要的一点是，目录结构的混乱，会导致你后续开发项目的效率变得非常的低。 这次关于“一个正式项目的目录结构是怎么形成的”的话题就说到这里，我之后的文章会讲些什么呢？
如果你从没做过那样的工作，千万别去做。我会给那些愿意听我抱怨的人，喋喋不休地讲我遇到的各种困难。当我开始深入研究前端的替代方案时，我发现了 FRP、Flapjax 和 ClojureScript。...而且 UX 开发者通过出色的实时重新加载（多亏了 CLJS），能够从编辑器连接到浏览器的 REPL，并直接在编辑器试验。那简直太棒了！ 长话短说，我们的前端变得越来越大。...服务端渲染只能帮助一部分，但是混合渲染会阻塞浏览器。在比较老旧的硬件或 Android 系统上，这变得不可接受！...除此之外，在执行下面描述的操作时，我们发现 React 也会导致一些有问题的实践。...当我纠结于对 HTML 片段的请求时，我明白了一件事：当我为目录页选择技术路线图时，最后的选择是“类似 intercooler 的小东西”。 那为什么还不行动呢？
而当我们探讨为什么会这样时却很有意思。 事实上，你很少会直接调用 ReactDOM.render 。相反，在 React 应用中程序往往会被拆分成这样的函数： ?...我们想要在渲染更新概念上相同的 UI 时保留这些状态。我们也想可预测性地摧毁它们，当我们在概念上渲染的是完全不同的东西时（例如从 转换到 ）。...例如，渲染一棵很深的树（在每次页面转换的时候发生）而不阻塞浏览器。改变跟踪并不会让它变得更快 — 这样只会让其变得更慢因为我们执行了额外的订阅工作。另一个问题是我们需要等待返回的数据在渲染视图之前。...相反，React 会先触发所有的事件处理器，然后再触发一次重渲染以进行所谓的批量更新。 批量更新虽然有用但可能会让你感到惊讶如果你的代码这样写： ?...有些时候，大多数组件需要相同的东西 — 例如，当前选中的可视主题。将它一层层地传递会变得十分麻烦。 在 React 中，我们通过 Context 解决这个问题。
我们的第二个背景颜色并没有被浏览器划掉，反而是第一个背景样式被划掉了。因为第二个背景样式重写了第一个。 为什么会发生这样的事情 ？...当我们使用变量作为属性，浏览器只会在 "计算值时间" 去评估值，因为我们需要首先知道变量的内容。在这种例子中，当浏览器做联级时，会认为属性值是有效的，之后才会变成无效。...在我们的例子中，浏览器做级联时，认为最后一个声明是有效的。但是到评估值的时候，最后一个声明被认定是无效的，所以它被忽略。...因为一个值是有效还是无效时基于 CSS 变量的，所以浏览器一开始时不能真正知道。...它们可以有奇怪的语法 最后一个也是有趣的一个。 你知道你能像下面这样写么？ body { --:red; background:var(--); } 很神奇，对吧？
在浏览器中进行模板检查时，它们根本不显示，因为它不是 HTML 属性，只是一个 Vue 模板属性。...，该计数器在单击时会被更新，但是当你在浏览器中打开开发人员工具时，你会注意到它没有记录日志。...正确的使用语法非常重要，因为这意味着 Vue 不会将此视为错误，的确如此。根据我们已经知道的关于 Vue refs的内容，它们会返回一个对象，但是根据未定义的响应来判断，有些东西是错误的。...检查test.vue 快速查看代码块将揭示正确的语法：在模板中它被称为 ref，但是当我们在 Vue 实例中引用它时，它被称为 $refs。当不返回 undefined时，这提示是非常重要的。...为了说明这一点，可创建一个这样的简单列表： div> I am car
CSS 是这样, 但是它远不止这些! 一个成功的CSS项目需要最完美的构建。写得不好的CSS是脆弱的，很快就变得难以维护。关键是要学会如何组织代码，以便创建具有长期可用性的可维护结构。...但即使是优秀的代码库，也必须处理疯狂的设备数量、屏幕大小、功能和用户偏好。 更别提还有可达性，国际化，和浏览器的兼容性！ CSS 就像一直小熊: 可爱无害的，但是随着年龄的增长，他会活吃了你。...分享与参与 分享真的非常的重要，我多么希望当我刚开始进入这一行的时候有人跟我分享，我用了10年的时间去了解分享的价值; 当我做到的时候, 它完全改变了我对我工作的态度和与他人的合作的方式。...CSS开发者要远不止写CSS这么简单。构建你的代码, 编译, linting, 格式化, 以及浏览器实时刷新，这些都是你每天要处理的一小部分。 挑选适合自己的IDE。...了解浏览器 浏览器不仅仅只是你的画布, 同样也是一个强大的调试器可以来调试你的代码, 测试性能, 以及向别人学习。 学习浏览器如何渲染你的代码，会让你大开眼界。它可以使你的代码提升一个等级。
当我刚开始遇到你时，我刚刚结束了和 Angular.js 的长期关系。我已经被 watch 和 digest 折腾累了，更不用说 scope 了。我一直在寻找不会让我感到痛苦的东西。 这就是一见钟情。...div> )); 你可能会问，为什么这么难？...对于像我这样必须维护庞大代码库的人来说，这种持续的 API 膨胀是一场噩梦。看到你每天化的妆越来越浓，会不断提醒你想要刻意隐藏的东西。 严格的限制 你的 Hooks 是个好创意，但它们是有代价的。...div>; }; 因此，所有 effects 的依赖项中都包含 isVisible props，并且可能会过于频繁地运行（可能会损耗性能）。...Facebook 的宗旨是 让人们更紧密地联系在一起 ！每当我拜访你的父母时，我都会结识新朋友。 但后来事情变得一团糟了，你的父母参加了一个人群操纵计划。
那么今天我们说的是H5才提出的存储方案：localStorage和sessionStorage 首先说一下为什么需要这个东西，为什么之前已经有了cookie但是H5的时候却在客户端存储这块重新定义了这两部分呢...，这样的做法结果是用户体验会更好，因为毕竟速度会快很多，这是一点，另外，服务器的压力会变的很小。...我关闭浏览器重新打开还是继续计数的，那么说明浏览器只要不变就是没有问题的。 当我们换一个浏览器的时候效果是这样的： ?...3、浏览器的隐私模式下是不可使用的 4、它的存储空间是变得很大，大概5M左右，那么如果什么我们都存在页面上的话，其实我们是不推荐这样使用的，这样导致的结果是页面变得很卡。...value的值必须为字符串类型(传入非字符串，也会在存储时转换为字符串。true值会转换为"true")。
CSSOM树 当我们写下一组 CSS 样式时，例如： #id .class h4 + p { ... } 浏览器在解析它时，你可能会认为 CSS 会按照由左到右的依序找出＃id>.class>h4...通过 div class =“ d”> 中的 .d 来思考，这样的 CSSOM 树在套用样式时，必须对所有的样式规则进行检查，以确认样式规则是否会影响到 .d，到最后才能确定可能会影响到 .d 的样式规则有这三条...除了开发者定义好的 CSS 档外，还有几个地方可能会定义样式规则，影响画面的渲染： HTML 的 inline style 设置 浏览器预设值（就是 CSS reset/normalize 要覆盖掉的东西...） 浏览器的使用者偏好设定 浏览器负责处理 CSS 的部分，会吧前面所有的东西以及 CSS 文件定义的样式规则分别整理成单独的样式规则组（CSS 规则集），内容记载了样式规则、目标属性等信息。...这样在取用时，可以依据目标元素是否存在这个属性，快速筛出可能会套用的样式。
事实是，的确如此，你遗漏了一些解决问题的重要片段。 并且，前端开发实际上已经陷入了疯狂。 不仅仅是你。 拉过一把椅子，坐下来。到时间写JavaScript应用了。 第一步是准备本地开发环境并运行。...你看了一些React文档，“Redux是JavaScript app可预测的状态容器。”真棒！你一定需要那些中的其中之一。 为什么构建JavaScript应用会如此疯狂？！？...让我来帮助你理解为什么我要说这一切是如此疯狂。让我们从一个例子开始，然后转移到漂亮的图片。 这是React的“Hello, world!”应用。 ? 没有完全完成。 ?...你是（大多数时候）对的，但你还需要走一小步才能理解为什么一切都疯了。 下面是我承诺过的图片。 ? 绝大多数你将工作的JavaScript web应用程序，会落在钟形曲线中部的某个位置。...并且在中部，如果你从一个完整的React堆栈开始，那么从一开始你就大量过度设计了你的应用程序。 这就是为什么一切都变得疯狂。
这样做的原因主要是因为这些 API 会测到很多代码的实现细节 (Implementation Details)。...然后，很多人又会问：为什么不要测 代码的实现细节（Implemantation Details） 呢？很简单：测试本身就很困难了，我们不应该再弄那么多规则来让测试变得更复杂。...重构中的 “假错误” 我知道大多数人都不喜欢写测试，特别是写 UI 测试。原因千千万，但其中我听得最多的一个原因就是：大部分人会花特别多的时间来伺候这些测试代码（指测试实现细节的测试代码）。...每次我改点东西，测试都会崩！—— 心声 一旦测试代码写得不好，会严重拖垮你的开发效率。下面来看看这类的测试代码会产生怎样的问题。...这也是为什么 Enzyme 测试用例为什么这么容易出现 “假错误”，因为 当用它来写一些 End User 和 Developer 都不 care 的测试用例时，我们实际上是在创造第三个用户视角：Tests
在ui疯狂出图的前提条件下，我发现了很多轻提示和弹框dialog高度相似又要支持自定义，便开始了封装之路。...，要么你就多写几个toast（不会吧，不会吧，应该没人会选择这么做吧），要么就疯狂的改变data中定义的数据。...visiable是干啥的，前面不是才说这个东西会抛弃掉吗？...当我们调用方法的时候可以将参数正常传递进来就需要在new构造器的时候接受参数，然后再挂载在$mount上，最后插入到我们的body上....image.png 看到这里有人会问这个booo哪里来的，为什么在组件中没有props去接收参数也可以显示，这个就是构造器特殊的地方哈。
但作为一个程序员，所有这些东西并不是问题真正的解决方案，相反，它们只是帮助我们解决问题的简单工具。 在面对那些我们喜欢或是当前非常流行的特殊技术时，我们必须非常小心，而不是变得过于疯狂。...一种经常出现的情况是，当我们写出一段“聪明”的代码时，这段代码并不是特别的“清晰”。 这条规则非常重要，尤其是当我们思考我们要做一些特别“聪明”的事情时。...当我跟Bob Martin在一起时，他说： “你写的每个注释，都代表着你表达能力的欠缺“ －整洁代码：敏捷软件艺术手册 这并不是说一点注释也不写，但通常我们可以通过一种更好的方式——命名来避免。...写代码有很多乐趣，我希望我能写更多的代码。 我这几天经常忙于写代码并试图让它占据我更多的时间，这也是我为什么如此清晰地记得它有多么的有趣。...当我写代码时我会遵循很多”最佳实践“，但有时我也会背离它们。 原则是永恒的，最佳实践是变通的. 11、力求精简 所有问题都可以进行分解. 最佳的解决方案往往是最简单的.
很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。 方式二： 嵌入样式 嵌入方式指的是在 HTML 头部中的 标签下书写 CSS 代码。...因为 CSS 代码是在 HTML 文件中，所以会使得代码比较集中，当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。...因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。...CSS 文件的方式，下面我们来比较这两种方式，并且说明为什么不推荐使用 @import。...； 2、@import 是 CSS2.1 才出现的概念，所以如果浏览器版本较低，无法正确导入外部样式文件； 3、当 HTML 文件被加载时，link 引用的文件会同时被加载，而 @import 引用的文件则会等页面全部下载完毕再被加载
大量不断推出的新技术的同时，也在被不需要它们的人嘲笑，往往很多人都会这样做。我们有时会对不断涌现的信息、库和讨论感到不知所措，总希望能有一些稳定的东西，就像能让我们可以休整一段时间的避风港。...前面我提到了 Babel，这是一个工具，可以帮助我们预览那些尚未在 JavaScript 中（更确切地说是在浏览器中）支持的东西，或者以某种方式对 JavaScript 进行扩展（或者类似于 TypeScript...感谢Babel： JSX 将被转化为成浏览器可以理解的代码。 我们可以使用尚未在浏览器中实现的新功能（例如类属性）。 我们可以支持新浏览器中的特性，同时在旧浏览器中支持较旧的功能。...我很不喜欢对库进行比较，特别是当我们被迫把梨和苹果放在一起进行比较时。 因此，我将尝试使用一系列简短的问题和答案将 React 与 Angular 和 Vue 进行比较。...prop 还有一个更有用的东西叫做 defaultProps，这是一个静态字段，它可以告诉你组件的默认 prop 是什么（比如当它们没有传递给组件时）。
由于有太多的活动，有效地管理这些流量的优先级变得至关重要。带宽争用是真实存在的，当所有请求同时触发时，有些HTTP请求的优先级并不像其他请求那样高。...因此，预加载通常最适用于晚些时候发现的资源 - 任何不直接由你的HTML加载的东西，比如通过内联样式属性加载的背景图像。但它也适用于任何其他可能不像你希望的那样被浏览器优先考虑的东西。...当设置为true时，即使页面终止，浏览器也会完成该请求。 何时使用 当你知道多个请求正在并发执行，并且你明确知道哪个最重要（或哪个可以安全地被降级）时，指示fetch()的优先级。...当开始下载时，这三者都是“低”优先级。但很快，页面首部的那个切换到了“高”优先级。 当我为第一张图片添加fetchpriority属性时，情况变得更加可预测： 为什么这些优先级提示存在的原因：为了使指令清晰，并且让浏览器很少有机会做出错误的决策。下次当你研究自己应用程序的网络活动时，记住它们，当有意义时，使用它们来帮助使你的页面性能更加智能。
特定选择器的示例： section#sample-section —（问为什么需要指定“ section”和ID） main div p.title —（询问为什么需要指定.title以外的任何内容）...当嵌套和定位常见的 HTML 标签（如 div>、 和 标签）时，样式选择器的会更糟。寻找允许您有效渲染 CSS 但不要采取任何极端措施的策略。...对我来说，这些是像带有显示 flex 或网格的 center 这样的东西，所以我创建了一个类 .center-flex 和 .center-grid。创建类实用程序来自动化这些重复的样式组合。...19、对CSS写注释 注释是个好东西，采纳吧！如果你编写了复杂的 hacks 或发现某些事情有效但不知道为什么，请添加注释。...字体过多的网站可能会变得混乱，因此，请始终确保包含页面所需的字体。字体加载和应用可能需要一些时间，当你有太多字体时，你的 UI 通常会在字体加载后跳转不到位。
比如，循环嵌套导致的O(n²)代码，当你处理几十个数据时可能没感觉，但换成几百万条数据时，性能差异会让你怀疑人生。而如果你写的是一个需要承载大量用户的应用，糟糕的代码效率可能会直接拖垮你的服务器。...总结一句话：语言的性能差距可以靠优化弥补，但坏的时间复杂度无药可救！写JavaScript也要关心Big O，这样才能让你的代码在任何场景下都“跑得快，扛得住”！...如果你在一个每秒运行上百万次的循环中疯狂使用try-catch，可能会有点性能损耗，但这种极端情况很少见。对于一般代码，正确的错误处理远比那点微小的性能影响重要。 为什么try-catch重要？...为什么频繁更新DOM会影响性能？ 每次你对DOM的修改（比如添加、删除元素或改变样式），浏览器都需要重新计算布局（Reflow）和重新绘制（Repaint）。...这些操作会消耗大量性能，尤其是当你在短时间内进行大量独立的DOM操作时，浏览器的资源利用率会直线飙升，页面也会变得不够流畅。 如何避免DOM操作的性能问题？
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
腾讯会议
