2020年08月_LuckXinXin

12月 11月 10月 09月 08月 07月 06月 05月 04月 03月 02月

原创 echarts 鼠标放上去显示提示框属性详解！

Echarts数据可视化tooltip提示框详解：tooltip ={ //提示框组件trigger: ‘item’, //触发类型,'item’数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis’坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。triggerOn:“mousemove”, //提示框触

2020-08-31 10:15:05 3328

// 全图默认背景// backgroundColor: ‘rgba(0,0,0,0)’,// 默认色板color: [’#ff7f50’,’#87cefa’,’#da70d6’,’#32cd32’,’#6495ed’,‘#ff69b4’,’#ba55d3’,’#cd5c5c’,’#ffa500’,’#40e0d0’,‘#1e90ff’,’#ff6347’,’#7b68ee’,’#00fa9a’,’#ffd700’,‘#6699FF’,’#ff6666’,’#3cb371’,’#b8860b’,

2020-08-31 09:54:50 156

原创 Vue实现数据双向绑定的原理：Object.defineProperty()

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty() 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue追踪依赖，在属性被访问和.

2020-08-31 09:53:52 161

原创请详细说下你对vue生命周期的理解

答：总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后创建前/后：在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el还没有载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。更新前/后：当da.

2020-08-30 19:15:33 369

原创对于MVVM的理解

MVVM 是 Model-View-ViewModel 的缩写Model 代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。View 代表UI 组件，它负责将数据模型转化成UI 展现出来。ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View在MVVM架构下，View和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model和 ViewModel 之间的交互是双.

2020-08-30 19:15:21 105

原创那给我介绍一下React

以前我们没有jquery的时候，我们大概的流程是从后端通过ajax获取到数据然后使用jquery生成dom结果然后更新到页面当中，但是随着业务发展，我们的项目可能会越来越复杂，我们每次请求到数据，或则数据有更改的时候，我们又需要重新组装一次dom结构，然后更新页面，这样我们手动同步dom和数据的成本就越来越高，而且频繁的操作dom，也使我我们页面的性能慢慢的降低。这个时候mvvm出现了，mvvm的双向数据绑定可以让我们在数据修改的同时同步dom的更新，dom的更新也可以直接同步我们数据的更改，这个特定可.

2020-08-30 19:15:01 123

原创 React 的渲染过程中，兄弟节点之间是怎么处理的？也就是key值不一样的时候

通常我们输出节点的时候都是map一个数组然后返回一个ReactNode，为了方便react内部进行优化，我们必须给每一个reactNode添加key，这个key prop在设计值处不是给开发者用的，而是给react用的，大概的作用就是给每一个reactNode添加一个身份标识，方便react进行识别，在重渲染过程中，如果key一样，若组件属性有所变化，则react只更新组件对应的属性；没有变化则不更新，如果key不一样，则react先销毁该组件，然后重新创建该组件...

2020-08-29 13:45:58 373

原创 React 的虚拟dom是怎么实现的

首先说说为什么要使用Virturl DOM，因为操作真实DOM的耗费的性能代价太高，所以react内部使用js实现了一套dom结构，在每次操作在和真实dom之前，使用实现好的diff算法，对虚拟dom进行比较，递归找出有变化的dom节点，然后对其进行更新操作。为了实现虚拟DOM，我们需要把每一种节点类型抽象成对象，每一种节点类型有自己的属性，也就是prop，每次进行diff的时候，react会先比较该节点类型，假如节点类型不一样，那么react会直接删除该节点，然后直接创建新的节点插入到其中，假如节点类型.

2020-08-29 13:45:42 191

原创我现在有一个button，要用react在上面绑定点击事件，要怎么做？

class Demo { render() { return <button onClick={(e) => { alert('我点击了按钮') }}> 按钮 </button> }}你觉得你这样设置点击事件会有什么问题吗？由于onClick使用的是匿名函数，所有每次重渲染的时候，会把该onClick当做一个新的prop来处理，会将内部缓存的onClick事件进行重新赋值，所以相对直接使用函数来说，可能有一点的

2020-08-29 13:45:18 852

原创说说你用react有什么坑点？

JSX做表达式判断时候，需要强转为boolean类型如果不使用 !!b 进行强转数据类型，会在页面里面输出 0。render() { const b = 0; return <div> { !!b && <div>这是一段文本</div> } </div>}尽量不要在 componentWillReviceProps 里使用 setState，如果一定要使用，那么需要判断结束条件，不.

2020-08-28 11:22:17 369

原创简述flux 思想

Flux 的最大特点，就是数据的"单向流动"。用户访问 ViewView发出用户的 ActionDispatcher 收到Action，要求 Store 进行相应的更新Store 更新后，发出一个"change"事件View 收到"change"事件后，更新页面

2020-08-28 11:22:02 642

原创 React性能优化方案

重写shouldComponentUpdate来避免不必要的dom操作使用 production 版本的react.js使用key来帮助React识别列表中所有子组件的最小变化

2020-08-28 11:21:42 295

原创 diff算法?

把树形结构按照层级分解，只比较同级元素。给列表结构的每个单元添加唯一的key属性，方便比较。React 只会匹配相同 class 的 component（这里面的class指的是组件的名字）合并操作，调用 component 的 setState 方法的时候, React 将其标记为 - dirty.到每一个事件循环结束, React 检查所有标记 dirty的 component重新绘制.选择性子树渲染。开发人员可以重写shouldComponentUpdate提高diff的性能...

2020-08-27 10:24:21 222

原创为什么虚拟dom会提高性能

虚拟dom相当于在js和真实dom中间加了一个缓存，利用dom diff算法避免了没有必要的dom操作，从而提高性能具体实现步骤如下用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新...

2020-08-27 10:23:53 740

原创 react性能优化是哪个周期函数

shouldComponentUpdate 这个方法用来判断是否需要调用render方法重新描绘dom。因为dom的描绘非常消耗性能，如果我们能在shouldComponentUpdate方法中能够写出更优化的dom diff算法，可以极大的提高性能

2020-08-27 10:23:22 816

原创 react生命周期函数

初始化阶段getDefaultProps:获取实例的默认属性getInitialState:获取每个实例的初始化状态componentWillMount：组件即将被装载、渲染到页面上render:组件在这里生成虚拟的DOM节点omponentDidMount:组件真正在被装载之后运行中状态componentWillReceiveProps:组件将要接收到属性的时候调用shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回false，接收数据后不更新，阻止

2020-08-26 09:50:50 87

原创 react组件的划分业务组件技术组件？

根据组件的职责通常把组件分为UI组件和容器组件。UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。两者通过React-Redux 提供connect方法联系起来

2020-08-26 09:50:38 708

原创 redux有什么缺点

一个组件所需要的数据，必须由父组件传过来，而不能像flux中直接从store取。当一个组件相关数据更新时，即使父组件不需要用到这个组件，父组件还是会重新render，可能会有效率影响，或者需要写复杂的shouldComponentUpdate进行判断。...

2020-08-26 09:50:26 825 1

原创 redux中间件

中间件提供第三方插件的模式，自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer。这种机制可以让我们改变数据流，实现如异步action ，action 过滤，日志输出，异常报告等功能...

2020-08-25 10:38:34 87

原创 createElement 与 cloneElement 的区别是什么

createElement 函数是 JSX 编译之后使用的创建 React Element 的函数，而 cloneElement 则是用于复制某个元素并传入新的 Props

2020-08-25 10:38:13 304

原创概述下 React 中的事件处理逻辑

为了解决跨浏览器兼容性问题，React 会将浏览器原生事件（Browser Native Event）封装为合成事件（SyntheticEvent）传入设置的事件处理器中。这里的合成事件提供了与原生事件相同的接口，不过它们屏蔽了底层浏览器的细节差异，保证了行为的一致性。另外有意思的是，React 并没有直接将事件附着到子元素上，而是以单一事件监听器的方式将所有的事件发送到顶层进行处理。这样 React 在更新 DOM 的时候就不需要考虑如何去处理附着在 DOM 上的事件监听器，最终达到优化性能的目的.

2020-08-25 10:37:54 812

原创如何告诉 React 它应该编译生产环境版

通常情况下我们会使用 Webpack 的 DefinePlugin 方法来将 NODE_ENV 变量值设置为 production。编译版本中 React会忽略 propType 验证以及其他的告警信息，同时还会降低代码库的大小，React 使用了 Uglify 插件来移除生产环境下不必要的注释等信息...

2020-08-24 09:45:01 415

原创 React的shouldComponentUpdate 的作用

shouldComponentUpdate 允许我们手动地判断是否要进行组件更新，根据组件的应用场景设置函数的合理返回值能够帮我们避免不必要的更新

2020-08-24 09:44:44 316

原创在生命周期中的哪一步你应该发起 AJAX 请求

我们应当将AJAX 请求放到 componentDidMount 函数中执行，主要原因有下React 下一代调和算法 Fiber 会通过开始或停止渲染的方式优化应用性能，其会影响到 componentWillMount 的触发次数。对于 componentWillMount 这个生命周期函数的调用次数会变得不确定，React 可能会多次频繁调用 componentWillMount。如果我们将 AJAX 请求放到 componentWillMount 函数中，那么显而易见其会被触发多次，自然也就不是.

2020-08-24 09:44:17 555

原创 React 中 refs 的作用是什么

Refs 是 React 提供给我们的安全访问 DOM元素或者某个组件实例的句柄可以为元素添加ref属性然后在回调函数中接受该元素在 DOM 树中的句柄，该值会作为回调函数的第一个参数返回

2020-08-23 11:34:02 887

原创传入 setState 函数的第二个参数的作用是什么？

该函数会在setState函数调用完成并且组件开始重渲染的时候被调用，我们可以用该函数来监听渲染是否完成：this.setState( { username: 'tylermcginnis33' }, () => console.log('setState has finished and the component has re-rendered.'))this.setState((prevState, props) => { return { streak:.

2020-08-23 11:33:46 1710

原创 React 中 keys 的作用是什么？

Keys是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识在开发过程中，我们需要保证某个元素的 key 在其同级元素中具有唯一性。在 React Diff 算法中React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染。此外，React 还需要借助 Key 值来判断元素与本地状态的关联关系，因此我们绝不可忽视转换函数中 Key 的重要性...

2020-08-23 11:33:27 629

原创 jQuery的编码逻辑核心：

1）、查找(创建)jQuery对象：$(“selector”);2）、调用jQuery对象的方法，完成我们需要完成的工作：$(“selector”).doOurWork();

2020-08-22 11:14:16 102

原创小程序的mpvue

mpvueVue.js 小程序版, fork 自 vuejs/[email protected]，保留了 vue runtime 能力，添加了小程序平台的支持。 mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验框架原理两个大方向通过mpvue提供 mp 的 runtime 适配小程序通过mpvue-loa

2020-08-22 11:12:49 220

原创小程序的wepy vs mpvue

数据流管理相比传统的小程序框架，这个一直是我们作为资深开发者比较期望去解决的，在 Web 开发中，随着 Flux、Redux、Vuex 等多个数据流工具出现，我们也期望在业务复杂的小程序中使用WePY 默认支持 Redux，在脚手架生成项目的时候可以内置Mpvue 作为 Vue 的移植版本，当然支持 Vuex，同样在脚手架生成项目的时候可以内置组件化WePY 类似 Vue实现了单文件组件，最大的差别是文件后缀 .wpy，只是写法上会有差异export default class In

2020-08-22 11:12:25 239

原创小程序的性能优化

我们知道view部分是运行在webview上的，所以前端领域的大多数优化方式都有用加载优化代码包的大小是最直接影响小程序加载启动速度的因素。代码包越大不仅下载速度时间长，业务代码注入时间也会变长。所以最好的优化方式就是减少代码包的大小小程序加载的三个阶段的表示优化方式代码压缩。及时清理无用代码和资源文件。减少代码包中的图片等资源文件的大小和数量分包加载。首屏加载的体验优化建议提前请求: 异步数据请求不需要等待页面渲染完成。利用缓存: 利用 storage API 对异.

2020-08-21 12:00:15 498

原创授权获取用户信息流程

session_key 有有效期，有效期并没有被告知开发者，只知道用户越频繁使用小程序，session_key 有效期越长在调用 wx.login 时会直接更新 session_key，导致旧 session_key 失效小程序内先调用 wx.checkSession 检查登录态，并保证没有过期的 session_key 不会被更新，再调用 wx.login 获取 code。接着用户授权小程序获取用户信息，小程序拿到加密后的用户数据，把加密数据和 code 传给后端服务。后端通过 code 拿到 s..

2020-08-21 12:00:00 725

原创小程序的问题

小程序仍然使用 WebView 渲染，并非原生渲染。（部分原生）服务端接口返回的头无法执行，比如：Set-Cookie。依赖浏览器环境的 JS库不能使用。不能使用 npm，但是可以自搭构建工具或者使用 mpvue。（未来官方有计划支持）不能使用 ES7，可以自己用babel+webpack自搭或者使用 mpvue。不支持使用自己的字体（未来官方计划支持）。可以用 base64 的方式来使用 iconfont。小程序不能发朋友圈（可以通过保存图片到本地，发图片到朋..

2020-08-21 11:59:46 139

原创小程序的WXML && WXSS

WXML支持数据绑定支持逻辑算术、运算支持模板、引用支持添加事件（bindtap）Wxml编译器：Wcc 把 Wxml文件转为 JS执行方式：Wcc index.wxml使用 Virtual DOM，进行局部更新WXSSwxss编译器：wcsc 把wxss文件转化为 js执行方式： wcsc index.wxss尺寸单位 rpxrpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。公式：const dsWidth = 7

2020-08-20 09:39:37 478

原创小程序架构

微信小程序的框架包含两部分 View 视图层、App Service逻辑层。View 层用来渲染页面结构，AppService 层用来逻辑处理、数据请求、接口调用。它们在两个线程里运行。视图层和逻辑层通过系统层的 JSBridage 进行通信，逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层把触发的事件通知到逻辑层进行业务处理视图层使用 WebView 渲染，iOS中使用自带 WKWebView，在 Android 使用腾讯的 x5内核（基于 Blink）运行。逻辑层使用在 i..

2020-08-20 09:39:21 349

原创小程序的工程化

工程化做什么目前的前端开发过程，工程化是必不可少的一环，那小程序工程化都需要做些什么呢，先看下目前小程序开发当中存在哪些问题需要解决：不支持 css预编译器,作为一种主流的 css解决方案，不论是 less,sass,stylus 都可以提升css效率不支持引入npm包（这一条，从微信公开课中听闻，微信准备支持）不支持ES7等后续的js特性，好用的async await等特性都无法使用不支持引入外部字体文件，只支持base64没有 eslint 等代码检查工具方案选型对于目前常用

2020-08-20 09:39:07 563

原创小程序的数据统计

数据统计作为目前一种常用的分析用户行为的方式，小程序端也是必不可少的。小程序采取的曝光，点击数据埋点其实和h5原理是一样的。但是埋点作为一个和业务逻辑不相关的需求，我们如果在每一个点击事件，每一个生命周期加入各种埋点代码，则会干扰正常的业务逻辑，和使代码变的臃肿，笔者提供以下几种思路来解决数据埋点设计一个埋点sdk小程序的代码结构是，每一个 Page 中都有一个 Page 方法，接受一个包含生命周期函数，数据的业务逻辑对象包装这层数据，借助小程序的底层逻辑实现页面的业务逻辑。通过这个我们可以想.

2020-08-19 10:03:49 3361

原创小程序的图片导出

这是一种常见的引流方式，一般同时会在图片中附加一个小程序二维码。基本原理借助 canvas 元素，将需要导出的样式首先在 canvas 画布上绘制出来（api基本和h5保持一致，但有轻微差异，使用时注意即可借助微信提供的 canvasToTempFilePath 导出图片，最后再使用 saveImageToPhotosAlbum （需要授权）保存图片到本地如何优雅实现绘制出需要的样式这一步是省略不掉的。但是我们可以封装一个绘制库，包含常见图形的绘制，例如矩形，圆角矩形，圆，扇形，三.

2020-08-19 10:03:32 5027

原创小程序登录

unionid和openid了解小程序登陆之前，我们写了解下小程序/公众号登录涉及到两个最关键的用户标识：OpenId 是一个用户对于一个小程序／公众号的标识，开发者可以通过这个标识识别出用户。UnionId 是一个用户对于同主体微信小程序／公众号／APP的标识，开发者需要在微信开放平台下绑定相同账号的主体。开发者可通过UnionId，实现多个小程序、公众号、甚至APP 之间的数据互通了。关键Apiwx.login 官方提供的登录能力wx.checkSession校验用户当前的sess

2020-08-19 10:03:17 387

原创 CSRF

跨站请求伪造（英语：Cross-site request forgery），也被称为 one-click attack或者 session riding，通常缩写为 CSRF 或者 XSRF，是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法CSRF 就是利用用户的登录态发起恶意请求如何攻击假设网站中有一个通过 Get 请求提交用户评论的接口，那么攻击者就可以在钓鱼网站中加入一个图片，图片的地址就是评论接口<img src="http://www.domain.

2020-08-18 09:34:28 72