在Webpack中使用Code Splitting实现按需加载
In 未分类 on 2016年02月24日 by view: 21,779
13

随着移动设备的升级、网络速度的提高,用户对于web应用的要求越来越高,web应用要提供的功能越来越。功能的增加导致的最直观的后果就是资源文件越来越大。为了维护越来越庞大的客户端代码,提出了模块化的概念来组织代码。webpack作为一种模块化打包工具,随着react的流行也越来越流行。

webpack在官方文档上解释为什么又做一个模块打包工具的时候,是这样说的:

The most pressing reason for developing another module bundler was Code Splitting and that static assets should fit seamlessly together through modularization.

开发一个新的模块打包工具最重要的原因就是Code Splitting,并且还要保证静态资源也可以无缝集成到模块化中。其中Code Splitting是webpack提供的一个重要功能,通过这个功能可以实现按需加载,减少首次加载时间。

TAT.ronnie 【转向Javascript系列】深入理解Generators
In 未分类 on 2016年02月18日 by view: 5,207
1

随着Javascript语言的发展,ES6规范为我们带来了许多新的内容,其中生成器Generators是一项重要的特性。利用这一特性,我们可以简化迭代器的创建,更加令人兴奋的,是Generators允许我们在函数执行过程中暂停、并在将来某一时刻恢复执行。这一特性改变了以往函数必须执行完成才返回的特点,将这一特性应用到异步代码编写中,可以有效的简化异步方法的写法,同时避免陷入回调地狱。

本文将对Generators进行简单介绍,然后结合笔者在C#上的一点经验,重点探讨Generators运行机制及在ES5的实现原理。

TAT.iAzrael 使用CSS mask 实现图片的斜线拼接
In 未分类 on 2016年02月04日 by view: 8,948
21

每次必说题外话

话说貌似好久没有写技术文章了,自从娃娃出来后,很少能有时间做技术研究,思考的时间也不足。不过有得必有失,世上事也就酱紫了。但是作为一个前端攻城师,不写代码,不研究技术,是会被后浪拍死在沙滩上的。

碰巧前段时间碰到个CSS问题,一直很喜欢CSS的,能CSS解决的问题绝对不用JS,于是就抽时间整整看。

什么是斜线拼接

回到本文主题上,”斜线拼接“是我自创的词语,因为我也不知道怎么描述这个需求,o(╯□╰)o,实际的效果是下面所示:

example

眼力好的筒子应该就能发现,上面这张图是两个帅锅拼接在一起的,看中间的斜线。

但是呢,刚接到这个需求的时候,开发是抓狂的——第一反应就是用canvas画图,这得多累啊,只是要显示张图片而已,竟然还要动用一坨JS,O__O "…

不过依稀记得,CSS 貌似有个遮罩的特性,可以实现图片的部分显示的效果的。

TAT.mandyluo gulp进阶-自定义gulp插件
In 未分类 on 2016年01月24日 by view: 4,465
10

gulp已经成为很多项目的标配了,gulp的插件生态也十分繁荣,截至2015.1.5,npm上已经有10190款gulp插件供我们使用。我们完全可以傻瓜式地搭起一套构建。

然而,我们经常会遇到一种情况,我们好不容易按照文档传入对应的参数调用了插件,却发现结果不如预期,这时候我们就要一点点去排错,这就要求我们对gulp插件的工作原理有一定的了解。本文以实现一个gulp插件为例,讲解一下gulp插件是如何工作的。

TAT.Johnny React.js 2016 最佳实践
In 未分类 on 2016年01月23日 by view: 21,666
14

原文:https://blog.risingstack.com/react-js-best-practices-for-2016/

作者:Péter Márton

译者按:近几个月React相关话题依旧火热,相信越来越多的开发者在尝试这样一项技术,我们团队也在PC和移动端不断总结经验。2016来了,这应该是React走向成熟的一年,不管你是新手,还是已经对React有所了解,是时候总结一下最佳实践了,让我们看看国外的开发者总结了哪些好的实践吧~wink

========================译文分割线===========================

2015可以算是React之年了,关于其版本发布和开发者大会的话题遍布全球。关于去年React的发展里程碑详情,可以查看我们整理的React 2015这一年

