ZoomZhao

/**
 * @author ebidel@ (Eric Bidelman)
 * License Apache-2.0
 *
 * Shows how to use Puppeeteer's code coverage API to measure CSS/JS coverage across 
 * different points of time during loading. Great for determining if a lazy loading strategy
 * is paying off or working correctly.
 *
 * Install: 
 *   npm i puppeteer chalk cli-table

ZoomZhao

> The evolutionary path is: 
> monolithic backend-web-framework-based repo -> multi repos with shared infra -> monorepo contains shared infra
>
> The tool support is becoming matured ([Yarn Workspace](https://code.facebook.com/posts/274518539716230), [VSCode's Multi Root Workspaces](https://code.visualstudio.com/updates/v1_16#_preview-multi-root-workspaces))

```
[monorepo]/
 ├── universal-js-app project for product A/
 │    ├── node_modules/
 │    ├── common/

ZoomZhao

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
• elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
• elem.getClientRects(), elem.getBoundingClientRect()

ZoomZhao

const marky = require('marky')
const render = Vue.prototype._render
const update = Vue.prototype._update
const camelize = str => str && Vue.util.camelize(str)

function getName (vm) {
  if (!vm.$parent) return 'root'
  return (
    camelize(vm.$options.name) ||
    camelize(vm.$options._componentTag) ||

ZoomZhao

'use strict';
/* eslint-disable consistent-this */

let applyMiddlewareHash = [];

/**
 * Composes single-argument functions from right to left. The rightmost
 * function can take multiple arguments as it provides the signature for
 * the resulting composite function.
 *

ZoomZhao

// 1
const uls = document.getElementByTagName('ul')
for(u of uls) {
  u.classList.add('bar')
}


// 2
document.querySelector('#list > li:nth-child(10)').remove()

ZoomZhao

var parser = function(url) {
  var a = document.createElement('a');
  a.href = url;
  
  var search = function(search) {
    if(!search) return {};
    
    var ret = {};
    search = search.slice(1).split('&');
    for(var i = 0, arr; i < search.length; i++) {

ZoomZhao

/*! normalize.css v3.0.1 | MIT License | git.io/normalize */

/**
 * Remove default margin.
 */

body {
  margin: 0;
}

ZoomZhao

ECMAScript Features, Support and Shims

• shim - What is a Polyfill? / Shim vs Polyfill / Extend the Web Forward
• mo - A collection of OzJS core modules

ES7 / ES8

• Object.observe
• 原生支持: chrome，node-harmony

ZoomZhao

Flux + React:

Views ---> (actions) ----> Dispatcher ---> (registered callback) ---> Stores -------+
Ʌ                                                                                   |
|                                                                                   V
+-- (Controller-Views "change" event handlers) ---- (Stores emit "change" events) --+

NervJS + DarkDOM + Templating or Virtual-DOM (React-like):