YolkPie

样式rn是基于flex布局,可以理解为rn的布局中在最外层默认给我们添加了display:flex,并且rn中flex布局默认是竖直排列的,想要横向排列要设置flexDirection:”row”rn页面中并不是所有样式属性都可以用,比如css2那些样式如float,position等就不能用,具体能用什么在官网中按照rn-xx组件-style顺序去查看,有些样式是rn独有的rn中所有尺寸都是没有单位的,尺寸是逻辑像素点,比如设备的dpr=2(物理像素/逻辑像素),我们设置width=50(逻辑像素),渲染到设备上是100物理像素使用styledSheet时,同一个元素的样式要用数组写,否则后面会覆盖前面的 1234567891011121314151617181920212223242526272829pageContainer: { height: '100%', backgroundColor: '#f4f5f7', overflow: 'hidden', paddingBottom: ...

前言弹性盒子是一种用于按行或按列布局元素的一维布局方法 。元素可以膨胀以填充额外的空间, 收缩以适应更小的空间。 本文将解释所有的基本原理。 为什么使用弹性盒长久以来，CSS 布局中唯一可靠且跨浏览器兼容的创建工具只有 floats 和 positioning。这两个工具大部分情况下都很好使，但是在某些方面它们具有一定的局限性，让人难以完成任务。 以下简单的布局需求是难以或不可能用这样的工具（ floats 和 positioning）方便且灵活的实现的： 在父内容里面垂直居中一个块内容。使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用。使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。正如你将在后面的章节中看到的一样，弹性盒子使得很多布局任务变得更加容易。 弹性盒子简单介绍 主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。 交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross sta ...

用Node.js写代码时，可以使用node-schedule来实现定时任务的功能，比如定时获取数据、定时发送报警信息等。node-schedule 是 Node.js 中专门处理定时任务的模块，可以根据配置，按照指定时间执行任务。需要注意的是 node-schedule 是基于时间而不是基于时间间隔的，比如 node-schedule 支持在每小时的0、20、40分钟执行，但是如果你想要从现在开始每二十分钟执行一次的话，建议考虑别的模块。 node-schedule 利用 timer 和 events 管理任务，对所有事件进行排序后，会计算当前时间和最近一个事件发生时间的时间间隔，然后调用setTimeOut 设置回调。总的来说分两种事件，一种是一次性的，一种是周期性的，一次性任务调用完就结束，周期性的会不断地循环调用，当一个周期性事件被调用后，会根据周期生成下一个周期任务，并添加到任务列表中，重新排序。每个任务调用结束，都会计算并准备下一个任务。 安装node 6+ 的版本都可支持。 1npm install node-schedule 创建每个定时任务都是 Job 对象的实例，可 ...

前端程序员进阶必备：抓包代理一 charles抓包 什么是抓包，为什么要抓包，不用多讲，大家都已经很清楚了 抓包代理可以说是前端同学的日常必备了，尤其是在我开始接触RN项目开发的时候，不会抓包真的感两眼抹黑，编码无力。下面就介绍一下我常用的几款抓包工具 1、charles 2、whistle 3、fillder 本次先介绍Charles 一、下载charles包 https://www.charlesproxy.com/download/ 二、安装证书 ​ 1. 电脑安装SSL证书 ​ Charles－》Help－》SSL Proxying－》Install Charles Root ​ 2. 浏览器安装ssl证书 ​ Charles－》Help－》SSL Proxying－》Install Charles Root Certificate on a Mobile 三、移动app抓包 1、使手机和电脑在一个局域网内，不一定非要是一个ip段，只要是同一个路由器下就可以了； 2、Charles菜单栏“Proxy->Acce ...

1. Js的运行机制介绍众所周知JavaScript是一门单线程的语言，所以在JavaScript的世界中默认的情况下同一个时间节点只能做一件事情，这就造成了JavaScript这门语言的一些局限性，比如在我们的页面加载一些远程数据时，如果按照单线程同步的方式运行，一旦有HTTP请求向服务器发送，就会出现等待数据返回之前页面假死的现象。因为JavaScript在同一时间只能做一件事，这就导致了页面渲染和事件的执行无法同进进行。 关于同步和异步关于上述的情况，我们知道在JavaScript的世界中应该存在一种解决方案，来处理单线程造成的诟病。这就是同步【阻塞】和异步【非阻塞】执行模式的出现。 同步（阻塞）同步的意思是JavaScript会严格按照单线程（从上到下，从左到右的方式）执行代码逻辑，进行代码的解释和运行，所以在运行代码时，不会出现先运行4、5行的代码，再回头支； 行1、3行的代码的这种情况。比如： 12345var a = 1var b = 2var c = a + bconsole.log(c) // c的返回一定是先执行了上面几行代码之后才会执行 升级场景 1234567 ...

概要react-router 作为react项目最基本的的导航框架, 基本配置并不复杂, 但是它也提供了非常灵活的api, 和丰富的组件, 本文将从源码角度深入介绍react-router提供的导航组件, 以及其设计原理 react-router 对外提供3个包 12345678910react-router // react-router 导航的核心包react-router-dom // 对react-router进行了封装, 是react-router的拓展, 提供一些react组件react-router-native // 同样是对react-router的封装, 区别是它是适用于react-native的库``` 对于react项目, 我们通常不会直接依赖react-router, 因为react-router-dom拥有其所有的功能, 并额外提供了BrowserRouter, HashRouter, Link等多个react组件 ```shellyarn add ...

前言TS 已经越来越火，不管是服务端（Node.js），还是前端框架（Angular、Vue3），都有越来越多的项目使用 TS 开发，作为前端程序员，TS 已经成为一项必不可少的技能。本文旨在介绍 TS 中的一些高级技巧，提高大家对这门语言更深层次的认知。 Typescript 简介 ECMAScript 的超集 (stage 3) 编译期的类型检查 不引入额外开销（零依赖，不扩展 js 语法，不侵入运行时） 编译出通用的、易读的 js 代码 Typescript = Type + ECMAScript + Babel-Lite Typescript 设计目标: https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals 为什么使用 Typescript 增加了代码的可读性和可维护性 减少运行时错误，写出的代码更加安全，减少 BUG 享受到代码提示带来的好处 重构神器 基础类型 boolean number string array tuple enum void nul ...

前言Webpack 凭借强大的功能与良好的使用体验，已经成为目前最流行，社区最活跃的构建工具，是现代 Web 开发必须掌握的技能之一。 构建其实是工程化、自动化思想在前端开发中的体现，把一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。 构建给前端开发注入了更大的活力，解放了我们的生产力。 背景在当下的前端环境里，各种框架和工具层出不穷，比如 React、Vue、Angular 等，极大的提高了我们的开发效率，但是，他们都有一个共同点：源代码无法直接运行，必须经过转换之后才可执行。 而转换代码的这个过程我们可以称之为构建，被用来进行构建的工具我们叫做构建工具，而 Webpack 便是其中的佼佼者。 构建工具的常规作用： 代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。 模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。 自 ...

限流（Rate Limitting）是服务降级的一种方式，通过限制系统的输入和输出流量以达到保护系统的目的。比如我们的网站暴露在公网环境中，除了用户的正常访问，网络爬虫、恶意攻击或者大促等突发流量都可能都会对系统造成压力，如果这种压力超出了服务器的处理能力，会造成响应过慢甚至系统崩溃的问题。因此，当并发请求数过大时，我们通过限制一部分请求（比如限制同一IP的频繁请求）来保证服务器可以正确响应另一部分的请求。nginx 提供了两种限流方式，一种是限制请求速率，一种是限制连接数量。 限制请求速率nginx 的 ngx_http_limit_req_module 模块提供限制请求处理速率的能力，使用了漏桶算法（leaky bucket algorithm）。我们可以想像有一只上面进水、下面匀速出水的桶，如果桶里面有水，那刚进去的水就要存在桶里等下面的水流完之后才会流出，如果进水的速度大于水流出的速度，桶里的水就会满，这时水就不会进到桶里，而是直接从桶的上面溢出。对应到处理网络请求，水代表从客户端来的请求，而桶代表一个队列，请求在该队列中依据先进先出（FIFO）算法等待被处理。漏的水代表请求离 ...

node nodejs就是基于js语法增加与操作系统之间的交互 node版本管理 n、nvm安装 node 123curl -o-https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash nodejs工作原理 application 编写的程序 V8 引擎 解析二进制代码 调用nodejs 调用libuv事件处理库 循环等待事件处理，有事件进来后先插入至事件队列 nodejs事件处理 收到请求 生成事件插入到事件队列 libvu通过事件循环，从事件队列中取出事件处理 最终结果-直接执行callback 从线程池取出线程做响应处理后回收线程 中间结果-重新插入事件队列 两个v8引擎 请求之前，nodejs通过v8引擎运行服务 客户端发送请求 客户端收到服务端返回的js 客户端的v8进行解析 最简单的http服务 require 引入 http模块 创建http服务 侦听端口 123456789101112131415'use strict'cons ...