Ember Polaris vs Solid.js - JavaScript 框架语法对比

响应式

声明状态

Ember Polaris

import Component from "@glimmer/component";

export default class NameComponent extends Component {
  name = "张三";

  <template>
    <h1>你好 {{this.name}}</h1>
  </template>
}

Solid.js

import { createSignal } from "solid-js";

export default function Name() {
  const [name] = createSignal("张三");

  return <h1>你好 {name()}</h1>;
}

更新状态

Ember Polaris

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";

export default class CounterComponent extends Component {
  @tracked name = "张三";

  constructor(owner, args) {
    super(owner, args);

    this.name = "李四";
  }

  <template>
    <h1>你好 {{this.name}}</h1>
  </template>
}

Solid.js

import { createSignal } from "solid-js";

export default function Name() {
  const [name, setName] = createSignal("张三");
  setName("李四");

  return <h1>你好 {name()}</h1>;
}

计算属性

Ember Polaris

import Component, { tracked } from "@glimmer/component";

export default class DoubleCount extends Component {
  @tracked count = 10;

  get doubleCount() {
    return this.count * 2;
  }

  <template>
    <div>{{this.doubleCount}}</div>
  </template>
}

Solid.js

import { createSignal } from "solid-js";

export default function DoubleCount() {
  const [count] = createSignal(10);
  const doubleCount = () => count() * 2;

  return <div>{doubleCount()}</div>;
}

模板语法

最简模板

Ember Polaris

<template>
  <h1>你好，世界</h1>
</template>

Solid.js

export default function HelloWorld() {
  return <h1>你好，世界</h1>;
}

样式

Ember Polaris

<template>
  <h1 class="title">我是红色的</h1>
  <button style="font-size: 10rem;">我是一个按钮</button>

  <style>
    .title {
      color: red;
    }
  </style>
</template>

Solid.js

import "./style.css";

export default function CssStyle() {
  return (
    <>
      <h1 class="title">我是红色的</h1>
      <button style={{ "font-size": "10rem" }}>我是一个按钮</button>
    </>
  );
}

DOM循环

Ember Polaris

const colors = ["红", "绿", "蓝"];

