mirror of
https://github.com/wahyd4/one-knowledge.git
synced 2026-08-13 15:16:01 +10:00
Initial import: links posts + github knowledge
This commit is contained in:
hermes
@@ -0,0 +1,251 @@
|
||||
---
|
||||
title: Javascript
|
||||
created: 2018-02-15
|
||||
updated: 2018-02-15
|
||||
type: summary
|
||||
tags: [tech, reference]
|
||||
external: https://github.com/wahyd4/knowledge/blob/master/categories/javascript.md
|
||||
---
|
||||
|
||||
# ES 6/ES 2015
|
||||
|
||||
- Arrow function
|
||||
- Array function doesn’t create new this, it grabs this from its surrounding instead.
|
||||
|
||||
- Array/Collection methods
|
||||
- map
|
||||
|
||||
```javascript
|
||||
const numbers = [0, 1, 2, 3, 4, 5, 6];
|
||||
const doubledNumbers = numbers.map(n => n * 2);
|
||||
```
|
||||
- filter
|
||||
- const evenNumbers = numbers.filter(n => n % 2 === 0);
|
||||
- reduce
|
||||
```javascript
|
||||
const sum = numbers.reduce(
|
||||
function(acc, n) {
|
||||
return acc + n;
|
||||
},
|
||||
0 // accumulator variable value at first iteration step
|
||||
);
|
||||
```
|
||||
- reduce takes two parameters
|
||||
The first parameter is a function that will be called at each iteration step.The second parameter is the value of the accumulator variable (*acc* here) at the first iteration step (read next point to understand)
|
||||
|
||||
- Class
|
||||
|
||||
- Template String
|
||||
- const name = "Nick";
|
||||
`Hello ${name}, the following expression is equal to four : ${2+2}`;
|
||||
|
||||
- Destructing
|
||||
- Array
|
||||
- const myArray = ["a", "b", "c"];
|
||||
//without const x = myArray[0];
|
||||
const y = myArray[1];
|
||||
const [x, y] = myArray;
|
||||
- Object
|
||||
```javascript
|
||||
const person = {
|
||||
firstName: "Nick",
|
||||
lastName: "Anderson",
|
||||
age: 35,
|
||||
sex: "M"
|
||||
}
|
||||
const { firstName: first, age, city = "Paris" } = person;
|
||||
```
|
||||
- Default + Rest + Spread parameters
|
||||
|
||||
- Const
|
||||
- can't be reassigned; but not immutable
|
||||
|
||||
- Let
|
||||
|
||||
- Modules
|
||||
|
||||
- Map / Set
|
||||
|
||||
- Promise
|
||||
- .then().catch()
|
||||
```javascript
|
||||
function getGithubUser(username) {
|
||||
return new Promise((resolve, reject) => {
|
||||
fetch(`https://api.github.com/users/${username}`)
|
||||
.then(response => {
|
||||
const user = response.json();
|
||||
resolve(user);
|
||||
})
|
||||
.catch(err => reject(err));
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
- Enhanced Object Literals
|
||||
|
||||
- Imports/ Exports
|
||||
- export default xx; import xx from ‘..’
|
||||
- export const xx; import {xx} from ‘..’
|
||||
|
||||
- Async/Await
|
||||
- await can only used in an async function.
|
||||
- async function getGithubUser(username) { // async keyword allows usage of await in the function and means function returns a promise
|
||||
try { // this is how errors are handled with async / await
|
||||
const response = await fetch(`https://api.github.com/users/${username}`); // "synchronously" waiting fetch promise to resolve before going to next line
|
||||
return response.json();
|
||||
} catch (err) {
|
||||
alert(err);
|
||||
}
|
||||
}
|
||||
getGithubUser('mbeaudru').then(user => console.log(user)); // logging user response - cannot use await syntax since this code isn't in async function
|
||||
|
||||
# Node.js
|
||||
|
||||
- Npm
|
||||
|
||||
- Yarn
|
||||
|
||||
- Express
|
||||
|
||||
- Stream
|
||||
|
||||
# This
|
||||
|
||||
- Refers who calls
|
||||
```javascript
|
||||
function myFunc() {
|
||||
...
|
||||
}
|
||||
// After each statement, you find the value of *this* in myFunc
|
||||
myFunc.call("myString", "hello") // "myString" -- first .call parameter value is injected into *this*
|
||||
// In non-strict-mode
|
||||
myFunc("hello") // window -- myFunc() is syntax sugar for myFunc.call(window, "hello")
|
||||
// In strict-mode
|
||||
myFunc("hello") // undefined -- myFunc() is syntax sugar for myFunc.call(undefined, "hello")
|
||||
|
||||
var person = {
|
||||
myFunc: function() { ... }
|
||||
}
|
||||
person.myFunc.call(person, "test") // person Object -- first call parameter is injected into *this*
|
||||
person.myFunc("test") // person Object -- person.myFunc() is syntax sugar for person.myFunc.call(person, "test")
|
||||
var myBoundFunc = person.myFunc.bind("hello") // Creates a new function in which we inject "hello" in *this* value
|
||||
person.myFunc("test") // person Object -- The bind method has no effect on the original method
|
||||
myBoundFunc("test") // "hello" -- myBoundFunc is person.myFunc with "hello" bound to *this*
|
||||
```
|
||||
- [http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/](http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/)
|
||||
|
||||
# Closure
|
||||
|
||||
# Frameworks
|
||||
|
||||
- Ionic
|
||||
|
||||
- Angular
|
||||
|
||||
- Vue.js
|
||||
- component
|
||||
- .sync modifier, A kind of two way binding
|
||||
- :abc.sync=“”; $tis.emit(“update:abc”, newValue) //trigger in child component
|
||||
- computed
|
||||
- computed attributes
|
||||
- computed over watcher
|
||||
- watchers
|
||||
- Monitor data changes
|
||||
- cheat sheet
|
||||
- https://vuejs-tips.github.io/cheatsheet/
|
||||
|
||||
- Ember.js
|
||||
|
||||
- Backbone
|
||||
|
||||
-
|
||||
|
||||
- React.js
|
||||
|
||||
- Flux/ Redux
|
||||
- State
|
||||
- Store
|
||||
- Reducer
|
||||
- Action
|
||||
- Dispatch
|
||||
|
||||
# Use promise to avoid nested callbacks.
|
||||
|
||||
# tips
|
||||
|
||||
- object literal
|
||||
- ```javascript
|
||||
Object.keys(object).map(function(objectKey, index) {
|
||||
var value = object[objectKey];
|
||||
console.log(value);
|
||||
});
|
||||
```javascript
|
||||
|
||||
# Application
|
||||
|
||||
# Search
|
||||
- ElasticSearch
|
||||
- Logstash
|
||||
- Kibana
|
||||
|
||||
# APM
|
||||
- Newrelic
|
||||
- Pinpoint
|
||||
|
||||
# Monitor
|
||||
- Bosun
|
||||
- Prometheus
|
||||
|
||||
# API
|
||||
|
||||
- RPC(remote procedure call)
|
||||
- disadvantages
|
||||
- coupling
|
||||
- clients needs to know the request procedure names
|
||||
- advantages
|
||||
- more freedoms to define any requests.
|
||||
- examples
|
||||
- [https://api.slack.com/methods](https://api.slack.com/methods)
|
||||
|
||||
- Restful /Representational State Transfer
|
||||
- Easy to cache
|
||||
- every url represent a resource
|
||||
- disadvantages
|
||||
- some special method is hard to use restful to name it. like /login, /resetpassword
|
||||
- examples
|
||||
- [https://developer.github.com/v3/](https://developer.github.com/v3/)
|
||||
- methods
|
||||
- GET
|
||||
- POST
|
||||
- PUT
|
||||
- DELETE
|
||||
|
||||
- GraphQL
|
||||
- Can define fields you want
|
||||
|
||||
- gRPC
|
||||
- protocol buffers
|
||||
```javascript
|
||||
// The greeter service definition.
|
||||
service Greeter {
|
||||
// Sends a greeting
|
||||
rpc SayHello (HelloRequest) returns (HelloReply) {}
|
||||
}
|
||||
// The request message containing the user's name.
|
||||
message HelloRequest {
|
||||
string name = 1;
|
||||
}
|
||||
// The response message containing the greetings
|
||||
message HelloReply {
|
||||
string message = 1;
|
||||
}
|
||||
```javascript
|
||||
- A opensource remote procedure call framework based on HTTP2 and protobuf
|
||||
- advantages
|
||||
- baed on HTTP2, better performance
|
||||
- call remote like local method, and support multiple language
|
||||
- protobuf serialization and deserialization is faster than JSON
|
||||
|
||||
# Log and Error
|
||||
|
||||
- Sentry
|
||||
Reference in New Issue
Block a user