Svelte開發筆記

Svelte是個基於Javascript的前端開發框架，跟React不同的是，Svelte的語法跟純javascript比較類似，對於懂html、CSS、Javascript的開發者來說，較容易上手。利用「{}」存取javascript裡的變數，來避免複雜的DOM操作。例如:

<script>
	let name = 'world';
</script>
<h1>Hello {name}!</h1>

因為標準的HTML語法中是不能直接取得javascript裡的變數，必須在javascript裡利用document.getElementById()處理，因為需要取得id，所以，語法就變複雜了，相對的寫法:

<!DOCTYPE html>
<html>
  <body>
  <h1>Hello **<span id="name"></span>**!</p> 
  </body>
  <script>
    let name = 'world';
    **document.getElementById("name").innerHTML = name;**
  </script>
</html>

事實上，svelte是透過編譯去產生完整的javascript (不是夾帶html的javascript)，並透過javascipt去產生html，如下:

/* App.svelte generated by Svelte v3.55.1 */
import {
	SvelteComponent,
	detach,
	element,
	init,
	insert,
	noop,
	safe_not_equal
} from "svelte/internal";

function create_fragment(ctx) {
	let h1;

	return {
		c() {
			h1 = element("h1");
			h1.textContent = `Hello ${name}!`;
		},
		m(target, anchor) {
			insert(target, h1, anchor);
		},
		p: noop,
		i: noop,
		o: noop,
		d(detaching) {
			if (detaching) detach(h1);
		}
	};
}

let name = 'world';

class App extends SvelteComponent {
	constructor(options) {
		super();
		init(this, options, null, create_fragment, safe_not_equal, {});
	}
}

export default App;

Adding Data (Svelte Tutorial)

svelte官方網頁:

next是基於react的框架，svelte的對應框架是svelte kit，Svelte Kit目前還是1.0版，雖然只是1.0版，但是提供的功能與next差距不大。svelte kit官方網頁: