Skip to content

Commit b315567

Browse files
javascript-2020javascript-2020
committed
save file
1 parent 4fd51db commit b315567

File tree

1 file changed

+78
-74
lines changed

1 file changed

+78
-74
lines changed

‎html-components/html-components.html‎

Lines changed: 78 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@
174174
{display:block;white-space:pre;background:whitesmoke;padding:10px;font-family:monospace;font-size:16px}
175175

176176

177-
ui li
177+
ul li, ol li
178178
{margin-bottom:10px}
179179

180180

@@ -310,28 +310,28 @@ <h3>
310310
</p>
311311
<ul>
312312
<li>
313-
mod.onReady();
313+
mod.onReady()
314314
</li>
315315
<li>
316-
mod.onready();
316+
mod.onready()
317317
</li>
318318
<li>
319-
mod.ready();
319+
mod.ready()
320320
</li>
321321
<li>
322-
mod.start();
322+
mod.start()
323323
</li>
324324
<li>
325-
onReady();
325+
onReady()
326326
</li>
327327
<li>
328-
onready();
328+
onready()
329329
</li>
330330
<li>
331-
ready();
331+
ready()
332332
</li>
333333
<li>
334-
start();
334+
start()
335335
</li>
336336
</ul>
337337

@@ -375,75 +375,14 @@ <h3>
375375
</div>
376376

377377

378-
<div>
379-
<p>
380-
a component / module typically has a standard lifecycle that is
381-
</p>
382-
383-
<ul>
384-
<li>
385-
<b>
386-
initmod
387-
</b>
388-
<br>
389-
This is where local depencies are / can be passed to the component
390-
<br>
391-
They fundamentally should not be relying on global state to receive their local depencies, this method is not always
392-
needed
393-
</li>
394-
<li>
395-
<b>
396-
init
397-
</b>
398-
<br>
399-
This is where the component first get executed, its an asynchronous function that allows the component to check
400-
that it has everything it needs to run, including access to the network to load resources it may need
401-
</li>
402-
<li>
403-
<b>
404-
initdom
405-
</b>
406-
<br>
407-
This is where the component is able to set up its ui / dom, internally build the references it needs to run effeiciently,
408-
it should be treated potentially as asynchronous
409-
</li>
410-
</ul>
411-
412-
<p>
413-
components are also effectively namespaced so they are free to load any other components that they may need without having to
414-
worry that there will ever be a clash of variables or tag names.
415-
</p>
416-
</div>
417-
418-
<div>
419-
<p>
420-
the component library just needs to be included as a script tag, it exposes a global property mod,
421-
it runs on window.onload, it has a fundatmental loading stack that allows
422-
init runs to be delayed until the loading stack is complete
423-
</p>
424-
</div>
425-
426-
<br>
427-
<br>
428-
<hr>
429-
430-
<div>
431-
<p>
432-
Here is a simple setup that loads the log-mod element. Its function is to log toaster style messages in a webpage.
433-
</p>
434-
435-
<snippet-html-console id=ex1 component v2.0 src='ex/log-ex.html' style='display:block;margin-top:100px'></snippet-html-console>
436-
437-
</div>
438-
439378
<div style='display:block;margin-top:100px'>
440379
<p>
441-
the code for the log-mod component, note
380+
the code for a component, note
442381
</p>
443382

444383
<ul>
445384
<li>
446-
the function that defines the api for the log-mod is wrapped in parenthesis' () making it a function expression,
385+
the function that defines the module is wrapped in parentheses () making it a function expression,
447386
this is required.
448387
<code>
449388

@@ -468,12 +407,12 @@ <h3>
468407
host
469408
</b>
470409
<br>
471-
the root component element
410+
the root element of the component
472411
</li>
473412
</ul>
474413
</li>
475414
<li>
476-
the function defines an object that is returned, note : the variable name <b>obj</b> is purely an internal reference.
415+
the function defines an object that is returned, note : the variable name <b>obj</b>, is purely an internal reference.
477416
<code>
478417

479418
var obj = {
@@ -511,6 +450,71 @@ <h3>
511450

512451

513452

453+
<div>
454+
<p>
455+
a component / module typically has a standard lifecycle that is
456+
</p>
457+
458+
<ul>
459+
<li>
460+
<b>
461+
initmod
462+
</b>
463+
<br>
464+
This is where local depencies are / can be passed to the component
465+
<br>
466+
They fundamentally should not be relying on global state to receive their local depencies, this method is not always
467+
needed
468+
</li>
469+
<li>
470+
<b>
471+
init
472+
</b>
473+
<br>
474+
This is where the component first get executed, its an asynchronous function that allows the component to check
475+
that it has everything it needs to run, including access to the network to load resources it may need
476+
</li>
477+
<li>
478+
<b>
479+
initdom
480+
</b>
481+
<br>
482+
This is where the component is able to set up its ui / dom, internally build the references it needs to run effeiciently,
483+
it should be treated potentially as asynchronous
484+
</li>
485+
</ul>
486+
487+
<p>
488+
components are also effectively namespaced so they are free to load any other components that they may need without having to
489+
worry that there will ever be a clash of variables or tag names.
490+
</p>
491+
</div>
492+
493+
<div>
494+
<p>
495+
the component library just needs to be included as a script tag, it exposes a global property mod,
496+
it runs on window.onload, it has a fundatmental loading stack that allows
497+
init runs to be delayed until the loading stack is complete
498+
</p>
499+
</div>
500+
501+
<br>
502+
<br>
503+
<hr>
504+
505+
<div>
506+
<p>
507+
Here is a simple setup that loads the log-mod element. Its function is to log toaster style messages in a webpage.
508+
</p>
509+
510+
<snippet-html-console id=ex1 component v2.0 src='ex/log-ex.html' style='display:block;margin-top:100px'></snippet-html-console>
511+
512+
</div>
513+
514+
515+
516+
517+
514518

515519
<div class=hr2></div>
516520

0 commit comments

Comments
 (0)