Update Code

zhoukekestar · Jan 10, 2024 · dad8f62 · dad8f62
1 parent 8306439
commit dad8f62
Show file tree

Hide file tree

Showing 5 changed files with 321 additions and 49 deletions.
diff --git a/_posts/2023-10~12/2023-12-30-virtualdom-2.md b/_posts/2023-10~12/2023-12-30-virtualdom-2.md
@@ -93,61 +93,21 @@ render(helloTemplate('foo', 'bar'), document.body)
 
 ### 其他
 
-Ember Glimmer
+[Ember Glimmer]()
 
-  使用 Handlebars 模板编写:
-
-```hbs
-<div>
-  <p>{{this.count}}</p>
-  <button type="button" {{on "click" this.increment}}>+1</button>
-  <button type="button" {{on "click" this.decrement}}>-1</button>
-</div>
-```
-
-  并用 glimmer 组件进行 client 渲染和处理
-
-```js
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export default class CounterComponent extends Component {
-  @tracked count = 0;
-
-  @action
-  increment() {
-    debugger;
-    this.count = this.count + 1;
-  }
-
-  @action
-  decrement() {
-    this.count = this.count - 1;
-  }
-}
-```
-
-
-
-  ![image](https://github.com/zhoukekestar/notes/assets/7157346/e6250507-f0fc-4e21-a7f7-4557a37486bd)
-
-
-  [@glimmer/compiler](https://github.com/glimmerjs/glimmer-vm/blob/2ddbbc4a9b97db4f326c4d92021f089c464ab093/packages/%40glimmer/compiler/test/compiler-test.ts)
-
-  https://github.com/glimmerjs/glimmer-vm/blob/2ddbbc4a9b97db4f326c4d92021f089c464ab093/packages/%40glimmer/validator/lib/meta.ts#L19
-  *
+# 编写 DOM：HTML 的进化
 
-  * Stream Tree
+### 模板语言时代
 
-* React Virtual DOM
-* Vue Virtual DOM
+* JavaScript Template Eengine
+  * [mustache](https://github.com/janl/mustache.js)
 
-# 编写 DOM：HTML 的进化
+  ![](https://cloud.githubusercontent.com/assets/288977/8779228/a3cf700e-2f02-11e5-869a-300312fb7a00.gif)
 
+  * [handlebars](https://handlebarsjs.com/zh/)
+* Handlebars
 * JSX
 * Template
-* Handlebars
 
 
 

diff --git a/_posts/2024-01~03/2023-01-10-virtualdom.md b/_posts/2024-01~03/2023-01-10-virtualdom.md
@@ -0,0 +1,165 @@
+---
+layout: post
+title:  "再谈 Virtual DOM（二）"
+date:  2024-01-10
+tags: [note]
+---
+
+
+  接上次 [再谈 Virtual DOM（一）](https://zhoukekestar.github.io/notes/2023/12/20/virtualdom.html)
+
+
+# 编写 DOM：HTML 的进化
+
+### 模板语言时代
+
+  在早期的 Web 开发中，模板语言是最常用的一种技术。但由于没有规定其动态生成的规范，导致各自语言体系中，有各自的模板规范。比如：Java、C#、JS、PHP 等等。
+
+  以下是一些常见的模板语言：
+
+JavaScript Template Engine
+
+* [mustache](https://github.com/janl/mustache.js)
+
+  ![](https://cloud.githubusercontent.com/assets/288977/8779228/a3cf700e-2f02-11e5-869a-300312fb7a00.gif)
+
+* [handlebars](https://handlebarsjs.com/zh/)
+
+```html
+<h2>Names</h2>
+{{#names}}
+  <strong>{{name}}</strong>
+{{/names}}
+```
+
+ServerSide Template Engine
+
+* ASP.NET
+
+```html
+@foreach (var person in members)
+{
+  <p>@person</p>
+}
+  ```
+
+* JSP (Java Server Pages) & JSTL ( JSP Standard Tag Library)
+
+  ![image](https://github.com/zhoukekestar/notes/assets/7157346/3f8295b2-a0e2-4758-8cf7-86890ac641bd)
+
+```html
+<c:forEach items="${requestScope.empList}" var="emp">
+  <tr>
+    <td><c:out value="${emp.id}"></c:out></td>
+    <td><c:out value="${emp.name}"></c:out></td>
+    <td><c:out value="${emp.role}"></c:out></td>
+  </tr>
+</c:forEach>
+```
+* [art-template](https://aui.github.io/art-template/)
+
+```html
+<% for(var i = 0; i < target.length; i++){ %>
+    <%= i %> <%= target[i] %>
+<% } %>
+```
+
+* [Velocity](https://velocity.apache.org/engine/1.7/user-guide.html)
+
+```html
+<table>
+#foreach( $mud in $mudsOnSpecial )
+  #if ( $customer.hasPurchased($mud) )
+    <tr>
+      <td>
+        $flogger.getPromo( $mud )
+      </td>
+    </tr>
+  #end
+#end
+</table>
+```
+
+### JSX
+
+  随着 React 的崛起，框架侧引入了新的 JSX 语法，力求将模板语言的语法统一起来。
+
+  因为页面大部分是前端的领域，而且随着 [前后端分离](https://www.google.com.hk/search?q=frontend+backend+separate) 的兴起，此方式受到了广泛的欢迎。
+
+
+* https://github.com/facebook/jsx
+
+### Template Literals & Tagged templates
+
+* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates
+*
+
+# Virtual DOM 核心作用
+
+![image](https://github.com/zhoukekestar/notes/assets/7157346/9db66f3b-d2f0-4797-b407-e1e1862e1c88)
+
+from:
+* https://auth0.com/blog/face-off-virtual-dom-vs-incremental-dom-vs-glimmer/
+* https://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html
+
+
+
+* DSL vs JSX
+* Ecosystem
+  * Three.JS
+  *
+*
+
+> The big improvements that React brought to the mainstream were componentization, and popularizing declarative rendering.
+> https://news.ycombinator.com/item?id=34621279
+
+> For some reason I thought the virtual DOM was a native feature of the browser
+> https://news.ycombinator.com/item?id=34633339
+
+# VDom is not just VDOM
+
+> Note that a virtual DOM is pure overhead if you already have a real DOM to work with.
+> https://news.ycombinator.com/item?id=34616031
+>
+
+
+# Steps
+
+* diff
+  * https://github.com/Matt-Esch/virtual-dom/blob/master/vtree/diff.js
+* patch
+
+
+
+# Diff Alogrithm
+
+### RTED
+
+> RTED requires O(n2) space as the most space-efficient competitors, and its runtime complexity of O(n3) in the worst case is optimal.
+
+
+# Virtual DOM 简写
+
+  使用 JSX 简写
+
+
+# References
+
+* https://news.ycombinator.com/item?id=34612162
+* https://svelte.dev/blog/virtual-dom-is-pure-overhead
+* https://github.com/mbasso/asm-dom
+* https://github.com/patrick-steele-idem/morphdom
+* https://zhoukekestar.github.io/notes/2017/08/07/webcomponents-demo.html
+* https://zhoukekestar.github.io/notes/2017/08/07/beyond-framework.html
+* https://github.com/WebReflection/hyperHTML
+* https://github.com/AFASSoftware/maquette
+
+* https://en.wikipedia.org/wiki/Virtual_DOM
+  * https://svelte.dev/blog/virtual-dom-is-pure-overhead
+  * https://auth0.com/blog/face-off-virtual-dom-vs-incremental-dom-vs-glimmer/
+
+
+* [RTED: A Robust Algorithm for the Tree Edit Distance](https://vldb.org/pvldb/vol5/p334_mateuszpawlik_vldb2012.pdf)
+* [Minimal Edit-Based Diffs for Large Trees](https://dl.acm.org/doi/pdf/10.1145/3340531.3412026)
+* [Detecting Changes in XML Documents](https://people.cs.rutgers.edu/~amelie/papers/2002/diff.pdf)
+* [Google String diff-match-patch](https://github.com/google/diff-match-patch)
diff --git a/_posts/2024-01~03/2024-01-09-ember-glimmer.md b/_posts/2024-01~03/2024-01-09-ember-glimmer.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title:  "lit SSR"
-date:  2023-12-27
+date:  2024-01-09
 tags: [note]
 ---
 

diff --git a/_posts/2024-01~03/2024-01-10-alfred.md b/_posts/2024-01~03/2024-01-10-alfred.md
@@ -0,0 +1,52 @@
+---
+layout: post
+title:  "Alfred"
+date:  2024-01-10
+tags: [note]
+---
+
+ Alfred Quick Script Demo
+
+# Shell
+
+  Google Search Demo
+
+* new script filter
+* edit shell script likes below:
+
+```sh
+cat << EOB
+{"items": [
+	{
+		"autocomplete": "google search",
+		"title": "google search",
+		"valid": true,
+		"subtitle": "google search",
+		"arg": "https://www.google.com.hk/search?q=$1"
+	}
+]}
+EOB
+```
+
+* check argument required
+* uncheck Alfred filters results
+* with input as argv, and add `$1` to your arg
+
+![image](https://github.com/zhoukekestar/notes/assets/7157346/60a477d0-1a7b-48e1-b6bb-abbb094ea18a)
+
+* add `{query}` to URL input
+
+![image](https://github.com/zhoukekestar/notes/assets/7157346/bf420110-a1f9-4fea-ba3b-f549d0d73065)
+
+
+# NodeJS
+
+```sh
+~/bin/node-v18.9.1-darwin-arm64/bin/node index.mjs "{query}"
+```
+
+  Request with local Chrome cookies by [chrome-cookies-secure](https://anpm.alibaba-inc.com/package/chrome-cookies-secure#jar-used-with-request)
+
+# References
+
+* [https://zhoukekestar.github.io/notes/2022/09/28/alfred.html](https://zhoukekestar.github.io/notes/2022/09/28/alfred.html)
diff --git a/_posts/2024-01~03/2024-01-10-react.md b/_posts/2024-01~03/2024-01-10-react.md
@@ -0,0 +1,95 @@
+---
+layout: post
+title:  "React 0.3.0"
+date:  2024-01-10
+tags: [note]
+---
+
+  React 0.3.0 版本阅读
+
+  https://github.com/facebook/react/releases/tag/v0.3.0
+
+# Transaction
+
+  Transaction 是一个洋葱模型的函数执行器，有些 AOP 切面的概念在里面，将函数做一些通用的前置、后置函数包裹，方便统一控制一些内容。
+
+```
+/**
+ * `Transaction` creates a black box that is able to wrap any method such that
+ * certain invariants are maintained before and after the method is invoked
+ * (Even if an exception is thrown while invoking the wrapped method). Whoever
+ * instantiates a transaction can provide enforcers of the invariants at
+ * creation time. The `Transaction` class itself will supply one additional
+ * automatic invariant for you - the invariant that any transaction instance
+ * should not be ran while it is already being ran. You would typically create a
+ * single instance of a `Transaction` for reuse multiple times, that potentially
+ * is used to wrap several different methods. Wrappers are extremely simple -
+ * they only require implementing two methods.
+ *
+ * <pre>
+ *                       wrappers (injected at creation time)
+ *                                      +        +
+ *                                      |        |
+ *                    +-----------------|--------|--------------+
+ *                    |                 v        |              |
+ *                    |      +---------------+   |              |
+ *                    |   +--|    wrapper1   |---|----+         |
+ *                    |   |  +---------------+   v    |         |
+ *                    |   |          +-------------+  |         |
+ *                    |   |     +----|   wrapper2  |--------+   |
+ *                    |   |     |    +-------------+  |     |   |
+ *                    |   |     |                     |     |   |
+ *                    |   v     v                     v     v   | wrapper
+ *                    | +---+ +---+   +---------+   +---+ +---+ | invariants
+ * perform(anyMethod) | |   | |   |   |         |   |   | |   | | maintained
+ * +----------------->|-|---|-|---|-->|anyMethod|---|---|-|---|-|-------->
+ *                    | |   | |   |   |         |   |   | |   | |
+ *                    | |   | |   |   |         |   |   | |   | |
+ *                    | |   | |   |   |         |   |   | |   | |
+ *                    | +---+ +---+   +---------+   +---+ +---+ |
+ *                    |  initialize                    close    |
+ *                    +-----------------------------------------+
+ * </pre>
+ *
+ * Bonus:
+ * - Reports timing metrics by method name and wrapper index.
+ *
+ * Use cases:
+ * - Preserving the input selection ranges before/after reconciliation.
+ *   Restoring selection even in the event of an unexpected error.
+ * - Deactivating events while rearranging the DOM, preventing blurs/focuses,
+ *   while guaranteeing that afterwards, the event system is reactivated.
+ * - Flushing a queue of collected DOM mutations to the main UI thread after a
+ *   reconciliation takes place in a worker thread.
+ * - Invoking any collected `componentDidRender` callbacks after rendering new
+ *   content.
+ * - (Future use case): Wrapping particular flushes of the `ReactWorker` queue
+ *   to preserve the `scrollTop` (an automatic scroll aware DOM).
+ * - (Future use case): Layout calculations before and after DOM upates.
+ *
+ * Transactional plugin API:
+ * - A module that has an `initialize` method that returns any precomputation.
+ * - and a `close` method that accepts the precomputation. `close` is invoked
+ *   when the wrapped process is completed, or has failed.
+ *
+ * @param {Array<TransactionalWrapper>} transactionWrapper Wrapper modules
+ * that implement `initialize` and `close`.
+ * @return {Transaction} Single transaction for reuse in thread.
+ *
+ * @class Transaction
+ */
+```
+
+
+# 组件更新
+
+  更新入口为 `updateComponent`
+
+```
+ +---------------+     +------------+    +-------------------+   +-----------------+    +------------+
+ |updateComponent|---->|receiveProps|--->| _updateDOMChildren|-->|updateMultiChild |--->|receiveProps|
+ +---------------+     +------------+    +-------------------+   +-----------------+    +------------+
+                         ^                                                                    |
+                         |                                                                    |
+                         +--------------------------------------------------------------------+
+```