2017年02月_barnett_y_优快云博客

转载各类ReactNative学习资源、开源App和组件

随着现在混合开发的火热，React Native和Weex的兴起，越来越多的人学习混合开发，下面就github上一篇React Native的资料合集。React-Native学习指南本指南汇集React-Native各类学习资源，给大家提供便利。指南正在不断的更新，大家有好的资源欢迎Pull Requests！同时还有Awesome React Native系列 http

2017-02-28 23:17:21 1424

转载不容错过的Vue2.0组件开发

简述http://www.jianshu.com/p/313f11bccb33?utm_source=tuicool&utm_medium=referral（本文针对于有Vue有一定基础的人学习了解，环境搭建等入门教程网上很多，大家自行学习，也可留言，我会给出一些不错的教程博客供大家学习。）一、通过一个小demo，让大家深入了解组件开发。并将教会大家以下知识。（特色）

2017-02-28 23:15:58 873

转载总结 React 组件的三种写法及最佳实践 [涨经验]

React 专注于 view 层，组件化则是 React 的基础，也是其核心理念之一，一个完整的应用将由一个个独立的组件拼装而成。http://www.mrfront.com/2017/01/11/react-writing-compare/截至目前 React 已经更新到 v15.4.2，由于 ES6 的普及和不同业务场景的影响，我们会发现目前主要有三种创建 React 组件

2017-02-28 23:14:13 1715

转载 canvas转base64/jpeg时，透明区域变成黑色背景的解决方案

问题：png图片转jpeg时，透明区域被填充成黑色在用canvas将png图片转jpeg时，发现透明区域被填充成黑色。代码如下：p>Canvas：p>canvas id="canvas" style="border: 1px solid #ccc;">canvas>br>p>Base64转码后的图片：p>div id="base64Img">div>script type=

2017-02-28 23:04:20 26779

转载 JavaScript：获取url的querystring参数

一. 获取url的querystring参数获取url的querystring参数的两种方法如下：1.1 方法一：正则匹配//获取url中的参数function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", i); // 匹配目标参数 var result =

2017-02-28 23:03:41 3541

转载 JavaScript中对象的深拷贝

在JavaScript中，对对象进行拷贝的场景比较常见。但是简单的复制语句只能对对象进行浅拷贝，即复制的是一份引用，而不是它所引用的对象。而更多的时候，我们希望对对象进行深拷贝，避免原始对象被无意修改。对象的深拷贝与浅拷贝的区别如下：浅拷贝：仅仅复制对象的引用，而不是对象本身；深拷贝：把复制的对象所引用的全部对象都复制一遍。一. 浅拷贝的实现浅拷贝的实现方法比较简单，只要使用是

2017-02-28 23:02:45 365

转载 HTML5摄像头拍照组件的封装

摄像头调用主要使用了navigator.getUserMedia()函数。为了将摄像头的画像实时展现，可以将录像数据流导入到video或者canvas中。在展示的时候，建议使用video作为视频流容易，因为canvas绘画视频帧时存在一定的卡顿。在像素数据分析和将画像转成图片，则应将视频流导到canvas中，使用canvas API中进行数据提取。在这里，我使用了一个隐藏起来的canvas

2017-02-28 23:01:20 1161

转载 vuejs2.0使用Sortable.js实现的拖拽功能

简介http://www.cnblogs.com/moqiutao/p/6423754.html在使用vue1.x之前的版本的时候，页面中的拖拽功能，我在项目中是直接用的jquery ui中的sortable.js，只是在拖拽完成后，在update的回调函数中又重新排序了存放数据的数组。但是当把vue升级到2.0以上后发现拖拽功能失效了，于是使用了下面代码。该案例主要是在用于vue

2017-02-28 22:58:38 1785

转载 vuejs2.0运用原生js实现简单的拖拽元素功能

http://www.cnblogs.com/moqiutao/p/6428632.html.select-item { background-color: #5bc0de; display: inline-block; text-align: center; border-radius: 3px; margin-right: 10px; curso

2017-02-28 22:57:40 4967

转载 git常用命令总结以及用github来展示你的前端页面

命令小结命令功能git init把当前文件夹初始化为默认的git库git add 文件名向git库中添加一个文件git rm 文件名从git库中删除一个文件git status查看当前库中进行的任务git diff 文件名add前查看工作区和

2017-02-28 22:53:22 578

转载 vue.js中使用set方法

