20171213 前端开发日报

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

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

关注github前端日报 订阅精彩文章

前端日报栏目数据来自码农头条,每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等,为开发者提供动力,如果觉得内容对你有用,记得分享给你的小伙伴。进入码农头条查看更多

原创文章:20171213 前端开发日报 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/fe-daily-20171213.html)