20181223 前端开发周报-前端开发博客

vue响应式原理学习（二）— Observer的实现；掌握 RxJS 系列（三）：剖析 Observable；前端工程师的 2018 年总结；那些前端工作中遇到的坑（01）；JavaScript数组遍历：for、foreach、for in、for of、$.each、$().each的区别；Vue与React两个框架的粗略区别对比；JavaScript骚操作之操作符；【开源】合摩 WeexBox 正式发布

vue响应式原理学习（二）— Observer的实现之前我的一篇文章 vue响应式原理学习（一）讲述了vue数据响应式原理的一些简单知识。众所周知， Vue 的 data 属性，是默认深度监听的，这次我们再深度分析下， Observer 观察者的源码实现。先写个深拷贝热热身既然 data 属性是被深度监听，那我们就首先自己实现一个简单的深拷贝，理解下思路…
掌握 RxJS 系列（三）：剖析 Observable README.md 掌握RxJS系列(03)：剖析Observable 前言这是掌握RxJS系列的第三篇文章，这篇文章主要是和大家一起来剖析一下RxJS中的Observable。初步了解创建一个Observable 我们首先看一下下面创建一个Observable的…
前端工程师的 2018 年总结2018 年，我的本命年，今年 24 岁，离 “而立之年” —— 30 岁，又近了一步。今年对我而言，是人生的一个重要节点。今年是我觉得过得最快的一年，也是成长最多的一年。
那些前端工作中遇到的坑（01）前段时间接手一个老项目（jQuery+React混在一块）的迁移工作，除了用 React 重写一些 vm+jQuery 的老页面（这种至少是自己写的，心里有数，调起来也省心），剩下的就是将原有的React迁到新仓库里，复制！粘贴！改路径！完事！是个体力活。你以为这样就结束了？一大堆bug在等着，整整改了半个月，虽然都是些小问题，…
JavaScript数组遍历：for、foreach、for in、for of、$.each、$().each的区别forEach循环我们可以直接取到元素，同时也可以取到index值。但是forEach也有一些局限，不能continue跳过或者break终止循环
Vue与React两个框架的粗略区别对比React–Facebook创建的JavaScript UI框架。它支撑着包括Instagram在内的大多数Facebook网站。React与当时流行的jQuery,Backbone.js和Angular 1等框架不同，它的诞生改变了JavaScript的世界。其中最大的变化是Reac…
JavaScript骚操作之操作符每到周末我都会问自己，怎么安排？于是我写了个程序跑了一下 if (hasMoney) { console.log(‘周末嗨翻天’); } else { console.log(‘周末睡一天’); } 复制代码看上去没有什么问题，但总感觉代码有点臃肿，能不能稍微简约一点？换成三目运算符后 hasMoney ? console.log(‘周末嗨翻天’) :…
【开源】合摩 WeexBox 正式发布一提到 Weex，相信下面已经有一群小伙伴在哀嚎了，是的，大多数开发者对 Weex 的感情是既爱又恨的。Weex 是优秀的跨平台框架，「Write Once, Run Everywhere」，但坑也多的不要不要的，特别对于刚开始尝试 Weex …
如何提升JavaScript的任务效率？学会后教给你同事JavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。随着电脑计算能力的增强，尤其是多核 CPU 的出现，单线程带来很大的不…
Vue 前端应用实现RBAC权限控制的一种方式权限控制不管前后端都可以简单分为：身份认证权限控制 RBAC权限控制 … 而前端我和团队，检索了很多地方都没有很成熟或者说可行的关于 RBAC基于角色的访问控制相关的前端权限控制方案，可能是我们检索的方法不对，亦或是大家都忙于其他，没有时间把自己的方法整理公布出来，故我们在原定计划中，…
前端技术演进（七）：前端跨栈技术这个来自之前做的培训，删减了一些业务相关的，参考了很多资料（参考资料列表），谢谢前辈们，么么哒 :kissing_heart: 随着互联网架构的不断演进，前端技术框架从后台输出页面到后台MVC，再到前端MVC、MVP、MVVM，以及到Virtual DOM和MNV*的实现，已经发生了巨大的变化。整体上来看，前端也正在朝着模块化、组件化和…
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…
JavaScript如何工作:内存管理+如何处理4个常见的内存泄漏在这第三篇文章中，我们将讨论另一个重要主题——内存管理，这是由于日常使用的编程语言越来越成熟和复杂，开发人员容易忽视这一问题。我们还将提供一些有关如何处理JavaScript中的内存泄漏的技巧，在SessionStack…
前端开发中，滑动展现日志麻烦？这个组件来帮你在这个数据无比重要的时代，用户在网页上面的一系列操作，都需要用数据记录下来。在一个网页中，某个元素的点击数，展现数可以说是最基本的指标了。点击数很简单，用户点击的时候，上报一条点击日志即可。但是展…
Vuex、Flux、Redux、Redux-saga、Dva、MobX这篇文章试着聊明白这一堆看起来挺复杂的东西。在聊之前，大家要始终记得一句话：一切前端概念，都是纸老虎。
不怕你用不上CSS 列表项布局技巧编者按：为了不引入 HTML 标签自身的样式，本文未考虑 HTML 语义化的提倡，以使得行文与示例代码更加简洁。这是文章写作需要，而非代码风格示范。
webpack 构建多页面应用如何使用webpack构建多页面应用，这是一个我一直在想和解决的问题。网上也给出了很多的例子，很多想法。猛一看，觉得有那么点儿意思，但仔细看也就那样。
#前端技术#【你（可能）不知道的 Web API】详见：本篇文章主要选取了几个有趣且有用的 Web API 配合 Demo 分别介绍其用法、用处以及浏览器支持度。（作者：awesome23）简介作为前端er，我们的工作与web是分不开的，随着HTML5的日益壮大，浏览器自带的webapi也随着增多。本篇文章主要选取了几个有趣且有用的webapi进行介绍，分别介绍其用法、用处以及浏览器支持度，同时我也分别为这几个api都做了一个简单的demo（真
前端接受后端文件流并下载的几种方法前言项目中经常会遇到需要导出列表内容，或者下载文件之类的需求。结合各种情况，我总结了前端最常用的三种方法来接受后端传过来的文件流并下载，针对不同的情况可以使用不同的方法。方法一使用场景针对后端的 get 请求具体实现 <a href="后端文件下载接口地址" >下载文件</a>…
前端技术演进（六）：前端项目与技术实践这个来自之前做的培训，删减了一些业务相关的，参考了很多资料（参考资料列表），谢谢前辈们，么么哒 :kissing_heart: 任何五花八门的技术，最终还是要在实践中落地。现代的软件开发，大部分讲求的不是高难度高精尖，而是效率和质量。这里主要来说说现代前端技术在项目中的实践。开发规范开发规范是开发工程…
逼真的HTML5 3D水波动画可多视角浏览 JAVA大本营的秒拍视频这是一款基于HTML5的3D水波动画特效，它的效果非常逼真，水池中的石头在水中沉浮，泛起了一层层水波。同时我们可以拖拽鼠标从不同的视角来浏览水池，3D效果非常不错。另外，我们可以按“G”键来让水池中的石头上下浮动，按“L”键添加灯光效果，设计相当完美。同时说明一下，这款3D水波动画是基于WebGL渲染技术的，大家可以…
CSS实例详解：Flex布局本文将通过三个简单的实例，实际应用上篇文章的基础理论知识，展示下Flex布局是如何解决CSS布局问题。
vue和react的介绍这几年前端框架发展的不错，出了不少框架，像微软自己的knockoutjs,angular,vue和最近比较火的react等，之前我有写过前两者的相关文章，今天主要说一下后两者。介绍是一个用于构建用户界面的 JAVASCRIPT 库。主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。拥有较高的性能，代码逻辑非…
前端埋点统计方案思考埋点即监控用户在应用表现层的行为，于产品迭代而言至关重要。埋点数据分析是产品需求的来源，检验功能是否达预期的佐证。采集埋点数据可做如下分析（以百度统计为例）：将用户属性、用户行为转化各类可视化图表：不同产品对数据的关注角度不同，可按需采集。如信息流产品对停留时长…
用console.log看Vue 本文通过 console.log 的一些特性,结合 vue.js 的源码,通过一个简单的例子,让你了解 Vue 的各个过程的变化. 控制台输出的效果图请用chrome查看,并打开控制台看效果演示地址准备 vue-console.html 的创建下载 vue.js 文件,在 vue-console.html 中引入,我写了一个简单的例子,涵…
vue中引入字体文件在用vue来写一官网的时候，想引入外部字体文件，毕竟总感觉他自己的字体有点难看，在这里记录下 1.先下载字体文件所需的.ttf文件我这里想引入的是华文行楷字体百度后下载了一个3M多的ttf文件 2.将字体文件引入 …
react 前端项目技术选型、开发工具、周边生态react 前端项目技术选型、开发工具、周边生态声明：这不是一篇介绍 React 基础知识的文章，需要熟悉 React 相关知识主架构：react, react-router, redux, redux-thunk, redux-saga, react-redux, dva, umi 扩展…
用 Node.js 快速开发出多功能的多人在线的文章分享平台最近在学习使用 Node.js 框架，边学习边使用，花了大概 3周时间做完这个 Web应用且在 <time>12月16</time> 凌晨左右上线成功（其实就是把开发环境搬到服务器），地址： [链接]
从零实现Vue的组件库（二）-Slider组件实现实现一个Slider组件，方便用户通过拖动滑块在一个固定区间内进行选择，增强交互细节。概述：在用户手动一些限定数字时，如果采用输入框的形式，会需要提示信息和错误信息来引导用户，这就存在一些冗余操作。所以衍生出Slider组件，方便用户拖动来选定一个值。该组件的痛点在于：兼容不同游览器的样…
教你一个vue小技巧，一般人我不说的最近的项目中，需要实现在vue框架中动态渲染带提示框的单选/多选文本框，具体的效果如下图所示，在输入框聚焦时，前端组件通过接收的kv参数渲染出选项，用户点击选项，可以将选择的选项的key拼装到输入框中，同时…
《学会这两件事，让你成为 Git 老司机》“我在提交中犯了个错误，我如何修正它？”，“我的提交历史一团糟，我该如何让它更整洁？”如果你曾经有上述问题，那么这篇文章很适合你！（@BEAST丨Q 译，欢迎加入翻译组：）
用css3实现ps蒙版效果+动画这个动画，其实也并不复杂。它使用background-clip实现了文字蒙版的效果，然后结合了背景图片的animation实现了如上图所示的文字蒙版动画。