JavaScript 4 Flashcards
What is the simplest way to modularize your code?
Use the namespace pattern - to contain all of your modules. This works by creating a root object (the root namespace) and adding modules (new objects) corresponding to the nesting namespace.
PlayerJS.player.controller
singleton/module name/object
Object / Object / IIFE
How do you make namespaces in JS?
The easiest way is to create a global object (at the document root) that is a singleton.
Then you can use a directory structure to store the files (naming the directories after the modules). The directory names are the same as the module (object) names within the root / singleton. Modules are created by calling an IIFE. The resulting modules have methods which can be called.
EG:
PlayerJS.player.controller.play();
singleton/module name/object/method
Object / Object / IIFE / Method
What does AMD stand for?
Asynchronous Module Definition
What is the downsides to using the Namespace pattern?
Declaring modules as global variables
Can’t specify the dependencies of a module
Have to list script files in order in the index.html
What library is used to help implement AMD?
Require.js
When using React, how do you specify dependencies?
define([‘player/controller’], function(Player, Controller) {
});
If you don’t have dependencies, what do you declare in ReactJS?
You specify an empty array.
define([], function() {});
When using ReactJS, what is one of the risks we have to look out for when setting up dependencies?
Circular dependencies
What pattern can be used to allow communication between modules that have been setup using the AMD pattern?
PubSub
What is another name for the Pub Sub pattern?
Observer
Why might you use the tilde ~ character in an if expression?
The tilde character will convert the value to a truthy value. For instance
~1 == true
~2 == true
~-2 == true
~-1 == false
This works because the tilde operator inverts the bits representing -1 to 0. So for example, if you are using indexOf (which will return an index, or -1 if there is not match) - then you can use this expression to make the test more reliable.
if (~mystring.indexOf(‘f’)) {
}
What is the following code doing?
Array.prototype.slice.call(arguments, 1)
In JavaScript, arguments (one of the default values in a function) is not an array, but an array like object. In order to call slice on it - you can pass ‘arguments’ to the slice function on the Array.prototype - can use call to call slice, and set it’s ‘this’ variable to ‘arguments’. I guess it would be like calling arguments.slice() - if arguments was an actual array.
It works because the key / value pairs are numbered, and the object has a length value.
When using React.js you may see the pattern where a file is ‘defined’ and the variable is declared as a parameter to a function, but it’s not actually used in the function. What is happening here?
The object/function being referenced is going to get called (because it’s defined as a dependency) - which will execute any code in that function. So it can be useful for setting up data / states - and having it run without actually calling a function explicitly (since React takes care of that for you under the hood).
Why should you use a package.json file when using NPM?
If you use –save switch, it will write the dependencies into the file. This will make it a lot easier when moving to another machine, or distributing your application.
How do you export a variable using ES6 from a file?
export var foobar = ‘myvalue’;
What does CommonJS do?
It’s a module system, that works mainly on the server side.
In MVC, the controller is the entry point to…
a component.
In MVC, the controller instantiates…
The view and the model
(Of course, there is a case to be made for these to be instantiated and injected into the controller via a DI container).
The model is reponsible for…
storing, persisting or retrieving data from a database or other kind of store.
Why do we sometimes need to write a clone function?
Because objects in JS are passed by reference, so we often need to create clones, so that a change doesn’t affect ALL objects.
What is the main difference between MVP and MVC?
In MVP, the view does not have direct access to the model.
What function could you use to make sure that when you perform a mathematical calculation, that it never goes below a certain level?
Math.max(myarray.length - 6, 0);
This will take the array length and give you the result minus six, unless it goes below 0, when it will give you 0.
Using an object literal, how would you create a namespace for your project?
Firstly - give it a long name so it’s unique (i.e. reverse URL).
// NOTE: This is check to see if each part of the variable // exists. It doesn't matter if it does - as if one part exists, // the next part will be attached to the existing var.
var com = com || {}; com.cm = com.cm || {}; // NOTE - no var
// Obviously, don't use a name like cm, use something // longer - just using short names for space.
com.cainmartin.project = { // The actual project code goes here }
What’s the biggest flaw of the basic Module design pattern?
The private members can’t interact with the public members.