2016年最有趣的问题可能是,我们该如何编写一个应用呢,有什么推荐的库或框架?

作为一个长时间使用React.js的开发者,我已经有自己的答案和最佳实践了,但你可能不会同意我说的所有点。我对你的想法和意见很感兴趣,请留言进行讨论。

React.js logo - Best Practices for 2016

如果你只是刚开始接触React.js,请阅读React.js教程,或Pete Hunt的React howto

ReactNative Animated动画详解
In 未分类 on 2016年01月21日 by view: 24,308
6

 

 

最近ReactNative(以下简称RN)在前端的热度越来越高,不少同学开始在业务中尝试使用RN,这里着重介绍一下RN中动画的使用与实现原理。

TAT.李强 React动画实践
In 未分类 on 2016年01月21日 by view: 16,752
15

一、 动画重要性

        世界上最难的学问就是研究人。在你的动画不会过于耗费资源,以至拖慢用户的设备的前提下,动画可以显著改善用户界面体验。

        可以简单的把页面动画分为以下几个类型:

        1、页面元素动画:比如轮播图等,由用户操作催化;

        2、loading动画:减少用户视觉等待时间;

        3、装饰动画:尽量避免,会分散用户注意力,值得也不值得;

        4、广告动画:增加广告的转化率;

        5、情节动画:多用于SPA;

       以loading动画为例说明动画的重要性:为了提升用户体验、增加用户粘性,大家从开发的角度看首先想到的会是从前到后的性能优化,从而减少用户打开页面时的等待时间,你或许考虑到了要增加带宽、减少页面的http请求、使用数据缓存、优化数据库、使用负载均衡等,但是由于业务限制和用户复杂的体验环境,总会遇到一些瓶颈。这时候,我们需要做的就是如何减少用户的视觉等待时间,哪怕是给一朵转动的菊花,但千万不要不理她,让人盲目的等待就是你业务流失的方式。不客气的说,有时候一朵性感菊花的作用并不亚于你去优化数据库。

TAT.heyli webpack使用优化
In 未分类 on 2016年01月14日 by view: 27,047
21

原文链接

 

前言

本文不是webpack入门文章,如果对webpack还不了解,请前往题叶的Webpack入门,或者阮老师的Webpack-Demos

 

为什么要使用Webpack

  1. 与react一类模块化开发的框架搭配着用比较好。
  2. 属于配置型的构建工具,比较用容易上手,160行代码可大致实现gulp400行才能实现的功能。
  3. webpack使用内存来对构建内容进行缓存,构建过程中会比较快。

第3点我想稍微论述一下,如果看过我之前写的《如何写一个webpack插件(一)》,会发现,webpack会将文件内容存在compilation这个大的object里面,方便各种插件,loader间的调用。虽然gulp也用到了流(pipe)这样的内存处理方式,但感觉webpack更进一步。gulp是每一个任务(task)用一个流,而webpack是共享一个流。

 

TAT.rocket ReactJS组件间沟通的一些方法
In 未分类 on 2016年01月13日 by view: 23,151
5

刚入门React可能会因为React的单向数据流的特性而遇到组件间沟通的麻烦,这篇文章主要就说一说如何解决组件间沟通的问题。


 

1.组件间的关系

1.1 父子组件

ReactJS中数据的流动是单向的,父组件的数据可以通过设置子组件的props传递数据给子组件。如果想让子组件改变父组件的数据,可以在父组件中传一个callback(回调函数)给子组件,子组件内调用这个callback即可改变父组件的数据。

TAT.finlay 经常在各种框架之间切换使用是种什么体验?
In 未分类 on 2016年01月13日 by view: 2,767
2

前言:

 

在一个喜欢尝鲜的团队里面工作,总会碰到这种情况.前一个项目用的这个框架这种构建,下一个项目就变成新的框架那种构建,上来就blablabla先学一通,刚觉得安心,接到个另外需求,到手一看.又变了一套 T,T , 又要重复上述步骤..如果能在各种框架和开发思路里面游刃有余,当然是最好的,可是多少总会对开发同学产生一些影响,那么各个框架之间的差异到底有多大呢?切换来去又会影响到哪些开发体验呢?且看我边做示例边分解…