20181223 前端开发周报

Posted 2021-04-08 前端开发博客

1、vue响应式原理学习（二）— Observer的实现

之前我的一篇文章 vue响应式原理学习（一） 讲述了vue数据响应式原理的一些简单知识。 众所周知， Vue 的 data 属性，是默认深度监听的，这次我们再深度分析下， Observer 观察者的源码实现。 先写个深拷贝热热身 既然 data 属性是被深度监听，那我们就首先自己实现一个简单的深拷贝，理解下思路...

https://juejin.im/post/5c15de1be51d4514a87dc672

2、掌握 RxJS 系列（三）：剖析 Observable

README.md 掌握RxJS系列(03)：剖析Observable 前言 这是掌握RxJS系列的第三篇文章，这篇文章主要是和大家一起来剖析一下RxJS中的Observable。 初步了解 创建一个Observable 我们首先看一下下面创建一个Observable的...

https://github.com/dreamapplehappy/blog/tree/master/2018/12/13

3、前端工程师的 2018 年总结

2018 年，我的本命年，今年 24 岁，离 “而立之年” —— 30 岁， 又近了一步。今年对我而言，是人生的一个重要节点。今年是我觉得过得最快的一年，也是成长最多的一年。

https://segmentfault.com/a/1190000017441963

4、javascript数组遍历：for、foreach、for in、for of、$.each、$().each的区别

forEach循环我们可以直接取到元素，同时也可以取到index值。但是forEach也有一些局限，不能continue跳过或者break终止循环

https://segmentfault.com/a/1190000017394445

5、那些前端工作中遇到的坑（01）

前段时间接手一个老项目（jQuery+React混在一块）的迁移工作，除了用 React 重写一些 vm+jQuery 的老页面（这种至少是自己写的，心里有数，调起来也省心），剩下的就是将原有的React迁到新仓库里，复制！粘贴！改路径！完事！是个体力活。 你以为这样就结束了？一大堆bug在等着，整整改了半个月，虽然都是些小问题，...

https://juejin.im/post/5c126088518825566d235f77

6、Vue与React两个框架的粗略区别对比

React--Facebook创建的JavaScript UI框架。它支撑着包括Instagram在内的大多数Facebook网站。React与当时流行的jQuery,Backbone.js和Angular 1等框架不同，它的诞生改变了JavaScript的世界。其中最大的变化是Reac...

https://segmentfault.com/a/1190000017414633

7、JavaScript骚操作之操作符

每到周末我都会问自己，怎么安排？于是我写了个程序跑了一下 if (hasMoney) { console.log('周末嗨翻天'); } else { console.log('周末睡一天'); } 复制代码 看上去没有什么问题，但总感觉代码有点臃肿，能不能稍微简约一点？ 换成三目运算符后 hasMoney ? console.log('周末嗨翻天') :...

https://juejin.im/post/5c15dc47e51d457b00691be5

8、【开源】合摩 WeexBox 正式发布

一提到 Weex，相信下面已经有一群小伙伴在哀嚎了，是的，大多数开发者对 Weex 的感情是既爱又恨的。Weex 是优秀的跨平台框架，「Write Once, Run Everywhere」，但坑也多的不要不要的，特别对于刚开始尝试 Weex ...

https://segmentfault.com/a/1190000017460230

9、如何提升JavaScript的任务效率？学会后教给你同事

JavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。随着电脑计算能力的增强，尤其是多核 CPU 的出现，单线程带来很大的不...

https://segmentfault.com/a/1190000017398409

10、Vue 前端应用实现RBAC权限控制的一种方式

权限控制不管前后端都可以简单分为： 身份认证权限控制 RBAC权限控制 ... 而前端我和团队，检索了很多地方都没有很成熟或者说可行的关于 RBAC基于角色的访问控制 相关的前端权限控制方案，可能是我们检索的方法不对，亦或是大家都忙于其他，没有时间把自己的方法整理公布出来，故我们在 原定计划 中，...

