一切福田,不離方寸,從心而覓,感無不通。

Category Archives: Frontend

深入浅出React(五):使用Flux搭建React应用程序架构

前面几篇文章介绍了React相关的基本概念和运行原理,可以看到React是一个完全面向View的解决方案,它让我们能以一种新的思路去实现View,让很多复杂的场景可以用一种简单的方法去解决。然而在一个完整的应用程序中,除了实现View之外,我们还需要考虑如何同服务器通信、View之间如何交互以及View背后的数据模型如何去设计。那么Flux正是Facebook提出的解决这些问题的方案。 简单来说,Flux定义了一种单向数据流的方式,来实现View和Model之间的数据流动。它更像是一种设计模式而非一个正式的框架,以至于官方的Flux参考实现只有一个文件,区区100多行源代码。所以Flux继承了React的简单、直观的设计思想,让人一眼就能看明白其背后的运行原理。当然,要用好Flux,还是要正确理解其概念和背后的出发点,官方则是提供了两个具体的例子供大家参考。 Flux的标准实现非常简单,因此还衍生出了很多第三方实现,比较著名的包括Redux,Reflux,Fluxmm。而如今最为火热的应该属于Redux,它采用了函数式编程的思想来维护整个应用程序的状态。其实无论哪一种框架,都是以Flux的架构为基础而做的演变,其核心都是单向数据流和单向数据绑定。因而本文只会介绍官方的Flux,理解了标准实现之后也会更容易理解其他的实现方式。大家可以按照自己的兴趣和认可程度选择最适合自己的实现。 Flux 要解决的问题 在传统MVC框架中,通常使用双向绑定的方式来将Model的数据展现到View。当Model中的数据发生变化时,一个或多个View会发生变化;当View接受了用户输入时,Model中的数据则会发生变化。在实际的应用中,当一个Model中的数据发生变化时,也有可能另一个相关的Model中的数据会被同步更新。这样,很容易出现的一个现象就是连锁更新(Cascading Update),Model可以更新Model,Model可以更新View,View也可以更新Model。你很难去推断一个界面的变化究竟是由哪个局部的功能代码引起。如下图所示, Model 和 View 之间的关系错综复杂,导致出现问题时很难调试;实现新功能时也需要时刻注意代码是否会产生副作用。 对此问题,Flux的解决方案是让数据流变成单向,引入Store、Action、Action Creators和Dispatcher等概念来管理信息流。如下图所示: 可以看到,数据流变成单向的。同时,数据如何被处理也被明确的定义了。在MVC中,数据如何处理通常由Controller来完成,在Controller中实现大部分的业务逻辑来处理数据。而现在则被清晰的定义在Store或者Action Creators中。当然,上图隐藏了一些细节,更为全面的架构图则如下所示: 在Flux中,View完全是Store的展现形式,Store的更新则完全由Action触发。得益于React的View每次更新都是整体刷新的思路,我们可以完全不必关心Store的变化细节,只需要监听Store的onChange事件,每次变化都触发View的re-render。从而也可以看到,尽管Flux架构可以离开React单独使用,但无疑两者结合是一个更加和谐的方案,能够各发挥所长。 看一个具体的例子 为了对Flux有一个总体的印象,我们先考虑一个简单的使用场景:在文章评论页面提交一条评论。为此,我们需要向服务器发送一个请求提交新的评论,同时要将新的评论显示在列表中。这样的场景如果使用Flux去实现,大概需要实现以下几个部分: React组件用于显示评论列表以及评论框,并绑定到Store; 一个Store用于存储评论数据; Action Creator用于向服务器发送请求; Store中监听Action并进行处理,从而对Store自身进行更新。 整个架构如下图所示: (点击放大图像) 整个流程的运行大概如下: 用户点击提交按钮,Action Creator负责向服务器发送请求; 请求如果成功,那么将评论本身被添加到Store; 请求如果失败,那么在Store中标记一个特别的错误状态; View监听了Store的onChange的事件,因此,无论请求成功和失败,Store都会触发onChange事件,这时View就会进行整体更新。 可以看到,无论请求成功和失败,都是去修改组件之外的Store,由Store通知UI进行变化。在这样一个架构中,Store中存储的是整个或者一部分应用程序的状态,React实现的View只需要监听Store的变化,而无需知道变化的细节,这也是由React组件的特点决定的。这样,我们就使用Flux完成了评论功能,不同于双向绑定,在Flux的流程中,数据如何流转和变化,变得非常清晰明确。虽然可能需要写更多的代码,但是带来了更清楚的架构。下面,我们来具体看其中的每个具体组件的概念和用法。 View和Store 在Flux架构中,View即React的组件,而Store则存储的是应用程序的状态。在前面的文章中我们已经介绍过,React是完全面向View的解决方案,它提供了一种始终都是整体刷新的思路来构建界面。在React的思路中,UI就是一个状态机,每个确定的状态对应着一个确定的界面。对于一个小的组件,它的状态可能是在其内部进行维护;而对于多个组件组成的应用程序,如果某些状态需要在组件之间进行共享,则可以将这部分状态放到Store中进行维护。在Flux中,Store并不是一个复杂的机制,甚至Flux的官方实现中并没有任何Store相关的机制和接口,而是仅仅通过示例来描述了一个Store应该是什么样的数据结构。例如,在官方提供的TodoMVC例子( https://github.com/facebook/flux/tree/master/examples/flux-todomvc/ )中,Store的实现如下:

可以看到,一个Flux的Store就是一个能触发onChange事件的对象,能够让其它对象订阅(addChangeListener)或者取消订阅(removeChangeListener)。同时,它提供了一些API供View来获取自己需要的状态。因此,也可以将Store理解为需要被不同View共享的公用状态。 那么,已经有了Store,React的组件(View)该如何使用它们呢?其实很简单,只需要在Store每次变化时都去获取一下最新的数据即可。我们可以看下TodoMVC中的实现:

可以看到,在组件的componentDidMount方法中,开始监听Store的onChange事件,在componentWillUnmount方法中,取消监听onChange事件。在Store的每次变化后,都去重新获取自己需要的状态数据:getTodoState()。 通过这样一种很简单的机制,我们建立了从Store到View的数据绑定,每当Store发生变化,View也会进行相应的更新。那么底下我们需要关心当View接收用户交互,需要将新的状态存入到Store中,应该如何去实现。这就需要引入Flux的另外两个概念Dispatcher和Action。 Dispatcher,Action 顾名思义,Dispatcher就是负责分发不同的Action。在一个Flux应用中,只有一个中心的Dispatcher,所有的Action都通过它来分发。而Facebook的官方Flux实现其实就仅仅是提供了Dispatcher。使用Dispatcher只需要将其作为npm模块引入:

典型的,Dispatcher有两个方法: dispatch:分发一个Action; register:注册一个Action处理函数。 这样,当View接受了一个用户的输入之后,通过Dispatcher来分发一个特定的Action,而对应的Action处理函数会负责去更新Store。这个流程在文章开始的图中可以清楚的看到。因此,通常来说Action的处理函数会和Store放在一起,因为Store的更新都是由Action处理函数来完成的。例如在TodoMVC中,TodoStore中会处理如下Action:

无论是添加、删除还是修改一个Todo项,都是由Action来触发的。在Action处理函数中,不仅对Store进行了更新,还触发了Store的onChange事件,从而让所有监听组件能够得到通知。完整的代码可以参考:https://github.com/facebook/flux/blob/master/examples/flux-todomvc/js/stores/TodoStore.js 。 通过Dispatcher和Action,实现了从View到Store的数据流,进而实现了整个Flux的单向数据流循环。从这里可以看到,Dispatcher是全局唯一的,相当于是所有Action的总hub,而每个Action处理函数都能够收到所有的Action,至于需要对哪些进行处理,则由处理函数自己决定。例子中是通过switch来判断Action的type属性来决定如何进行处理。因此,虽然不是必须,但是一般Action都会有一个type属性来标识其类型。 Action Creators 有了上述概念和机制,基本上就已经有了Flux的整个架构的模型。那么Action Creators又是什么呢?顾名思义,Action Creators即Action的创建者。它们负责去创建具体的Action。一个Action可以由一个界面操作产生,也可以由一个Ajax请求的返回结果产生。为了让这部分逻辑更加清晰,让View更少的去关心数据流的细节,于是有了Action Creators。例如,对于一个TodoItem组件,当用户点击其中的Checkbox时,会产生一个COMPLETE_TODO的Action,直观的看,完全可以在View的内部去实现Dispatcher.dispatch({type: ‘COMPLETE_TODO’, payload: {…}),而为了保持View的简单和直观,通常会在独立的Action Creators去封装这部分逻辑,例如:

这里的TodoActions就是一个Action Creator,它把具体分发Action的动作封装成具有语义的方法,供View去使用,那么在一个TodoItem的组件中,其界面JSX可能就是:

通过将Action的创建逻辑放到Action Creators,可以让View更加简单和纯粹,View不需要知道背后是否有Flux,而只需要知道调用某个方法来实现某个功能,从而让View的开发更加流畅和直观 。完整代码可以参考:https://github.com/facebook/flux/blob/master/examples/flux-todomvc/js/components/TodoItem.react.js 。 小结 本文介绍了Facebook提出的面向React的一种新的应用架构模式Flux,这种架构也已经在Facebook内部被广泛使用,其概念和原理虽然很简单直观,但是确实被证明有能力去组织一个完整的大型应用。然而Flux的中心Dispatcher的模式,以及Action作为全局可知的数据流的方式,仍然有一些争论。因此,社区中也是出现了非常多的类Flux实现,如今最成熟的莫过于Redux,其最大的特点在于Action能够分层次的去负责一个全局Store的不同部分,从而更容易去模块化应用状态的管理。理解了本文介绍的Flux概念,对于理解Redux也会有很大的帮助。   from:http://www.infoq.com/cn/articles/react-flux

龙生   29 Jul 2017
View Details

js中的时间与毫秒数互相转换

【1】js毫秒时间转换成日期时间 var oldTime = (new Date("2012/12/25 20:11:11")).getTime(); //得到毫秒数   //不是上面格式的时间需要转换    //starttime =’2012-12-25 20:17:24′;     starttime = starttime.replace(new RegExp("-","gm"),"/");     var starttimeHaoMiao = (new Date(starttime)).getTime(); //得到毫秒数 【2】毫秒数转化为时间 var oldTime = (new Date("2012/12/25 20:11:11")).getTime(); //得到毫秒数   var newTime = new Date(oldTime); //就得到普通的时间了  参考:http://blog.csdn.net/qq435792305/article/details/7973751

龙生   02 Jul 2017
View Details

JavaScript Date 对象

Date 对象 Date 对象用于处理日期和时间。 创建 Date 对象的语法:

注释:Date 对象会自动把当前日期和时间保存为其初始值。 Date 对象属性 属性 描述 constructor 返回对创建此对象的 Date 函数的引用。 prototype 使您有能力向对象添加属性和方法。 Date 对象方法 方法 描述 Date() 返回当日的日期和时间。 getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。 getMonth() 从 Date 对象返回月份 (0 ~ 11)。 getFullYear() 从 Date 对象以四位数字返回年份。 getYear() 请使用 getFullYear() 方法代替。 getHours() 返回 Date 对象的小时 (0 ~ 23)。 getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。 getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。 getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。 getTime() 返回 1970 年 1 月 […]

龙生   02 Jul 2017
View Details

10 Best ReactJS UI Frameworks for rapid prototyping

I was researching for a few feature rich UI frameworks based on React; that give the power of composability through React components that you can directly plug in into your React project Here is a compilation of a few ReactJS based UI frameworks (in no particular order), that I came across. Hope one of these choices will help you rapidly prototype your "ReactJS" ideas. Material UI Material-UI is a set of React components that implement Google’s Material Design . Out of the hundreds of UI frameworks out there, […]

龙生   18 May 2017
View Details

JS中URL编码参数(UrlEncode)

网上有很多文字作品写涉及在JS中呈现类似UrlEncode功能时都是自定义参数来呈现,其实JS中本身就有那样的参数。 参数parameter由于用类似URL的形式传过去 , 所以别直接就那样赋值 以下是对变量值的URL编码总结 : 意见用encodeURIComponent() , GET 和POST方法都能够发送过去 Java编程script中存在几种对URL字符串停止编码的窍门:escape(),encodeURI(),以及encodeURIComponent()。这几种编码所起的功能各不相同。 escape() 窍门: 采用ISO Latin字符集对指定的字符串停止编码。所有的空格符、标点符号、特殊字符以及更多有联系非ASCII字符都将被转化成%xx各式的字符编码(xx等于该字符在字符集表里面的编码的16进制数字)。比如,空格符对应的编码是%20。 不会被此窍门编码的字符: @ * / + encodeURI() 窍门: 把URI字符串采用UTF-8编码各式转化成escape各式的字符串。 不会被此窍门编码的字符:! @ # $& * ( ) = : / ; ? + ' encodeURIComponent() 窍门: 把URI字符串采用UTF-8编码各式转化成escape各式的字符串。与encodeURI()相比,那个窍门将对更多的字符停止编码,比如 / 等字符。所以假如字符串里面包含了URI的几个部份的话,别用那个窍门来停止编码,否则 / 字符被编码之后URL将呈现错误。 不会被此窍门编码的字符:! * ( ) ' 因此,对于汉文字符串来说,假如不期望把字符串编码各式转化成UTF-8各式的(比如原页面和目的页面的charset是一致的时候),只需求应用 escape。假如你的页面是GB2312或者更多有联系的编码,而接受参数parameter的页面是UTF-8编码的,就要采用encodeURI或者encodeURIComponent。 from:http://www.cnblogs.com/xiaofei59/archive/2011/09/13/2174498.html

龙生   08 Oct 2016
View Details

Chrome桌面提醒功能,兼容新老版本,firefox最新版本也通过

from:http://www.cnblogs.com/foolin/p/3822294.html

龙生   24 Aug 2016
View Details

PhoneGap Developer App Android

由于谷歌商店国内访问不了,即使访问得了,国内许多安卓机也没有google play的框架,还是安装不了google商店的应用。想用安卓机开发啊,找度娘,终于在csdn的下载上,找到了个可用的~ Apk下载   csdn:http://download.csdn.net/download/yyh352091626/9176197

龙生   05 Aug 2016
View Details

手机横屏和竖屏的代码(css3/javascript)

 

龙生   01 Aug 2016
View Details

穿透的 div ( pointer-events )

pointer-events 是一個滿有趣的 CSS3 屬性,雖然主要是針對 SVG ,但其中幾個屬性應用在 div 上也是頗有意思。顧名思義,這是一個針對滑鼠事件的屬性,預設值為 auto,若值為 none,則可以穿越該元素,點擊到下方的元素。除了 auto 和 none,這是完整的屬性列表:pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit,除了 auto 與 none,其他都是控制 SVG 的屬性,若採用預設值,則 SVG 就是以 visiblePainted 來表現。 首先看到 pointer-events: auto,就是我們一般常見的,一個 div 被另外一個 div 遮住,就無法進行點擊或 hover 的動作,如下圖: HTML:

CSS:

這時候如果我們把 ybox 增加 pointer-events: none;,就會發現底下的 gbox 可以 hover 了! 至於其他的屬性,在這邊稍微做一些介紹,根據 這篇的解釋,可以知道其他屬性是這樣解釋: visiblePainted: 只適用於 SVG。元素只有在以下情況才會成為鼠標事件的目標:visibility 屬性值為 visible,且鼠標指針在元素內部,且 fill 屬性指定了 none 之外的值、visibility 屬性值為 visible,鼠標指針在元素邊界上,且 stroke 屬性指定了none 之外的值。 visibleFill: 只適用於 SVG。只有在元素 visibility 屬性值為 visible,且鼠標指針在元素內部時,元素才會成為鼠標事件的目標,fill屬性的值不影響事件處理。 visibleStroke: […]

龙生   29 Jul 2016
View Details

html5调用手机相机并压缩、上传

近日刚做的一个功能,要在app里使用内嵌页面进行图像的上传。 从功能上看,原生的实现应该是最好的。毕竟页面上所有的东西都隔着一个浏览器,所有的实现都要依赖浏览器提供的接口,不同的浏览器对接口的实现又有差异……到最后又会陷入兼容性的大坑! 吐槽归吐槽,但是折腾的劲头不能丢! 使用input file[camera]属性调用相机 简直So easy!

只需要这么一条简单的代码,在手机浏览器点击就可以打开相机了。 capture是什么?其实就是对打开方式的设置。

魅族MX5测试结果: 谷歌浏览器可以打开相机和摄像功能,其他方式均为相机、图库、文件管理器等混合选择项。 自带浏览器打开均为文件管理器。 由此说明此属性兼容性还是个问题。不过这并不能阻止我继续折腾下去! 图片压缩 在如今这个手机普遍千万像素的时代,一张照片动辄5M的大小。作为一个良心的开发者,我们是要为用户的流量负责的。 该怎么做?我也不知道。大家都在用canvas实现,我也就用了。

不管文件域是用何种方式打开的,都可以在 change 事件中获取到选择的文件或拍摄的照片。 创建一个FileReader对象,我们需要调用readAsDataURL把文件转换为base64图像编码,如data:image/jpeg;base64……这种格式。 onload是一个异步回调,当文件读取完执行该方法内代码。this.result记录读取结果,如果读取失败,该值为null。在这里进行图片压缩的具体操作。

创建一个Image对象,给src属性赋值为读取结果,同样在onload异步回调中编写处理图片的代码。 这里就要开始使用canvas进行图片压缩了。 首先是尺寸按比例缩放,然后把图片绘到画布上,最后调用toDataURL方法压缩图像质量。

代码里省略了一些校监操作,如文件类型约束和文件大小判断(小于一定值可以不压缩)。 最后就是把数据发送到后端的操作,这里就不说了。 Html5调用摄像头 通过以上的代码已经可以实现调用手机相机拍照、压缩、上传这一整套流程了。 不过在折腾的过程中也发现了一种调用摄像头的方法。注意,是摄像头!使用input调用的是相机。其中的差别就是摄像头是只捕获画面,相机还包括原生的一些拍照、设置等控件。 通过对摄像头的调用可以做很多有趣的事,比如拍照美化、滤镜等。可以说实现一个第三方相机是没问题的。 之前下载过一款安卓相机APP,不到100K的大小,可以实现拍照的一些风格化,也许就是Html5实现的呢。 需要用到的是 getUserMedia API,具体的实现这里就不贴了。 from:http://www.imys.net/20150916/webapp-input-use-camera.html

龙生   29 Jul 2016
View Details
1 29 30 31 58