vue教程中有这样一个注意事项：第一种具体情况如下：运行结果：当利用索引改变数组某一项时，页面不会刷新。解决方法如下：运行结果：三种方式都可以解决，使用Vue.set、vm.$set()或者数组的splice方法。在做项目的过程中，有个发现，先上代码：第一个

2017-02-28 22:50:35 8774

原创 vue.js $set的使用数组

Document .blue { color: blue; } {{$index}}.{{ item.msg }} vm.items.splice(index,

2017-02-28 22:48:55 18727

转载 Vue.js--自定义指令

基础http://www.jianshu.com/p/c2bef47439abVue.js 允许你注册自定义指令，实质上是让你教 Vue 一些新技巧：怎样将数据的变化映射到 DOM 的行为。你可以使用Vue.directive(id, definition)的方法传入指令id和定义对象来注册一个全局自定义指令。定义对象需要提供一些钩子函数（全部可选）：bind: 仅调用一次

2017-02-28 17:14:21 913

转载 Vue.js自定义指令的用法与实例

自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的DOM操作，并且是可复用的。　　比如谷歌图片的加载做得非常优雅，在图片未完成加载前，用随机的背景色占位，图片加载完成后才直接渲染出来。用自定义指令可以非常方便的实现这个功能。效果：　　自定义指令的第二用

2017-02-28 17:12:29 1416

转载 React Native制作圆形加载条

先放运行截图说明做什么吧，react-native-percentage-circle 项目地址最近需求需要一个显示百分比的加载条。然而去搜索了很久，没能发现比较满意的组件，只好自己解决了。当然对于大多数前端而言，这个并不是特别难的，可能思路众多，然而面对React Native似乎就有点相形见绌了。解决这样的问题，我们还是得回归前端本身，看看有什么可以嫁接的方案没。

2017-02-28 13:51:29 3208

转载 React-Native解决键盘遮挡问题（Keyboard遮挡问题）

我在前面也写了一篇关于键盘遮挡问题的解决方案，这次的原理也差不多，不过在后续的研究中发现官方给了一个有意思的组件叫 KeyboardAvoidingView。然后就动手去试了一试，然而效果并不好！具体用法可以参考这里：点击打开链接不过随着RN的更新，这个官网肯定会解决的，但是在官方还没填坑前，还是得自己动手解决啦。我前面博客的处理方法：点击打开链接其

2017-02-28 09:57:57 4036

转载 Vuex2.0 + Vue-Resource Todo实例

前言：主要应用vue2.1，vuex2.1结合vue-Resource做一个Todos实例。后台用mock-data模拟后台数据源码地址先来看一下效果图：http://www.jianshu.com/p/96bf8b145f33效果图第一步先来起个项目打开控制台输入：$ npm install --global vue-cl

2017-02-28 09:03:07 1045

转载 Vuex2.0边学边记+两个小例子

最近在研究Vuex2.0，搞了好几天终于有点头绪了。首先vuex概念比较多，一定要搞懂里面的概念，可以参考官网Vuex2.0概念，我写此文的目的是希望能对前端爱好者提供个参考，加深对vuex2.0各核心概念的理解。废话少说，直接上干货。这是官网上的一个计数的实例。先来起个项目。第一步、下载安装vue项目打开git ，运行 npm install --

2017-02-28 09:02:03 1052

转载从0开始做一个的Vue图片/ 文件选择(上传)组件[基础向]

https://segmentfault.com/a/1190000008439300之前好几个项目中都有涉及图片传输的场景, 因为项目基本都用Vue + Ele 或者 Mint Muse之类的组件库，首先当然是找库里面是否包含啦。饿了么组件里的确有uploader上传组件，但是名副其实的是一个上传组件，非表单item。而自己项目中需要的是一个inputer，选择完图片

2017-02-28 08:56:43 39319

转载 React Native的Navigator详解

前言除了极少数特殊设计的App，导航都是一个App重要组成的部分。导航栏能够维护一个导航堆栈，能够让用户清楚的知道自己当前所处的页面和返回的页面。在React Native中，官方推荐使用Navigator,因为这个能够在iOS和安卓中通用,不过在现在（2016年5月18日）,Navigator 性能较差。所以，对iOS应用，往往可以使用NavigatorIOS，你将获得系

2017-02-27 21:34:23 511

转载 React Native navigator关闭侧滑手势

我们在使用Navigator进行页面跳转的时候，会配置跳转动画configureScene，但是你会发现，我们使用侧滑手势的时候，页面会拉动，会导致或页面关闭或打开页面。如果我们不希望让它响应侧滑手势呢？解决如下：在使用Navigator时，配置configureScene的gestures为nullconfigureScene={(route) => { var conf

2017-02-27 21:32:58 3101

转载 React Native布局详细指南

http://blog.youkuaiyun.com/quanqinyang/article/details/52215641一款好的APP离不了一个漂亮的布局，本文章将向大家分享React Native中的布局方式FlexBox。在React Native中布局采用的是FleBox(弹性框)进行布局。FlexBox提供了在不同尺寸设备上都能保持一致的布局方式。FlexBox是CSS

2017-02-27 21:01:41 371

转载 Vue.js学习资料

如何优雅地使用此文档入门先从官网文档入手，粗略过一遍有个印象，力求回查时能找到对应的关键字或位置。vuejs中文官网vuejs英文官网vuejs组织发出一个问题之后，不要暂时的离开电脑，如果没有把握先不要提问。珍惜每一次提问，感恩每一次反馈，每个人工作还是业余之外抽出的时间有限，充分准备好应有的资源之后再发问，有利于问题能够高效质量地得到解决。尤其是具备解决问题能力的人，通常时

2017-02-27 19:22:51 589

转载 React-Native学习指南

⊙github地址：https://github.com/reactnativecn⊙原文地址：https://github.com/reactnativecn/react-native-guide随着现在混合开发的火热，React Native和Weex的兴起，越来越多的人学习混合开发，下面就github上一篇React Native的资料合集。本指南汇集Re

2017-02-27 19:20:19 648

转载 React-Native项目中使用Gif图做loading遮罩

先来张效果图：废话不多说Show you the Code！源码功能还是在原来的项目中实现的，代码可以单独剥离，自己动手丰衣足食源码点击这里文件路径: ListViewLoadMore/app/common/LoadingView.jsimport React, { Component } from 'react';import {

2017-02-27 16:58:40 637

转载 React-Native中处理ListView上拉加载更多

RN-ListViewLoadMorereact-native中处理ListView的下拉刷新和上拉加载更多ReactNative(RN)中的ListView是一个非常常用的组件，RN中已经有了现成的RefreshControl，官方文档中有具体用法，这里主要记录一下我是如何做上拉加载更多的示例中的数据来源于阿里巴巴网站https://m.alibaba.com/product

2017-02-27 16:05:04 661

转载导航 Navigator and NavigatorIOS的使用==》传递参数

Navigator简单介绍：大多数时候我们都需要导航器来应对不同场景（页面）间的切换。它通过路由对象来分辨不同的场景，我们这里采用的就是renderScene 方法，根据指定的路由来渲染。利用Navigator弹出用到的方法指定了默认的页面，也就是启动的组件页面initialRoute = {{ name: 'home', component: HomeScene

2017-02-27 15:42:15 944

转载 JavaScript常用的小知识

JS判断客户端是否是iOS或者Android通过判断浏览器的userAgent，用正则来判断是否是ios和Android客户端。代码如下：1 "text/javascript">2 var u = navigator.userAgent;3 var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr

2017-02-27 14:48:12 304

转载 React Native学习－控制横竖屏第三方组件：react-native-orientation

在项目中，有时候可能会想使不同的页面显示的横竖屏也不一样，比如前一段我做的《广播体操》的项目，在首页面，肯定是想使页面为竖屏显示，但是播放页面要为横屏显示，即使用户的手机可以转屏，我们的播放页面也要是横屏显示。有这样的需求，我们可以借助React-native的第三方组件，react-native-orientation。官方文档：https://github.com/yamill

2017-02-27 14:40:54 2238

原创面试JavaScript常用问题

JavaScript 是所有现代浏览器的官方语言。因此，各种语言的开发者面试中都会遇到 JavaScript 问题。本文不讲最新的 JavaScript 库，通用开发实践，或任何新的 ES6 函数。而是讲讲面试中经常出现的 3 个 JavaScript 问题。我问过这些问题，我的朋友说他们也问。当然不是说你在准备 JavaScript 面试时只要学习这 3 个问题 —— 你还

2017-02-27 14:18:49 530

原创 Jquery常用知识点

判断元素－是否含有某 class在表单提交之前，我们往往要利用 JavaScript 校验用户输入值，如果用户输入有误，那么我们就往该表单元素添加一个 error 的 class，再配合 CSS，该表单元素就显示为红色，以提醒用户。最后我们还要根据是否有 error 来决定是否提交表单。怎么判断呢？如下：input type="text" name="username"

2017-02-27 13:30:43 512

转载 React native Webview的使用

使用WebView的方法：1、申明WebView变量2、调用方法有两种：（1）使用接口对接、（2）直接使用url方式把内容全部取下来3、使用url呈现的方式如下问题处理方法及结果：1、使用如下官方案例代码：[javascript] view plain copy'

2017-02-27 10:27:46 2546

转载前端构建系统 Gulp 的使用与常用插件推荐 - 下篇

小图标转码为内联 base64插件- gulp-base64简介将 CSS 中引用的小图标转码为 base64 编码的 data URI 字符串，减少额外的 http 请求数。使用插件的使用非常简单，什么都不指定直接 pipe 到插件就OK了 // 基础示例 gulp.task('build',

2017-02-27 09:30:33 375

转载前端构建系统 Gulp 的使用与常用插件推荐 - 上篇

https://zhuanlan.zhihu.com/p/24975955?refer=web-learning随着 Web 前端发展，前端项目变得越来越复杂，随之而来的是各种方便的工具：打包工具、转码工具、 JS 与 CSS 的合并压缩工具等等。这些工具极大的提高了我们前端的代码质量，但问题也随之而来：这么多工具到底该怎么使用，难道一个个在各个工具中来回切换复制粘贴？或是在 CL

2017-02-27 09:29:30 349

转载如何编写一个gulp插件

http://www.cnblogs.com/giggle/p/6344789.html主题 Gulp很久以前，我们在"细说gulp"随笔中，以压缩JavaScript为例，详细地讲解了如何利用gulp来完成前端自动化。再来短暂回顾下，当时除了借助gulp之外，我们还利用了第三方gulp插件”gulp-uglify”，来达到压缩JavaScript文件的目的。

2017-02-27 09:25:38 470

转载 JavaSript模块化

在了解AMD，CMD规范前，还是需要先来简单地了解下什么是模块化，模块化开发？模块化是指在解决某一个复杂问题或者一系列的杂糅问题时，依照一种分类的思维把问题进行系统性的分解以之处理。模块化是一种处理复杂系统分解为代码结构更合理，可维护性更高的可管理的模块的方式。可以想象一个巨大的系统代码，被整合优化分割成逻辑性很强的模块时，对于软件是一种何等意义的存在。对于软件行业来说

2017-02-27 09:17:41 272

转载 Gulp实现css、js、图片的压缩以及css、js文件的MD5命名

目前做代码压缩合并的工具有很多，诸如gulp，webpack，grunt等等，可以说这些项目构建工具的功能非常之强大：图片压缩、图片转base64、css和js的压缩以及合并，文件的md5重命名 ……。本人之前也是在项目中没具体使用过，闲来无事，查查资料，自己写了一个用gulp工具的小demo，有很多不足之处，欢迎指点。第一步：安装node和npm不用说，要用gulp

2017-02-27 09:15:01 1480

转载面向React/Redux的可维护项目结构之旅【翻】

当我开始学习Redux的时候，我被有关于Redux的大量讨论和“最佳实践”（可以在网上找到）震惊到，但是没有太多的时间理解为什么：Redux关于构建一个围绕它的项目的方式不是很有见地，而且，当你试着弄清楚什么样的结构适合你的风格和你的项目时，你会遇到一些麻烦。在这篇文章中，我想要分享一些关于我获取到的舒适的Redux项目结构信息。这不是一个介绍/教程，需要具备一些Redux的基

2017-02-27 09:07:54 1749

转载精通gulp常用插件

本文主要展示的是gulp常用插件的使用方法和用途，通过对插件的熟练运用达到精通gulp。不定期更新。可以到github上面下载DEMO github地址：https://github.com/lin-xin/gulp-pluginshttps://www.w3ctech.com/topic/1959?utm_source=tuicool&utm_medium=referral

2017-02-27 09:00:57 280

转载 React资源

React 官方设计思想React 设计思想React的设计哲学 - 简单之美颠覆式前端UI开发框架:React文章React 入门实例教程-阮一峰：建议先看demo一看就懂的ReactJs入门教程（精华版）React 教程-菜鸟教程：安装那节好像有点错React 入门，5个常用DEMO展示如何学习React给新手的 React&Webpack 上手教程Re

2017-02-26 22:43:25 438

空空如也

空空如也