https://juejin.im/post/5c19a282f265da61137f372c

11、前端技术演进（七）：前端跨栈技术

这个来自之前做的培训，删减了一些业务相关的，参考了很多资料（参考资料列表），谢谢前辈们，么么哒 :kissing_heart: 随着互联网架构的不断演进，前端技术框架从后台输出页面到后台MVC，再到前端MVC、MVP、MVVM，以及到Virtual DOM和MNV*的实现，已经发生了巨大的变化。整体上来看，前端也正在朝着模块化、组件化和...

https://juejin.im/post/5c138088f265da614f7031c4

12、React全家桶+Koa+TS+mongoDB+Antd实现的简单TodoList

Write a Todo and do it 技术栈 React TypeScript Koa MongoDB Webpack React-Router等 Demo前后端分离 前端目录src 后端目录server 使用的create-react-app来搭建开发环境,通过react-app-rewire来扩展自己的webpack配置 启动项目 yarn mongod yarn run koa ya...

https://juejin.im/post/5c1502a3f265da61180198c4

13、JavaScript如何工作:内存管理+如何处理4个常见的内存泄漏

在这第三篇文章中，我们将讨论另一个重要主题——内存管理，这是由于日常使用的编程语言越来越成熟和复杂，开发人员容易忽视这一问题。我们还将提供一些有关如何处理JavaScript中的内存泄漏的技巧，在SessionStack...

https://segmentfault.com/a/1190000017392370

14、前端开发中，滑动展现日志麻烦？这个组件来帮你

在这个数据无比重要的时代，用户在网页上面的一系列操作，都需要用数据记录下来。在一个网页中，某个元素的点击数，展现数可以说是最基本的指标了。点击数很简单，用户点击的时候，上报一条点击日志即可。但是展...

https://segmentfault.com/a/1190000017454026

15、前端技术演进（六）：前端项目与技术实践

这个来自之前做的培训，删减了一些业务相关的，参考了很多资料（参考资料列表），谢谢前辈们，么么哒 :kissing_heart: 任何五花八门的技术，最终还是要在实践中落地。现代的软件开发，大部分讲求的不是高难度高精尖，而是效率和质量。 这里主要来说说现代前端技术在项目中的实践。 开发规范 开发规范是开发工程...

https://juejin.im/post/5c13804bf265da61553ab692

16、你（可能）不知道的 Web API

https://juejin.im/post/5c1606d9f265da613d7bf7a4

17、webpack 构建多页面应用

如何使用webpack构建多页面应用，这是一个我一直在想和解决的问题。网上也给出了很多的例子，很多想法。猛一看，觉得有那么点儿意思，但仔细看也就那样。

https://segmentfault.com/a/1190000017393930

18、Vuex、Flux、Redux、Redux-saga、Dva、MobX

这篇文章试着聊明白这一堆看起来挺复杂的东西。在聊之前，大家要始终记得一句话：一切前端概念，都是纸老虎。

https://segmentfault.com/a/1190000017420120

19、不怕你用不上CSS 列表项布局技巧

编者按：为了不引入 html 标签自身的样式，本文未考虑 HTML 语义化的提倡，以使得行文与示例代码更加简洁。这是文章写作需要，而非代码风格示范。

https://segmentfault.com/a/1190000017401479

20、前端接受后端文件流并下载的几种方法

https://juejin.im/post/5c1610cae51d455c627a967e

21、CSS实例详解：Flex布局

本文将通过三个简单的实例，实际应用上篇文章的基础理论知识，展示下Flex布局是如何解决CSS布局问题。

https://segmentfault.com/a/1190000017405644

22、逼真的HTML5 3D水波动画 可多视角浏览

JAVA大本营的秒拍视频  这是一款基于HTML5的3D水波动画特效，它的效果非常逼真，水池中的石头在水中沉浮，泛起了一层层水波。同时我们可以拖拽鼠标从不同的视角来浏览水池，3D效果非常不错。另外，我们可以按“G”键来让水池中的石头上下浮动，按“L”键添加灯光效果，设计相当完美。同时说明一下，这款3D水波动画是基于WebGL渲染技术的，大家可以...

