haoran
haoran
对全局css添加-webkit-user-select:none，禁用拷贝功能，增强native app体验。
 React-Native是一款由Facebook开发并开源的框架，主要卖点是使用JavaScript编写原生的移动应用。从2015年3月份开源到现在，已经差不多有半年。目前，React-Native正在以几乎每周一个版本的速度进行快速迭代，开源社区非常活跃。2015年9月15日，React-Native正式宣布支持安卓，并在项目主页中更新了相关文档，这意味着React-Native已经完全覆盖了目前主流的iOS和Android系统，做到了“learn once，write everywhere”。React-Native能否颠覆传统的APP开发方式，现在下结论还为时尚早，但从微博和Twitter对React-Native相关消息的转发数量和评论来看，React-Native在未来的一段时间内都将是移动开发的热点。 从我自己的实际使用经历出发，在使用React-Native写了几个Demo之后，我觉得React-Native是一个非常有前途的框架。虽然目前文档并不能做到面面俱到，实际使用过程中坑也略多，但是填坑的速度也非常快。在项目的issues中提一个issue，基本都能在几个小时之内获得解答或者解决方案。因此，我决定比较系统的学习一下React-Native。 在移动应用开发中，手势是不可忽视的一个重要组成部分，React-Native针对应用中的手势处理，提供了gesture responder system，从最基本的点击手势，到复杂的滑动，都有现成的解决方案。 和以往的Hybrid应用相比，使用React-Native开发的原生应用的一大优势就是可以流畅的响应用户的手势操作，这也是使用React-Native相比以往在原生应用中插入webview控件的一个优势，因此，相比web端的手势，React-Native应用中的手势要复杂得多。我在初次接触React-Native手势之初也是看的一头雾水，经过搜索也发现相关的资料比较少，因此萌发了写一篇相关文章的想法。这也是写作本文的初衷，一方面总结自己学习和摸索的经验，以作为后来使用中的备忘录，另一方面也作为交流分享之用。 # Touch*手势 移动应用中最简单的手势，就是touch手势，而这也是应用中最常使用的手势，类比web开发中的事件，就好比web开发中的click。在web开发中，浏览器内部实现了click事件，我们可以通过`onclick`或者`addEventListener('click',callback)`来绑定`click`事件。React-Native也针对Touch手势进行了类似的实现，在React-Native中，一共有四个和Touch相关的组件： - TouchableHighlight - TouchableNativeFeedback - TouchableOpacity - TouchableWithoutFeedback 使用这四个组件，我们就可以在应用的某个部分绑定上Touch事件，来个简单的例子： ``` javascript /** * Sample React Native App *...