<template>
  <ul>
    {{#each colors as |color|}}
      <li>{{color}}</li>
    {{/each}}
  </ul>
</template>

Solid.js

import { For } from "solid-js";

export default function Colors() {
  const colors = ["红", "绿", "蓝"];

  return (
    <ul>
      <For each={colors}>{(color) => <li>{color}</li>}</For>
    </ul>
  );
}

点击事件

Ember Polaris

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";

export default class Counter extends Component {
  @tracked count = 0;

  incrementCount = () => this.count++;

  <template>
    <p>计数器: {{this.count}}</p>
    <button {{on "click" this.incrementCount}}>+1</button>
  </template>
}

Solid.js

import { createSignal } from "solid-js";

export default function Counter() {
  const [count, setCount] = createSignal(0);

  function incrementCount() {
    setCount(count() + 1);
  }

  return (
    <>
      <p>计数器: {count()}</p>
      <button onClick={incrementCount}>+1</button>
    </>
  );
}

DOM引用

Ember Polaris

import { modifier } from "ember-modifier";

const autofocus = modifier((element) => element.focus());

<template>
  <input {{autofocus}} />
</template>

Solid.js

import { onMount } from "solid-js";

export default function InputFocused() {
  let inputElement;

  onMount(() => inputElement.focus());

  return <input ref={inputElement} type="text" />;
}

条件渲染

Ember Polaris

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";

const TRAFFIC_LIGHTS = ["红灯", "黄灯", "绿灯"];

export default class TrafficLight extends Component {
  @tracked lightIndex = 0;

  get light() {
    return TRAFFIC_LIGHTS[this.lightIndex];
  }

  nextLight = () => {
    this.lightIndex = (this.lightIndex + 1) % TRAFFIC_LIGHTS.length;
  };

  <template>
    <button {{on "click" this.nextLight}}>下一个灯</button>
    <p>现在亮着的是: {{this.light}}</p>
    <p>
      你应该
      {{#if (eq this.light "红灯")}}
        停下
      {{else if (eq this.light "黄灯")}}
        慢行
      {{else if (eq this.light "绿灯")}}
        赶紧走
      {{/if}}
    </p>
  </template>
}

Solid.js

import { createSignal, Switch, Match } from "solid-js";

const TRAFFIC_LIGHTS = ["红灯", "黄灯", "绿灯"];

export default function TrafficLight() {
  const [lightIndex, setLightIndex] = createSignal(0);

  const light = () => TRAFFIC_LIGHTS[lightIndex()];

  function nextLight() {
    setLightIndex((lightIndex() + 1) % TRAFFIC_LIGHTS.length);
  }

  return (
    <>
      <button onClick={nextLight}>下一个灯</button>
      <p>现在亮着的是: {light()}</p>
      <p>
        你应该
        <Switch>
          <Match when={light() === "红灯"}>
            <span>停下</span>
          </Match>
          <Match when={light() === "黄灯"}>
            <span>慢行</span>
          </Match>
          <Match when={light() === "绿灯"}>
            <span>赶紧走</span>
          </Match>
        </Switch>
      </p>
    </>
  );
}

生命周期

组件加载时

Ember Polaris

const pageTitle = () => document.title;

<template>
  <p>页面标题: {{(pageTitle)}}</p>
</template>

Solid.js

import { createSignal, onMount } from "solid-js";

export default function PageTitle() {
  const [pageTitle, setPageTitle] = createSignal("");

  onMount(() => {
    setPageTitle(document.title);
  });

  return <p>页面标题: {pageTitle()}</p>;
}

组件卸载时

Ember Polaris

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { registerDestructor } from "@ember/destroyable";

export default class Time extends Component {
  @tracked time = new Date().toLocaleTimeString();

  constructor(owner, args) {
    super(owner, args);

    let timer = setInterval(() => {
      this.time = new Date().toLocaleTimeString();
    }, 1000);

    registerDestructor(this, () => clearInterval(timer));
  }

  <template>
    <p>当前时间: {{this.time}}</p>
  </template>
}

Solid.js

import { createSignal, onCleanup } from "solid-js";

export default function Time() {
  const [time, setTime] = createSignal(new Date().toLocaleTimeString());

  const timer = setInterval(() => {
    setTime(new Date().toLocaleTimeString());
  }, 1000);

  onCleanup(() => clearInterval(timer));

  return <p>当前时间: {time()}</p>;
}

组件组合

组件Props传参

Ember Polaris

import UserProfile from "./user-profile.gjs";

const favoriteColors = ["green", "blue", "red"];

<template>
  <UserProfile
    @name="张三"
    @age={{20}}
    @favouriteColors={{favoriteColors}}
    @isAvailable={{true}}
  />
</template>

Solid.js

import UserProfile from "./UserProfile.jsx";

export default function App() {
  return (
    <UserProfile
      name="张三"
      age={20}
      favouriteColors={["green", "blue", "red"]}
      isAvailable
    />
  );
}

向父组件emit事件

Ember Polaris

<template>
  <button {{on "click" @onYes}}> 是的！ </button>
  <button {{on "click" @onNo}}> 不是！ </button>
</template>

Solid.js

import { createSignal } from "solid-js";
import AnswerButton from "./AnswerButton.jsx";

export default function App() {
  const [isHappy, setIsHappy] = createSignal(true);

  function onAnswerNo() {
    setIsHappy(false);
  }

  function onAnswerYes() {
    setIsHappy(true);
  }

  return (
    <>
      <p>你快乐吗?</p>
      <AnswerButton onYes={onAnswerYes} onNo={onAnswerNo} />
      <p style={{ "font-size": "50px" }}>{isHappy() ? "😀" : "😥"}</p>
    </>
  );
}

slot插槽

Ember Polaris

import FunnyButton from "./funny-button";

<template>
  <FunnyButton>点我!</FunnyButton>
</template>

Solid.js

import FunnyButton from "./FunnyButton.jsx";

export default function App() {
  return <FunnyButton>点我!</FunnyButton>;
}

slot插槽内容

Ember Polaris

import FunnyButton from "./funny-button";

<template>
  <FunnyButton />
  <FunnyButton>这是传到slot的内容!</FunnyButton>
</template>

Solid.js

import FunnyButton from "./FunnyButton.jsx";

export default function App() {
  return (
    <>
      <FunnyButton />
      <FunnyButton>这是传到slot的内容!</FunnyButton>
    </>
  );
}

上下文

Ember Polaris

import UserProfile from "./user-profile";

<template>
    <UserProfile />
</template>

Solid.js

import { createSignal } from "solid-js";

import { UserContext } from "./UserContext";
import UserProfile from "./UserProfile";

export default function App() {
  const [user, setUser] = createSignal({
    id: 1,
    username: "abcdefg",
    email: "[email protected]",
  });

  function updateUsername(newUsername) {
    setUser({ ...user(), username: newUsername });
  }

  return (
    <>
      <h1>欢迎回来, {user().username}</h1>
      <UserContext.Provider value={[user, updateUsername]}>
        <UserProfile />
      </UserContext.Provider>
    </>
  );
}

表单输入

输入框

Ember Polaris

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";

export default class InputHello extends Component {
  @tracked text = "你好世界";

  handleInput = (event) => (this.text = event.target.value);

  <template>
    <p>{{this.text}}</p>
    <input value={{this.text}} {{on "input" this.handleInput}} />
  </template>
}

Solid.js

import { createSignal } from "solid-js";

export default function InputHello() {
  const [text, setText] = createSignal("你好世界");

  function handleChange(event) {
    setText(event.target.value);
  }

  return (
    <>
      <p>{text()}</p>
      <input value={text()} onInput={handleChange} />
    </>
  );
}

复选框

Ember Polaris

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";

export default class InputHello extends Component {
  @tracked isAvailable = false;

  handleChange = (event) => (this.isAvailable = event.target.checked);

  <template>
    <input
      id="is-available"
      type="checkbox"
      checked={{this.isAvailable}}
      {{on "change" this.handleChange}}
    />
    <label for="is-available">这是一个checkbox</label>
  </template>
}

Solid.js

import { createSignal } from "solid-js";

export default function IsAvailable() {
  const [isAvailable, setIsAvailable] = createSignal(false);

  function handleChange() {
    setIsAvailable((previousValue) => !previousValue);
  }

  return (
    <>
      <input
        id="is-available"
        type="checkbox"
        checked={isAvailable()}
        onChange={handleChange}
      />
      <label for="is-available">这是一个checkbox</label>
    </>
  );
}

单选框

Ember Polaris

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";

export default class PickPill extends Component {
  @tracked picked = "red";

  handleChange = (event) => (this.picked = event.target.value);

  <template>
    <div>你选择了: {{this.picked}}</div>

    <input
      id="blue-pill"
      type="radio"
      value="blue"
      checked={{eq this.picked "blue"}}
      {{on "change" this.handleChange}}
    />
    <label htmlFor="blue-pill">蓝色</label>

    <input
      id="red-pill"
      type="radio"
      value="red"
      checked={{eq this.picked "red"}}
      {{on "change" this.handleChange}}
    />
    <label htmlFor="red-pill">红色</label>
  </template>
}

Solid.js

import { createSignal } from "solid-js";

export default function PickPill() {
  const [picked, setPicked] = createSignal("red");

  function handleChange(event) {
    setPicked(event.target.value);
  }

  return (
    <>
      <div>你选择了: {picked()}</div>
      <input
        id="blue-pill"
        checked={picked() === "blue"}
        type="radio"
        value="blue"
        onChange={handleChange}
      />
      <label for="blue-pill">蓝色</label>

      <input
        id="red-pill"
        checked={picked() === "red"}
        type="radio"
        value="red"
        onChange={handleChange}
      />
      <label for="red-pill">红色</label>
    </>
  );
}

选择器

Ember Polaris

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";

export default class ColorSelect extends Component {
  @tracked selectedColorId = 2;

  select = (event) => (this.selectedColorId = event.target.value);

  isSelected = (colorId) => this.selectedColorId === colorId;

  colors = [
    { id: 1, text: "红" },
    { id: 2, text: "蓝" },
    { id: 3, text: "绿" },
    { id: 4, text: "灰", isDisabled: true },
  ];

  <template>
    <select {{on "change" this.select}}>
      {{#each this.colors as |color|}}
        <option
          value={{color.id}}
          disabled={{color.isDisabled}}
          selected={{this.isSelected color.id}}
        >
          {{color.text}}
        </option>
      {{/each}}
    </select>
  </template>
}

Solid.js

import { createSignal, For } from "solid-js";

const colors = [
  { id: 1, text: "红" },
  { id: 2, text: "蓝" },
  { id: 3, text: "绿" },
  { id: 4, text: "灰", isDisabled: true },
];

export default function ColorSelect() {
  const [selectedColorId, setSelectedColorId] = createSignal(2);

  function handleChange(event) {
    setSelectedColorId(event.target.value);
  }

  return (
    <select value={selectedColorId()} onChange={handleChange}>
      <For each={colors}>
        {(color) => (
          <option value={color.id} disabled={color.isDisabled}>
            {color.text}
          </option>
        )}
      </For>
    </select>
  );
}

Web应用特性

渲染应用

Ember Polaris

<!doctype html>
<html>
  <body>
    <script type="module" src="./index.js"></script>
  </body>
</html>

Solid.js

<!doctype html>
<html>
  <body>
    <div id="app"></div>
    <script type="module" src="./main.jsx"></script>
  </body>
</html>

fetch获取数据

Ember Polaris

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";

class State {
  @tracked isLoading = false;
  @tracked error = null;
  @tracked data = null;
}

function fetchUsers() {
  let state = new State();
  
  async function fetchData() {
    try {
      let response = await fetch("https://randomuser.me/api/?results=3");
      let { results: users } = await response.json();
      state.data = users;
      state.error = null;
    } catch (err) {
      state.data = null;
      state.error = err;
    }
    state.isLoading = false;
  }
  
  fetchData();
  return state;
}

export default class App extends Component {
  <template>
    {{#let (this.fetchUsers) as |request|}}
      {{#if request.isLoading}}
        <p>正在获取用户信息……</p>
      {{else if request.error}}
        <p>获取用户信息出错</p>
      {{else}}
        <ul>
          {{#each request.data as |user|}}
            <li>
              <img src={{user.picture.thumbnail}} alt="user" />
              <p>{{user.name.first}} {{user.name.last}}</p>
            </li>
          {{/each}}
        </ul>
      {{/if}}
    {{/let}}
  </template>
}

Solid.js

import { createResource, For, Switch, Match } from "solid-js";

async function fetchUsers() {
  return (await fetch("https://randomuser.me/api/?results=3")).json();
}

export default function App() {
  const [data] = createResource(fetchUsers);
  const users = () => data()?.results;

  return (
    <Switch>
      <Match when={data.loading}>
        <p>正在获取用户信息……</p>
      </Match>
      <Match when={data.error}>
        <p>获取用户信息出错</p>
      </Match>
      <Match when={users()}>
        <ul>
          <For each={users()}>
            {(user) => (
              <li>
                <img src={user.picture.thumbnail} alt="user" />
                <p>
                  {user.name.first} {user.name.last}
                </p>
              </li>
            )}
          </For>
        </ul>
      </Match>
    </Switch>
  );
}

响应式 #

声明状态 #

Ember Polaris

Solid.js

更新状态 #

Ember Polaris

Solid.js

计算属性 #

Ember Polaris

Solid.js

模板语法 #

最简模板 #

Ember Polaris

Solid.js

样式 #

Ember Polaris

Solid.js

DOM循环 #

Ember Polaris

Solid.js

点击事件 #

Ember Polaris

Solid.js

DOM引用 #

Ember Polaris

Solid.js

条件渲染 #

Ember Polaris

Solid.js

生命周期 #

组件加载时 #

Ember Polaris

Solid.js

组件卸载时 #

Ember Polaris

Solid.js

组件组合 #

组件Props传参 #

Ember Polaris

Solid.js

向父组件emit事件 #

Ember Polaris

Solid.js

slot插槽 #

Ember Polaris

Solid.js

slot插槽内容 #

Ember Polaris

Solid.js

上下文 #

Ember Polaris

Solid.js

表单输入 #

输入框 #

Ember Polaris

Solid.js

复选框 #

Ember Polaris

Solid.js

单选框 #

Ember Polaris

Solid.js

选择器 #

Ember Polaris

Solid.js

Web应用特性 #

渲染应用 #

Ember Polaris

Solid.js

fetch获取数据 #

Ember Polaris

Solid.js

响应式

声明状态

更新状态

计算属性

模板语法

最简模板

样式

DOM循环

点击事件

DOM引用

条件渲染

生命周期

组件加载时

组件卸载时

组件组合

组件Props传参

向父组件emit事件

slot插槽

slot插槽内容

上下文

表单输入

输入框

复选框

单选框

选择器

Web应用特性

渲染应用

fetch获取数据