向大家推荐一款超轻量级前端框架 Lightue
-
项目描述：
- Lightue是一款超轻量级前端框架，类似Vue、React，但是体积仅不到2.5KB（min+br）。它让你可以用现代的方式创建网页：声明状态，更改状态后框架可以自动更新dom，将页面拆分成很多函数组件以复用等。项目学习及使用成本极低，提供的函数式(v1.x)或对象式(v0.x)模板声明写法让使用者可以无需编译便可采用类似jsx的方式编写页面。
- 目前尚未成熟到可以支持大型项目的程度，不过可以用来搭建一些自己的小型项目，或在大型项目的局部使用。初学者学习后可以快速搭建自己的页面。框架源码仅300行左右，初学者也可以自己查看源码，从而学习框架的原理。
-
推荐理由：轻量小巧，上手简单，创新型设计
-
示例代码(v1.x)：
// specify application state
var S = Lightue.useState({
text: "Hello world!"
}),
{ div, button, form, input, label } = Lightue;
// create Lightue instance, it'll automatically mount to body by default
var vm = Lightue(
// for static content just specify statically
div.hi("Hi world!"),
// for dynamic content that depends on state, use a state function (a function that uses state)
div.hello(S.$text),
// it's easy to set attributes and add event listeners
button(
{ type: "button", onclick: () => (S.text = "clicked!") },
"Try click me"
),
// you can easily append more child, or show it conditionally
form(
{ $if: () => S.text == "clicked!", action: "#", method: "post" },
label("Name: ", input({ name: "name" })),
label("Age: ", input({ name: "age" }))
)
);
// change the state after 2 seconds and the DOM automatically get updated
setTimeout(function () {
S.text = "Hello again!";
}, 2000);
- 示例代码(v0.x)：
// specify application state
var S = Lightue.useState({
text: 'Hello world!'
})
// create Lightue instance
var vm = Lightue({
// for static content just specify statically
hi: 'Hi world!',
// for dynamic content that depends on state, use a state function (a function that uses state)
hello: () => S.text
}, {
el: '#app' // append to <div id='app'></div>
})
// change the state after 2 seconds and the DOM automatically get updated
setTimeout(function() {
S.text = 'Hello again!'
}, 2000)