**主题：介绍MessageChannel API及其用法** **预计阅读时间：2min** 看某个JS库源码的时候发现了MessageChannel，这是什么鬼？ > MessageChannel接口是信道通信API的一个接口，它允许我们创建一个新的信道并通过信道的两个MessagePort属性来传递数据 简单来说，MessageChannel创建了一个通信的管道，这个管道有两个口子，每个口子都可以通过postMessage发送数据，而一个口子只要绑定了onmessage回调方法，就可以接收从另一个口子传过来的数据。 一个简单的例子： ``` javascript var ch = new MessageChannel(); var p1 = ch.port1; var p2 = ch.port2; p1.onmessage = function(e){console.log("port1 receive " + e.data)}...
# tl;dr 2015年，随着react框架在前端开发领域的持续火热，单数据流向也开始逐渐被前端开发人员所认识和使用。单向数据流向指的是在整体web应用中，数据都是单向流动的。回想一下我们的校园时光，每当你没有生活费的时候，你会打电话找妈要钱，然后家里人去银行给你汇款，然后你去银行把钱取出来。在这个过程中，钱的流向是单向的：你 => 你妈 => 银行 => 你。这样的流程可以确保你不会去银行随意取钱挥霍，而且流程非常清晰。 同样的道理，web应用中数据的单向流动也是很有意义的。回想一下以前我们曾经干过的事情，我们是不是经常把状态存在视图中。比如下面的代码： ``` javascript $(".button").click(function(){ if(this.hasClass("highlight")){ this.removeClass("highlight"); }else{ this.addClass("highlight"); } }) ``` 除了把状态放在class里面，dom的dataset也是我们经常存放应用状态的地方。这样把状态和视图的耦合，对于编写读可维护的代码非常不利，尤其是在我们编写大型应用的时候。 Facebook的工程师提出了flux数据架构，它是数据单向流动的一种实现方式，目前实现的库也很多，比如reflux和Fluxxor。redux库灵感来源于flux，但和flux又有以下几点不同： 1. redux不存在一个中心dispatcher 2. redux中只有唯一一个store redux代码简单轻巧，而且还有一个非常重要的特性：中间件。 # redux中间件实战 本文假设你已经对redux有一些了解，如果你是一个redux新手，请先看[redux中文文档](http://cn.redux.js.org/index.html)。...
# Rill ## 安装 Rill支持所有最新版本的[nodejs](https://nodejs.org/)，以及所有现代浏览器，包括ie10。 你可以使用你喜欢的版本管理器安装一个支持的 node/iojs版本。 ``` javascript $ nvm install stable $ npm i rill $ node my-rill-app.js ``` ## Application 一个Rill应用是一个包含一个中间件数组的对象，这些中间件能够在请求到来时以一种类栈的方式组合并执行。Rill和其他的nodejs框架例如Express，Hapi以及Koa类似，但是它们之间的一个重要区别是：Rill的代码能在浏览器里面运行。 Rill本身包含许多重要的用于构建现代web应用的功能。包括：路由、重定向、cookie等等。一个典型的全局渲染方案是可以使用 [@rill/react](https://github.com/rill-js/react) 来让单页react应用能够无缝的在server端和浏览器端同时运行。 ``` javascript //...
先来一只可爱的小鲸鱼镇楼。  docker容器技术目前已经被程序员所广泛使用了，但是作为一个前端切图仔，docker还只是一个“最熟悉”的陌生人，一直闻其名却不知其底细。虽然我知道可能已经有人微笑着骂了我一句：cliche，但是在和公司运维撕了几次逼之后，我还是萌发了学习docker的念头，没准学会了以后就可以和运维更愉快的撕逼了呢~啦啦啦~ 学习目标： - 如何（在Mac本上）安装docker - docker基础姿势 - 如何使用docker部署一个nodejs应用 - 如何在docker里面调试nodejs应用 - 限于姿势水平，其他的暂时没想到
> 本文为译文，原文地址为：https://medium.com/@pierceydylan/isomorphic-javascript-it-just-has-to-work-b9da5b0c8035#.9a0873elf # > isomorphic ，发音类似为（埃搜摸非克） > > 意为拥有类似的结构或外表，但源头却不同  自从NodeJS诞生以来，人们就开始爱上了你可以在不同代码栈之间“共享”JavaScript经验的想法。这样的想法（在理论上）拥有诸多好处，包括可以减少不同语言之前的上下文切换，前端和后端开发能更容易的过渡，以及最有希望的好处是获得共享代码的能力。 好吧，我确实已经在[browserify](http://browserify.org/)和[webpack](https://webpack.github.io/)的帮助下使用了同样的效用函数...确定我可以在浏览器里面使用同样的api进行AJAX操作嘛？[没问题](https://github.com/matthew-andrews/isomorphic-fetch)！移动表格和文件也可以嘛？[没问题](https://github.com/form-data/isomorphic-form-data)！那如果我需要探测环境呢？我并没有使用meteor！[也没问题](https://www.npmjs.com/package/isbrowser)！甚至DOM现在也可以通过[React](https://facebook.github.io/react/)，[Deku](https://github.com/dekujs/deku)和其他很多库实现的“虚拟DOM”实现同构。你也可以不适用虚拟DOM，而采用其他的工具例如[morphdom](https://github.com/patrick-steele-idem/morphdom)，[set-dom](https://github.com/DylanPiercey/set-dom)和[diffHTML](https://github.com/tbranyen/diffhtml)来编写简单的“静态”html代码。 ``` javascirpt const _ = require("lodash") _.chain(emails) .chunk(100) .filter("to") .unshift(Promise.resolve()) .reduce((p, batch)=> { p.then(()=> { fetch("http://myapi.com/email", { method:...
VR时代，我想学点WebGL。 开坑就开坑，又不会怀孕 😁
 前端好无聊，还是玩点新东西吧。就好像我很喜欢的一部电影《 Planet Terror 》里面的护士通过无用技能 -- 注射器射僵尸 -- 打败僵尸成功活命一样，说不定现在学的无用技能以后就有用了呢。 希望这个系列不会烂尾！嗯！