ref –
https://github.com/janl/mustache.js/
https://medium.com/@koalamango/javascript-templating-with-mustache-js-b50919cb4f57
https://www.elated.com/articles/easy-html-templates-with-mustache/

Templates are a great way to separate your website’s code from its design.

Mustache is a logic-less template syntax. It can be used for HTML, config files, source code – anything.

It works by expanding tags in a template using values provided in a hash or object

One of Mustache’s big plus points is that is logic-less, which means it keeps your templates very neat and tidy. There are no messy if … then or looping constructs embedded within a Mustache template; it’s all just markup and simple Mustache tags. All the logic is hidden away inside your data objects (and the code that creates or fetches them).

A mustache template is a string that contains any number of mustache tags.

Tags are indicated by the double mustaches that surround them.
{{person}} is a tag, as is {{#person}}

Using mustache basics

• First, we’ll include mustache js file
• Second, we’ll create a template with tags
• Then, we’ll use a object’s values provided by its properties
• Finally, we’ll see the output from the template + object by using Mustache.render

include the mustache js file in your header

Create the template

The template is a string.
For example: {{name}} is a {{occupation}}

The tags are {{name}} and {{occupation}}

It expands the tags by using object view.
It looks inside this object for properties name and occupation. Then it would expand the tags with the values occupied at properties name, and occupation.

Load the template

Then, simply execute our tags, templates, objects, and render them.
Id person for paragraph p is to hold the result.

Another Example

This time, we introduce the concept of sections.

Sections render blocks of text one or more times, depending on the value of the key in the current context. A section begins with a hashtag and ends with a slash:

{{#Robot}}
My name is Pinocchio!
{{/Robot}}

The behavior of the section is determined by the value of the key:

{
“Robot”: true
}

Output:

My name is Pinocchio!

Your output when you run the web file is:

Hello Pinocchio You live in the woods! Well, you are friends with animals

Inverted Sections

An inverted section begins with a caret (hat) and ends with a slash.

Inverted section means when its false, it displays. When true, it won’t display.

{{^Robot}}
No content!
{{/Robot}}

{
“Robot”: false
}

Output

No content!

Another Example

In this next example, we’ll first use textarea to hold strings that can represent our templates and data objects. You can specify the strings in your html code, or simply have the user enter them via the web page.

In html, you can put the contents of the textarea in between textarea tags. Thus, that is the text that will be appear when the textarea tags are rendered on the web page. In our case, we put the template string inside the textarea with id template.

When we’re processing the code, we need to get whatever the input is from the textarea “template”. Thus, we get the string from the textarea via javascript like so:

In, Mustache.Render(template, object), the template parameter needed is a string. Thus, our templateStr can simply be passed in.

The string we pass into the textarea “data” is the object. However, the object must be a code evaluation. In other words, we have to convert the string into code. We can use javascript’s eval function.

Remember that whatever variable you decide to use for the object in dataStr must be used in code.

In our case, it is “hadoken”.

In our js, we basically get the data from the textareas. Then pass them into Mustache.render function. It returns the result that we need.

And we finally throw that result into the html.

Source Code

html

css

js

ref – https://stackoverflow.com/questions/1646698/what-is-the-new-keyword-in-javascript
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new

Prototype and Inheritance in JS (non-class)

Creating a user-defined object requires two steps:

1） Define the object type by writing a function.

2） Create an instance of the object with new.

To define an object type, create a function for the object type that specifies its name and properties. An object can have a property that is itself or another object.

When the code new Foo(…) is executed, the following things happen:

1) A new object is created, inheriting from Foo.prototype.

2) The constructor function Foo is called with the specified arguments, and with this bound to the newly created object. new Foo is equivalent to new Foo(), i.e. if no argument list is specified, Foo is called without arguments.

3) Normally constructors don’t return a value.

If the constructor function doesn’t explicitly return an object, the object created in step 1 is used instead.
However, sometimes, they can choose to do so if they want to override the normal object creation process of using step 1.
If they do return an object in the constructor function, then the object returned by the constructor function becomes the result of the whole new expression. Reference p would then point to this returned object.

ref – https://medium.com/@_bengarrison/javascript-es6-exploring-the-new-built-in-methods-b62583b0a8e6
https://stackoverflow.com/questions/33164725/confusion-between-isnan-and-number-isnan-in-javascript
https://ponyfoo.com/articles/es6-number-improvements-in-depth

Use Object.assign to assign properties of objects over to your destination object.

Using Object.assign, if there already exist a property/value, and you assign a new property that has the same name over, then the existing property/value gets replaced.

Using Object.assign, we can also do a deep copy of an object.

find and findIndex both find elements for you. It is important to note that find() will return the FIRST element in the Array that satisfies the provided testing function.

Use find to see if ‘d’ exists.

find – looping: a
find – looping: b
find – looping: c
find – looping: c
find – looping: d
res: d

Use findIndex to see if ‘c’ exists.

findIndex – looping: a
findIndex – looping: b
findIndex – looping: c
2

Number.isNaN

The reason isNaN() is “broken” is because, ostensibly, type conversions aren’t supposed to happen when testing values.

That is the issue Number.isNaN() is designed to address.

In particular, Number.isNaN() will only attempt to compare a value to NaN if the value is a number-type value.

Any other type will return false, even if they are literally “not a number”, because the type of the value NaN is number.

You can also think of it as anything that’s not NaN when passed to Number.isNaN will return false, while passing NaN into it will yield true.

The ES5 global.isNaN method, in contrast, casts non-numeric values passed to it before evaluating them against NaN, using Number(…)

That produces significantly different results. The example below produces inconsistent results because, unlike Number.isNaN, isNaN casts the value passed to it through Number first.

Number.isNaN will return false immediately if the argument is not a Number

while isNaN first converts the value to a Number

For isNaN():

then it does a NaN === NaN comparison, which results to true.

for Number.isNumber() , as mentioned earlier, we check to see the type of the argument is a Number. If its not a Number, it returns false immediately!

Infinity is actually NOT infinity, it a numeric value that represents Infinity. The actual value is 1.797693134862315E+308. The same for -Infinity, -1.797693134862315E+308

ref – https://medium.com/@yyang0903/static-objects-static-methods-in-es6-1c026dbb8bb1

Static methods, like many other features introduced in ES6, are meant to provide class-specific methods for object-oriented programming in Javascript.

Static methods are often used to create utility functions for an application.

Static methods are called without instantiating their class…

thus, when we call static “triple”, you will won’t see the log in the constructor executed.

Static methods…are also not callable when the class is instantiated.

Since these methods operate on the class instead of instances of the class, they are called on the class.

Say we have a subclass to a parent class, any static methods that we declared are available to the subclasses as well

Make sure to have jQuery and bootstrap CSS installed

the HTML

First, we create two buttons.

– One is to indicate list form. The id of this button is list.
– The second button is to indicate grid form. The id of the button is grid

We place the buttons inside a container, with class btn-group. The sibling div has an id of products. This is where we place our contents. Hence, we have a div for out buttons. And another div to maintain our contents

In our content div, the default situation is that we have grids, with content inside them. We create grids by using class col-lg-4 in order to control width. col-lg-4 says we have the grid to have a with of 4 parts, while the total is 12 parts. This means we have three grids for each row. In other words, we want the width to be 33.3333%.

We then fill in the contents with an image, a title, and some text.

Finally, we have something like so:

this will give us a starting point looking like this.

jQuery

The whole trick to making it go from grid to list is to add a class. Then let CSS take over to change the display according to the class.

Hence, the first step is to simply add a class name. Let’s add list-group-item for when the user clicks on the list button. And remove this class when the user clicks on the grid button.

We use jQuery to do this. We simply grab the id of the buttons. Then process the click event. We implement the handler for when the button is clicked. We say, when the buttons is clicked, for each div.item under #products, we want to add a class list-group-item to that div.

When we click on button #list, we add class list-group-item. Thus you’ll dynamically see the class name appear in the DOM. This enables us to use CSS to give it a new look on the fly.

When we click on the button again, the class disappears. Visually, we can use CSS to return it to its default appearance.

the CSS

Now, we get to the part where we change the appearance.

First, we include the style.css in your header

Now, let’s say we want to give appearances of a green border for the grid. And make this green border disappear when its list.

Now when you click the grid list

you add the class to the div. Via CSS, it will know that for that class, we should put a green border on that div. When you click the list button, the class “list-group-item will disappear, and naturally the CSS of green border will not apply anymore. In fact, the CSS for .item, is no border.

The biggest difference between grid and list is that our grid is 33.33%. But a list should take up 100% width. So that’s what we’ll do:

Thus, you’ll be able to toggle it like so:

Basically, that’s all there is to it.

Other stuff

Say I want add a red border around the image when its list form. And clean up some margin spacing issues:

Then I want to put the word list before the list items.

As you can see, just make sure to put CSS for .item.list-group-item because you’re drawing for list form.

Whatever CSS you applied to list-group-item will be gone when you remove the class.

• https://stackoverflow.com/questions/1634268/explain-the-encapsulated-anonymous-function-syntax
• https://stackoverflow.com/questions/440739/what-do-parentheses-surrounding-an-object-function-class-declaration-mean

The Problem

In javascript, we implement twoPlusTwo.

You can also create an anonymous function and assign it to a variable:

You can encapsulate a block of code by creating an anonymous function, then wrapping it in brackets and executing it immediately:

However, this does not work:

Why?

Answer

doesn’t work because:

is being parsed as a Function Declaration, and the name identifier of function declarations is mandatory.

Also,

is same as

The reason this wouldn’t work is that the JavaScript engine interprets this as a function declaration followed by a completely unrelated grouping operator that contains no expression, and grouping operators must contain an expression.

Surrounding it with a parentheses

Now, when you surround it with parentheses like so:

it is evaluated as a Function Expression, and function expressions can be named or not.

i.e:

…and thus, wrapping parenthesis around it, it gets the result of that expressions in the same way having a variable assigned to the result:

The only difference is that we assigned function f to a variable. But we didn’t assign the anonymous function anywhere.
Let’s try assigning it to a variable so we can see the similarities:

or simply

as an Immediately Invoked Function Expression

The Function Expression used in this term is directly to indicate anonymous function expression.
The Immediately Invoked used in this term is the ( … ) that gets the function expression, which is pushed onto the local stack. We don’t see it because we did not assign any named reference variables to it. Just know that it is pushed onto the local stack.
Then this function expression is executed via ().

Further Information

The ‘()’ surrounding the anonymous function is the ‘grouping operator’ as defined in section 11.1.6 of the ECMA spec: http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf.

Taken verbatim from the docs:

11.1.6 The Grouping Operator

The production PrimaryExpression : ( Expression ) is evaluated as follows:

Return the result of evaluating Expression. This may be of type Reference.
In this context the function is treated as an expression.