http://www.codeceo.com/article/html5-3d-wave-animation.html

23、vue和react的介绍

这几年前端框架发展的不错，出了不少框架，像微软自己的knockoutjs,angular,vue和最近比较火的react等，之前我有写过前两者的相关文章，今天主要说一下后两者。 介绍 是一个用于构建用户界面的 JAVASCRIPT 库。 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。 拥有较高的性能，代码逻辑非...

http://www.cnblogs.com/lori/p/10141716.html

24、前端埋点统计方案思考

埋点即监控用户在应用表现层的行为，于产品迭代而言至关重要。埋点数据分析是产品需求的 来源 ，检验功能是否达预期的 佐证 。 采集埋点数据可做如下分析（以百度统计为例）： 将 用户属性 、 用户行为 转化各类可视化图表： 不同产品对数据的关注角度不同，可按需采集。如信息流产品对停留时长...

https://sunmengyuan.github.io/garden/2018/12/13/trace.html?page=1

25、从零实现Vue的组件库（二）-Slider组件实现

实现一个Slider组件，方便用户通过拖动滑块在一个固定区间内进行选择，增强交互细节。 概述： 在用户手动一些限定数字时，如果采用输入框的形式，会需要提示信息和错误信息来引导用户，这就存在一些冗余操作。所以衍生出Slider组件，方便用户拖动来选定一个值。 该组件的痛点在于： 兼容不同游览器的样...

https://juejin.im/post/5c19ff516fb9a049cb18b0f8

26、用console.log看Vue

https://juejin.im/post/5c16418951882538472061aa

27、vue中引入字体文件

在用vue来写一官网的时候，想引入外部字体文件，毕竟总感觉他自己的字体有点难看，在这里记录下 1.先下载字体文件所需的.ttf文件 我这里想引入的是华文行楷字体 百度后下载了一个3M多的ttf文件 2.将字体文件引入 ...

https://segmentfault.com/a/1190000017397287

28、用 Node.js 快速开发出多功能的多人在线的文章分享平台

https://segmentfault.com/a/1190000017410810

29、react 前端项目技术选型、开发工具、周边生态

react 前端项目技术选型、开发工具、周边生态 声明：这不是一篇介绍 React 基础知识的文章，需要熟悉 React 相关知识 主架构：react, react-router, redux, redux-thunk, redux-saga, react-redux, dva, umi 扩展...

https://segmentfault.com/a/1190000017406286

30、教你一个vue小技巧，一般人我不说的

最近的项目中，需要实现在vue框架中动态渲染带提示框的单选/多选文本框，具体的效果如下图所示，在输入框聚焦时，前端组件通过接收的kv参数渲染出选项，用户点击选项，可以将选择的选项的key拼装到输入框中，同时...

https://segmentfault.com/a/1190000017433716

31、用css3实现ps蒙版效果+动画

这个动画，其实也并不复杂。它使用background-clip实现了文字蒙版的效果，然后结合了背景图片的animation实现了如上图所示的文字蒙版动画。

https://segmentfault.com/a/1190000017449169

32、学会这两件事，让你成为 Git 老司机

“我在提交中犯了个错误，我如何修正它？”，“我的提交历史一团糟，我该如何让它更整洁？”如果你曾经有上述问题，那么这篇文章很适合你！ （@BEAST丨Q 译，欢迎加入翻译组： ）

http://blog.jobbole.com/114551/

喜欢这篇文章的朋友，欢迎关注、收藏、分享、评论，帮我上热门，你的支持，是我每日更新的动力！

喜欢前端的朋友可以点击关注一下我，每日分享精彩的前端文章！

今日更多精彩文章：http://caibaojian.com/fe-daily-20181223.html

欢迎点击“阅读原文”，学习今日精华文章～

前端开发博客

——————————————————

领略前端技术 阅读前端开发博客

长按二维码，关注前端开发博客

▼