YolkPie

前言为什么要处理前端异常，有以下几方面的原因： 提高代码健壮性：对于开发人员来说，这点很重要，代码的健壮性越好，系统越不容易崩溃； 提升系统稳定性：异常会导致正常流程无法进行、页面样式错乱、崩溃甚至白屏等问题，严重的会给业务造成损失； 增强用户体验：代码的错误不应该影响页面的正常显示和用户交互，出错时我们需要使用拖底方案或者给用户反馈； 便于定位问题：只有知道了如何处理异常，我们才能将异常正常上报给前端监控系统，及时发现并定位问题。 本文分为以下三个部分：第一部分：介绍 Error 对象及 Error 的类型；第二部分：介绍捕获异常的方式有哪些，包含通用、Vue和React项目、iframe中的捕获以及页面崩溃异常的获取；第三部分：结合工作中的场景，总结各自对应的异常处理方式。 这篇文章的前两部分我尽量都提供了对应的示例，希望这些示例对你们有用。另外，由于这篇文章是做汇总用的，会比较长，各位可以按自己的需要去看对应的部分。 Error 及 Error 类型说到异常，我们需要先从 Error 对象讲起。当 JavaScript 运行时，如果发生了错误，浏览器就会抛出 Error 的实 ...

类组件（class）类组件的缺点： 大型组件很难拆分和重构，也很难测试 业务逻辑分散在组件的各个方法中，导致重复逻辑或关联逻辑 组件类引入复杂的编程模式，比如render、props 123456789101112131415161718import React, { Component } from "react";export default class Button extends Component { constructor() { super(); this.state = { buttonText: "Click me, please" }; this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(() => { return { buttonText: "Thanks, ...

大家好，今天我们来谈谈前端每个人都在写的东西，组件。 在当下react和vue这么流行的大环境下，相信你一定写过组件。如果你感觉你是职场小白，只从github或者npm下载过一些组件使用，自己没有写过，那么你就错了，你一定写过。因为往大一点说，一个页面可以是一个组件，往小了说，一个按钮也是一个组件，你写的区别只在于它的扩展性是不是好，通用性是不是强。所以，首先不要畏惧，我们每个人其实都在写组件，今天的分享，就是如何让我们更好的写组件 一、需求分析-构思组件从接手项目，带你开启组件封装第一步： 1. 需求分析拿到项目之后，这里以一个新项目为例，首先，全局概览。看一下这个页面总共分几部分。各个部分之间有什么相同之处，这里举例（边距：考虑封装一个共有的盒子、色系：考虑用父元素继承的方式获取、title、排列方式、图文规划、功能区块等）；初步划分功能，列出几个可能要封装的组件。 2. 综合考虑联系其他页面，再次分类，调整组件的分类，尽可能做到组件公用，扩张组件的可配置项（例如，title文案前可能有icon图标，尾部可能有更多箭头，文案等，尽可能完善这个组件）。 3. 归置组件综合页面需求及过 ...

web Components能代替现下主流的框架么？吉德林法则 keydown之前想的事情 1. what 什么是web Components，有什么特点？ 2. way 为什么要用web Components？ 3. where web Components在那里用？ 4. how web Components怎么用？ 5. PS web Components使用注意事项 开始探索什么是web Components document.querySelector最开始被广泛的被浏览器支持——浏览器提供了一个原生的方法结束了无处不在的JQuery React这钟前端框架可以帮助我们去做一些做不到的事情，比如创建可以复用的前端组件，同意的事情会不会出现在它们身上 现在它来了 不用加载任何外部模块 浏览器的原生组件 四大web组件标准 为什么要用webComponents实际上你已经在用了 我们来看一看浏览器利用 Shadow DOM 实现的一个示例吧，那就是 video 标签：1<video controls src="./music.mp3" width= ...

作为设计师，在拿到设计需求后，不要着急做需求，先分析需求，且在思考设计视觉时一定记得从业务本身的属性出发，多跟运营以及产品沟通，分析挖掘到更多的潜在需求，才能从根本上解决问题，设计出符合产品调性的页面。 一般说来，在电商购物类的app中，用户想要到达商品详情页的路径有以下3种： 通过搜索直达商品列表； 通过分类导航页触达； 通过一些资源位（例如：banner、活动专区、坑位入口等）进入专区商品列表； 这三种路径基本上就涵盖了用户购物的的3种心态： 通过搜索直达商品列表：可以有效满足用户明确知道自己要买哪个具体商品的需求； 通过分类导航页直达商详页：可以有效满足用户明确自己要买哪类商品但不知道具体要买哪个商品的需求； 通过资源位直达商品列表：可以满足用户逛逛的心态。 分类导航入口产品用户群体不一样、业务属性不一样，分类导航页的入口也不同。京东的用户群体一般都目标明确，购买力强，所以京东的分类导航页入口在底部导航处，可随时切换触达目标商品。而淘宝和考拉的用户是属于闲逛型的，不知道自己想买哪些商品，所以它们分类导航页的入口设置在金刚区最后边；就我自己而言，京东的分类导航页我的使用率高 ...

用户隐私安全在产品设计中是很重要的一个环节。我们每天都会使用到各式各样的APP，有金融的，社交的，电商的…而这些APP里面又储存着我们重要的隐私信息。如登录密码、存款金额、身份信息等。因此今天总结一下，一些主流产品在用户隐私方面的做法与设计点，为我们日后对用户隐私信息设计时，能有一些思考和帮助。 用户的隐私安全很重要，涉及的范围和角度也很多。首先先说说用户协议和隐私保护。 一、用户协议和隐私保护依稀记得，2017年支付宝年度账单，有个页面下有一行特别小的字儿：“我同意《芝麻服务的用户协议》”，且选择状态是已选状态，默认帮助用户选择同意，意思就是我们默认允许支付宝收集我们的信息，包括在第三方已保存的信息，引起了很大的负面影响，随后芝麻信用道歉说：初衷没错，只是方式错误… “用户协议”作为一种格式合同，是产品用来和用户签约授权的方式，原则意义上，它是具备法律效力的。产品提供“用户协议”完成的是对用户的“提前告知”动作，但用户信息的获取和使用，应该严格遵守《网络安全法》，做到让用户知情和同意，不能过度采集，更不可滥用数据。在我们大众的认知里，是没有对这个用户协议引起足够的重视，大家普遍认为它 ...

在React项目中做数据管理，Redux已经占据半边天下，为什么会出现Mobx呢，它是什么，能给我们带来什么，和Redux相比有什么优缺点呢，今天，我就自己学习的一点知识，为大家做一个简单的分享，希望让你对Mobx有一个大致的了解。 目录 Mobx是什么 编程思维方式的不同 Store的区别 储存数据形式区别 操作对象方式不同 代码对比 Props的注入不同 Mobx优缺点总结 Mobx是什么Mobx是一个透明函数响应式编程（Transparently Functional Reactive Programming，TFRP）的状态管理库，它使得状态管理简单可伸缩：Anything that can be derived from the application state, should be derived. Automatically. 任何起源于应用状态的数据应该自动获取。其原理如图： Action：定义改变状态的动作函数，包括如何变更状态； Store：集中管理模块状态（State）和动作（action）； D ...

TypeScript流行开来，大型项目的开发目前大多都已经加入了这一强类型校验语言，那么我们之前搭建的组件库引入TypeScript就显得势在必行。怎样在已有组件库项目中配置相关内容并且很好兼容之前组件。本文就是我的践行之路，写出来自己的经历，供大家借鉴，指正。 背景 React + StoryBook StoryBook是什么 StoryBook预览结构 StoryBook文件结构 引入TypeScript依赖 修改配置文件config 预览组件 发布组件 StoryBook是什么 Storybook是一个UI工具，组件库，可以让我们的项目开发，更高效，更独立。他可以让你只写组件，而不用开始一个大型项目，开发组件的同时，组件开发完成，只要在项目中引用，便可以快速搭建起一个页面。 Storybook的开发，不依赖项目，就可以本地预览，查看效果，自己调试。独立完成组件的开发。 Storybook预览结构 编辑好的组件，都放在左侧侧边栏上面，当你点击任何一个组件实现预览的时候，Storybook都会在右侧画布里面插入一个ifr ...

俗话说：工欲善其事，必先利其器，工匠想要做好他的的工作，一定要先让工具锋利。设计师想做好设计，提高工作效率，就得熟悉sketch的一些软件的的小技巧，或者经验总结，提升我们的作图效率和规范我们的设计稿； 技巧一：分割线-用 fill 代替 border做设计稿的时候，大部分同学都用375 * 667尺寸做设计，这种尺寸的设计稿会用到0.5像素的分割线，这个时候我们如果使用边框的话，分割线底部会遇到没有对齐的情况，造成设计稿的不严谨，在375尺寸做设计的时候，我们可以用形状填充代替border。整个页面的列表就是整齐有序的。 技巧二：尽量用iphoneX做页面设计因为 X 的尺寸（375 * 812）与 8 的尺寸（375 * 667）宽度上是一致的，所以用 iphone X 还是用 iphone 8 在宽度上是没有任何差异化影响的； 而使用 iphone X 尺寸的画板设计，我们不需要额外考虑任何适配成本，8的做法和X的做法一致，因为 iOS 的官方 UI kit 中，已经将顶部刘海和底部的 Home Indicator 预留好了，所以完全按照在 8 的画板中的做法去做就好了，而 ...

组件库的存在可以大大提高开发效率。但就像盖房子一样，地基先打好，并且可能需要晾晒几天，之后的建筑才能更牢固。今天我就自己按照官方文档搭建的storybook组件库给大家做一个分享。 流程 创建项目库： 引入storybook 配置storybook环境代码及处理报错 编写组件 增加Class作用域 预览组件 发布组件 创建组件库 如果你已经有自己的任何一个（React+TS）项目，不用管里面的其他项目文件，这个项目就可以用。但是注意要删除所有的.lock文件。因为在storybook初始化的时候，.lock文件可能会导致安装storybook失败。 如果没有项目库，你可以自己在空文件夹中执行$ npx create-react-app echo-rui –typescript 命令来创建自己的项目。这里关于React配置TS我就不做介绍了，具体可以参考网上配置。 引入StoryBook在已有项目命令行执行$ npx sb init 此操作命令根据你当前的package.json文件自动配置需要的storybook环境，包 ...