From 364630614eb243f43d702b632e970183fc530dec Mon Sep 17 00:00:00 2001 From: yann300 Date: Mon, 19 Feb 2018 13:46:18 +0100 Subject: [PATCH 1/4] remove unneeded declaration --- best-practices.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/best-practices.md b/best-practices.md index 758a6950b8..6479c66a93 100644 --- a/best-practices.md +++ b/best-practices.md @@ -13,9 +13,7 @@ **if** the CSS section of an UI component is rather limited it is preferable to put it in the corresponding JS file. - HTML declaration using `yo-yo`. -- `opt` is an input parameter, it contains the `api` and `event` object. -- `self._api = opts.api` `opts.api` is an object which contains functions/features that the module needs. -- `opts.events` contains events manager the module will listen on. + - A module trigger events using `event` property:  `self.event = new EventManager()`. Events can then be triggered: From 566465f88d5517ac5718681b2bf24f52afdeafa6 Mon Sep 17 00:00:00 2001 From: yann300 Date: Mon, 19 Feb 2018 13:46:43 +0100 Subject: [PATCH 2/4] constructor argument --- best-practices.md | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/best-practices.md b/best-practices.md index 6479c66a93..1261cb600c 100644 --- a/best-practices.md +++ b/best-practices.md @@ -19,14 +19,12 @@ Events can then be triggered:  `self.event.trigger('eventName', [param1, param2])` - `self._view` is the HTML view renderered by `yo-yo` in the `render` function. -- `render()` this function should be called: +- constructor arguments: There is no fixed rule whether it is preferrable to use multiples arguments or a single option *{}* argument (or both). + We recommend: + - use a specific slot for **obligatory** arguments and/or for complex arguments (meaning not boolean, not string, etc...). + - put arguments in an option *{}* for non critical and for optionnal arguments. + - if a component has more than 4/5 parameters, it is recommended to find a way to group some in one or more *opt* arguments. - * At the first rendering (make sure that the returned node element is put on the DOM). - - * When some property has changed in order to update the view. -- `self.state` contains state properties of the module. These properties are either given from the parent through `òpts` or   computed during the life of the object. -- `update(state)` allow the parent to easily update some of the state properties. -- for all functions / properties, prefixing by underscore (`_`) means the scope is private. - look them up, discuss them, update them.     ## Module Definition (example) From bd52d800227c0b465738a0f7d7b223388567b4aa Mon Sep 17 00:00:00 2001 From: yann300 Date: Mon, 19 Feb 2018 13:47:19 +0100 Subject: [PATCH 3/4] change meaning of update --- best-practices.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/best-practices.md b/best-practices.md index 1261cb600c..d130c12e64 100644 --- a/best-practices.md +++ b/best-practices.md @@ -19,6 +19,9 @@ Events can then be triggered:  `self.event.trigger('eventName', [param1, param2])` - `self._view` is the HTML view renderered by `yo-yo` in the `render` function. +- `render()` this function should be called at the first rendering (make sure that the returned node element is put on the DOM), and should *not* by called again from outside the component. +- `update()` call this function to update the DOM when the state of the component has changed (this function must be called after the initial call to `render()`). +- for all functions / properties, prefixing by underscore (`_`) means the scope is private, and they should **not** be accessed not changed from outside the component. - constructor arguments: There is no fixed rule whether it is preferrable to use multiples arguments or a single option *{}* argument (or both). We recommend: - use a specific slot for **obligatory** arguments and/or for complex arguments (meaning not boolean, not string, etc...). From 7be2e0bfda628cdc75a1905abf9d58070f7064d1 Mon Sep 17 00:00:00 2001 From: yann300 Date: Mon, 19 Feb 2018 13:47:33 +0100 Subject: [PATCH 4/4] update example --- best-practices.md | 60 ++++++++++++++++++++++------------------------- 1 file changed, 28 insertions(+), 32 deletions(-) diff --git a/best-practices.md b/best-practices.md index d130c12e64..cc1f2722e3 100644 --- a/best-practices.md +++ b/best-practices.md @@ -27,7 +27,7 @@ - use a specific slot for **obligatory** arguments and/or for complex arguments (meaning not boolean, not string, etc...). - put arguments in an option *{}* for non critical and for optionnal arguments. - if a component has more than 4/5 parameters, it is recommended to find a way to group some in one or more *opt* arguments. - + - look them up, discuss them, update them.     ## Module Definition (example) @@ -52,22 +52,15 @@ var css = csjs` ` class UserCard { - constructor (opts = {}) { + constructor (api, events, opts = {}) { var self = this self.event = new EventManager() - self._api = opts.api + self.opts = opts + self._api = api + self._consumedEvents = events self._view = undefined - self.state = { - title: opts.title, - name: opts.name, - surname: opts.surname, - totalSpend: 0, - _nickname: opts.nickname, - _funds: self._api.getUserFunds() - } - var events = opts.events - + events.funds.register('fundsChanged', function (amount) { if (amount < self.state._funds) self.state.totalSpend += self.state._funds - amount self.state._funds = amount @@ -77,7 +70,7 @@ class UserCard { } render () { var self = this - var el = yo` + var view = yo`

@${self.state._nickname}

Welcome, ${self.state.title || ''} ${self.state.name || 'anonymous'} ${self.state.surname}

@@ -86,17 +79,16 @@ class UserCard {
` - if (self._view) yo.update(self._view, el) - else self._view = el + if (!self._view) { + self._view = view + } return self._view } - update (state = {}) { - var self = this - if (!self._view) self._constraint('first initialize view by calling `.render()`') - if (state.hasOwnProperty('title')) self.state.title = state.title - if (state.hasOwnProperty('name')) self.state.name = state.name - if (state.hasOwnProperty('surname')) self.state.surname = state.surname - self.render() + update () { + yo.update(this._view, this.render()) + } + setNickname (name) { + this._nickname = name } getNickname () { var self = this @@ -139,16 +131,20 @@ setInterval(function () { // 2. EXAMPLE USAGE var UserCard = require('./user-card') -var usercard = new UserCard({ - api: { getUserFunds, clearUserFunds }, - events: { funds: funds.event }, - title: 'Dr.', - name: 'John', - surname: 'Doe', - nickname: 'johndoe99' -}) +var usercard = new UserCard( + { getUserFunds, clearUserFunds }, + { funds: funds.event }, + { + title: 'Dr.', + name: 'John', + surname: 'Doe', + nickname: 'johndoe99' + }) var el = usercard.render() document.body.appendChild(el) -setTimeout(function () { usercard.update({ title: 'Prof.' }) }, 5000) +setTimeout(function () { + userCard.setNickname('new name') + usercard.update() +}, 5000) ```