defineComponent vue

defineComponent 係 program 上係無用 直出你個 object

defineComponent  其實主要 for typescript 用
但你無用 ts 都無所謂

都可以 define 下

你可以試下 define 下 components, 你個 ide (vscode) 會即刻將你有用到+define左既 component 著燈

something about vue

  • Options API > Composition API, 但兩者都要學 (options api 本身都係 on top of Composition)
  • data() 即係 reactive state
  • this. 其實佢有好多自動野加左落隻 object 到 已經唔係原本隻 object 了
  • :class :style = v-bind:class v-bind:style
  • v-bind 就係扭個 html attribute value 既工具
  • props 主要係 read-only, 寫 html attribute 到射入 component, 又可以 parent to children
  • props html 係可以用 hyphenated, 入到 js 自動變 CamelCase
  • @ 即係 addEventListener
  • emits 即係 dispatchEvent
  • 你可以 explicit 咁 declare d event, 咁樣就唔會同 native 撞
  • slot 即係將 html value 當 parameter 咁隊入 component html
  • vue 係 shorthand 工具 同一個做法可以用好多方法寫 又好多自動左既 transformation 要睇清楚 manuel
  • ref 即係內置 dictionary, 等你可以加d html element 入去, 被其他去 call
  • v-model 即係 mvc 既 model, 類面係裝 object data 既
  • watch 即係 onchange 咁用, 或者改 value 個陣攝隻手埋去
  • computed 即係 cached get

frontend 真係搵個 nginx 隊住就得…因為全 static 死 file

https://medium.com/@jwdobken/develop-quasar-applications-with-docker-a19c38d4a6ac

# develop stage
FROM node:13.14-alpine as develop-stage
WORKDIR /app
COPY package*.json ./
RUN yarn global add @quasar/cli
COPY . .
# build stage
FROM develop-stage as build-stage
RUN yarn
RUN quasar build
# production stage
FROM nginx:1.17.5-alpine as production-stage
COPY --from=build-stage /app/dist/spa /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

唔怪得dev齋build 就算
build d static file 出黎就完
唔似 server side code 要搵個 program run 住
求其搵個 nginx 隊住就得
你想 dev 試就加 command 落 docker-compose
command: /bin/sh -c “yarn && quasar dev”

btw 同場加映:
用得 docker , d source code 有得 copy 就 copy ; 係 wordpress 有歷史因素(can update src code by button) 呢d另類先唯有用 mount

成日諗唔明點解 promise 點解要放 resolve/reject 做 define function 既 parameter

const promise = new Promise((resolve, reject) => {
  const result = performAsyncOperation();

  if (result) {
    resolve(result);
  } else {
    reject("Async operation failed");
  }
});

你要記住你成堆由 (resolve, reject)=>{xxx} 成舊野(your custom defined function) 都係叫 executor function

因為 promise 個 class pre-set 左 有一句會 call executor(resolve, reject)

既然你明知人地會 call 一個 function 要入 parameter resolve, reject 你創建個個 function 就當然要有 resolve, reject; 唔係人地 call 個陣咪唔夠料囉

你睇下 promise d src code 就知 你 define 塞入去個堆 logic 佢會叫做 executor

class Promise {
  constructor(executor) {
    this.state = 'pending';
    this.value = undefined;
    this.reason = undefined;
    this.callbacks = [];

    const resolve = (value) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.callbacks.forEach((callback) => callback.onFulfilled(value));
      }
    };

    const reject = (reason) => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        this.callbacks.forEach((callback) => callback.onRejected(reason));
      }
    };

    try {
      executor(resolve, reject);
    } catch (error) {
      reject(error);
    }
  }

  then(onFulfilled, onRejected) {
    if (typeof onFulfilled !== 'function') {
      onFulfilled = (value) => value;
    }
    if (typeof onRejected !== 'function') {
      onRejected = (reason) => {
        throw reason;
      };
    }

  === more promise method below ... ===

好啦 係 code 層面你明 , 人地叫呢個 resolve, reject 係 signal 囉

async 收到 signal (你 個 self define executor function call resolve 個下) 就會 call 用 .then register 既 callback …

揀 sql or mongo (nosql) 一些想法

如果你用緊 model 係 subobject 有一定既 ref 性 (即並非 clone data) 咁樣用 sql 先有意義

即例如你有張單 PO

PO 有堆 PO ITEM

然後有張 集單 List 叫 PL 先算
PL 會有d PO1.POITEM1, PO1.POITEM2, PO2.POITEM2, PO2.POITEM3

但如果 d POITEM 真係 ref 黎, 咁樣 sql 先有意義

如果整 PL 個陣都係抄 POITEM d data 咁樣其實用 document 都係一樣



PO1 {

POITEM1 : {name,qty}

POITEM2 : {name,qty}

POITEM3 : {name,qty}

}

when init PL , the PLITEM is clone from POITEM, 咁其實用 document 儲都好靚仔 最多搵多個 field 記住個 POITEM src ID

但你話唔係, PLITEM { POITEM1 …} 係直接 link 住 POITEM 既 id, 咁就真係有 relationship 既地方, 咁 sql 先有意義

如果係 Clone data 都變一個新個體, 用 document 儲其實仲合符具體現實 跟本無咩 relationship 可言; 你話 update poitem 要update 埋 plitem, 咪做 reflection / event 乜都得啦

decorator of function in py

decorator…

you may think it is used for an extend of an original function.

so you should call the original function in your decorator by your design

(although some rare case, like using a test function to replace the original function)

So, a decorator is a way to extend or modify the behavior of an existing function without modifying its source code.

From POE:

Yes, a decorator is a way to extend or modify the behavior of an existing function without modifying its source code.

When you apply a decorator to a function, the decorator creates a new function that wraps the original function with some additional behavior. The resulting wrapped function can then be called just like the original function, but with the added behavior provided by the decorator.

For example, consider the following decorator function that adds some behavior before and after the wrapped function is called:

def my_decorator(func):
    def wrapper(*args, **kwargs):
        print("Before the function is called.")
        result = func(*args, **kwargs)
        print("After the function is called.")
        return result
    return wrapper

In this example, my_decorator is a function that takes another function func as an argument and returns a new function wrapper that wraps func with some additional behavior. The resulting wrapper function can be called just like func, but with the added behavior provided by my_decorator.

Using this decorator function, you can extend the behavior of any function by applying the decorator to the function using the @ syntax, like this:

@my_decorator
def my_function(x):
    return x * 2

In this example, the @my_decorator syntax applies the my_decorator decorator to the my_function function, so that when you call my_function(2), the wrapper function returned by my_decorator is called instead, which first prints “Before the function is called.”, then calls my_function(2), which returns 4. Finally, the wrapper function prints “After the function is called.” and returns 4.

So, a decorator is a way to extend or modify the behavior of an existing function without modifying its source code.