Archives

文件夹

本文案例、代码及主要内容基于知乎前端专栏翻译的文章《深入浅出React Native:使用JavaScript构建原生应用》《Introducing React Native: Building Apps with JavaScript》而写。 在原文的基础上做了一些校对,并增加了android得环境安装和调试的内容。 由我书写的注释将会显示左边这个紫色竖线(#523f6d),而原文的注释为蓝色的(#559bce)。 内容传送门 一、《深入浅出R跟我学用React Native构建原生应用(一) 二、《深入浅出R跟我学用React Native构建原生应用(二) 三、《深入浅出R跟我学用React Native构建原生应用(三) 四、《深入浅出R跟我学用React Native构建原生应用(四) 五、《深入浅出R跟我学用React Native构建原生应用(五) 六、《深入浅出R跟我学用React Native构建原生应用(六) 著作权归作者所有。 商业转载请联系作者获得授权,非商业转载请注明出处。 作者:kmokidd 链接:http://zhuanlan.zhihu.com/FrontendMagazine/19996445 来源:知乎 执行 API 请求 还是 SearchPage.js 文件中,更新构造器中的初始 state 添加一个message 变量: this.state = { searchString: ‘london’, isLoading: false, message: ” }; 在 render 内部,将下面的代码添加到 UI 的底部: <Text style={styles.description}>{this.state.message}</Text> 你需要使用这个为用户展示多种信息。 […]

本文案例、代码及主要内容基于知乎前端专栏翻译的文章《深入浅出React Native:使用JavaScript构建原生应用》《Introducing React Native: Building Apps with JavaScript》而写。 在原文的基础上做了一些校对,并增加了android得环境安装和调试的内容。 由我书写的注释将会显示左边这个紫色竖线(#523f6d),而原文的注释为蓝色的(#559bce)。 内容传送门 一、《深入浅出R跟我学用React Native构建原生应用(一) 二、《深入浅出R跟我学用React Native构建原生应用(二) 三、《深入浅出R跟我学用React Native构建原生应用(三) 四、《深入浅出R跟我学用React Native构建原生应用(四) 五、《深入浅出R跟我学用React Native构建原生应用(五) 六、《深入浅出R跟我学用React Native构建原生应用(六) 添加组件状态 每个 React 组件都带有一个key-value存储的状态对象,你必须在组件渲染之前设置其初始状态。 在 SearchPage.js 中,我们对 SearchPage 类中,render方法前添加以下的代码。 constructor(props) { super(props); this.state = { searchString: ‘london’ }; } 现在你的组件拥有一个状态变量:searchString ,且初始值被设置为 london 。 这时候你需要利用起组件中的状态了。在render方法中,用以下的代码替换TextInput元素中的内容: <TextInput style={styles.searchInput} value={this.state.searchString} placeholder=’Search via name or postcode’/> […]

本文案例、代码及主要内容基于知乎前端专栏翻译的文章《深入浅出React Native:使用JavaScript构建原生应用》《Introducing React Native: Building Apps with JavaScript》而写。 在原文的基础上做了一些校对,并增加了android得环境安装和调试的内容。 由我书写的注释将会显示左边这个紫色竖线(#523f6d),而原文的注释为蓝色的(#559bce)。 内容传送门 一、《深入浅出R跟我学用React Native构建原生应用(一) 二、《深入浅出R跟我学用React Native构建原生应用(二) 三、《深入浅出R跟我学用React Native构建原生应用(三) 四、《深入浅出R跟我学用React Native构建原生应用(四) 五、《深入浅出R跟我学用React Native构建原生应用(五) 六、《深入浅出R跟我学用React Native构建原生应用(六) 你好 JSX 的世界 你当前的应用程序会使用 React.createElement 来构建应用 UI ,React会将其转换到原生环境中。在当前情况下,你的JavaScript代码是完全可读的,但一个更复杂的 UI 与嵌套的元素将迅速使代码变成一大坨。 确保应用程序仍在运行,然后回到你的文本编辑器中,编辑 PropertyFinderApp.js 。修改组件 render 方法的返回语句如下: return <React.Text style={styles.text}>Hello World (Again)</React.Text>; 这是 JSX ,或 JavaScript 语法扩展,它直接在你的 JavaScript 代码中混合了类似 HTML 的语法;如果你是一个 web 开发人员,应该对此不陌生。在本篇文章中你将一直使用 JSX […]

原文地址:http://elf8848.iteye.com/blog/1582137 Mac 启动加载文件位置(可设置环境变量) ——————————————————- (1)首先要知道你使用的Mac OS X是什么样的Shell,使用命令 echo $SHELL 如果输出的是:csh或者是tcsh,那么你用的就是C Shell。 如果输出的是:bash,sh,zsh,那么你的用的可能就是Bourne Shell的一个变种。 Mac OS X 10.2之前默认的是C Shell。 Mac OS X 10.3之后默认的是Bourne Shell。   (2)如果是Bourne Shell。 那么你可以把你要添加的环境变量添加到你主目录下面的.profile或者.bash_profile,如果存在没有关系添加进去即可,如果没有生成一个。   1./etc/profile   (建议不修改这个文件 ) 全局(公有)配置,不管是哪个用户,登录时都会读取该文件。   2./etc/bashrc    (一般在这个文件中添加系统级环境变量) 全局(公有)配置,bash shell执行时,不管是何种方式,都会读取此文件。 我在这里加入mysqlstart、mysql和mysqladmin命令的别名,保证每一个用户都可以使用这3个命令。   3.~/.bash_profile  (一般在这个文件中添加用户级环境变量) (注:Linux 里面是 .bashrc 而 Mac 是 .bash_profile) 若bash shell是以login方式执行时,才会读取此文件。该文件仅仅执行一次!默认情况下,他设置一些环境变量 我在这里:设置终端配色、 我在这里:设置命令别名alias ll=’ls […]

本文案例、代码及主要内容基于知乎前端专栏翻译的文章《深入浅出React Native:使用JavaScript构建原生应用》《Introducing React Native: Building Apps with JavaScript》而写。 在原文的基础上做了一些校对,并增加了android得环境安装和调试的内容。 由我书写的注释将会显示左边这个紫色竖线(#523f6d),而原文的注释为蓝色的(#559bce)。 内容传送门 一、《深入浅出R跟我学用React Native构建原生应用(一) 二、《深入浅出R跟我学用React Native构建原生应用(二) 三、《深入浅出R跟我学用React Native构建原生应用(三) 四、《深入浅出R跟我学用React Native构建原生应用(四) 五、《深入浅出R跟我学用React Native构建原生应用(五) 六、《深入浅出R跟我学用React Native构建原生应用(六) 数月前,Facebook 对外宣布了正在开发的 React Native 框架,这个框架允许你使用 JavaScript 开发原生的 iOS 应用——就在今天,Beta 版的仓库释出了!基于 PhoneGap 使用 JavaScript 和 HTML5 开发 iOS 应用已经有好几年了,那 React Native 有什么牛的?React Native 真的很牛,让大家兴奋异常的主要原因有两点: 可以基于 React Native使用 JavaScript 编写应用逻辑,UI 则可以保持全是原生的。这样的话就没有必要就 HTML5 的 UI […]

在mac全局上安装npm的插件会有权限问题,一般来说大家会在前面加sudo来解决。 可是有的插件在自行安装npm插件的时候不会加sudo,比如react在初始化项目的时候。 下面这个命令一劳永逸解决问题。 sudo chown -R ‘whoami’ /usr/local 详情可参阅github上的解决方案:https://github.com/npm/npm/issues/5922 当然也可以改的更彻底一些 sudo chown -R ‘whoami’:staff /usr/local sudo chown -R ‘whoami’:staff /Users/’whoami’/.npm 另外关于npm下载速度慢得问题可以使用淘宝的镜像库 npm install- g cnpm –registry=http://registry.npm.taobao.org

之前用的时候忘记总结了,这里集中总结一下这个问题。 使用require:‘ngModel’ 这个选项来增强我们对指令的处理, 这样就可以作为link选项的第四个参数, link: function ($scope,$element,$attrs,$ngModel){ //其他逻辑代码 } 这里面的$ngModel便是代码中ng-model指令传递过来的对象,包含以下这些方法和属性: $viewValue:视图值,即显示在视图(页面)的实际值(就是上面例子中input输入框的值) $modelValue:模型值,即赋给ng-model的值(与控制器绑定的值) 两者不一定相等,因为$viewValue同步到$modelValue要经过一系列的操作(经过三个管道)。 $parsers:一个执行它里面每一个元素(每一个元素都是一个函数)的数组, 主要是用来做验证和转换值的过程,ngModel从DOM读取的值会被传入到其中的函数它会依次执行每一个函数,把每一个函数执行的结果传个下一个函数,而最后一个函数执行的值将会传到model中, 我们可以将函数push进去,那样它就会执行。 $formatters:也是一个执行它里面每一个元素(每一个元素都是一个函数)的数组,主要用来对值进行格式化和转换,以便在绑定了这个值的控件中显示。当数据的模型值发生变化的时候,里面的函数会被一一执行,同样我们就可以将函数push进去,让它执行 $viewChangeListeners:也是一个由函数组成的数组当视图的值发生变化的时候里面的函数会被一一调用,实现跟$watch类似的功能。 $render:函数负责将模型值同步到视图上, 如果模型值被改变,需要同步视图的值。 $setViewValue:用于设置视图值(上面的例子就是将input的value值赋值给$viewValue) $error:一个包含所有error的对象 $setPristine:设置为原始状态,会添加ng-pristine的class类名,移除ng-dirty的class类名 $setValidity:设置错误的标志为一个函数,接受两个参数,第一个参数为错误标志的名字,是字符串类型,将会被设置成$error的属性第二个参数为布尔值,为这个错误标志的值。  

先说基本的 $watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你。   $watch(watchExpression, listener, objectEquality); 每个参数的说明如下: watchExpression:监听的对象,它可以是一个angular表达式如’name’,或函数如function(){return $scope.name}。 listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数:newValue(新值), oldValue(旧值), scope(作用域的引用) objectEquality:是否深度监听,如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它。 简单的实现看书好了,我这里重点要说的是监听多个值。 $watch监听多个值   从第一个参数的说明里可以看出,可以用这样的函数做监听对象function(){return $scope.name}。 就是函数返回的值改变了,我们就认为值变了。   那么我们用这个方法监听多个值,如下: $scope.$watch(function () { return JSON.stringify([$scope.name, $scope.value]) }, function (newVal,oldVal) { //… }); 以上面的方式就可以同时监听该作用域($scope)下的name和value两个值了。   关于$watchCollection 该方法允许我们为对象的属性或者数组的元素设置浅(一层)监控。

原文转载自:http://www.w3cplus.com/css3/new-css3-linear-gradient.html   渐变背景一直以来在Web页面中都是一种常见的视觉元素。但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中。Web页面上实现的效果,仅从页面的视觉效果上来看,与设计并无任何差异。 事实上这种方法是比较麻烦的,因为首先需要设计师进行设计,然后进行切图,在通过样式应用到页面中。另外,在实际应用中可扩展性差,还直接影响页面性能。 值得庆幸的是,W3C组织将渐变设计收入到CSS3标准中,让广大的前端设计师直接受益,可以直接通过CSS3的渐变属性制作类似渐变图片的效果。而且渐变属性慢慢得到了众多现代浏览器的兼容,甚至烦人的IE,在IE10版本也支持了这个属性。 CSS3渐变的介绍 欲要了解CSS3渐变,就先要知道CSS3渐变是什么?从早前的设计中我们可以知道,渐变是两种或多种颜色之间的平滑过渡。在创建渐变的过程中,可以指定多个中间颜色值,这个值称为色标。每个色标包含一种颜色和一个位置,浏览器从每个色标的颜色淡出到下一个,以创建平滑的渐变。如下图所示: 渐变可以应用于任何使用背景图片的地方。这意味着在CSS样式中,渐变相当于背景图片,在理论上可在任何使用url() 值的地方采用,比如最常见的background-image、list-style-type以及前面介绍的CSS3的图像边框属性border-image。但直到目前为止,仅在背景图片中得到最完美的支持。 渐变功能的实现 最早支持CSS3渐变的是Webkit内核的浏览,随后在Firefox和Opera等浏览器都得到支持,但是众浏览器之间没有得到统一的标准,用法差异很大。不同的渲染引擎实现渐变的语法也不同,各浏览器下使用都需要带上自己的前缀,给前端设计师们带来极大的不便。 不过还好,到写本章内容的时候,CSS3渐变属性在IE10+、Firefox19.0+、Chrome26.0+和Opera12.1+等浏览器已完全支持W3C的标准语法,但在Webkit内核下的Safari、iOS Safari、Android浏览器和Blackberry浏览器中还是需要添加浏览器的前缀 “-webkit-”。 较以前相比,虽然CSS3的渐变属性在众浏览器中得到较好的支持,但在实际使用的时候也像制作软件(Photoshop CS6、Firework CS6等)的渐变工具一样,将渐变分成了几种:线性渐变,径向渐变、重复线性渐变和重复径向渐变。接下来,我们将依次介绍它们。 线性渐变 在线性渐变过程中,颜色沿着一条直线过渡:从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。如果你曾使用过制作图件,比如说Photoshop,你对线性渐变并不会陌生。 CSS3制作渐变效果,其实和使用制作软件中的渐变工具没有什么差别。首先需要指定一个渐变的方向、渐变的起始颜色、渐变的结束颜色。具有这三个参数就可以制作一个最简单、最普通的渐变效果。如果你需要制作一个复杂的多色渐变效果,就需要在同一个渐变方向增添多个色标。具备这些渐变参数(至少三个),各浏览器就会绘制与渐变线垂直的颜色结来填充整个容器。浏览器渲染出来的效果就类似于制作软件设计出来的渐变图像,从一种颜色到另一种颜色的平滑淡出,沿所指的线性渐变方向实现颜色渐变效果。 一、线性渐变语法与参数 线性渐变的语法相对于其他的CSS3属性的语法而言要复杂的多。早期的语法在各浏览器内核下其语法尽不相同,特别是在Webkit内核之下还分新旧两种版本。接下来我们先从各浏览器下的语法入手,开始介绍CSS3的线性渐变语法。 1. Webkit引擎的CSS3线性渐变语法与属性参数 Webkit是第一个支持CSS3渐变的浏览器引擎,不过其语法也相对其他浏览器引擎复杂,还分为新旧两个版本。 Webkit引擎老式语法 -webkit-gradien(<type>,<point>[,<radius>]?,<point>[,<radius>]?[,<stop>]*) Webkit引擎新式语法 -webkit-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*) Webkit引擎渐变属性参数 -webkit-gradient是webkit引擎对渐变的实现一共有五个参数。第一个参数表示渐变类型(type),可以是线性渐变linear或者径向渐变radial。第二个参数和第三个参数,都是一对值,分别表示渐变的起点位置和终点位置。这对值可以用坐标形式表示,也可以用关键值表示,比如left top(左上角)和left bottom(左下角)。第四个和第五个参数,分别是两个color-stop函数(色标)。color-stop函数接受两个参数,第一个表示渐变的位置,0表示起点,0.5为中点,1为结束点;第二个表示该点的颜色。 如下图所示: 2. Gecko引擎的CSS3的线性渐变语法与属性参数 Gecko引擎的浏览器Firefox在3.6版本就开始支持CSS3的线性渐变属性。Gecko引擎与Webkit引擎的新版本渐变设计时用法基本相同,只是使用的私有前缀不同。 Gecko引擎的渐变语法 -moz-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*) Gecko引擎的渐变属性参数 在Gecko引擎的渐变中共有三个参数,第一个数数表示线性渐变的方向,例如:top是从上到下、left是从左到右。如果定义成left top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。如图所示: 3. Presto引擎的CSS3线性渐变语法与属性参数 Presto引擎的Opera浏览器在11.6版本开始就支持CSS3的线性渐变。在Presto引擎浏览器中CSS3线性渐变的使用语法和Gecko引擎浏览器中的线性渐变的语法非常类似,唯一不同的就是在Presto引擎浏览器中需要使用其自己的私有前缀为“-o-”。 Presto引擎的线性渐变语法 -o-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*) Presto引擎的线性渐变的属性参数 -o-linear-gradient也具有三个参数:第一个参数表示线性渐变的方向,top表示从上到下,left表示从左到右,如果定义成left top表示从左上角到右下角。第二个和第三个参数分别是起点颜色和结束颜色。还可以在它们之间插入更多的参数,表示多种颜色的渐变。如图所示: 4. Trident引擎的CSS3线性渐变语法与属性参数 Trident引擎的浏览器主要有IE,早期版本的IE浏览器是不支持CSS3线性渐变的属性,不过在其IE10开始支持了这个属性。在这里我们主要针对IE10+浏览器的CSS3线性渐变进行简单的介绍。 Trident引擎的CSS3线性渐变语法 -ms-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*) […]

这是一篇翻译文章来自于知乎   认证是任何 web 应用中不可或缺的一部分。在这个教程中,我们会讨论基于 token 的认证系统以及它和传统的登录系统的不同。这篇教程的末尾,你会看到一个使用 AngularJS 和 NodeJS 构建的完整的应用。 传统的认证系统 在开始说基于 token 的认证系统之前,我们先看一下传统的认证系统。 用户在登录域输入 用户名 和 密码 ,然后点击 登录 ; 请求发送之后,通过在后端查询数据库验证用户的合法性。如果请求有效,使用在数据库得到的信息创建一个 session,然后在响应头信息中返回这个 session 的信息,目的是把这个 session ID 存储到浏览器中; 在访问应用中受限制的后端服务器时提供这个 session 信息; 如果 session 信息有效,允许用户访问受限制的后端服务器,并且把渲染好的 HTML 内容返回。 在这之前一切都很美好。web 应用正常工作,并且它能够认证用户信息然后可以访问受限的后端服务器;然而当你在开发其他终端时发生了什么呢,比如在 Android 应用中?你还能使用当前的应用去认证移动端并且分发受限制的内容么?真相是,不可以。有两个主要的原因: 在移动应用上 session 和 cookie 行不通。你无法与移动终端共享服务器创建的 session 和 cookie。 在这个应用中,渲染好的 HTML 被返回。但在移动端,你需要包含一些类似 JSON 或者 XML 的东西包含在响应中。 在这个例子中,需要一个独立客户端服务。 基于 token 的认证 在基于 […]