JavaScript
安迪源文
小步快走
展开
-
理解JavaScript中的Scope
介绍JavaScript有一个特征叫做作用域(Scope)。对于很多新手开发者来讲,作用域的概念不是那么容易理解,这里我尽我可能最简单地向你解释它是什么。理解作用域会使你的代码出色,减少错误,而且通过它你能够做出强大的设计模式。什么是作用域Scope?作用域Scope是你代码中的变量(variable),函数(function)和对象(object)在运行时(runtime)的可访...翻译 2018-04-19 18:42:11 · 1605 阅读 · 0 评论 -
React Navigation源代码阅读 : views/CardStack/CardStackTransitioner.js
import React from 'react';import { NativeModules } from 'react-native';import CardStack from './CardStack';import CardStackStyleInterpolator from './CardStackStyleInterpolator';import Transitione...原创 2018-05-20 11:26:09 · 461 阅读 · 0 评论 -
React Navigation源代码阅读 : views/withNavigation.js
import React from 'react';import propTypes from 'prop-types';import hoistStatics from 'hoist-non-react-statics';/** * HOC,增强一个组件,让其具有 navigation 属性 * @param Component */export default function...原创 2018-05-20 11:33:39 · 549 阅读 · 0 评论 -
React Navigation源代码阅读 : views/withNavigationFocus.js
import React from 'react';import propTypes from 'prop-types';import hoistStatics from 'hoist-non-react-statics';import invariant from '../utils/invariant';// HOC,增强一个组件,让其具有 navigation 属性和 isFoc...原创 2018-05-20 11:43:02 · 839 阅读 · 0 评论 -
React Navigation源代码阅读 : views/SceneView.js
import React from 'react';import propTypes from 'prop-types';/** * 场景视图组件: 用于渲染屏幕场景组件的组件 * * 其实就是在自己的渲染方法中将最终的屏幕场景组件渲染出来, * 这也是一个高阶组件,所有的属性参数等都来自外部,包括所要渲染的 * 屏幕场景组件,本组件只是获取外部指定的这些属性参数等信息应用到 *...原创 2018-05-20 11:51:33 · 452 阅读 · 0 评论 -
React Navigation源代码阅读 :StateUtils.js
import invariant from './utils/invariant';/** * Utilities to perform atomic operation with navigate state and routes. * * 对导航状态和路由执行原子操作的工具方法 * * 导航状态可以理解成这样一个对象 : * 1. 拥有一个属性 路由栈 routes, 是一个即...原创 2018-05-14 18:35:49 · 463 阅读 · 0 评论 -
React Navigation源代码阅读 :routers/TabRouter.js
import invariant from '../utils/invariant';import getScreenForRouteName from './getScreenForRouteName';import createConfigGetter from './createConfigGetter';import NavigationActions from '../Navig...原创 2018-05-14 23:23:48 · 463 阅读 · 0 评论 -
React Navigation源代码阅读 :views/withOrientation.js
import React from 'react';import {Dimensions} from 'react-native';import hoistNonReactStatic from 'hoist-non-react-statics';/** * 输入当前屏幕宽度高度参数,判断是横屏还是竖屏,如果 宽width 大于 高height , * 认为是横屏,否则认为是竖屏 *...原创 2018-05-16 09:39:52 · 547 阅读 · 0 评论 -
React Navigation源代码阅读 :views/Header/HeaderTitle.js
import React from 'react';import {Text, View, Platform, StyleSheet, Animated} from 'react-native';const AnimatedText = Animated.Text;/** * react-navigation 缺省的 HeaderTitle 实现, * 但是如果开发人员通过参数 na...原创 2018-05-16 11:21:05 · 463 阅读 · 0 评论 -
React Navigation源代码阅读 :views/Header/Header.js
import React from 'react';import {Animated, Image, Platform, StyleSheet, View,} from 'react-native';import {MaskedViewIOS} from '../../PlatformHelpers';import SafeAreaView from 'react-native-safe-...原创 2018-05-16 11:55:37 · 829 阅读 · 0 评论 -
React Navigation源代码阅读 : views/ScenesReducer.js
import invariant from '../utils/invariant';import shallowEqual from '../utils/shallowEqual';const SCENE_KEY_PREFIX = 'scene_';/** * Helper function to compare route keys (e.g. "9", "11"). * 工具助...原创 2018-05-27 10:30:30 · 356 阅读 · 0 评论 -
React Navigation源代码阅读 : createNavigationContainer.js
import React from 'react';import {Linking} from 'react-native';import {BackHandler} from './PlatformHelpers';import NavigationActions from './NavigationActions';import addNavigationHelpers from '....原创 2018-05-16 19:00:06 · 1448 阅读 · 0 评论 -
React Navigation源代码阅读 :views/TouchableItem.js
/** * * 封装一个 touchable 组件,在 iOS 和 Android 都使用原生的效果 。 * * 其实是对 TouchableNativeFeedback 和 TouchableOpacity 的抽象和封装: * 1. 到底使用 TouchableNativeFeedback 还是 TouchableOpacity ? * 1.1 Android 平台并且平台版本&gt...原创 2018-05-28 12:18:00 · 430 阅读 · 0 评论 -
React Navigation源代码阅读 : views/Transitioner.js
import React from 'react';import {Animated, Easing, StyleSheet, View} from 'react-native';import invariant from '../utils/invariant';import NavigationScenesReducer from './ScenesReducer';import C...原创 2018-05-28 18:31:22 · 648 阅读 · 0 评论 -
React Navigation源代码阅读 : views/CardStack/CardStackStyleInterpolator.js
import {I18nManager} from 'react-native';import getSceneIndicesForInterpolationInputRange from '../../utils/getSceneIndicesForInterpolationInputRange';/** * 工具类:构建 card stack 中 card 的样式,在屏幕切换时使用的插...原创 2018-05-29 11:33:30 · 1100 阅读 · 0 评论 -
React Navigation源代码阅读 : views/TabView/TabView.js
import React from 'react';import {View, StyleSheet, Platform} from 'react-native';import {TabViewAnimated, TabViewPagerPan} from 'react-native-tab-view';import SafeAreaView from 'react-native-safe-...原创 2018-06-05 14:24:27 · 678 阅读 · 0 评论 -
React Navigation源代码阅读 : views/CardStack/CardStack.js
import React from 'react';import clamp from 'clamp';import {Animated, Easing, I18nManager, PanResponder, Platform, StyleSheet, View,} from 'react-native';import Card from './Card';import Header ...原创 2018-05-30 16:55:06 · 692 阅读 · 0 评论 -
JavaScript模块化的前世今生
了解JavaScript模块化的前世今生,读透这几篇文章就够了 :Native ECMAScript modules - the first overviewNative ECMAScript modules: the new features and differences from Webpack modulesNative ECMAScript modules: dynamic im...原创 2019-04-18 10:23:00 · 217 阅读 · 0 评论 -
React Navigation源代码阅读 : views/CardStack/TransitionConfigs.js
import {Animated, Easing, Platform} from 'react-native';import CardStackStyleInterpolator from './CardStackStyleInterpolator';import * as ReactNativeFeatures from '../../utils/ReactNativeFeatures';...原创 2018-05-20 11:22:21 · 639 阅读 · 0 评论 -
React Navigation源代码阅读 :routers/validateScreenOptions.js
const deprecatedKeys = ['tabBar'];/** * Make sure screen options returned by the `getScreenOption` * are valid * * 确保由 getScreenOption 返回的参数有效 */export default (screenOptions, route) => {...原创 2018-05-13 10:20:01 · 274 阅读 · 0 评论 -
React Navigation源代码阅读 : utils/shallowEqual.js
/**本模块对外提供一个对象相等与否的浅层比较方法**/'use strict';const hasOwnProperty = Object.prototype.hasOwnProperty;/** * 一个工具函数: Object.is 方法, * inlined Object.is polyfill to avoid requiring consumers ship thei...原创 2018-05-09 22:05:34 · 470 阅读 · 0 评论 -
React Navigation(v1.5.11)源代码阅读 : 目录结构
基于 Ract Navigation v1.5.11 用到的术语 : HOC : 高阶组件, Higher Order ComponentRouter : 路由器 注意,这里所说的路由器并非是通信领域中的路由器 目录结构//Ract Navigation v1.5.11 源代码目录结构 react-navigation/src │ │ addNav...原创 2018-05-07 16:34:29 · 710 阅读 · 0 评论 -
React Navigation源代码阅读 : utils/ReactNativeFeatures.js
import { NativeModules } from 'react-native';const { PlatformConstants } = NativeModules;/** * 判断当前的React Native 版本是否支持改进的 Spring animation 机制, * 版本在 >=0.50 或者为 0.0 是才返回真 * @returns {boolean}...原创 2018-05-09 22:22:12 · 279 阅读 · 0 评论 -
React Navigation源代码阅读 : react-navigation.js
// 本模块本身没有实现React Navigation的任何具体功能,// 本模块的的主要任务是将分散在各个具体功能模块文件中的功能集中导出module.exports = { // Core get createNavigationContainer() { return require('./createNavigationContainer').default; }...原创 2018-05-09 22:28:37 · 751 阅读 · 0 评论 -
React Navigation源代码阅读 :routers/getScreenForRouteName.js
import invariant from '../utils/invariant';/** * Simple helper that gets a single screen (React component or navigator) * out of the navigator config. * * 工具函数,用于获取路由配置 routeConfigs 中某个名字为 route...原创 2018-05-09 22:50:28 · 362 阅读 · 0 评论 -
通过例子理解Promise
基于ES6语法 。创建Promise// 能正常完成的例子,任务成功做完是调用 resolve,参数是一个字符串消息let promiseOK = new Promise( (resolve, reject) => { // 这里是任务逻辑 resolve("成功完成"); });// 不能正常完成的例子,任务失败,调用...原创 2018-05-03 14:08:22 · 192 阅读 · 0 评论 -
React Navigation源代码阅读 :views/AnimatedValueSubscription.js
import { Animated } from 'react-native';/** * 订阅一个动画值的变化事件 */export default class AnimatedValueSubscription { /** * 订阅一个动画值的变化事件 * @param value 目标动画值 Animated.Value * @param ca...原创 2018-05-10 10:15:52 · 258 阅读 · 0 评论 -
React Navigation源代码阅读 :views/CardStack/PointerEventsContainer.js
import React from 'react';import invariant from '../../utils/invariant';import AnimatedValueSubscription from '../AnimatedValueSubscription';const MIN_POSITION_OFFSET = 0.01;/** * Create a high...原创 2018-05-10 10:46:15 · 330 阅读 · 0 评论 -
React Navigation源代码阅读 :views/CardStack/Card.js
import React from 'react';import { Animated, StyleSheet } from 'react-native';import createPointerEventsContainer from './PointerEventsContainer';/** * 定义一个React Component Card,这个组件会被 CardStack(卡...原创 2018-05-10 10:51:20 · 347 阅读 · 0 评论 -
React Navigation源代码阅读 :navigators/createNavigator.js
import React from 'react';/** * HOC:基于传入的路由器 router 和用来渲染屏幕(场景)的 view 创建一个导航器 navigator * Creates a navigator based on a router and a view that renders the screens. * @param router 路由器,可能是 TabRo...原创 2018-05-10 15:14:17 · 328 阅读 · 0 评论 -
ES6 Map 和 对象/JSON字符串之间的转换
本文中用到的一些术语的解释: 任意类型Map : 指该Map对象的key可以是任意JavaScript类型;String Map : Map对象的key都是JavaScript String;二值对 : 有且仅有两个元素的一个数组对象,比如[true,7];二值对Array : 一个数组对象,其每个元素都是一个二值对。利用 二值对Array 进行 任意类型Map 和 JSO...原创 2018-05-04 09:30:45 · 5038 阅读 · 0 评论 -
React Navigation源代码阅读 : navigators/TabNavigator.js
import React from 'react';import {Platform} from 'react-native';import createNavigator from './createNavigator';import createNavigationContainer from '../createNavigationContainer';import TabRout...原创 2018-05-17 14:38:39 · 363 阅读 · 0 评论 -
高阶组件(Higher-Order Components)
高阶组件(Higher-Order Components)高阶组件(HOC)是React中组件重用的一种高级技术。HOC本身并不是React API的一部分。它是从React可组合性质中冒出来的一种模式。具体地讲,一个高阶组件是一个函数,它输入一个组件,然后返回一个新的组件。const EnhancedComponent = higherOrderComponent(Wrapped...翻译 2018-05-17 18:51:59 · 3741 阅读 · 1 评论 -
React Navigation源代码阅读 :routers/StackRouter.js
import pathToRegexp from 'path-to-regexp';import NavigationActions from '../NavigationActions';import createConfigGetter from './createConfigGetter';import getScreenForRouteName from './getScreenF...原创 2018-05-11 19:58:34 · 652 阅读 · 0 评论 -
React Navigation源代码阅读 :routers/validateRouteConfigMap.js
import invariant from '../utils/invariant';/** * Make sure the config passed e.g. to StackRouter, TabRouter has * the correct format, and throw a clear error if it doesn't. * * 检查传递给StackRouter...原创 2018-05-13 09:41:23 · 1206 阅读 · 0 评论 -
React Navigation源代码阅读 :routers/KeyGenerator.js
/** * 本模块提供路由项唯一性 key 的生成函数 * @type {string} */// 目标全局唯一key的前缀部分 ,// 格式 : id-当前时间的时间戳,例子:let uniqueBaseId = `id-${Date.now()}`;// 目标全局唯一key的生成计数器,从0开始,每生成一个新的key,//该变量自增1let uuidCount = 0;...原创 2018-05-13 09:55:20 · 274 阅读 · 0 评论 -
React Navigation源代码阅读 : navigators/StackNavigator.js
import React from 'react';import createNavigationContainer from '../createNavigationContainer';import createNavigator from './createNavigator';import CardStackTransitioner from '../views/CardStack/...原创 2018-05-19 10:22:16 · 563 阅读 · 0 评论 -
Springboot + WebJars 方式开发前端WEB应用入门
1. 读一篇不错的入门文章如果你想使用Springboot+WebJars 方式开发前端WEB应用,可以先看一下这篇文章入门 :Introduction to WebJars背景资料:Utilizing WebJars in Spring Boot2. 从WebJars官网开始熟悉然后熟悉一下WebJars的官网:官网首页介绍了webjars的4种主要分类来源列出了常用的Web...原创 2019-04-18 21:26:47 · 342 阅读 · 0 评论