Spider--Man-优快云博客

原创 redux添加中间件

function compose(...funcs) { return arg => funcs.reduceRight((composed, f) => f(composed), arg);}// 参数：传入中间件数组function applyMiddleware(...middlewares) { return (next) => (reducer, initialState)

2017-05-25 14:48:28 591

原创 koa:当创建一个服务时，做了什么

创建一个简单的应用// 1、实例化appvar Koa = require('koa');const app = new Koa();// 2、声明中间件函数async function responseTime(ctx, next) { const start = new Date(); await next(); const ms = new Date() - start +

2017-04-25 11:09:01 992

翻译 react-bits:Using Pure Components

Pure Components默认在shouldComponentUpdate进行浅对比，避免props和state未改变时的重复渲染Recompose提供了高阶函数pure用于生成Pure Componentsbadexport default (props, context) => { // ... do expensive compute on props ... return <So

2017-04-20 11:49:23 421

翻译 react-bits:shouldComponentUpdate() check

使用shouldComponentUpdate避免昂贵的重复渲染 react组件的props和state改变时会触发重复渲染，每次改变重新渲染整个页面会对浏览器造成很大负担。render之前会触发shouldComponentUpdate，手动判断props和state是否改变，并返回true或false，返回false不会触发渲染。badconst AutocompleteItem = (pro

2017-04-20 11:43:45 369

原创微信小程序开发：一个音乐播放器

github源码地址花了点时间撸了个微信小程序，分两个部分，音乐播放界面和音乐列表。总结一下遇到的问题UI分4层，第一层背景高斯模糊，第二层灰色半透明蒙层，第三层播放器，第四层列表css设置背景图片路径不能是本地的，需要设置为网络图片，或者base64编码图片旋转暂停通过移除或添加css的animation-play-state: paused;设置本地存储当前播放的音乐，下次进

2017-04-12 22:11:59 21150 10

原创 react-native报错Could not get BatchedBridge, make sure your bundle is packaged correctly

Could not get BatchedBridge, make sure your bundle is packaged correctly执行react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/in

2017-04-09 21:37:40 1078

原创 react-native run-android报错A problem occurred configuring project ':app'. > SDK location not found

Building and installing the app on the device (cd android && gradlew.bat installDebug)...FAILURE: Build failed with an exception.* What went wrong:A problem occurred configuring project ':app'.> SDK

2017-04-09 17:48:56 11594

原创 js判断对象构造函数

调用Object原生toString()方法function isArray(value) { return Object.prototype.toString.call(value) === "[object Array]"}function isFuction(value) { return Object.prototype.toString.call(value) === "

2017-04-06 15:33:24 2701

翻译 react-bits：Children types

// You might create a component designed to apply context and render its children.class SomeContextProvider extends React.Component { getChildContext() { return {some: "context"} } render() {

2017-04-06 15:23:32 325

翻译 react-bits：Render Callback

组件children设为函数const Width = ({ children }) => children(500)// The component calls children as a function, with some number of arguments.// Here, it’s the number 500.// To use this component, we give

2017-04-06 15:02:21 711

翻译 react-bits：Function As Children

使用函数作为子元素并不常见<div>{ () => { return "hello world!" }() }</div>可以用于渲染回调，ReactMotion中有使用这种技术。把渲染逻辑保存在自有组件中，而不是被委派。

2017-04-06 14:42:17 334

翻译 react-bits：Proxy Component

Buttons随处可见，所有Buttons都需要设置type=”button”<button type="button">我们可以写一个更高层级的组件把它包裹起来，并代理propsconst Button = props => <button type="button" {...props}>使用Button代替button<Button />// <button type="button"><b

2017-04-06 14:32:45 604

翻译 react-bits：数组作为子元素

react-bits 原文数组作为子元素很常见// We use map() to create an array of React Elements for every value in the array.(<ul> {["first", "second"].map((item) => ( <li>{item}</li> ))}</ul>)//That’s equivale

2017-04-06 13:10:40 447

翻译 react-bits：Children类型

react-bits 原文react渲染的children元素可以有很多类型，大多情况下是数组或字符串字符串Stringfunction render() { return ( <div> Hello World! </div> )}Arrayfunction render() { return ( <div> {["Hello ",

2017-04-06 11:39:14 529

翻译 react-bits：条件渲染

react-bits 原文条件渲染时可以使用if/else，但当更复杂或需要判断的变量更多时，推荐分离组件替代//iffunction render() { return condition && <span>Rendered when `truthy`</span>}// unlessfunction render() { return condition || <span>Ren

2017-04-06 11:29:48 414

翻译 react-bits：解构参数

react-bits 原文解构赋值是ES2016特性，在处理无状态函数的props时很方便下面两个例子是等价的：const Greeting = props => <div>Hi {props.name}!</div>;const Greeting = ({ name }) => <div>Hi {name}!</div>;…允许收集对象所有剩下的属性到新的对象中const Greeting

2017-04-06 11:18:29 531

翻译 react-bits：JSX扩展属性

react-bits 原文扩展属性是JSX的一个特性，是把所有对象属性传递给JSX属性的语法糖。…运算符已经被ES6的数组支持，ES2017对象也被建议支持。下面的两个例子是等价的：// props written as attributeslet main = () => <main className="main" role="main">{children}</main>;// props

2017-04-06 11:00:47 982

翻译 react-bits：组件切换

react-bits 原文从多个组件中选一个渲染使用对象映射props值和组件import HomePage from './HomePage.jsx';import AboutPage from './AboutPage.jsx';import UserPage from './UserPage.jsx';import FourOhFourPage from './FourOhFour

2017-04-06 00:13:06 776

翻译 react-bits：从父组件获取子组件

react-bits 原文从父组件获取子组件例如：操作父组件使子组件获取焦点子组件一个输入框，带focus()函数可以自动获取焦点class Input extends Component { focus() { this.el.focus(); } render() { return ( <input ref={el=> { this

2017-04-06 00:08:56 982

翻译 react-bits：列表组件

react-bits 原文不建议将列表内单个元素抽象出组件，建议使用mapconst SearchSuggestions = (props) => { // renderSearchSuggestion() behaves as a pseudo SearchSuggestion component // keep it self contained and it should be ea

2017-04-05 23:58:10 366

翻译 react-bits：使用HOC共享跟踪逻辑

react-bits 原文使用高阶组件在不同的组件间共享跟踪逻辑例如：给不同组件添加分析跟踪代码减少重复代码从表层组件移除跟踪逻辑代码，更有利于测试import tracker from './tracker.js';// HOCconst pageLoadTracking = (ComposedComponent) => class HOC extends Component {

2017-04-05 23:49:52 488

翻译 react-bits：使用组件进行文本格式化

react-bits 原文我们倾向于创建一个单独的组件格式化文本，而不是调用render内的函数使用组件 render更容易理解，因为它只是组件组合在一起const Price = (props) => { // toLocaleString is not React specific syntax - it is a native JavaScript function used fo

2017-04-05 23:40:30 879

翻译 react-bits：无状态函数组件

react-bits 原文无状态函数是一种很有用的定义高可复用组件的方法。他们不拥有状态，只是函数。使用函数的优点是视图和逻辑的分离，由于没有内部的状态处理和逻辑，视图和逻辑的分离更为彻底。无状态函数组件因为没有状态和生命周期函数，性能得以提升，react团队在未来的版本将会避免无意义的检查和内存分配import {PropTypes, ContextTypes} from "re

2017-04-05 23:31:35 1000

原创 js常用正则

创建正则对象// 构造函数创建var patt=new RegExp(pattern,modifiers);// var patt=/pattern/modifiers;使用正则正则方法var str="Hello world!";var patt1=/Hello/g;patt1.test(str);//true 返回true/falsepatt1.exec(str);// 'Hell

2017-04-05 17:41:39 359 1

原创 html和native使用JSBridge交互

网页通过webview加载，webview作为native和js交互的中介 ios ios调用jswebview.stringByEvaluatingJavaScriptFromString：返回js脚本的执行结果// Swiftwebview.stringByEvaluatingJavaScriptFromString("swiftcalljs()") js调用ios jsbridge:

2017-04-05 14:26:02 1277

原创 redux的reducer纯函数处理state的2种方法

1、使用lodash的_.cloneDeep()函数深复制，可以递归复制复杂的对象，Object.assign()和_.assign()只会复制对象的第一层属性，更深层次的属性是引用赋值的，指向同一对象const newState = cloneDeep(state)newState.name = action.namereturn newState2、使用官方提供的updateimport

2017-04-02 21:47:43 3058

原创 redux的合并多个reducer

//创建store需要传入reducercreateStore(reducer, preloadedState, enhancer) //reducer是一个函数，传入当前state和action，返回新的state// (preState, action) => nextState当我们需要将多个reducer合并成一个时combineReducers({ app: appReducer

2017-04-02 21:18:21 4889

原创 redux源码

1、redux初始化最先做的是使用createStore创建store，store用于管理state createStore(reducer, preloadedState, enhancer)// 传入preloadedState对象作为redux的默认state，当使用combineReducers()方法合并多个reducer时，传入的preloadedState对象key值必须与合并red

2017-04-02 20:21:21 997

原创 Missing letters

Find the missing letter in the passed letter range and return it.If all letters are present in the range, return undefined.判断字符串相邻字符是否连续，若连续返回undefined，否则返回缺失字符function fearNotLetter(str) { var arr

2017-04-01 11:23:15 677

原创 DNA Pairing

The DNA strand is missing the pairing element. Take each character, get its pair, and return the results as a 2d array.Base pairs are a pair of AT and CG. Match the missing element to the provided char

2017-04-01 11:07:41 390

原创 Pig Latin

Translate the provided string to pig latin.Pig Latin takes the first consonant (or consonant cluster) of an English word, moves it to the end of the word and suffixes an “ay”.If a word begins with a vo

2017-04-01 11:01:42 443

原创 Search and Replace

Perform a search and replace on the sentence using the arguments provided and return the new sentence.First argument is the sentence to perform the search and replace on.Second argument is the word tha

2017-04-01 10:38:06 424

原创 Wherefore art thou

返回collection内对象包含source对象内所有属性，并且值相等function whatIsInAName(collection, source) { // What's in a name? var arr = []; // Only change code below this line collection.forEach((cur) => { var has

2017-04-01 10:22:27 435

原创 Roman Numeral Converter

Roman Numeral Converter 把数字转换成罗马数字转换规则function convertToRoman(num) { var a=[["","I","II","III","IV","V","VI","VII","VIII","IX"], ["","X","XX","XXX","XL","L","LX","LXX","LXXX","XC"],

2017-04-01 01:01:31 373

原创 Diff Two Arrays

Diff Two Arrays 求两个数组不同的值function diffArray(arr1, arr2) { var newArr = []; // Same, same; but different. var arr1Diff = arr1.filter((cur) => { return arr2.indexOf(cur) === -1; }); var a

2017-04-01 00:37:51 725

原创 Sum All Numbers in a Range

Sum All Numbers in a Range 求两个数字间所有数字之和function sumAll(arr) { var min = Math.min(arr[0], arr[1]); var max = Math.max(arr[0], arr[1]); var arrOpen = []; for (var i = min; i<=max; i++){ arrO

2017-04-01 00:33:39 522

原创除了border，还可以使用box-shadow生成边框

<html> <head> <style> .border{ background: blue; width: 200px; height: 200px; box-shadow: 0 0 0 20px #655, 0 0 0

2017-03-30 19:14:22 2022

原创 background-clip设置半透明border

<html> <head> <style> .bg{ background: red; width: 200px; height: 200px; padding: 20px; }

2017-03-30 18:51:09 1269

原创 d3.js小记

d3:data-driven-documents,数据驱动文档 d3以数据驱动的方式操作文档1、选择器 d3使用//document.querySelectorAll(selector)//选择器body.select("p") .style("color","red");body.selectAll("p");body.selectAll(".myclass");2、d3如何使用

2017-03-30 14:13:21 293

原创 206. Reverse Linked List

Reverse a singly linked list. 反转单向链表解题思路：迭代或递归迭代/** * Definition for singly-linked list. * function ListNode(val) { * this.val = val; * this.next = null; * } *//** * @param {ListNode}

2017-03-29 22:56:05 222

ActionBarCompat-Basic

c语言深度剖析

空空如也