title: 透明封装 Vue 组件date: 2019-09-12 15:13:00updated: 2019-09-12 15:13:00tags:Vuecategories:前端在项目中我们通常会有封装一个现有组件的需求，为组件添加一些额外的特性或配置。例如封装 textarea 以提供自动调整大小的功能、封装第三方组件库中的某个组件以提供额外的默认配置等。以 textarea 为例，textarea 有一些常用的属性如 rows、cols、placeholder 等，也有一堆事件如 input、keydown 等。如果直接对其封装的话就意味着要把一堆属性和事件绑定到新的组件上，如下：<templat...

阅读全文 »

今天收到 Github 上一个人发的 issue 提到了 Polyfill 和 Ponyfill 的区别，找到国外的一遍文章，所以就翻译整理了一下。

阅读全文 »

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

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

阅读全文 »

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

阅读全文 »

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

阅读全文 »

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<=...

阅读全文 »

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

阅读全文 »

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

阅读全文 »

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

阅读全文 »

基础独立作用域独立作用域和函数参数transclude与restrictlink函数使用控制器CreatingaUniqueValueDirectiveusing$asyncValidators在上一篇文章中我演示了如何创建一个唯一值校验的指令来确定一个email地址是否已经被使用过。在AngularJS1.3+以上的版本中增加了许多新的特性可以使指令的代码变得更加整洁并且更易于使用。在这篇文章中，我将会更新之前的代码，尝试一下新的特性。下面展示的代码是CustomerManagerStandard中的一部分，你可以在Github上看到完整的代码。下面的截图是运行后的一部分，在截图中，email地址已经被其它用户...

阅读全文 »