Been busy and lazy Did some fix for a small project, worked on React, Redux, ImmutableJs & Saga.
One thing to note down: JSON doesn’t preserve order. I had a task to fix the display of a list to make them display in alphabet order. At the very begining, I just added a ORDER BY in the back-end query, thougt it would be ok, but no, the display is still random. After some digging and googling, found out it is the JSON. Even though the data fetched from DB is sorted, it then get parsed as JSON and sent to front-end. Work around is to store the data in Array and then JSON will have it in right order. Example:
Started a project involving GraphQL, seems interesting. The GraphQL->DB layer and query builder is mostly done by other developer. I will work on building the front-end interface that can build and to shot GraphQL query.
Was reading Airbnb style guide for React and get confused when it says
relying on function name inference is discouraged
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// bad
classListingextendsReact.Component{
render() {
return<div>{this.props.hello}</div>;
}
}
// bad (relying on function name inference is discouraged)
const Listing = ({ hello }) => (
<div>{hello}</div>
);
// good
function Listing({ hello }) {
return <div>{hello}</div>;
}
Then Googled and found someone mentioned Hoisting in JS. Just want to write down somthing of what I have learnt from the reading.
So basicly, JS can look ahead of code and find all variable declarations and hosit them to the top of the function. For example:
1
2
3
4
5
6
7
// Outputs: undefined
console.log(declaredLater);
var declaredLater = "Now it's defined!";
// Outputs: "Now it's defined!"
console.log(declaredLater);
The first log didn’t throw an error saying declaredLater is not defined, instead, it prints undefined. This is because of variable hoisting, the above code is actually equivalent to:
1
2
3
4
5
6
7
8
9
var declaredLater;
// Outputs: undefined
console.log(declaredLater);
declaredLater = "Now it's defined!";
// Outputs: "Now it's defined!"
console.log(declaredLater);
For function, hoisting works differently, I’m using some quote cuz i’m lazy :p
However, function definition hoisting only occurs for function declarations, not function expressions. For example:
1
2
3
4
5
6
7
8
9
10
11
12
13
// Outputs: "Definition hoisted!"
definitionHoisted();
// TypeError: undefined is not a function
definitionNotHoisted();
functiondefinitionHoisted() {
console.log("Definition hoisted!");
}
var definitionNotHoisted = function() {
console.log("Definition not hoisted!");
};
Finally, one thing to add-on.
Function’s name doesn’t get hoisted if it is part of a function expression.
A closure can not only access the variables defined in its outer function but also the arguments of the outer function.
The example below creates a private scope by adding parenthesis at the end of the function, it tells the interpreter to execute it as soon as it reads it without invocation. Functions and variables in it are not accessible from outside.
1
2
3
(function () {
// private scope
})();
But what if we want some of the functions to be public?
The Module Pattern
The Module Pattern looks like this:
1
2
3
4
5
6
7
8
9
10
11
var Module = (function() {
functionprivateMethod() {
// do something
}
return {
publicMethod: function() {
// can call privateMethod();
}
};
})();
and can be used like this:
1
2
Module.publicMethod(); // works
Module.privateMethod(); // Uncaught ReferenceError: privateMethod is not defined
An even better way of doing this is to add underscore to the private functions and return an anonymous object containg public functions:
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
