- 博客(238)
- 收藏
- 关注
RSS订阅原创 Angular-使用好NgForOf的trackBy带来性能上的提升
Angular-使用好NgForOf的trackBy带来性能上的提升官方文档，查看“变更的传导机制”即有详细的表述：即使数据没有变化，迭代器中的元素标识符也可能会发生变化。比如，如果迭代器处理的目标是通过 RPC 从服务器取来的， 而 RPC 又重新执行了一次。那么即使数据没有变化，第二次的响应体还是会生成一些具有不同标识符的对象。Angular 将会清除整个 DOM， 并重建它（就...
2019-06-24 18:29:02
3277
1
原创 Redux applyMiddleware 原理剖析
Redux applyMiddleware 原理剖析最近在总结最近用的知识，好记性不如烂笔头，所以写出来记录下。“It provides a third-party extension point between dispatching an action, and the moment it reaches the reducer.”这是 Dan Abramov 对 middl...
2019-06-24 18:27:37
1193
原创 一文掌握React性能优化
一文掌握React性能优化1 shouldeComponentUpdateshouldComponentUpdate应该是提到的优化方法里面提到最多的，使用的也是最多的，如果返回false，就会阻止下面组件的渲染，反之，返回true，就会进行接下来的渲染，默认返回的事true。但是有个问题，shouldComponentUpdate进行的是浅比较，为什么不进行深比较，因为伤不起，深比...
2019-06-24 18:26:04
563
原创 浮点数精度问题透析:小数计算不准确+浮点数精度丢失根源
浮点数精度问题透析:小数计算不准确+浮点数精度丢失根源在知乎上上看到如下问题：浮点数精度问题的前世今生？1.该问题出现的原因 ？2.为何其他编程语言，比如java中可能没有js那么明显3.大家在项目中踩过浮点数精度的坑？4.最后采用哪些方案规避这个问题的？5.为何采用改方案？例如在 chrome js console 中：alert(0.7+0.1); //输...
2019-06-24 18:25:07
742
原创 再谈js对象数据结构底层实现原理-object array map set
再谈js对象数据结构底层实现原理-object array map set如果有java基础的同学，可以回顾下《再谈Java数据结构—分析底层实现与应用注意事项》：java把内存分两种：一种是栈内存，另一种是堆内存。基本类型(即int,short,long,byte,float,double,boolean,char)在栈区分配空间，所有的对象都在堆(Heap)中分配空间。按照这思路来谈...
2019-06-24 18:23:59
858
原创 常见 五大CSS 布局方式 总结
常见 五大CSS 布局方式 总结之所以总结是因为最近也是在看css方面，让我迷惑的是有很多文章 关于布局名词都没有听说过，工作中也很少用。但是我们要与时俱进，叫的多了，它就成为正式名词了。比如 '双飞翼 '圣杯’？？并且我还发现我几乎看了好多文章，他们在从大的角度总结时候，几乎很少有相同，分类角度不尽相同。其实这也没关系，本来就没有一个统一标准，但是还是希望有个相对能够理解 概括角度看c...
2019-06-24 18:22:33
7802
原创 一文读懂JavaScript函数式编程重点-- 实践 总结
一文读懂JavaScript函数式编程重点-- 实践 总结好记性不如烂笔头,有时间将JS函数式编程,在JS方面毕竟有限，如果真要学习好函数式编程，建议学习下Haskell，本文就是将关于JS方面知识点尽可能总结全面。柯里化 偏应用 组合与管道 函子 Monad1. 柯里化什么是柯里化呢？柯里化是把一个多参数函数转化为一个嵌套的一元函数的过程。下面我们用介绍柯里化时候很...
2019-06-24 18:21:40
3710
1
原创 一次网站的性能优化之路 -- 天下武功，唯快不破
一次网站的性能优化之路 -- 天下武功，唯快不破首屏作为直面用户的第一屏，其重要性不言而喻，如何加快加载的速度是非常重要的一课。本文讲解的是：笔者对自己搭建的个人博客网站的速度优化的经历。效果体验地址：https://biaochenxuying.cn1. 用户期待的速度体验2018 年 8 月，百度搜索资源平台发布的《百度移动搜索落地页体验白皮书 4.0 》中提到：页...
2019-06-24 18:20:12
431
原创 Vue + TypeScript + Element 项目实战及踩坑记
Vue + TypeScript + Element 项目实战及踩坑记前言本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目，并在此过程中踩过的坑 。TypeScript 具有类型系统，且是 JavaScript 的超集，TypeScript 在 2018年 势头迅猛，可谓遍地开花。Vue3.0 将使用 TS 重写，重写后的 Vue3.0 将更好的支持 TS...
2019-06-24 18:18:28
13800
1
原创 一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构
一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构1.前言本文内容讲解的内容：一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构。项目地址：https://github.com/biaochenxuying/vue-family-mindmap文章的图文结合版[1]Vue-family.md[2]...
2019-06-24 18:16:34
734
原创 学几招 vscode 技巧
学几招 vscode 技巧俗话说「磨刀不误砍柴工」，对于开发者来说，一款优秀的 IDE 或者 text editor 能有效提升工作效率。Visual Studio Code（下文中简称 vscode）因其强大的功能，较快的运行速度以及众多的扩展，在开发者中相当流行。本文就来介绍 vscode 的一些技巧，希望能给大家一些启发。作者本人使用的 Mac 版的 vscode，一些快捷键...
2019-06-23 18:42:29
212
1
原创 如何解决 iframe 无法触发 clickOutside
如何解决 iframe 无法触发 clickOutside前言在公司的一次小组分享会上，组长给我们分享了一个他在项目中遇到的一个问题。在一个嵌入 iframe 的系统中，当我们点击按钮展开 Dropdown 展开后，再去点击 iframe 发现无法触发 Dropdown 的 clickOutside 事件，导致 Dropdown 无法关闭。查看在线示例为什么无法触发 clic...
2019-06-23 18:41:19
3145
原创 闲话 CDN
闲话 CDN开头这篇文章通过 FCC 上海线下和成都微信的分享，整理成文字稿顺便凑一下更新，考虑到吃瓜读者们不知道都了解到啥程度，以及我科普作者的身份（自己定的），我决定从入门到放弃的介绍一下，大致涉及：什么是 CDN 为什么我们要用 CDN 访问原理 架构 应用与踩坑 现实世界的 CDN由于每个地方都事无巨细讲起来非常费劲，费劲就容易跳票，而且会导致篇幅过长，所以其...
2019-06-23 18:40:01
395
原创 Vue业务实践指北
Vue业务实践指北写业务，对于一个前端而言，应该是再正常不过的事了，业务对标着需求，前端 er 们根据产品的需求以及设计师的设计稿开发出相应的 web 应用，无论是一个简单的页面或是一套复杂的系统，或多或少掺杂着业务逻辑。然而，我们有时候写的业务逻辑到底是为了去写业务逻辑而写的吗，作为一个常年与业务抗战的骚 nian，我认为我们写的业务不光光是为了在排期内完成简单的任务，而是要打磨自己写...
2019-06-23 18:38:54
274
原创 Grafana 插件开发从零到一
Grafana 插件开发从零到一阅前高能提醒：这篇文章总的来说并不是在教你怎么开发，而是告诉你怎么去学习开发一个 Grafana 的插件，说是从零到一，MAX_VALUE 其实是 100，望珍重。引子前一阵子突然接到了一个新任务：开发一个 Grafana 的 Datasource——差不多是这个表情。作为一个新时代的好码畜，上一次配置 Grafana 面板的时候，含着热泪...
2019-06-23 18:37:52
5057
1
原创 CSP：给大家介绍下我爸爸 — Performance
CSP：给大家介绍下我爸爸 — Performance这篇文章主要讲如何利用 PerformanceAPI 辅助书写CSP 指令里的域名名单的思路，并不是写 CSP 的最佳实践，也未提供成熟工具。如果你还不了解 CSP 或者 PerformanceAPI，可以看下第 0 步（由于我并未特别深入 CSP 规则，如果有写的不对的地方，请大力指正），大佬请跳过。0. 名词解释C...
2019-06-23 18:36:37
397
原创 Event Loop 这个循环你晓得么？(附GIF详解)
Event Loop 这个循环你晓得么？(附GIF详解)前言我们都知道JavaScript是一门单线程、非阻塞的脚本语言，目的是为了实现与浏览器交互。这里我们提到了两点：一是单线程，二是非阻塞。单线程是指JavaScript在执行的时候，有且只有一个主线程来处理所有的任务。但是他为什么一定是单线程，而不是多线程的呢？我们设想一下，如果JavaScript是多线程的，现...
2019-06-23 18:35:20
406
原创 Web 应用中的撤销与重做
Web 应用中的撤销与重做撤销（Undo）与重做（Redo）是绝大部分应用中都有的功能，它给用户提供了后悔药，这样用户即便误操作也能使损失达到最小，或者没有损失，给用户提供更好的使用体验。本文介绍 Web 应用中常用的两种撤销与重做实现思路，并提供一个在线案例。Web 应用中的撤销与重做，很容易想到富文本编辑器，但本文不特指富文本编辑器，而是更具有普遍意义的 Web 交互应用。只要有...
2019-06-23 18:34:10
3007
1
原创 Cookie 知识二则
Cookie 知识二则SSO？你需要知道的SSO，即单点登录，其作用是用户登录一遍之后可在几个不同应用之间实现登录态。如当你在 A 网站登录了之后，在 B 网站也是登录状态了。实现 SSO 的方法有很多，一个要点是需要有一个标示某个用户已经登录的凭证，且该凭证能够在多个系统之间共享。使用 Cookie 保存相关的信息是一个广泛被使用的方法。那么，如何做到登录网站 A 之后，B 网站也...
2019-06-23 18:32:43
328
原创 Vue的打包优化之路
Vue的打包优化之路场景分析一个结构简单，依赖蛮多的可视化项目，用到的库有1. Vue + VueRouter + Vuex + axios2. ECharts + 全省份地图文件 + 中国地图文件3. ElementUI4. moment (后面被 date-fns 代替)5. lodash + lodash-decorator (用到了装饰器)EChart...
2019-06-23 18:31:48
524
原创 为什么说Egg.js是企业级Node框架
为什么说Egg.js是企业级Node框架自从Node.js问世以来，阿里就是国内跟进Node.js最激进的公司之一。阿里不仅在公司内大范围使用Node.js用作服务端开发，2016年还将他们使用Node做Web开发的经验沉淀下来，推出Egg.js开源项目，号称为企业级框架和应用而生。企业级开发对于框架有着诸多要求，那么Egg.js又是怎么满足这些要求的？在7月6日的ArchSummi...
2019-06-19 18:20:05
1966
原创 Redux 4.0，用Kotlin重构Java应用
Redux 4.0，用Kotlin重构Java应用新闻热点国内国外，前端最新动态Redux 4.0：Redux 是 JavaScript 状态容器，提供可预测化的状态管理。近日，Redux发布了最新版本的Redux 4.0，相对上一版本，它的文档进行了大量更新，还包括TypeScript定义、打包CommomJS/ES模块等，详情可进入GitHub查看。安卓病毒爆发，300多...
2019-06-19 18:16:26
438
原创 web 开发之 —— 列表的分页
web 开发之 —— 列表的分页列表的分页是 web 开发中非常常见的一个需求，目前我接触过的分页有一下几类：静态列表 动态无序列表 动态有序列表静态列表常见于企业的时间轴列表中，它的列表内容几乎是不变的，因此使用 page + count 进行分页就可以了动态无序列表这里的无序指的是这个列表除了动态的分数来作为排序规则之外，没有其它的额外规则，比如说不能根据创建...
2019-06-19 18:14:19
1693
原创 在Vue中使用JSX的正确姿势
在Vue中使用JSX的正确姿势ant-design-vue开源了一段时间后，收到了一些反馈，尤其是Form组件上线后，很多用户对JSX的使用感到迷惑和不习惯，为此专门介绍下Vue JSX的使用姿势及注意事项。Form组件的自动收集校验功能需要在JSX下使用，当然如果不需要自动收集校验，你依然可以使用templateVue 推荐在绝大多数情况下使用template来创建你的 H...
2019-06-19 18:13:13
29989
3
原创 Airbnb 宣布放弃使用 React Native，Vue超越了React？
Airbnb 宣布放弃使用 React Native，Vue超越了React？前端每周清单专注大前端领域内容，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目等栏 目。欢迎关注【前端之巅】微信公众号（ID: frontshow），及时获取前端每周清单。新闻热点国内国外，前端最新动态Vue.js超越React.js？勿以star数论高低！：...
2019-06-19 18:11:13
11559
1
原创 如何让React(anujs)跑在IE8上
如何让React(anujs)跑在IE8上本文不会慷慨激昂地控诉IE8怎么怎么的，因为没有意义，总有苦逼的人。群里也经常问到如此让anujs跑到低版本浏览器下，现在统一答复一下如何让anujs代替React，跑到IE8中。anujs仓库：https://github.com/RubyLouvre/anu本文例子：RubyLouvre/anu-ie8-example我的例子...
2019-06-19 18:09:53
1790
原创 React转微信小程序:双模板联动
React转微信小程序:双模板联动这是本系列的最后一篇。小程序封死了操作DOM的可能性，并且也不让我们操作视图，所有与视图有关的东西一律接触不了。而它的自定义组件是非常恶心，基本不配叫组件，不能继承叫什么组件。因此我们使用它更早期的动态模板技术,template。我的思路如下，通过编译组件的render方法，将里面的自定义组件变成template类，然后在template类中自己初始...
2019-06-19 18:08:34
887
原创 前端周报：Udacity弃用RN，微信小程序将支持npm
前端周报：Udacity弃用RN，微信小程序将支持npm前端每周清单专注大前端领域内容，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目等栏 目。欢迎关注【前端之巅】微信公众号（ID: frontshow），及时获取前端每周清单。新闻热点国内国外，前端最新动态微信小程序的下一步：支持NPM、小程序云、可视化编程、支持分包：7月11日，微信...
2019-06-19 18:07:32
224
原创 前端周报：TypeScript 3.0，前端面试指南免费下载
前端周报：TypeScript 3.0，前端面试指南免费下载前端周报专注大前端领域内容，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目等栏 目。欢迎关注【前端之巅】微信公众号（ID: frontshow），及时获取前端周报。新闻热点国内国外，前端最新动态TypeScript 3.0重磅发布：7月31日，微软正式发布 TypeScript 3....
2019-06-19 18:06:37
226
原创 使用BEM命名规范来组织CSS代码
使用BEM命名规范来组织CSS代码BEM是Block（块）Element（元素）Modifier（修饰器）的简称使用BEM规范来命名CSS，组织HTML中选择器的结构，利于CSS代码的维护，使得代码结构更清晰（弊端主要是名字会稍长）如何使用BEM一个独立的（语义上或视觉上），可以复用而不依赖其它组件的部分，可作为一个块（Block） 属于块的某部分，可作为一个元素（E...
2019-06-19 18:04:51
139
原创 各种小程序的组件机制差异
各种小程序的组件机制差异在蚂蚁金服的开放平台上看到一些贴子，说提供一个工具，一键转换微信小程序为支付宝小程序。我与百度的人交流时，也听到相似的东西。其实都没有这么简单，它们最多是将一些循环条件分支指令改一下名，将一些文件的后缀名改一下，更多的差异点在API与各式的配置对象上，细节是魔鬼，我在娜娜奇的官网也列举了许多相关的东西，但也不能打票说已经很齐全。。。。各种小程序的差异点-...
2019-06-18 19:04:30
257
原创 教程：从零开始使用webpack 4, Babel 7创建一个React项目（2019）
教程：从零开始使用webpack 4, Babel 7创建一个React项目（2019）你会在本篇学到什么如何安装配置webpack 如何安装配置babel 如何安装react 如何创建两种React Component --- 容器/展示组件 在html文件中引用webpack生成的bundle文件 如何安装使用webpack dev server初始化项目首先我们先给项...
2019-06-18 19:03:23
1078
1
原创 useEffect与useLayoutEffect
useEffect与useLayoutEffectReact Hook让无狀态组件拥有了许多只有有狀态组件的能力，如自更新能力（setState，使用useState），访问ref（使用useRef或useImperativeMethods），访问context(使用useContext)，使用更高级的setState设置（useReducer），及进行类似生命周期的阶段性方法（useEffe...
2019-06-18 19:01:48
1553
原创 ReactFiber在并发模式下的运行机制
ReactFiber在并发模式下的运行机制新一年又开始了，React过去一年悄悄实现了Suspense，带来了React Hooks ,源码也大变换了。因此好有必须重新阅读一下，看它是如何实现这些功能，及未来准备开放的并发渲染功能。React16早期将原来的diff过程拆分成两个阶段，第一个阶段叫reconcile, 也就是原来diff虚拟DOM的过程。这阶段有大量叫reconcile...
2019-06-18 19:00:45
560
原创 React-coat深度对比DvaJS，是挑战者？还是又一轮子？
React-coat深度对比DvaJS，是挑战者？还是又一轮子？DvaJS：项目地址 React-coat：项目地址DvaJS 和 React-coat 都是 React+Redux+Redux-router 生态的框架，都是把传统MVC的调用风格引入MVVM，两者诸多地方颇为相似。DvaJS已经广为人知，上线已经好几年了，从文档、稳定性、测试充分度、辅助工具等方面都自然比 re...
2019-06-18 18:57:12
843
1
原创 如何利用 React Hooks API 做全局状态管理？
如何利用 React Hooks API 做全局状态管理？React 最新正式版已经支持了 Hooks API，先快速过一下新的 API 和大概的用法。// useState，简单粗暴，setState可以直接修改整个stateconst [state,setState] = useState(value);// useEffect，支持生命周期useEffect(()=&...
2019-06-18 18:54:30
7488
2
原创 Vue组件库工程探索与实践之构建工具
Vue组件库工程探索与实践之构建工具京东 JDC 团队近期发布了移动端 Vue 组件库 NutUI 的 2.0 版，2.0 不是 1.0 的升级，而是一个全新的组件库。从 1.0 到 2.0 一路走来，他们积累了一些 Vue 组件库的开发经验，接下来的一段时间，他们将以系列文章的形式与大家进行分享，欢迎关注。作者：李大凡作为《Vue 组件库工程探索与实践》系列文章开篇之作，我们从...
2019-06-18 18:53:10
449
原创 教你如何在React及Redux项目中进行服务端渲染
教你如何在React及Redux项目中进行服务端渲染服务端渲染（SSR: Server Side Rendering）在React项目中有着广泛的应用场景基于React虚拟DOM的特性，在浏览器端和服务端我们可以实现同构（可以使用同一份代码来实现多端的功能）服务端渲染的优点主要由三点1. 利于SEO2. 提高首屏渲染速度3. 同构直出，使用同一份（JS）代码实现，便于开发和维护...
2019-06-17 18:39:47
490
原创 深入理解JavaScript的事件循环（Event Loop） 一、什么是事件循环
深入理解JavaScript的事件循环（Event Loop）一、什么是事件循环JS的代码执行是基于一种事件循环的机制，之所以称作事件循环，MDN给出的解释为因为它经常被用于类似如下的方式来实现while (queue.waitForMessage()) { queue.processNextMessage();}如果当前没有任何消息queue.waitForMes...
2019-06-17 18:37:52
24295
3
原创 安卓移动微信页调试大法
安卓移动微信页调试大法在开发移动端页面时，一般都得保证在微信页面中能够正常访问，虽说微信内置浏览器统一了各个不同安卓机的WebView，但在不同的机子上，还是会出现不一样的兼容问题。调试页面，有几个维度要考虑：能够访问页面、审查元素查看页面输出、抓包查看请求模拟登陆、断点调试、性能测试、在模拟器上调试、在真机上调试本文仅涉及基础页面的调试，不涉及Hybrid app、公众号JDK 、小...
2019-06-17 18:36:22
582
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人