「强哥」谈谈魔法消失UI框架

Svelte 则不同，它从开始就决定把其他框架在浏览器所完成的大部分工作转换到构建中的编译步骤,以便于减少应用代码量。它通过静态分析来做到按需提供功能(完全不需要引入)，同时它也可以分析得出根据你当前的修改精准更新 dom的代码来提升性能。

我们以最简单的代码为例子。

// App.svelte

Hello world!

// main.js
import App from ‘./App.svelte’;

const app = new App({
target: document.body
});

export default app;
实际上开发版会被编译为(为了简化，只分析部分,不分析全部代码)

// IIFE 立即执行函数表达式
var app = (function () {
‘use strict’;
// 空函数，用于某些需要提供函数的代码
function noop() { }
// 当前 元素所在的行 列 前面有多少字符等信息，开发版存在
function add_location(element,
file,
line,
column,
char) {
element.__svelte_meta = {
loc: { file, line, column, char }
};
}
//
// 操作dom辅助函数,减少代码量…(相当于运行时)
function insert(target, node, anchor) {
target.insertBefore(node, anchor || null);
}
function detach(node) {
node.parentNode.removeChild(node);
}
function element(name) {
return document.createElement(name);
}
function children(element) {
return Array.from(element.childNodes);
}
// 异步处理修改过的组件
// (实际上这些代码在当前场景下不需要，可以去除，但没必要）
const dirty_components = [];
const binding_callbacks = [];
const render_callbacks = [];
const flush_callbacks = [];
const resolved_promise = Promise.resolve();
let update_scheduled = false;
function schedule_update() {
// …
}
function add_render_callback(fn) {
// …
}
function flush() {
// …
}
function update($$) {
}

// 当前文件，开发版
const file = “src\App.svelte”;

function create_fragment(ctx) {
let h1;

const block = {
  // 创建  
  c: function create() {
	h1 = element("h1");
	h1.textContent = "Hello world!";
	add_location(h1, file, 1, 9, 10);
  },
  // 挂载刚才创建的元素
  m: function mount(target, anchor) {
    // 上面的 target 是 document.body  
	insert_dev(target, h1, anchor);
  },
  // 修改，脏组件在上述 update 中被调用 
  p: noop,
  // 删除  
  d: function destroy(detaching) {
	if (detaching) detach_dev(h1);
  }
};

dispatch_dev("SvelteRegisterBlock", {
  block,
  id: create_fragment.name,
  type: "component",
	source: "",
	ctx
});
return block;

}
}());