是为了省略一个 await 或者 yield 吗

您是说静态分析吗？对于静态分析来说以下两者是完全一样的： <div class="highlight highlight-source-js notranslate

您是说静态分析吗？对于静态分析来说以下两者是完全一样的： <div class="highlight highlight-source-j

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

对，我从最后一个例子的最后看出来了。也许可以这样？ <div class="highlight highlight-source-js notranslate po

<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" da

所以为什么不使用函数式的声明？ about plasmolysis HOT 13 CLOSED

langyo commented on June 3, 2024

所以为什么不使用函数式的声明？

from plasmolysis.

Comments (13)

langyo commented on June 3, 2024

使用数组的根本目的是为了能让控制流进行静态解析如果您看过 packages/action-preset 中的源码，您会发现这数组在运行时本质上储存的并非是一个充满函数的数组，而是一个充满含有 type 键的对象的数组例如： ```javascript [ setState(payload => ({ count: payload.count + 1}) ] ``` 它在运行时实质上会是这样的(仅举例子)： ```javascript [ { type: 'preset-set-state', func: payload => ({ count: payload.count + 1}) } ] ``` 也许您可能会想起 redux，是的，nickelcat 与 redux 的工作方式颇有相通之处，但最终的状态储存并非像 redux 那样完全放在一棵总的 state 树中，而是每一份 model 都有自己的 state 树(不过，nickelcat 仍然提供了全局 state 树，方便储存持久性数据) 另外，您所提到的 try/catch 的想法是很好的，本人也正在考虑新的解决思路，尽量以优雅的方式加入对动作的异常处理，这需要一些时间斟酌

from plasmolysis.

Alan-Liang commented on June 3, 2024

您是说静态分析吗？对于静态分析来说以下两者是完全一样的：

[
  a(),
  ...bMixin(),
  c(),
]

和

() => {
  a()
  bMixin()
  c()
}

静态的话都分析不出来是干嘛的。如果您说的是控制流的话，我的意思是类似 React Hooks 的方式，用户给的函数其实只在初始化的时候调用一遍(和数组的方式一样)。

from plasmolysis.

langyo commented on June 3, 2024

您是说静态分析吗？对于静态分析来说以下两者是完全一样的：
[
  a(),
  ...bMixin(),
  c(),
]
和
() => {
  a()
  bMixin()
  c()
}
静态的话都分析不出来是干嘛的。如果您说的是控制流的话，我的意思是类似 React Hooks 的方式，用户给的函数其实只在初始化的时候调用一遍(和数组的方式一样)。

值得考虑，但那样又得大规模重构了，，

再让我想想吧，，

from plasmolysis.

Alan-Liang commented on June 3, 2024

不过有个缺点就是写着写着习惯了就会写出if(...)doSth()这样的代码

from plasmolysis.

langyo commented on June 3, 2024

@Alan-Liang 其实呢，这个框架有一个尚未公开说明的特性，它能以比较优雅的方式实现您刚刚所说的判断执行

来看个例子:

[
  fetch(...),
  [
    ({ result }) => result === 'success',
    createModel('alert', { info: 'Login success!', color: 'green' })
  ],
  [
    ({ result }) => result === 'fail',
    createModel(({ reason }) => ({ type: 'alert', payload: { info: `Login failed, because ${reason}.`, color: 'red' }}))
  ]
]

每一个数组都是控制流，控制流内可以内嵌子控制流，并且子控制流的开头可以是一个返回布尔值的函数——函数执行后返回结果如果为 true，才会执行这个子控制流，否则越过这个子控制流

from plasmolysis.

Alan-Liang commented on June 3, 2024

对，我从最后一个例子的最后看出来了。也许可以这样？

() => {
  const { result, reason } = fetch(...)
  mark(result, 'success', createModel('alert', ...))
  mark(() => result.value === 'fail', createModel('alert', { info: () => `Login failed, because ${reason.value}`, color: 'red' }))
}

或者

markIf(result, 'success')
  .then(createModel(...))
  .else(createModel(...))

怎么看怎么像 DSL 😂

from plasmolysis.

Alan-Liang commented on June 3, 2024

const log = wrap(console.log.bind(console))
createAppOrSomething({
  // ...
  onSubmitLoginRequest() {
    const loginWaitingModel = createModel('waitDialog', { title: 'Logging in...' })
    const { name, password } = state
    log(() => `name is ${name.value}, password is ${password.value}`)
    log(unwrapRef`name is ${name}, password is ${password}`)
    const { state: loginState } = fetch('/api/login', { name, password })
    handleOnServer(
      markIf(searchDb({ collection: 'users', payload }).error)
        .then(reply({ state: 'success' }))
        .else(reply({ state: 'fail' }))
    )
    loginWaitingModel.destroy()
    markIf(loginState, 'success')
      .then(() => {
        const successInfoDialog = createDialog('infoDialog', { title: 'Login success!' })
        wait(3000)
        successInfoDialog.destroy()
      }).else(() => {
        const failInfoDialog = createDialog('infoDialog', { title: 'Login failed!' })
        wait(3000)
        failInfoDialog.destroy()
      })
  },
  // ...
})

