AHABHGK

1// JQuery
2$('button').click(() => { // 点击 button 要发请求
3  $.ajax({
4    // ...
5    success(res) { // 请求成功后要修改 html
6      $('div').html(res)
7    },
8  })
9})

1// Vue
2<template>
3  <div>{{ text }}</div> <!-- 结果是 text -->
4  <button @click="handleGetText">get text</button> <!-- 请求后告诉它结果 -->
5</template>
6
7<script>
8export default {
9  data() {
10    return {
11      text: '',
12    }
13  },
14  methods: {
15    handleGetText() {
16      fetch('url').then(res => this.text = res)
17    },
18  },
19}
20</script>

1let parentDom = null
2let View = null
3let data = null
4
5const deepProxy = (target, callback) => new Proxy(target, {
6  get(target, key, receiver) {
7    const value = Reflect.get(target, key, receiver)
8    return (typeof value === 'object' && value !== null) ? deepProxy(value, callback) : value
9  },
10  set(target, key, value, receiver) {
11    const result = Reflect.set(target, key, value, receiver)
12    callback()
13    return result
14  },
15})
16
17export const reactive = (model) => {
18  data = deepProxy(model, render)
19  return data
20}
21
22export const render = () => {
23  parentDom.innerHTML = View(data)
24}
25
26export const createApp = (App, model, dom) => {
27  parentDom = dom
28  View = App
29  data = model
30  return { render }
31}

1import { createApp, reactive } from 'slowly-render/render.js'
2// View，没有状态，完全是展示型组件
3const Header = (data) => `
4  <header>
5    <h1>${data.title}</h1>
6    ${data.keywords.map(e => `<span>${e}</span>`).join(' ')}
7  </header>
8`
9const Content = (data) => `
10  <main>
11    ${data.num}
12  </main>
13  <button onclick="${data.handleDec()}"> - </button>
14  <button onclick="${data.handleInc()}"> + </button>
15`
16const App = (Model) => `
17  ${Header(Model.Header)}
18  ${Content(Model.Counter)}
19`
20// Model，因为是将所有状态放到的顶层，所以兼具状态管理，相当于一个顶层的接入型组件（Container）
21const Model = reactive({
22  Header: {
23    title: 'Slowly Render',
24    keywords: ['The', 'render', 'phase', 'is', 'very', 'slow'],
25  },
26  Counter: {
27    num: 0,
28    // 因为是通过 HTML inline 的方式绑定的事件，需要将事件处理函数放到 window 上，然后返回函数名
29    handleDec() {
30      window.handleDec = () => Model.Counter.num -= 1
31      return 'handleDec()'
32    },
33    handleInc() {
34      window.handleInc = () => Model.Counter.num += 1
35      return 'handleInc()'
36    },
37  },
38})
39
40const rootDom = document.getElementById('root')
41createApp(App, Model, rootDom).render() // mount

1<script>
2  let count = 0;
3
4  function handleClick() {
5    count += 1;
6  }
7</script>
8
9<button on:click={handleClick}>
10  Clicked {count} {count === 1 ? 'time' : 'times'}
11</button>

1/* App.svelte generated by Svelte v3.23.2 */
2import {/* ... */} from "svelte/internal";
3
4function create_fragment(ctx) {
5  let button, t0, t1, mounted, dispose;
6
7  return {
8    c() { // compile
9      button = element("button");
10      t0 = text("Clicked");
11      t1 = text(/*count*/ ctx[0]);
12    },
13    m(target, anchor) { // mount
14      insert(target, button, anchor);
15      append(button, t0);
16      append(button, t1);
17
18      if (!mounted) {
19        dispose = listen(button, "click", /*handleClick*/ ctx[1]); // addEventListener
20        mounted = true;
21      }
22    },
23    p(ctx, [dirty]) { // update
24      if (dirty & /*count*/ 1) set_data(t1, /*count*/ ctx[0]);
25    },
26    i: noop,
27    o: noop,
28    d(detaching) { // unmount
29      if (detaching) detach(button);
30      mounted = false;
31      dispose(); // removeEventListener
32    }
33  };
34}
35
36function instance($$self, $$props, $$invalidate) {
37  // user's codes
38  let count = 0;
39
40  function handleClick() {
41    $$invalidate(0, count += 1);
42  }
43
44  return [count, handleClick];
45}
46
47class App extends SvelteComponent { // 控制权交给 SvelteComponent
48  constructor(options) {
49    super();
50    init(this, options, instance, create_fragment, safe_not_equal, {});
51  }
52}
53
54export default App;

1const store = new Vuex.Store({
2  state: {
3    count: 0
4  },
5  // 管理状态如何变化
6  mutations: {
7    increment(state) {
8      state.count++
9    }
10  },
11  actions: {
12    async increment(context) {
13      await fetch(/* ... */)
14      context.commit('increment')
15    }
16  },
17})

