数据流驱动的界面
数据流驱动的界面
广义的数据流驱动的界面有很多的理解，其一是界面层的从以
而随着从传统的前后端未分离的巨石型
DOM 操作与逻辑的剥离
命令式编程与声明式编程
An imperative approach (HOW): I see that table located under the Gone Fishin’ sign is empty. My husband and I are going to walk over there and sit down.
A declarative approach (WHAT): Table for two, please.
The imperative approach is concerned with HOW you’re actually going to get a seat. You need to list out the steps to be able to show HOW you’re going to get a table.The declarative approach is more concerned with WHAT you want, a table for two.
Imperative: C, C++, Java
Declarative: SQL, HTML
(Can Be) Mix: JavaScript, C#, Python
Think about your typical SQL or HTML example,
SELECT * FROM Users WHERE Country=’Mexico’;
<article>
<header>
<h1>Declarative Programming</h1>
<p>Sprinkle Declarative in your verbiage to sound smart</p>
</header>
</article>
const photos = ["photoMoon", "photoSun", "photoSky"];
const cameras = ["canon", "nikon", "Sony"];
// can be const since it's an array will keep as let to identify that it's being changed
let artists = [
{
name: "Thomas Kelley",
link: "https://unsplash.com/@thkelley",
},
{
name: "Thomas Kvistholt",
link: "https://unsplash.com/@freeche",
},
{
name: "Guillaume Flandre",
link: "https://unsplash.com/@gflandre",
},
];
function artistsCorrect() {
for (let i = 0; i < artists.length; i++) {
artists[i].photo = photos[i];
artists[i].camera = cameras[i];
}
}
artistsCorrect();
console.log("result ->", artists);
const photos = ["photoMoon", "photoSun", "photoSky"];
const cameras = ["canon", "nikon", "Sony"];
const artists = [
{
name: "Thomas Kelley",
link: "https://unsplash.com/@thkelley",
},
{
name: "Thomas Kvistholt",
link: "https://unsplash.com/@freeche",
},
{
name: "Guillaume Flandre",
link: "https://unsplash.com/@gflandre",
},
];
function artistsCorrect(artistsList, photosList, camerasList) {
return artistsList.map((artist, index) => {
const extraValues = {
photo: photosList[index],
camera: camerasList[index],
};
return Object.assign({}, artist, extraValues);
});
}
const result = artistsCorrect(artists, photos, cameras);
console.log("result ->", result);
声明式组件
<i> 节点的方式将数据插入到
在现代
// Email field
$("#email-field").on("blur", function () {
username = $(this).val();
if (username == "") {
$("#email-error").html("Please enter email address");
$("#signup-button").attr("disabled", true);
} else {
checkValues();
}
});
这种方式也显而易见的存在很多的代码冗余，导致整体的可读性与重构性降低，譬如邮箱与密码这两个输入域都会在失去焦点时进行验证，并且判断是否设置按钮失效。而在声明式编程中，我们可以将公用的部分业务逻辑代码，即是偏向于计算的、表达式形式的代码剥离出来，可以得到如下的封装：
function checkIfEmpty(e) {
return !e.target.value;
}
function checkIfBothEmpty(noEmail, noPass) {
return noEmail || noPass;
}
function getEmailMessage(noEmail) {
return noEmail ? "Please enter email address." : "";
} // Email field
var email = $("#email-field").asEventStream("blur").map(checkIfEmpty);
email.map(getEmailMessage).assign($("#email-error"), "html");
代码更加清晰易懂，并且对于空判断这些公共逻辑代码的提出也方便了我们进行重构或者对于业务逻辑的变化进行快速响应。未来如果我们需要添加
<select value={this.state.value} onChange={this.handleChange}>
{somearray.map((element) => (
<option value={element.value}>{element.text}</option>
))}
</select>
组件化也允许我们更好地分割前端代码：
声明式组件并非禁绝了View = f(Template, Props)(State)
Virtual DOM
如我们所知，在浏览器渲染网页的过程中，加载到data-reactid属性，这有助于React.createElement函数的抽象，而该函数主要的作用是将朴素的
在现代浏览器中，对于
GUI 应用程序架构的变迁
函数式编程与Redux
函数式编程
在软件开发中有一句名言：共享的可变状态是万恶之源，即 Mutable shared state is the root of all evil in concurrent systems.，而函数式编程正是能够彻底解决共享状态。函数式编程本质上也是一种编程范式
共享状态
纯函数指那些仅根据输入参数决定输出并且不会产生任何副作用的函数。纯函数最优秀的特性之一在于其结果的可预测性：
var z = 10;
function add(x, y) {
return x + y;
}
console.log(add(1, 2)); // prints 3
console.log(add(1, 2)); // still prints 3
console.log(add(1, 2)); // WILL ALWAYS print 3
副作用指那些在函数调用过程中没有通过返回值表现的任何可观测的应用状态变化，常见的副作用包括但不限于修改任何外部变量或者外部对象属性、在控制台中输出日志、写入文件、发起网络通信、触发任何外部进程事件、调用任何其他具有副作用的函数等。在函数式编程中我们会尽可能地规避副作用，保证程序更易于理解与测试。
const a = Object.freeze({
foo: "Hello",
bar: "world",
baz: "!",
});
a.foo = "Goodbye";
// Error: Cannot assign to read only property 'foo' of object Object
函数式编程倾向于重用一系列公共的纯函数来处理数据，而面向对象编程则是将方法与数据封装到对象内。这些被封装起来的方法复用性不强，只能作用于某些类型的数据，往往只能处理所属对象的实例这种数据类型。而函数式编程中，任何类型的数据则是被一视同仁，譬如map()函数允许开发者传入函数参数，保证其能够作用于对象、字符串、数字，以及任何其他类型。
const add10 = (value) => value + 10;
const mult5 = (value) => value * 5;
const mult5AfterAdd10 = (value) => 5 * (value + 10);