打包首先来看看webpack打包生成了什么。平常我们写代码，build之后会发现产生了一坨混合了webpack 相关代码的文件，其实这些wepack函数实现了模块的引入。比如下面的index.js import { plus } from './plus';console.log(plus(1+2, 3)) plus.js: export const plus = (a, b) => a + b 通过webpack build 之后，主要生成了： (function(modules) { // webpackBootstrap var installedModules = {} // 缓存 function __webpack_require__(moduleId) {} ... // Load entry module and return exports return __webpack_require__(__webpack_require__.s = "./src/index.js");})({ "./src/index.js": (function(module, __webpack_exports__, __webpack_require__) { ...}), "./src/plus.js": (function(module, __webpack_exports__, __webpack_require__) { ...})}); 这么一坨看上去复杂，其实就是一个即时函数而已： function webpackBootstrap(modules){ ...

What is flutter ? Flutter是Google开发的一套全新的 mobile app SDK 开源UI框架 一套代码同时运行在Android和iOS系统 媲美原生应用的性能 基于Dart编程语言 目前已经发布了120个版本，最新1.4.1(2019/3/27) Why flutter ?在Flutter之前，就已经有许多跨平台UI框架： 基于WebView的cordova、AppCan 将web渲染成原生控件的weex、ReactNative 基于WebView框架的优点很明显，几乎可以完全继承现代Web开发的所有成果，Web开发人员，不需要太多的学习和迁移成本就可以开发一个App 但也有很关键的缺点：WebView的渲染效率和JavaScript执行性能太差；Android各个系统版本和设备厂商的定制。 为了解决WebView性能差的问题，以React Native为代表的一类框架将最终渲染工作交还给了系统；但是随着系统版本变化和API的变化，这些框架本身需要处理大量平台相关的逻辑，开发者也需处理不同平台的差异；有些特性只能在部分平台。 为了解决这些问题，flutter从头到尾重写一套跨平台的UI框架，包括UI控件、渲染逻辑甚至开发语言，只调用原生的图形渲染接口。 How ?我们试着写个简单的demo。 开发环境 安装Android Studio，flutter， VsCode插件，模拟器 在Android Studio里创建flutter app： import 'package:flutter/material.dart';void main() => runApp(new MyApp());class MyApp extends StatelessWidget { @override Widget build(Bui ...

setTimeout 注册的回调会在事件循环的 timers、poll 和closing callbacks阶段执行。需要注意的是，计时器默认定义的 TIMEOUT_MAX 的取值范围是 [1, 2 ^ 31 - 1]，不足 1 或者超过上限都会初始化为 1，也就是说你调用 setTimeout(fn, 0)和 setTimeout(fn, 1)的效果是一样的。另一点，当timer到延时处理方法到达触发条件，于是将延时处理方法加入任务队列，必须等到当前代码（执行栈）执行完，主线程才会去执行它指定的回调函数。没有办法保证，回调函数一定会在setTimeout()指定的时间执行。（setInterval会不管回调，准时调用） process.nextTick 方法可以在当前”执行栈”的尾部–>下一次Event Loop（主线程读取”任务队列”）之前–>触发。process指定的回调函数注册的回调会在事件循环的当前阶段结束前执行，而不是只有 poll、check 阶段才会执行。process 是内核模块，运行时是全局上下文，所以 microtask 只有一个，无论你是在哪个阶段、哪个闭包内用 nextTick 注册的回调都会被 push 到nextTickQueue，并在事件循环当前阶段结束前执行。 setImmediate 注册的回调会在 check 阶段执行,属于check观察者，其设置的回调函数，会插入到下次事件循环的末尾。。因为它需要由 check watcher来执行，check watcher只在check阶段处于 active 状态。与 process.nextTick不同，setImmediate 因运行时的上下文不同而产生不同的 ImmediateList，所以 microtask可以有多个。setImmediate 会在异常的时候执行proce ...

记录下做题思路。 665.Non-decreasing ArrayGiven an array with n integers, your task is to check if it could become non-decreasing by modifying at most 1 element. We define an array is non-decreasing if array[i] <= array[i + 1] holds for every i (1 <= i < n). Example 1: Input: [4,2,3]Output: TrueExplanation: You could modify the first 4 to 1 to get a non-decreasing array. Example 2: Input: [4,2,1]Output: FalseExplanation: You can't get a non-decreasing array by modify at most one element. /** * @param {number[]} nums * @return {boolean} */var checkPossibility = function(nums) { let flag = true; for(let i=1;i<nums.length; i++){ if(nums[i] < nums[i-1]){ if(!flag) return flag; if(i>1&& nums[i] < nums ...

记录一下contest 43做题的想法。 650. 2 Keys KeyboardInitially on a notepad only one character ‘A’ is present. You can perform two operations on this notepad for each step: Copy All: You can copy all the characters present on the notepad (partial copy is not allowed). Paste: You can paste the characters which are copied last time. Given a number n. You have to get exactly n ‘A’ on the notepad by performing the minimum number of steps permitted. Output the minimum number of steps to get n ‘A’. 每一步只能复制全部，或者粘贴之前复制的全部的A； f(n):对于n，最简单的想法就是复制1个’A’n次，此时需要n步；那当n能整除2，复制n/2次2个’A’肯定比之前要快… 考虑找到n的最大约数q，那么复制n/q次即可，继而就是求f(q); //递归方式：var minSteps = function(n) { if(n===1)return 0; //找最大约数，最大约数必然<=n/2 let q = ~~(n/2); while(q > 0){ if(n%q === 0)break; q--; } ret ...

为了提高React组件渲染性能，React 针对组件的 shouldComponentUpdate 方法进行了封装处理，我们不需要在每个组件里面手动编写 shouldComponentUpdate。 PureRenderMixinReact在之前版本提供了 PureRenderMixin 的mixin形式，其用法如下： // react官方demoimport PureRenderMixin from 'react-addons-pure-render-mixin';class FooComponent extends React.Component { constructor(props) { super(props); this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this); } 其原理就是重写了 shouldComponentUpdate 方法。 PureComponentReact 15.3.0 新增了一个 PureComponent 类，以 ES2015 class 的方式方便地定义纯组件 (pure component)，用于取代之前的 PureRenderMixin。 这个类的用法很简单，如果你有些组件是纯组件，那么把继承类从 Component 换成 PureComponent 即可。当组件更新时，如果组件的 props 和 state 都没发生改变，render 方法就不会触发，省去 Virtual DOM 的生成和比对过程，达到提升性能的目的。 原理当组件更新时，如果组件的 props 和 state 都没发生改变， render 方法就不会触发，省去 Virtual DOM 的生成和比对过程，达到提升性能的目 ...

state的作用state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更新组件的state,会导致重新渲染用户界面(不要操作DOM).简单来说,就是用户界面会随着state变化而变化. state工作原理常用的通知React数据变化的方法是调用setState(data,callback).这个方法会合并data到this.state,并重新渲染组件.渲染完成后,调用可选的callback回调.大部分情况不需要提供callback,因为React会负责吧界面更新到最新状态. 那些组件应该有state?大部分组件的工作应该是从props里取数据并渲染出来.但是,有时需要对用户输入,服务器请求或者时间变化等作出响应,这时才需要state. 组件应该尽可能的无状态化,这样能隔离state,把它放到最合理的地方(Redux做的就是这个事情?),也能减少冗余并易于解释程序运作过程. 常用的模式就是创建多个只负责渲染数据的无状态(stateless)组件,在他们的上层创建一个有状态(stateful)组件并把它的状态通过props 传给子级.有状态的组件封装了所有的用户交互逻辑,而这些无状态组件只负责声明式地渲染数据. 哪些应该作为state?state应该包括那些可能被组件的事件处理器改变并触发用户界面更新的数据。这中数据一般很小且能被JSON序列化。 当创建一个状态化的组件的时候,应该保持数据的精简,然后存入this.state。 在render()中在根据state来计算需要的其他数据.因为如果在state里添加冗余数据或计算所得数据,经常需要手动保持数据同步。 那些不应该作为state?this.state应该仅包括能表示用户界面状态所需要的最少数据.因此,不应该包括: ...

React 中最值得称道的部分莫过于 Virtual DOM 与 diff 的完美结合，特别是其高效的 diff 算法，这让我们可以无需担心性能问题而”毫无顾忌”的随时“刷新”整个页面，由虚拟DOM来确保只对界面上真正变化的部分进行实际的DOM操作。 什么是DOM Diff算法Web界面由DOM树来构成，当其中某一部分发生变化时，其实就是对应的某个DOM节点发生了变化。在React中，构建UI界面的思路是由当前状态决定界面。前后两个状态就对应两套界面，然后由React来比较两个界面的区别，这就需要对DOM树进行Diff算法分析。 即给定任意两棵树，找到最少的转换步骤。但是标准的的Diff算法复杂度需要O(n^3)，这显然无法满足性能要求。要达到每次界面都可以整体刷新界面的目的，势必需要对算法进行优化。这看上去非常有难度，然而Facebook工程师却做到了，他们结合Web界面的特点做出了两个简单的假设，使得Diff算法复杂度直接降低到O(n) 两个相同组件产生类似的DOM结构，不同的组件产生不同的DOM结构； 对于同一层次的一组子节点，它们可以通过唯一的id进行区分。 Dom节点树 diffReact的整个内容其实就是一棵Virtual Node组成的Tree。 任何时间, 你描述的是你的 UI 看起来是什么样子。 需要特别注意, render 执行的结果得到的不是真正的 DOM 节点。 结果仅仅是轻量级的 JavaScript 对象, 我们称之为 virtual DOM。 按照层级找到两棵任意的树之间最小的修改是一个复杂度为 O(n^3) 的问题.React 用了一种简单但是强大的技巧, 达到了接近 O(n) 的复杂度. React 仅仅是尝试把树按照层级分解. 这彻底简化了复杂度,而且也不会失去很多, 因为 Web 应用很少有 component 移动到树的另一个层级 ...

React有三种定义react组件的方式，殊途同归；具体的三种方式： 函数式定义的无状态组件 es5原生方式React.createClass定义的组件 es6形式的extends React.Component定义的组件 无状态函数式组件创建无状态函数式组件形式是从React 0.14版本开始出现的。它是为了创建纯展示组件，这种组件只负责根据传入的props来展示，不涉及到要state状态的操作。具体的无状态函数式组件，其官方指出： 在大部分React代码中，大多数组件被写成无状态的组件，通过简单组合可以构建成其他的组件等；这种通过多个简单然后合并成一个大应用的设计模式被提倡。 无状态函数式组件形式上表现为一个只带有一个render方法的组件类，通过函数形式或者ES6 arrow function的形式在创建，并且该组件是无state状态的。具体的创建形式如下： function HelloComponent(props, /* context */) { return <div>Hello {props.name}</div>}ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode) 无状态组件的创建形式使代码的可读性更好，并且减少了大量冗余的代码，精简至只有一个render方法，大大的增强了编写一个组件的便利，除此之外无状态组件还有以下几个显著的特点： 组件不会被实例化，整体渲染性能得到提升因为组件被精简成一个render方法的函数来实现的，由于是无状态组件，所以无状态组件就不会在有组件实例化的过程，无实例化过程也就不需要分配多余的内存，从而性能得到一定的提升。 组件不能访问this对象无状态组件由于没有实例化过 ...

语法：:nth-child(an+b)为什么选择她，因为我认为，这个选择器是最多学问的一个了。很可惜，据我所测，目前能较好地支持她的只有Opera9+和Safari3+。 描述：伪类:nth-child()的参数是an+b，如果按照w3.org上的描述，写成中文，很可能会让人头晕，再加上笔者的文笔水平有限，所以我决定避开an+b的说法，把它拆分成5种写法共5部分来说明。 第一种：简单数字序号写法:nth-child(number)直接匹配第number个元素。参数number必须为大于0的整数。 例子：li:nth-child(3){background:orange;} 第二种：倍数写法:nth-child(an)匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。例子：li:nth-child(3n){background:orange;} 第三种：倍数分组匹配:nth-child(an+b) 与 :nth-child(an-b)先对元素进行分组，每组有a个，b为组内成员的序号，其中字母n和加号+不可缺省，位置不可调换，这是该写法的标志，其中a,b均为正整数或0。如3n+1、5n+1。但加号可以变为负号，此时匹配组内的第a-b个。（其实an前面也可以是负号，但留给下一部分讲。）例子：li:nth-child(3n+1){background:orange;}li:nth-child(3n+5){background:orange;}li:nth-child(5n-1){background:orange;}li:nth-child(3n±0){background:orange;}li:nth-child(±0n+3){background:orange;} 第四种：反向倍数分组匹配:nth-child(-an+b)此处一负一正，均 ...