-
隐藏 DOM 操作,简化写原生 HTML/CSS/JavaScript Demo 操作
-
使用了 Proxy Map 箭头函数,所以需要浏览器支持 ES2015
-
rea.js 代码不到100行,压缩后 rea.min.js 仅 1.36 KB
-
实现原理是借助 HTML 属性 和 JavaScript Proxy 实现侦听数据变化操作 DOM
<script src="https://baoanj.github.io/rea.js/rea@0.0.1.min.js"></script>
使用方式和 Vue 比较类似。
指令(HTML 属性)支持:
r-变量
r-show-变量
r-model-变量
r-for-变量
r-prop-属性
r-event="事件:方法"
配置(options)支持:
data
computed
methods
<div>
<input type="text" placeholder="开启你的待办事项" maxlength="20" r-model-todoName>
<span r-show-isShowLimit r-todoNameLimit></span>
<select r-model-todoType r-for-typeList>
<option value="r-prop-value">r-prop-label</option>
</select>
<input type="datetime-local" r-model-todoTime>
<button r-event="click:addTodo">添加待办</button>
<span r-show-todoTip r-todoTip></span>
</div>
<div r-for-todoListFormat>
<div class="todo-item todo-item-r-prop-check">
<div r-event="click:checkTodo" class="todo-item-check todo-item-check-r-prop-check"></div>
<span>r-prop-name</span>
<span>r-prop-type</span>
<span>r-prop-time</span>
<button r-event="click:delTodo">删除</button>
</div>
</div>
<script src="https://baoanj.github.io/rea.js/rea@0.0.1.min.js"></script>
<script>
Rea({
data: {},
computed: {},
methods: {}
})
</script>
一个对象,放置数据属性。
-
- 若数据属性的值为数组,可响应数组变更方法:
push
pop
unshift
shift
splice
sort
reverse
索引赋值
- 若数据属性的值为数组,可响应数组变更方法:
-
- 若数据属性的值为对象,暂不支持响应对象内属性值的变化
{
typeList: [
{ label: '高', value: 'h' },
{ label: '中', value: 'm' },
{ label: '低', value: 'l' }
],
todoName: '',
todoType: null,
todoTime: null,
todoList: [
{ name: 'Todo Example 1', type: 'h', time: '2023-08-12T15:18', check: false },
{ name: 'Todo Example 2', type: 'm', time: '2023-08-12T15:18', check: true }
],
todoTip: ''
}
一个对象,每个计算属性是一个函数,this 为当前实例,可访问当前实例的数据属性、计算属性、方法属性。
{
isShowLimit() {
return this.todoName.length > 0
},
todoNameLimit() {
return this.todoName.length + '/20'
},
todoListFormat() {
return this.todoList.map(m => {
return {
name: m.name,
type: this.typeList.find(f => f.value === m.type).label,
time: m.time.replace('T', ' '),
check: m.check
}
})
}
}
一个对象,每个方法属性是一个函数,this 为当前实例,可访问当前实例的数据属性、计算属性、方法属性。
{
addTodo() {
if (!this.todoName) {
this.showTip('请填写待办名称')
return
}
if (!this.todoType) {
this.showTip('请选择优先级')
return
}
if (!this.todoTime) {
this.showTip('请选择待办时间')
return
}
this.todoList.unshift({
name: this.todoName,
type: this.todoType,
time: this.todoTime,
check: false
})
this.todoName = ''
this.todoType = null
this.todoTime = null
},
showTip(msg) {
this.todoTip = msg
setTimeout(() => {
this.todoTip = ''
}, 3000)
},
delTodo(event, index) {
this.todoList.splice(index, 1)
},
checkTodo(event, index) {
this.todoList[index] = Object.assign(this.todoList[index], {
check: !this.todoList[index].check
})
}
}
响应变量值的变化,将变量值写到元素的 textContent
<span r-todoNameLimit></span>
响应变量值的变化,若变量值为 falsy,则将元素的 display 设为 none
<span r-show-isShowLimit></span>
双向绑定,既响应变量值的变化,也监听 input 事件改变值
<input type="text" r-model-todoName>
列表渲染,元素的 innerHTML 作为模板项循环渲染,若 innerHTML 为空则默认模板为 <div>r-prop</div>
<div r-for-simpleList></div>
仅用于 r-for
内的模板,在列表渲染时被直接替换为当前项的对应属性值,r-prop
则替换为当前项
<select r-model-todoType r-for-typeList>
<option value="r-prop-value">r-prop-label</option>
</select>
<div r-for-simpleList><span>r-prop</span></div>
为元素添加事件监听,方法为 methods 声明的方法函数名,方法的参数为原生事件的 event
r-for 里的 r-event 方法有两个参数,第一个是原生事件的 event,第二个是 r-for 的索引
<button r-event="click:addTodo">添加待办</button>
<div r-for-todoListFormat>
<div>
<span>r-prop-name</span>
<span>r-prop-type</span>
<span>r-prop-time</span>
<button r-event="click:delTodo">删除</button>
</div>
</div>
methods: {
addTodo(event) {
//
},
delTodo(event, index) {
//
}
}