20171213 前端开发日报-前端开发博客

css3实现多个元素依次显示；JavaScript 性能优化技巧分享；Parceljs和Webpack在React项目上打包速度对比；分享一个自己开发的 react拖拽排序组件；再也不学AJAX了（三）跨域获取资源 ③ – WebSocket & postMessage；你还要我怎样的JS系列（5）– 函数；一个比 webpack 快10倍的打包工具；HTTP—-HTTP缓存机制

css3实现多个元素依次显示如上图所示，在许多的活动宣传html5中会经常需要用到这样的一个动画效果。特别是快到年底了，也许有同学正在为了公司的活动页面而忙碌，get到这样一个小技能说不定刚好对你有帮助哦。在css3中，我们使用animation与keyframes结合，可以给元素添加
JavaScript 性能优化技巧分享 JavaScript 作为当前最为常见的直译式脚本语言，已经广泛应用于 Web 应用开发中。为了提高Web应用的性能，从 JavaScript 的性能优化方向入手，会是一个很好的选择。本文从加载、上下文、解析、编译、执行和捆绑等多个方面来讲解 Jav
Parceljs和Webpack在React项目上打包速度对比最近这几天前端圈子估计都被Parceljs刷屏了。Parceljs主要特点为：极速构建零配置更多关于Parceljs的内容，请点这里在Parcejs的官方网站上给出了与其它的打包工具的构建速度的对比结果，但是并没有给出测试的项目地址，所以花了点时间在React上做了下面的测试。环境 node版本：v9.2.1 np…
分享一个自己开发的 react拖拽排序组件列表拖拽排序在开发中，是经常遇到的一个需求。现有的拖拽排序轮子已经很多了，作者为什么开发一个呢？做了一个小调查，现有的拖拽存在以下问题：排序库大多功能太全，支持各种场景的拖拽，导致包太大使用复杂，学习成本高跟 react 不搭配，react 基于 s
再也不学AJAX了（三）跨域获取资源 ③ – WebSocket & postMessage让我们先简单回顾一下之前谈到的内容，AJAX是一种无页面刷新的获取服务器资源的混合技术。而基于浏览器的“同源策略”，不同“域”之间不可以发送AJAX请求。但是在某些情境下，我们需要“跨域获取资源”，为了满足这一…
你还要我怎样的JS系列（5）– 函数本章节是对函数的简要说明。需要涉及之前提到的一些知识，如果不熟悉请回过去看看：执行上下文作用域链 VO 函数的类型函数一共有三种类型：
《一个比 webpack 快10倍的打包工具》作为奇舞团的一个小小程序媛，每天都在不断地接受新知识，PostCSS刚学完，PostHTML又出来了。刚研究明白Rollup的配置，又有一个横空出世的打包工具——Parceljs。（by 奇舞团/betseyliu）
HTTP—-HTTP缓存机制前言缓存机制无处不在，有客户端缓存，服务端缓存，代理服务器缓存等。在HTTP中具有缓存功能的是浏览器缓存。HTTP缓存作为web性能优化的重要手段，对于从事web开发的朋友有重要的意义。本文将围绕以下几个方面来整理HTTP缓存：缓存的规则缓存的方案缓存
浅谈前端与网络请求作者：不洗碗工作室 – 张景浩博客地址：http://michaelcode.cn toc: 前端学前端也有一段时间了，想浅谈一下前端与网络请求。谈网络请求，自然绕不开的一个话题便是 JS。作为前端三大基础之一的 JavaScript ，其重要性是不言而喻的。在一位前辈推荐下，机缘巧合遇到了廖雪峰老师的 JavaScript …
一看就懂的JS抽象语法树 babel是现在几乎每个项目中必备的一个东西，但是其工作原理避不开对js的解析在生成的过程，babel有引擎babylon，早期fork了项目acron，了解这个之前我们先来看看这种引擎解析出来是什么东西。不光是babel还有webpack等都是通过javascript parser将代码转化成抽象语法树，这棵树定义了代码本身，通过操作这颗树，可以精准…
交叉观察器(intersectionObserver) Vue实战参考文章：IntersectionObserver API 使用教程 Intersection Observer intersectionObserver解决什么问题？ intersectionObserver解决目标元素与视口产生一个
【20171212 前端开发日报】用 JavaScript 画光：基础；vue-cli 中使用 TypeScript；20171211 前端开发日报；iPhone6的CSS3媒体查询；JS中的柯里化及精巧的自动柯里化实现；前端面试准备指南（英）；玩转 React（七）- 组件之间的数据共享；vue…详情→
vue+webpack+amaze-vue实现省市区联动选择组件如果没有安装 vue-cli 的同学请走传送门在 vue-city-picker 同级目录下执行 vue init webpack vue-city-picker 接下来出现的提示可以参考下图 npm安装 amaze-vue cd vue-city-picker npm npm install amaze-vue –save npm install 开发准备启动webpack-dev-server npm run dev 此…
WebSocket详解（四）：刨根问底HTTP与WebSocket的关系(上篇)
由一道JS异步面试题，思考对异步问题的处理（1）问题图示如下再进一步说明问题按钮A按了之后，ajax请求的数据显示在input type=text框里，B按钮也是。问题就是如果先按A，此时ajax发出去了，但是数据还没返回来, 我们等不及了，马上按B按钮，结果此时A按钮请求的数据先回来，这就尴尬了，按的b按钮，结果先显示A按钮返回的数据，怎么解决？…
#开源项目#【基于 React 的渐进式静态网站生成器：React Static】详见： React Static 是一个基于 React 的渐进式静态网站生成器，旨在构建一个满足 SEO、网站性能、用户与开发人员使用/体验的标准。
【CSS3 calc实现滚动条出现页面不跳动】当页面内容动态加载，开始没有滚动条，内容增多后出现滚动条，这时使用固定宽度居中对齐布局会向左偏移一个滚动条宽度。解决方法可以给内容全部添加overflow-y:scroll;或者是根据内容用css填充…详情→ #前端开发博客#
React + Canvas 像素风格取色器有时候我们需要通过图片去获得具体像素的颜色。而强大的 Canvas 为我们提供了现成的接口。这个功能其实并不难，只不过我们需要正确的理解 Canvas 并学会利用它的 API 。如果你急于看到效果，可以直接访问演示地源码地址我不会详细得写下每一个步骤，但是你可以一边参照源码，一边配合这篇教…
JavaScript应用成本当我们建立更严重依赖于JavaScript的网站时，我们有时会以我们不容易看到的方式来支付我们发送的内容。在这篇文章中，我将介绍为什么一些规则可以帮助您，如果您希望您的网站在移动设备上快速加载和互动。较少的代码=较少的解析/编译+较少的传输+较少的解压缩网络当大多数开发人员考虑JavaScript的成本时，他们…
javascript的内存管理以及3种常见的内存泄漏根据GitHut stats的统计数据显示，javascript语言在Github中的活跃项目仓库数量和总的push数量已经登上了榜首的位置，而且在越来越多的领域里我们都能看见javascript持续活跃的身影和不断前行的脚步尽管我们正在越来越多的编写Javascript代码，但是我们不一定真的了解它。编写本系列专栏的目的就是深入到j…
使用 Rust 编写快速安全的原生 Node.js 模块内容梗概 – 使用 Rust 代替 C++ 开发原生 Node.js 模块！ RisingStack 去年面临一件棘手的事：我们已经尽可能让 Node.js 发挥出最高的性能，然而我们的服务器开销还是达到的最高限度。为了提高我们应用的性能（并且降低成本），我们决定彻底重写它，并将系统迁移到其他的基础设施上 – 毫无疑问，这个工作量很大，这里…
React Ref or Not?React的Ref特性是React声明式编程(Declarative Programming)设计哲学的一个重要补充。之前对它的认识只是停留在非受控组件这种特殊场景，直到最近为了实现项目中的一个特殊功能，才对它有了更深的理解。什么是Re…
nodejs收集日志，rsyslog同步收集入es的实施
Serverless 框架 OpenWhisk 开发指南：使用 Node.js 编写 hello, world 在上一篇文章《 Serverless 框架 OpenWhisk 开发：hello, world 》里，我们介绍了搭建 OpenWhisk 的环境。在这一篇文章里，我们将介绍：如何将上一节搭建的 OpenWhisk 服务作为服务器，并使用自己的 macOS 作为客户端。然后，在这之上运行我们的 Serverless 应用配置 OpenWhisk 客户端获取 CLI 首先，我们…
一步一步分析vue之observe 上一期，本我们讲了 __data 这个vue的属性是怎么一回事，本期，我们将用到vue的(2.5.9)版本，让我们了解一下 observe 让我们看看observe都包含什么成员 observe = { value : "", dep : new Dep, vmCount : 0 } 那么 Dep 又是什么东西呢。 dep = { id : uid++, subs : [] } 好，…
手摸手教你在vue-cli里面使用vuex，以及vuex简介这篇文章是在vue-cli里面使用vuex的一个极简demo，附带一些vuex的简单介绍。有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。本文首发于我的个人blog：obkoro1.com 引入步骤我创建了一个新的vue-cli里面什么东西都没有，只引用了vuex，这里是码云地址,可以下载下来，然后 np…
Stylelint in .vue 个人理解上 stylelint 是一个css代码linter的工具，可以结合nodejs和cli进行使用。继csslinter等linter之后，具有插件化的功能，同postcss的插件，webpack等都可以较好的集成进去。如果说js的代码检测和规范工具在jslint，jshint之后，你肯定听说过eslint。同eslint对js代码校验规则一样，stylelint也有一套类似的处…