当前位置: 首页 > Web前端 > HTML

现在常说的declarativestyle是什么?一篇讲什么是declarative的文章

时间:2023-03-28 18:25:58 HTML

在理解declarative之前,先说说declarative的含义。通常我们说的声明一个变量,声明一个函数,其实质就是用一套语法来描述我们想要表达的内容,同样的,对于现代前端框架提供的声明式编程,它并不是指代某个变量或者function,它代表了一种编程模型,本质也是框架为开发者提供了一套标准(比如jsx和vue的Template语法)来描述UIdeclarative在前端应用中的体现,其实就是这样一种函数表达:UI=Fn(X),其中UI指的是网页,Fn指的是我们写的声明式组??件,X指的是State比如这个Vue模板,我们通常说它是声明式的Count为:{{count}}

另外大家可能听说过命令式,直接看代码//app.html
//app.jsletcount=0;constbtnElement=document.querySelector('#appbutton');btnElement.textContent=`Countis:${count}`btnElement.addEventListener('click',()=>{count++;btnElement.textContent=`Countis:${count}`});对比声明式风格和命令式风格,你会发现命令式语句通常是原生语句,而声明式风格依赖于框架提供的特性。其实说白了,声明式代码在框架运行时编译/解释后,就是一句一句的命令式代码。由此,我们可以得出一个简单的结论:声明式编程本身就是一个概念,一种思想,而声明式语法往往是某种框架对命令式逻辑的上层抽象,将原本繁琐的逻辑用简洁的语法表达出来。什么是状态严格来说,状态和变量并不完全等价,状态是变量的子集。通常我们调用一个带有交互状态的变量,什么是交互,看一个例子如下逻辑中,count不参与页面交互,它只是内存中的一个值,对用户来说是无所谓的,通常我们不会称它为stateletcount=0;for(leti=0;i<10;i++){count=+1;}但如果这样重写,count将呈现在页面上并且单击按钮它将递增它值并重新渲染。此时count参与到与用户的交互过程中,具有交互性。通常可以调用状态letcount=0;constbtnElement=document.querySelector('#appbutton');btnElement.textContent=`Countis:${count}`btnElement.addEventListener('click',()=>{count++;btnElement.textContent=`Countis:${count}`});对于state的解释不限于上面的例子,比如在正常的业务开发中,判断一个modal是否显示的变量visible也称为state,因为visible的变化会引起view的变化,这样的变量就是参与交互但不直接渲染到视图,也属于这一类。