标签前端下的文章

Jerry Bendy 发布于 02月23, 2017

Yarn vs npm: 你需要知道的一切

Yarn 是 Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript 包管理工具。就像我们可以从官方文档了解那样,它的目的是解决这些团队使用 npm 面临的少数问题,即:

  • 安装的时候无法保证速度/一致性
  • 安全问题,因为 npm 安装时允许运行代码

阅读全文 »

Jerry Bendy 发布于 11月07, 2016

【译】巧用 CSS 变量实现自动前缀

原文http://lea.verou.me/2016/09/autoprefixing-with-css-variables/最近,当我在制作markapp.io这个小网站的时候,我想出一个巧妙的技巧用在CSS变量上,我们可以天然地使用它们的动态本质。让我们看一下当你想使用一个属性,但是这个属性有不同的版本,一个无前缀的标准版和一个或多个有前缀的版本的情形。在这里我举一个例子,比如我们使用clip-path,目前需要同时使用无前缀的版本和一个-webkit-前缀的版本,我的这个方法可以适用于这种情况,不管这个CSS属性是什么,有多少种前缀,只要它不论什么前缀的值都是同样的就可以。第一步是在所有元素上定义一个--c...

阅读全文 »

Jerry Bendy 发布于 09月07, 2016

【分享】手机淘宝的flexible设计与实现

看到小黑的文章关于webapp中的文字单位的一些捣腾感觉很赞。尤其是,他提到了手机淘宝的meta,所以觉得要讲讲我们这方面的一些实践。手机淘宝从2014年中开始,全面推行flexible设计。什么叫flexible呢?其实flexible就是responsive的低端形态和基础。对我们来说,最直观的感受就是,在超宽屏幕上,网页显示不会两边留白。以前pc时代大家经常讲的流体布局,其实就是一种flexibledesign。只不过,流体的表述角度是实现,flexible的表述角度是结果,为了跟高大上的responsive保持一致,我们这里使用了flexible这个说法。讨论方案之前,需要先了解三个关键概念:单位英寸像素...

阅读全文 »

Jerry Bendy 发布于 08月30, 2016

【译】十个可以使用 ES6 代替的 Lodash 特性

Lodash应该算是目前在npm上被依赖的最多的包了吧,但是如果你使用ES6,也许你不再需要它。在这篇文章中,我们将尝试使用一些ES6的新特性来解决几种常见的问题。1.Map,Filter,Reduce这些方法使转换数据变得轻而易举,而且非常通用。我们可以使用ES6的箭头函数语法,帮助我们用更简短的方式代替Lodash的语法。_.map([1,2,3],function(n){returnn*3;});//[3,6,9]_.reduce([1,2,3],function(total,n){returntotal+n;},0);//6_.filter([1,2,3],function(n){returnn<=...

阅读全文 »

Jerry Bendy 发布于 08月30, 2016

【译】React on ES6+

本文由冰翼博客翻译自babelJs.io原文作者:StevenLuscher(Github)在重新设计InstagramWeb的最近一年里,我们享受到很多使用ES6+新特性写React组件的好处。下面我整理了一些可以方便写React应用语言特性,相信这会使工作变得更轻松愉快。类迄今为止我想在写组件时最能直观看到的变化就是ES6+类的使用。关于ES6的类定义语言可参考这里。现在,我们可以写一个继承自React.Component的类来取代React.createClass的写法。classPhotoextendsReact.Component{render(){return<imgalt={this.prop...

阅读全文 »

Jerry Bendy 发布于 08月29, 2016

6 种方法在 React 中绑定 javascript 的 this 关键字(ES6/ES7)

Javascript中的this关键字对很多JS开发者来说都是令人疑惑、头痛东西,很多时候往往搞不清楚某个this究竟指的是谁,尤其是在多层回调嵌套的情况下,OHGOD!!It’strivialforsomeothercodetorebindthecontextofthefunctionyou’reworkingwith―usingthenewkeywordandsomeofthemethodsthatarebuiltontoFuncton.prototype.Thisintroducesanentireclassofconfusingscenariosandoftenyou’llseecallbackdrive...

阅读全文 »

Jerry Bendy 发布于 07月30, 2016

【分享】ES6 你可能不知道的事 - 基础篇

序ES6,或许应该叫ES2015(2015年6月正式发布),对于大多数前端同学都不陌生。首先这篇文章不是工具书,不会去过多谈概念,而是想聊聊关于每个特性你可能不知道的事,希望能为各位同学正确使用ES6,提供一些指导。对于ES6,有些同学已经在项目中有过深入使用了,有些则刚刚开始认识他,但不论你是属于哪一类,相信这篇文章都有适合你的部分。针对文章中的问题或不同意见,欢迎随时拍砖、指正。正文Let+Const这个大概是开始了解ES6后,我们第一个感觉自己完全明白并兴致勃勃的开始使用的特性。以如下方式使用的同学请举下手?//定义常量constREG_GET_INPUT=/^\d{1,3}$/;//定义配置项letcon...

阅读全文 »