变成这样：

onSubmitLoginRequest: [
  {
    type: 'create-model',
    payload: [ 'waitDialog', { title: 'Logging in...' } ],
    result: 'create-model-1',
  },
  {
    type: 'external-function-call',
    func: console.log.bind(console),
    payload: __state => `name is ${__state.name.value}, password is ${__state.password.value}`,
  },
  {
    type: 'external-function-call',
    func: console.log.bind(console),
    payload: __state => `name is ${__state.name.value}, password is ${__state.password.value}`, // unwrapRef 编译成这样
  },
  {
    type: 'fetch',
    payload: [ '/api/login', __state => ({ name: __state.name, password: __state.password }) ],
    result: 'fetch-2',
  },
  {
    type: 'handle-on-server',
    callback: [
      {
        type: 'mark-if',
        condition: [
          {
            type: 'search-db',
            payload: payload => [ { collection: 'users', payload } ],
            result: 'search-db-3',
            return: res => res.error,
          }
        ],
        then: [ { type: 'reply', payload: [ { state: 'success' } ] } ],
        else: [ { type: 'reply', payload: [ { state: 'fail' } ] } ],
      }
    ]
  },
  {
    type: 'destroy-model',
    payload: [ 'create-model-1' ],
  },
  {
    type: 'mark-if',
    cond: [
      {
        type: 'compare',
        payload: [
          {
            type: 'variable',
            name: 'fetch-2',
            return: res => res.state
          },
          {
            type: 'constant',
            value: 'success',
          },
        ],
      },
    ],
    then: [
      {
        type: 'create-dialog',
        payload: [ 'infoDialog', { title: 'Login success!' } ],
        result: 'create-dialog-4',
      },
      {
        type: 'wait',
        payload: [ 3000 ],
      },
      {
        type: 'destroy-dialog',
        payload: [ 'create-dialog-4' ],
      },
    ],
    else: [
      {
        type: 'create-dialog',
        payload: [ 'infoDialog', { title: 'Login failed!' } ],
        result: 'create-dialog-4',
      },
      {
        type: 'wait',
        payload: [ 3000 ],
      },
      {
        type: 'destroy-dialog',
        payload: [ 'create-dialog-4' ],
      },
    ],
  },
]

from plasmolysis.

langyo commented on June 3, 2024

mark 太丑了... 你这么一给还反而不如用原生 if 判定呢... 看来还是数组比较实用(不过以后仍然可能更改) 不过经你这么一提醒，我想起来循环执行的事了，可能我会想法子加入循环控制流特性

…

