YolkPie

开发环境 debug 是每个程序员上岗的必备技能。生产环境呢？虽然生产环境 debug 是一件非常不优雅的行为，但是由于种种原因，我们又不得不这么干。 那我们今天讲一讲如何使用 chrome 在生产环境进行 debug 。 生产环境 debug 步骤生产环境 debug 需要几步？这问题和“把大象装进冰箱拢共分几步”一样简单。 第一步，把冰箱门打开。F12 打开 devTools； 第二步，把大象装进冰箱。找到需要 debug 的前端文件，格式化，打断点，调试上下文，定位问题； 第三部，关闭冰箱门。解决问题。 如何快速定位错误是前端还是后端接口返回的？在把大象装进冰箱之前，先初步判断下，是否真的需要由你将大象装进冰箱。 首先我们需要判断，错误是前端还是后端报的，那么如何快速判断？ 方案一：根据对代码的实现的了解，判断报错属于前端还是后端。这个方案前提是需要你对代码实现很熟悉，也是最简单的方式。 方案二：前端代码全局搜索关键字，工程代码里搜索/控制台打开搜索。对应工程 gitlab 或者 vscode 或者 devTools global search 里去进行全局搜索。 ...

使用CSS重置（reset）css重置库如normalize.css已经被使用很多年了，它们可以为你的网站样式提供一个比较清晰的标准，来确保跨浏览器之间的一致性。 大多数项目并不需要这些库包含的所有规则，可以通过一条简单的规则来应用于布局中的所有元素，删除所有的margin、padding改变浏览器默认的盒模型。 1*{ box-sizing:border-box; margin:0; padding:0 } 使用box-sizing声明是可选择，如果你使用下面继承的盒模型形式可以跳过它。 继承盒模型让盒模型从html 继承： 1html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } 使用flexbox布局来避免margin的问题当你多少次试着去设计栅格布局如：组合或者图片画廊，如果使用浮动的方式，那么就需要去清除浮动和重置外边距来使其分解成所需要行数。为了避免nth-、first-、last-child 问题 ，可以使用f ...

巧用运算符，事半功倍！ ?? 非空运算符在 JS 中，?? 运算符被称为非空运算符。如果第一个参数不是 null/undefined（译者注：这里只有两个假值，但是 JS 中假值包含：未定义 undefined、空对象 null、数值 0、空数字 NaN、布尔 false，空字符串’’，不要搞混了），将返回第一个参数，否则返回第二个参数。比如， 12null ?? 5 // => 53 ?? 5 // => 3 给变量设置默认值时，以前常用 ||逻辑或运算符，例如， 1234567891011var prevMoney = 1var currMoney = 0var noAccount = nullvar futureMoney = -1function moneyAmount(money) {return money || `账户未开通`}console.log(moneyAmount(prevMoney)) // ...

我用flutter写了一个明天吃什么的软件 准备工作 开发工具 vscode 调试工具 一部Android手机 一条数据线 安装Dart、Flutter扩展 创建项目 Cmd+Shift+P Flutter: New Project Application 运行 运行 -> 启动调试 至此第一个hello world运行在了手机上 开发必备知识状态管理 Widget 管理自己的状态 1234567891011121314151617181920212223242526272829303132333435class TapboxA extends StatefulWidget { TapboxA({Key? key}) : super(key: key); @override _TapboxAState createState() => _TapboxAState();}class _TapboxAState extends State<TapboxA> { bool _act ...

PWA（渐进式WEB应用）什么是渐进式WEB应用PWA 指的是使用指定技术和标准模式来开发的 Web 应用，这就使得它们同时拥有 Web 应用和原生应用的特性。 一方面，Web应用更加容易使用，相比于安装一个原生应用，访问网站更加容易和迅速。你还可以通过链接来分享Web应用。 另一方面，原生应用与操作系统更加完美的融合，因此可以为用户提供了更无缝的体验。你可以通过安装使应用可以在离线时正常运行；相较于浏览器访问，用户也更喜欢点击图标打开应用。 PWA同时赋予了我们以上两种优势。 渐进式增加和响应式设计已经可以使我们构建效果出色的移动端网站，而在很多年之前的Firefox OS的生态系统中，离线运行和安装的Web应用已经出现。 什么使应用成为PWA正如前文所说，PWA不只是使用一种技术创建的。它代表了构建Web应用程序的新理念，涉及一些特定的模式，API和功能。从外观，我们无法直接分辨一个应用是否是PWA。只有当应用程序满足某些特定要求，或者实现了一组特定功能，例如离线工作、可安装、易于同步、可以发送推送通知等，我们可以将它视为PWA。 此外，还有一些工具可以按百分比衡量应用的完整性。例 ...

概念和特性首先，我们来了解一下 Ajax、Axios 和 Fetch 它们各自的概念。 Ajax英文全称为 Asynchronous JavaScript + XML ，翻译过来就是异步JavaScript和XML。它是用来描述一种使用现有技术集合的“新”方法的，这里的“新”方法主要涉及到: HTML 或 XHTML、CSS、 JavaScript、DOM、XML、XSLT，以及最重要的 XMLHttpRequest。当使用结合了这些技术的 AJAX 模型以后， 网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。 Ajax 是一个概念模型，是一个囊括了众多现有技术的集合，并不具体代指某项技术。 Ajax 最重要的特性就是可以局部刷新页面。 AxiosAxios 是一个基于 Promise 网络请求库，作用于 Node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和 Node.js中)。在服务端它使用原生 Node.js http 模块，而在客户端则使用 XMLHttpRequest。 ...

React 高阶组件高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。 具体而言，高阶组件是参数为组件，返回值为新组件的函数。 1const EnhancedComponent = higherOrderComponent(WrappedComponent); 组件是将 props 转换为 UI，而高阶组件是将组件转换为另一个组件。 HOC 在 React 的第三方库中很常见，例如 Redux 的 connect 和 Relay 的 createFragmentContainer。 在本文档中，我们将讨论为什么高阶组件有用，以及如何编写自己的 HOC 函数。 使用 HOC 解决横切关注点问题组件是 React 中代码复用的基本单元。但你会发现某些模式并不适合传统组件。 例如，假设有一个 CommentList 组件，它订阅外部数据源，用以渲染评论列表： 123456789101112131415161718192021222324252627282930 ...

为了防止信息泄露或知识产权被侵犯，在web的世界里，对于图片文档等增加水印处理是十分有必要的。水印的添加根据环境可以分为两大类，前端浏览器环境添加和后端服务环境添加。 前端浏览器加水印： 减轻服务端的压力，快速反应安全系数较低，对于掌握一定前端知识的人来说可以通过各种骚操作跳过水印获取到源文件适用场景：资源不跟某一个单独的用户绑定，而是一份资源，多个用户查看，需要在每一个用户查看的时候添加用户特有的水印，多用于某些机密文档或者展示机密信息的页面，水印的目的在于文档外流的时候可以追究到责任人 后端服务器加水印： 当遇到大文件密集水印，或是复杂水印，占用服务器内存、运算量，请求时间过长安全性高，无法获取到加水印前的源文件适用场景：资源为某个用户独有，一份原始资源只需要做一次处理，将其存储之后就无需再次处理，水印的目的在于标示资源的归属人 重点来看看前端加水印的方式： 1、Canvas 生成水印canvas 有着不错的兼容性，是一种比较可靠、成熟的可视化技术。但是它比较依赖分辨率，对文本的处理上也有着先天的不足。但是它可以很方便的将结果保存为图片，对于完成水印的需求也是非常合适的。 ...

为什么要实现动态路由?我们在开发后台管理系统的过程中，会有不同的人来操作系统，有admin（管理员）、superAdmin(超管)，还会有各种运营人员、财务人员。为了区别这些人员，我们会给不同的人分配不一样的角色，从而来展示不同的菜单，这个就必须要通过动态路由来实现。主流的实现方式简单聊一下两种方式的优势，毕竟如果你从来没做过，说再多也看不明白，还是得看代码前端控制 不用后端帮助，路由表维护在前端 逻辑相对比较简单，比较容易上手 后端控制 相对更安全一点 路由表维护在数据库 一、前端控制思路：在路由配置里，通过meta属性，扩展权限相关的字段，在路由守卫里通过判断这个权限标识，实现路由的动态增加，及页面跳转；如：我们增加一个role字段来控制角色具体方案： 1、根据登录用户的账号，返回前端用户的角色2、前端根据用户的角色，跟路由表的meta.role进行匹配3、讲匹配到的路由形成可访问路由核心代码逻辑 1、在router.js文件（把静态路由和动态路由分别写在router.js）12345678910111213141516171819202122232425262 ...

前言CSS的学习，就我个人看来，是有别于JavaScript这张传统程序语言的学习的。本身属性就多，值也多，不同属性在一起表现也不一样，不同属性和不同类型的HTML标签在一起又不一样，再加上兼容性差异和未定义行为。就像是很多个不确定因素，有着无穷多的组合和可能性。掌握这些不确定性，看书是绝对不够的，一定是要多多实践，多多思考，多多积累。对于底层机理的理解，也是需要一定的天赋的。 因此，就是自己很多年一直与CSS密切打交道，学习它，也有很多不知道的，理解不透彻，或者说因为要学习和思考的东西太多，还来不及估计到一些属性或者声明。 比方说本文要介绍的word-break:break-all和word-wrap:break-word, 虽然都有使用，都照过面，实际上，却一直没有机会能够好好看看这两个到底有什么区别，各个浏览器的兼容性如何，等等。换句话说，就是深入理解。 背景做移动端项目时，在详情页富文本传过来一段很长的空格；页面展示的时候由于空格没有及时换行；导致空格后文字超出屏幕；页面展示缺少文字。当然，这个情况有兼容性，就是大部分的安卓手机；同样的在PC端（小屏幕）展示同样有问题；我的14 ...