1import { render } from './render.js'
2
3let currentRouterView = () => ''
4let base = ''
5
6export const createHashRouter = (baseUrl, routes) => {
7  base = baseUrl
8  const routesMap = new Map() // JS 中 Map 可以实现 LRU 算法
9  routes.forEach((route) => {
10    routesMap.set(route.path, route.component)
11  })
12
13  const go = (path) => {
14    if (routesMap.has(path)) {
15      window.location.hash = path
16    } else throw new Error('url is not exist.')
17  }
18
19  const handleHashChange = e => {
20    const path = window.location.hash.slice(1) // #/about => /about
21    currentRouterView = routesMap.get(path ? path : '/') // 处理 url 没有 hash 时当作首页处理，127.0.0.1/ => 127.0.0.1/#/
22    render()
23  }
24
25  window.addEventListener('load', handleHashChange)
26  window.addEventListener('hashchange', handleHashChange)
27
28  return { go }
29}
30
31export const createHistoryRouter = (baseUrl, routes) => {
32  // homework :P
33}
34
35export const RouterView = (props) => currentRouterView(props)
36export const RouterLink = (props) => `<a href="${base}${props.url}">${props.text}</a>`

1import { createApp, render, reactive } from 'slowly-render/render.js'
2import { createHashRouter, RouterView, RouterLink } from 'slowly-render/router.js'
3
4const Home = (props) => `
5  <h1>Home Page</h1>
6  <button onclick="${props.handleGoAbout()}">go to about page</button>
7`
8const About = (props) => `<h1>About Page</h1>`
9const App = (Model) => `
10  ${RouterLink({ url: '/', text: 'home' })}
11  ${RouterLink({ url: '/about', text: 'about' })}
12  <div>
13    ${RouterView(Model.Home)}
14  </div>
15`
16
17const router = createHashRouter('/demo/hashRouter/#', [
18  { path: '/', component: Home },
19  { path: '/about', component: About },
20])
21
22const Model = reactive({
23  Home: {
24    handleGoAbout() {
25      window.handleGoAbout = () => router.go('/about') // 命令式路由跳转
26      return 'handleGoAbout()'
27    },
28  },
29})
30
31const rootDom = document.getElementById('root')
32createApp(App, Model, rootDom).render() // mount

1// 1. 定义 (路由) 组件 - 可以从其他文件 import 进来
2const Foo = { template: '<div>foo</div>' }
3const Bar = { template: '<div>bar</div>' }
4
5// 2. 定义路由 - 每个路由应该映射一个组件
6const routes = [
7  { path: '/foo', component: Foo },
8  { path: '/bar', component: Bar },
9]
10
11// 3. 创建 router 实例，然后传 `routes` 配置
12const router = new VueRouter({ routes })

1export default function App() {
2  return (
3    <Router>
4      <div>
5        <nav><Link to="/">Home</Link></nav>
6        <nav><Link to="/about">About</Link></nav>
7
8        <Switch>
9          <Route path="/about">
10            <About />
11          </Route>
12          <Route path="/">
13            <Home />
14          </Route>
15        </Switch>
16      </div>
17    </Router>
18  );
19}

1<style scoped>
2.example {
3  color: red;
4}
5</style>
6
7<template>
8  <div class="example">hi</div>
9</template>

1<style>
2.example[data-v-f3f3eg9] {
3  color: red;
4}
5</style>
6
7<template>
8  <div class="example" data-v-f3f3eg9>hi</div>
9</template>

1<template>
2  <div class="root"><Child /></div>
3</template>
4
5<style scoped>
6.root { display: flex; }
7</style>

1<template>
2  <div class="root">Oops!</div>
3</template>
4
5<style scoped>
6.root { display: inline block; }
7</style>

1<template>
2  <p :class="$style.red">red red red...</p>
3</template>
4
5<style module>
6.red { color: red; }
7</style>

1let uuid = 0 // or use hash
2
3const styleElement = document.createElement('style')
4document.head.appendChild(styleElement)
5
6export const styled = (styles) => {
7  uuid += 1
8
9  styleElement.textContent += `
10    .styled-${uuid} {
11      ${Object.entries(styles).reduce((styles, [key, value]) => styles += `${key}: ${value};`, '')}
12    }
13  `
14
15  return `styled-${uuid}`
16}

1import { createApp, styled } from '../../src/index.js'
2
3const headerStyles = styled({
4  color: 'red',
5})
6
7const mainStyles = styled({
8  'font-size': '30px',
9})
10
11const App = () => `
12  <header class="${headerStyles}">
13    <h1>Rendering My Styles</h1>
14  </header>
15  <main class="${mainStyles}">
16    styling...
17  </main>
18`
19
20const rootDom = document.getElementById('root')
21createApp(App, null, rootDom).render()