对，我从最后一个例子的最后看出来了。也许可以这样？ () => { const { result, reason = fetch(...) mark(() => result.value === 'success', () => createModel('alert', ...)) mark(() => result.value === 'fail', () => createModel('alert', { info: () => `Login failed, because ${reason.value}`, color: 'red' })) } 或者 markIf(() => result.value === 'success') .then(() => createModel(...)) .else(() => createModel(...)) 怎么看怎么像 DSL 😂 — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub, or unsubscribe. [ { ***@***.***": "<a href=http://schema.org>http://schema.org</a>", ***@***.***": "EmailMessage", "potentialAction": { ***@***.***": "ViewAction", "target": "<a href=#2 (comment)>", "url": "<a href=#2 (comment)>", "name": "View Issue" }, "description": "View this Issue on GitHub", "publisher": { ***@***.***": "Organization", "name": "GitHub", "url": "<a href=https://github.com>https://github.com</a>" } } ]

from plasmolysis.

langyo commented on June 3, 2024

说实在的，你的写法已经吸引到我了，但其中仍然存在很大的问题... 第一个是有关 createModel 的。在我的设计中，createModel 作为一个动作，是不会试图给调用者返回一个具体的实例对象的，而是自动对全局变量进行操作、添加一个新的键。为何不返回具体实例对象呢？其实是因为作用域——如果不有效储存这个返回的实例对象，一旦被垃圾回收器删除就不能正常渲染这个 model 了。第二个是有关 mark 的。markIf 的这种类似 Promise 链的写法其实很好，但如果真用函数式，这完全可以用原生的 if 解决了。而且不断用 mark 包裹的写法其实也挺麻烦，看起来也不优雅。第三个是有关服务端与客户端分离的事情。一旦像您这样写成函数式，我就很难在不执行函数的情况下知晓我应该为这个控制流在服务端进行哪些工作(例如创建新的路由、数据库查询)；而一旦执行这个函数式，我又得考虑传入一个有效的 payload，否则函数式很可能会执行失败(因为不论是原生 if/while 还是 mark 包装的 if/while 都很可能需要读取 payload、使用其中的值)。这是个很大的问题，我得好好想想怎么办。不过，经过您的提醒，我决定将您的这个思路也加入进框架了——控制流(指主控制流，子控制流要想这么玩可以用 deal 动作)不仅可以是一个函数，也可以是一个函数，而函数会传入一个 mark 函数与一个 payload 参数供开发者动态触发动作。

…

const log = wrap(console.log.bind(console)) createAppOrSomething({ // ... onSubmitLoginRequest() { const loginWaitingModel = createModel('waitDialog', { title: 'Logging in...' }) const { name, password } = state mark(log(() => `name is ${name.value}, password is ${password.value}`)) mark(log(unwrapRef`name is ${name}, password is ${password}`)) const { state: loginState } = fetch('/api/login', { name, password }) handleOnServer( markIf(searchDb({ collection: 'users', payload }).error) .then(reply({ state: 'success' })) .else(reply({ state: 'fail' })) ) loginWaitingModel.destroy() markIf(loginState, 'success') .then(() => { const successInfoDialog = createDialog('infoDialog', { title: 'Login success!' }) wait(3000) successInfoDialog.destroy() }).else(() => { const failInfoDialog = createDialog('infoDialog', { title: 'Login failed!' }) wait(3000) failInfoDialog.destroy() }) }, // ... }) — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub, or unsubscribe. [ { ***@***.***": "<a href=http://schema.org>http://schema.org</a>", ***@***.***": "EmailMessage", "potentialAction": { ***@***.***": "ViewAction", "target": "<a href=#2 (comment)>", "url": "<a href=#2 (comment)>", "name": "View Issue" }, "description": "View this Issue on GitHub", "publisher": { ***@***.***": "Organization", "name": "GitHub", "url": "<a href=https://github.com>https://github.com</a>" } } ]

from plasmolysis.

Alan-Liang commented on June 3, 2024

TL; DR：这个函数是全局初始化的时候执行的，不应该直接包含任何对 payload、state 等的直接使用，虽然不可以 GC 但是反正一共就创建一次对象，不会造成内存泄漏。

嗯……我的意思是这个函数在全局初始化的时候就运行了，转成这个评论中的样子了（直接参考：Vue composition API），最后翻译出来和数组式的基本一样。对于 markIf，在执行的时候会同时执行 if 和 else 分支，最后转成这样：

      {
        type: 'mark-if',
        condition: [
          {
            type: 'search-db',
            payload: payload => [ { collection: 'users', payload } ],
            result: 'search-db-3',
            return: res => res.error,
          }
        ],
        then: [ { type: 'reply', payload: [ { state: 'success' } ] } ],
        else: [ { type: 'reply', payload: [ { state: 'fail' } ] } ],
      }

原生 if 是做不到这点的（除非您想学 Svelte）。

个人更喜欢 mark 是全局的（import { wrap, mark } from 'nickelcat'）

from plasmolysis.

Alan-Liang commented on June 3, 2024

(其实 mark 只是我随便编的一个名字，建议不要使用)

from plasmolysis.

langyo commented on June 3, 2024

我想了一下，如果不直接使用 payload，那函数式和数组其实区别并不是很大... 我把这部分灵感转发到了我的一些开发群，很多人表示过度使用函数式其实并不是好事，有时候反而会陡增编写与运行成本... 总之，这个特性很值得考虑，加入进框架可以适应不同的开发者，所以会进入本人的开发日程中。十分感谢您的提议！

…

TL; DR：这个函数是全局初始化的时候执行的，不应该直接包含任何对 payload、state 等的直接使用，虽然不可以 GC 但是反正一共就创建一次对象，不会造成内存泄漏。嗯……我的意思是这个函数在全局初始化的时候就运行了，转成这个评论中的样子了（直接参考：Vue composition API），最后翻译出来和数组式的基本一样。对于 markIf，在执行的时候会同时执行 if 和 else 分支，最后转成这样： { type: 'mark-if', condition: [ { type: 'search-db', payload: payload => [ { collection: 'users', payload } ], result: 'search-db-3', return: res => res.error, } ], then: [ { type: 'reply', payload: [ { state: 'success' } ] } ], else: [ { type: 'reply', payload: [ { state: 'fail' } ] } ], } 原生 if 是做不到这点的（除非您想学 Svelte）。个人更喜欢 mark 是全局的（import { wrap, mark } from 'nickelcat'） — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub, or unsubscribe. [ { ***@***.***": "<a href=http://schema.org>http://schema.org</a>", ***@***.***": "EmailMessage", "potentialAction": { ***@***.***": "ViewAction", "target": "<a href=#2 (comment)>", "url": "<a href=#2 (comment)>", "name": "View Issue" }, "description": "View this Issue on GitHub", "publisher": { ***@***.***": "Organization", "name": "GitHub", "url": "<a href=https://github.com>https://github.com</a>" } } ]

from plasmolysis.

Alan-Liang commented on June 3, 2024

orz

from plasmolysis.

所以为什么不使用函数式的声明？ about plasmolysis HOT 13 CLOSED

Comments (13)

Related Issues (1)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent