How to obtain a high note 】【 thrilling front-end offer essay | the nuggets technology

preface

Hardcore Nezha, my destiny is determined by me not by god.

Highlights:

[Illustrated, like collection oh!] Re-study to reinforce your Vuejs knowledge

【 Mind Mapping 】 Front-end development – consolidate your JavaScript knowledge

Web page creation basics

Learn the summary of HTML5 finger front-end (suggested collection, illustrated)

ES6 comprehensive summary

The content of this article to participate in the digging gold technology essay activity “2020 Spring recruitment interview essay”, I hope you support, do not forget to leave your learning footprints, [praise], [comments], [collection] the following content involves 👇 :

Post classified under reading, labeled interview

directory

Personal interview experience
As an examiner, I will ask you about the key points of the interview
Personal collection of interview questions (including answers)
Interview tips
Organized knowledge system (personal key content)
For friends who have interview needs, need help

The so-called exciting offer is to let you admire, want, pursue, if you are a social person, remember that the interview of their own experience? Do you regret that you did not insist on working hard at 🏫 school? If you are a student, you will face an interview after leaving the university, have you prepared 👌?

The interview is like a test, testing whether you have a firm grasp of the knowledge points, a successful interview will make you full of confidence in yourself, perhaps most people face the interview is a failure again and again, get the frustration of the heart blow.

So how can you be responsive in an interview, or be less demanding and be remembered? Under the layer by layer interrogation of the examiner, comb out your knowledge system in your mind and find the answer you want.

Interview experience, in fact, can draw a parallel, analogous to the exam, after the previous school exam, learning skills and so on similar, but the interview is an interview tube on the spot to ask you questions, you answer such a model, the interview is generally several rounds, each company has different.

The interview is also a rare test of self – knowledge. From the 6 points in the catalog, I hope to help myself and others grow.

1. Personal interview experience

Personal interview experience, from the school by the teacher recommended to friends of the front-end development work, to find a job in myself again, repeatedly interviewed several into one, to present a company front development lead, personal feel their interview experience into the normal track, is ready to resume, interview shows his project to discuss their achievements in school and so on.

The content focuses on the interview experience and interview preparation, interview preparation is actually their own knowledge system, and the necessary interview test points, net red topics.

2. As an examiner, I will ask you about the key points of the interview

Below, take you to read the knowledge system together, big length interview key. I hope it helps.

Interviewer: Tell me about it`VueRouter`

Vue. Js plus Vue Router to create a single page application, very simple. Compose your application by composing components. When adding a Vue Router, map component components to routing routes and tell the Vue Router to render them.

$route.params = $route.params = $route.params = $route.params = $route.

model	Matching path	`$route.params`
`/user/:username`	`/user/evan`	`{ username: 'evan' }`
`/user/:username/post/:post_id`	`/user/evan/post/123`	`{ username: 'evan', post_id: '123' }`

Responds to changes in routing parameters

When routing parameters are used to navigate from /user/foo to /user/bar, the original component instance is reused. Because both routes render the same component, reuse is more efficient than destroying and recreating. However, this also means that the component’s lifecycle hooks are no longer called.

Vue RouterThe nested routine in
Programmatic navigation

Declarative and programmatic:

declarative	programmatic
`<router-link :to="..." >`	`router.push(...)`

Example:

router.replace(location, onComplete? , onAbort?)Copy the code

Declarative and programmatic:

declarative	programmatic
`<router-link :to="..." replace>`	`router.replace(...)`

Understand the use of named routes
To understandVueRouterUse of redirects and aliases
Understand routing component parameters: Boolean mode, object mode, function mode
To understandVue Routerthehtml5 historymodel
Know how to usewebpackFrom zero to buildvue.js+vuerouter+webpackproject
To understandVUe RouterNavigation guard in
To understandVue RouterRouting meta information in
To understandVue RouterTransitive dynamic effect in
To understandVue RouterData acquisition in
To understandVue RouterRolling behavior in

Vue-router is the path manager for SPA (single page application). The essence of routing module is to establish the mapping between URL and page.

One of the core aspects of a single page application (SPA) is updating the view without rerequesting the page

Hash mode, the default hash mode, uses the hash of the URL to simulate a complete URL. When the URL changes, the page will not be reloaded.

Hash is the #, the anchor point of the URL, and represents a location in the web page. Changing only the part after the # sign will not reload the web page, but will scroll to the corresponding location.

That is, the hash appears in the URL and is not included in the HTTP request, which has no impact on the back end, so changing the hash does not reload the page. Note, however, that every time you change the part after the # symbol, you add a record to the browser’s access history, and when you use the Back button, you go back to where you were last time.

In hash mode, you can render to the dom by changing the anchor point value.

Hash mode is based on the onHashChange event, which is used to listen for changes in hash values, and can be listened for on window objects.

The history mode leverages the HTML5 history Interface’s pushState() and replaceState() methods, which are used on the browser record stack.

Use history mode, need background configuration support, better! Add a static resource on the server that covers all cases. If the URL doesn’t match any static resources, it should return an index.html page that the app relies on.

const routes = [ 
  {path: "/", name: "home", component:Home}
  {path: "/register", name: "register", component: Register},
  {path: "/login", name: "login", component: Login},
  {path: "*", redirect: "/"}]
Copy the code

The way to realize the page jump:

Example:

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './components/app.vue';
import Home from './components/home.vue'
Vue.use(VueRouter);
let router = new VueRouter({
    routes: [
        { path: '/home', component: Home }
    ]
});
new Vue({
    el: '#app',
    router: router,
    render: c => c(App),
})
Copy the code

<template>
    <div>
        <router-view></router-view>
    </div>
</template>
<script>
    export default {
        data() {return {}
        }
    }
</script>
Copy the code

this.$router.go(-1)

this.$router.replace('/ 1')

this.$router.replace({name:'1'})

this.$router.push('/ 1')

this.$router.push({name:'1'})
Copy the code

$router.push and $router.replace

usepushMethod jumps tohistoryAdd a new record to the stack and return to the previous page when clicking the browser back button
usereplaceMethod does not respond tohistoryAdd a new record, but replace the current recordhistoryRecord.

NPM install vue-router

main.js:

import Vue from 'vue'
import APP from './App'
import router from './router'

new Vue({
 router: router,
 render: h=>h(App),
 data: {
     eventHub: new Vue()
 }
}.$mount('#app');
Copy the code

Lazy loading mode:

component: resolve => require(['/'], resolve)
Copy the code

import Vue from 'vue';
import VueRouter from 'vue-router';
import linkParams from './page/linkParams.vue';
Vue.use(VueRouter);
const router = new VueRouter({
 mode: 'history',
 base: __dirname,
 routes: [
  {
      path: '/linkParams/:userId',
      name: 'linkParams',
      component: linkParams
  },
  {
      path: '/imgParams',
      name: 'xxx',
      component: resolve => require([], resolve)
  }
 ]
})
Copy the code

Programmatic navigation

Example:

this.$router.push('home')

this.$router.push({path: 'home'})

this.$router.push({name:'user',params:{userId:123}})

this.$router.push({path: 'register', query: {userId: '123'}})
Copy the code

Global hook function

router.beforeEach((to, from, next)=>{
  next();
});
router.afterEach((to, from, next) => {

});
Copy the code

Route exclusive hook functions

const router = new VueRouter({
  routes: [
    {
      path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... }}}])Copy the code

Component internal hook functions

const BOO = {
    template: The '-',
    beforeRouteEnter(to, from, next){
        
    },
    beforeRouteUpdate(to, from, next){
        
    },
    beforeRouteLeave(to, from, next){
        
    }
}
Copy the code

Route Object Indicates the status information of the active route, including the information obtained from the current URL resolution and route Records matched by the URL.

Spa single page application, the core of front-end routing is to change the view without sending requests to the back end.

Webpack Construction Project:

npm init -y
Copy the code

npm add -D webpack webpack-cli
Copy the code

npm run build
Copy the code

node dist/main.js
Copy the code

Packaging HTML

npm add -D html-webpack-plugin
Copy the code

Add the vue

npm add vue
Copy the code

npm add -D webpack-dev-server
Copy the code

npm add -D style-loader css-loader
Copy the code

npm add -D less-loader
Copy the code

npm add -D less
Copy the code

npm add vue-router
Copy the code

npm add express
Copy the code

The concept of routing emerged from the back end. The server sends a request through the URL in the browser. The server listens to the request sent from the port, resolves the URL path, and returns corresponding information according to the routing configuration of the server.

Routing is a way to interact with the back-end server and request different resources based on different paths.

Implementation principle, SPA single page application, a page when it loads the page, will not load the content of the entire page, only update the content of a specified container.

Single page application core: Updated views do not re-request the page; Vue-router provides three modes to implement single-page application front-end routing: Hash mode, history mode, and abstract mode.

hashAnd for the use ofURL hashValue for routing
history, rely onhtml5 history apiAnd server configuration
abstract, support allJavaScriptRuntime environment

Why front-end routing when you have back-end routing?

The worst thing about back-end routing is that every route switch causes a page refresh, which is not very user friendly. For a better user experience, there is front-end routing.

It appears, so that the browser does not refresh.

Get to know:

window.history.pushState()Adds a record to the session browsing history.
window.history.replaceState(), which modifies the current record of the session browsing history. The total length of the browsing history does not change.

These two methods can change the URL without the page being refreshed.

When we use hash routing, every time the hash value changes, a HashChange event is triggered, so we listen for that event to see if the hash value has changed.

History mode, which provides an onPopState event in the Window object to listen for changes to the history stack.

Install dependencies:

npm install vue-router
Copy the code

main.js

import router from './router';

new Vue({
 router: router,
 render: h => h(App),
})
Copy the code

Know JavaScript

JavaScriptDefinition: it is a function-first, lightweight, interpreted, just-in-time compiled programming language.JSIs a dynamic prototype-based and multiparadigm scripting language that supports object-oriented, imperative, and functional languages.
It supports object-oriented programming, imperative programming, functional programming, and function-first languages; It provides manipulation text, arrays, dates, and regular expressions.
Declaration of variables is usually done before the rest of the code executes
The declaration of a variable, no matter where it occurs, is handled before any code is executed. The scope of a variable declared with var is its current execution context. It can be a nested function or a variable declared outside of any function.
A value assigned to an undeclared variable is performed when an assignment is performed

Example:

<script>
var pdada = document.querySelector('p');
pdada.addEventListener('click',updateName);
function updateName(){
    var name = prompt('Enter a new name');
    pdada.textContent = 'Nezha - Dada Front End'
}

// onclick
document.querySelector('html').onclick=function() {};
Copy the code

Description of variables: The difference between declared and undeclared variables:

The scope of declared variables is limited to the context in which they are declared; non-declared variables are always global.
Declared variables are created before any code is executed, whereas non-declared variables are created only when an assignment is performed.
A declared variable is a non-configurable property of its context, while a non-declared variable is configurable.

Example:

console.log(dada); // ReferenceError console.log(Nezha); // Print nezhaCopy the code

var a; console.log(a); / / print"undefined"or""(Different browsers implement it differently.) console.log(Nezha); // NezhaCopy the code

var a = 1; b = 2; delete this.a; // Strict mode throws an error delete this.b; console.log(a,b); // ReferenceError is raised // the b attribute has been removedCopy the code

It is recommended that variables always be declared, whether they are in function or global scope. Assigning to undeclared variables raises an error in ECMAScript5 strict mode.

What is variable promotion

Since variable declarations are always processed before any code is executed, declaring variables anywhere in the code is always equivalent to declaring them at the beginning of the code, and variables can be used before declaration.

All variable declarations are moved to the beginning of the function or global code.

It is recommended to always declare variables at the top of the scope, at the top of the global code and at the top of the function code, so it is clear which variables are function scoped and which are resolved on the scope chain.

Initialization of multiple variables

var x=0;

function f(){ var x=y=1; // x is declared inside the function, y is not} f(); console.log(x,y); // 0, 1 // x is a global variable // y is an implicitly declared global variableCopy the code

Implicit global variable and external function scope

Var x=0; // undefined because z does not yet exist console.log(typeof z);function a() {var y = 2; // y is declared as a variable in function a's scope and assigned to 2 console.log(x,y); / / 0 2function b() {// when b is called x=3; // global x is assigned to 3, y=4 is not generated; // The external function y is assigned to 4, no new global z=5 is generated; // Create a new global variable z and assign it to 5 // In strict mode, raise ReferenceError b(); // the global variable z console.log(x,z) is created when b is called; / / 3, 5} (a); // call a with b console.log(x,z); / / 3, 5 console. The log (typeof y); // undefined because y is a local variable of function ACopy the code

Pseudo-code, loop process:

loop(foo=0, eatFood=10){
    if(foo = eatFood){
        exit loop;
    }else{ foo+=2; }}Copy the code

Stereotype chain: Each object has a stereotype object from which it inherits methods and properties. A stereotype object can also have a stereotype and inherit methods and properties from it, layer by layer, and so on. This relationship is called a stereotype chain.

In other words, the properties and methods are defined on the Prototype property on top of the Object constructor, not the Object instance itself.

{constructor: ƒdoConstructor: ƒ Object(), hasOwnProperty: ƒ hasOwnProperty(), isPrototypeOf: ƒ isPrototypeOf(), ƒ Isenumerable: ƒ propertyIsEnumerable(), toLocaleString: ƒ toLocaleString(), toString: ƒ toString(), valueOf: ƒ valueOf()}}Copy the code

What are prototypes, Prototype and __proto__, and Prototype chains

Create () : Creates a new Object instance using the object.create () method:

Person2 = object.create (person1); person2 = object.create (person1); // person2.__proto__ === person1Copy the code

Create () actually creates a new object from the specified prototype object.

The constructor property

Each instance object inherits from the stereotype a constructor property that points to the constructor used to construct this instance object.

person1.constructor
person2.constructor
Copy the code

Both return the Person() constructor because it contains the original definitions of these instances.

Want to get the name of the constructor for an object instance:

instanceName.constructor.name

// person1.constructor.name
Copy the code

Inheritance of the original type

Define the constructor function

function Person(first, last, age, gender, interests) {
    this.name = {
        first,
        last,
    };
    this.age = age;
    this.gender = gender;
    this.interests = interests;
}

Person.prototype.greeting = function(){
    console.log('hello'+this.name.first)
}

function dadaqianduan(first, last, age, gender, interests, subject) {
    Person.call(this, first, last, age, gender, interests);
    
    this.subject = subject;
}
Copy the code

Function.prototype.call()

The call() method calls a function with a specified this value and separately supplied arguments (a list of arguments)

This method works like apply() except that call() receives a list of arguments, whereas apply() receives an array of arguments.

Grammar:

fun.call(thisArg, arg1, arg2, ...)
Copy the code

The return value of the function called with the this value and arguments provided by the caller, or undefined if the method does not return a value.

This in the figure points to the position of ABC.

Inherits from a no-argument constructor

Example:

function dada(){ this.width = 10; this.height = 20; } // No argument constructor inheritancefunction da1() { dada.call(this); This. Opacity = 0.5; this.color ='blue';
}
Copy the code

var a = new da1()

a
Copy the code

Sets references to stereotypes and constructors

Teacher.prototype = Object.create(Person.prototype)
Copy the code

Any method you want to inherit should be defined in the constructor’s Prototype object, and always use the parent class’s prototype to create the subclass’s prototype, so as not to mess with the class inheritance structure.

why is necessary to set the prototype constructor?

Student.prototype.coonstructor = Student;
Copy the code

Example:

// define the Person Class
function Person(name) {
    this.name = name;
}

Person.prototype.copy = function() {
    // return new Person(this.name);
    return new this.constructor(this.name);
};

// define the Student class
function Student(name) {
    Person.call(this, name);
}

// inherit Person
Student.prototype = Object.create(Person.prototype);
Copy the code

var student1 = new Student("Nuggets");
console.log(student1.copy() instanceof Student); // false
Copy the code

Add:

Student.prototype.constructor = Student;

var student1 = new Student("Nuggets");
console.log(student1.copy() instanceof Student); // true
Copy the code

inheritance

Example:

Teacher.prototype = Object.create(Person.prototype)
Teacher.prototype.constructor = Teacher
Copy the code

What is a JSON

Statement:

Var: declare a variable and optionally initialize a value let: declare a block-scoped local variable and optionally initialize a value const: declare a block-scoped read-only constant

Use a variable as a sign name for a value. The variable name is also called an identifier. It must begin with a letter, underscore, or dollar sign ($). Subsequent characters can also be numbers.

Labeled statement

A label provides an identifier that you can refer to elsewhere in your program.

for… The in statement loops through a specified variable to loop through all the enumerable properties of an object.

for… Of and the for… In The difference between two types of loop statements:

for... inThe result of the loop is the index of the array element
for... ofThe result of the traversal is the value of the element

Function declaration: A function definition, also known as a function declaration, or function statement, consists of a series of function keywords.

Recursion: A function can point to and call itself.

Nested function: a function nested within another function. Nested (inner) functions are private to their container (outer) functions. It forms a closure by itself. The inner function contains the scope of the outer function.

The inner function forms a closure that can access the arguments and variables of the outer function, but the outer function cannot use its arguments and variables.

The inner function has access to the scope of the outer function, so if the inner function has a longer life than the outer function, the variables defined in the outer function and the function have a longer life than the inner function. The outer function is destroyed only when the inner function is destroyed.

Using Arguments objects

The actual arguments to the function are stored in an array-like arguments object.

Arrow functions have a shorter syntax than function expressions and bind this lexically.

typeof(null)
// object

typeof({})
// object
Copy the code

Expression: A collection of codes that returns a value. The this keyword is used to refer to the current object; usually, this refers to the object being called in the method.

Split Splits a string into an array of strings by splitting the string into a substring.

Slice extracts a fragment from a string and returns it as a new string.

Substring,substr, returns a specified subset of strings by specifying a start and end position, a start position, and a length, respectively.

Match,replace, and search work with regular expressions.

ToLowerCase and toUpperCase return lowercase and uppercase strings, respectively.

Normalize normalize the current string in one of the specified Unicode normal forms.

Repeat, returns after repeating the string contents a specified number of times.

Trim, removes whitespace at the beginning and end of the string.

Regular expression

Regular expressions are patterns used to match combinations of characters in strings. In JavaScript, regular expressions are also objects.

Use a regular expression literal:

const regex = /ab+c/; const regex = /^[a-zA-Z]+[0-9]*\W? _$/gi;Copy the code

Regular expressions can be used for the exec and test methods of RegExp and the match, replace, search, and split methods of String.

The exec() method performs a search match in a specified string, returning either a result array or NULL.

Test A RegExp method that tests a match in a string, returning true or false.

Match A String method that performs a search for a match in a String, returning either an array or null if there is no match.

Search A String method that tests a match in a String, returning the index of the matched position, or -1 on failure.

Replace A String method that looks for a match in a String and replaces the matched substring with a replacement String.

How to use Promise

A Promise is a result object that represents the final completion or failure of an asynchronous operation. Is essentially an object that is bound to a callback, rather than passing the callback inside a function.

Example:

function wait(ms){
    return new Promise(function(resolve,reject){
        setTimeout(resolve,ms);
    })
}

console.log('开始')
wait(3000).then(()=>{
  console.log('123')})Copy the code

A Promise has the following states:

Pending: an initial state that is neither successful nor failed; Depressing: means that the operation is completed successfully. Rejected: Indicates that the operation fails.

A Promise object is a proxy object, and the proxied value may not be known at the time the Promise object is created. It allows you to bind the respective handling methods for the success and failure of asynchronous operations.

Let asynchronous methods return values like synchronous methods do, but instead of an immediate final execution result, a promise object that represents a future outcome.

Because the promise.prototype. then and promise.prototype. catch methods return a Promise object, they can be called chained.

The promise. all method returns a new Promise object that will succeed only if all of the Promise objects in the iterable argument object succeed. The failure of any of the iterable promise objects triggers the failure of that promise object.

A new Promise that fires a success state returns an array of all the promise returns from iterable, in the same order as the iterable. If the new Promise fires a failure state, It treats the error message from the first promise object in Iterable that triggers a failure as its failure message.

Promise.race When any of the child promises in the iterable argument succeeds or fails, the parent Promise immediately calls the parent Promise’s binding handle using the child Promise’s success return value or failure details as arguments and returns the Promise object.

A collection of keys in JavaScript

A Map object is a simple collection of key-value pair mappings that traverse all the elements in the order in which they were inserted.

Object in JavaScript

Enumerates all properties of an object

for… In loop, which in turn accesses all the enumerable properties of an object and its prototype chain.

Keys (o), which returns an array of the names of all the properties that the Object O contains itself.

Object. GetOwnPropertyName (o), the method returns an array, it contains the Object o all have the name of the property.

var arr = ["a"."b"."c"]; console.log(Object.getOwnPropertyNames(arr).sort()); / / results ["0"."1"."2"."length"Var obj = {0:"a", 1: "b", 2: "c"}; console.log(Object.getOwnPropertyNames(obj).sort()); / / results ["0"."1"."2"] / / use the Array output forEach attribute name and attribute value Object. GetOwnPropertyName (obj). ForEach (function(val, idx, array) {
   console.log(val+"- >"+obj[val]); }); 0 -> a 1 -> b 2 -> cCopy the code

Memory management in JavaScript

Memory life cycle:

Allocate as much memory as you need, use it, and return it when you don’t need it.

Node.js

To learn Node.js, you need to prepare knowledge of HTML, CSS, javascript, simple command line operation, and have experience in server-side development.

Node.js is not a language
Node.js is not a library, not a framework
Node.js is a JavaScript runtime environment
Node.js can parse and execute JavaScript code

In the node. Js JavaScript

No BOM, DOM, EcmaScript, extra API

Node.js can be used as a web server backend and command-line tool

B/S programming model: Browser-server, back-end. Modular programming, RequireJS, SeaJS. Modular programming is the ability to reference and load JavaScript script files in node like @import().

Asynchronous programming: callback functions, Promise, async, Generator

Do not use Node.js file names, do not use Chinese. In Node, EcmaScript is encoded with no Bom, NO Dom, and no JavaScript in a browser.

// Fs is short for file-system, which stands for folder system. // In Node, if you want to perform file operations, you must import the fs core module. // In js core module, all the text operations related API // fs.readfile Var fs = require() var fs = require('fs'// The first argument is the file path to read // the second argument is a callback function // error // Error is an error object if the read fails // Error is Null if the read succeeds // data // Fs.readfile () fs.readfile () fs.readfile () fs.readfile () fs.readfile () fs.readfile () fs.readfile () fs.readfile () fs.readfile () fs.readfile () fs.readfile () fs.readfile ()'./dada.txt'.function// toString console.log(data.tostring ())})Copy the code

var fs = require('fs'Fs.writefile (fs.writefile) (fs.writefile) (fs.writefile) (fs.writefile) (fs.writefile) (fs.writefile)'./da.md'.'Hello, I'm Dada Front.'.function(error){
	console.log('File write succeeded')})Copy the code

Var HTTP = require('http'// Create a Web server using http.createserver (). // Return a server instance. Var server = http.createserver ( // The request event handler receives two parameters: // The request event handler receives two parameters: // Request object // Request object can be used to obtain some Request information from the client, such as the Request path // Response Response object // server.on('request'.function(request, response){
	console.log('Received client request'+request.url) // The response object has a method // write to send response data to the client. // Write can be used multiple times. // The response must be terminated with end or the client will wait response.write('dada')
	response.write('Nezha the Gold Digger') response.end()}) // Bind port number to start server.listen(3000,function(){
	console.log('Server started successfully')})Copy the code

What is Node.js? It’s a JavaScript runtime, not a language, not a framework, it’s a platform, no BOM, no DOM. EcmaScript is the basic JavaScript language part of EcmaScript. Node.js provides JavaScript with server-level apis, file-manipulation capabilities, and HTTP service capabilities.

var http = require('http'Var server = http.createserver () var server = http.createserver'request'.function(req,res){
	console.log('Request received'+req.url)
	
	res.end('Dada front, Nezha - Digging Gold'// Get the request path // Determine the path response // res.end() The response content must be a string or binary data // res.end(json.stringify ()) var url = req.urlif(url === '/') {
		res.end('index')}else if(url === '/login') {
		res.end('login page')}else {
		res.end('404 not found'}}) // add a port number to the server.function(){
	console.log('Server start')})Copy the code

Core modules:

Node provides a number of server-level apis for JavaScript, most of which are wrapped in a named core module.

Fs core module file operation, HTTP server constructed HTTP module, path path operation module, etc.

In Node, there is no global scope, only a module scope.

The require method does two things:

Load the file module and execute the code inside
Get the interface object exported by the loaded file module

An object is provided in each file module: Exports exports defaults to an empty object

var ret = request('./b')

// console.log(ret)
console.log(ret.foo)

console.log(ret.add(1,2))
Copy the code

var foo = 'Dada front end'
// console.log(exports)
exports.foo = 'hello'

exports.add = function(x,y) {
    return x+y
}
Copy the code

Web server development:

The IP address is used to locate the computer, and the port number is used to locate the specific application program. All the software that needs to communicate with the Internet will occupy a port number. The port number ranges from 0 to 65536, and there are some default port numbers in the computer.

The response Content type is content-type

var http = require('http')

var server = http.createServer()

server.on('request'.function(req, res){// Solve encoding problem // res.setheader ('Content-Type'.'text/plain; charset=urf-8')
	// res.end('dadaqianduan'Var url = req.url // text/plain textif(url === '/plain'){
		res.setHeader('Content-Type'.'text/plain; charset=utf-8')
		res.end('dadaqianduan')}else if(url === '/html'){
		res.setHeader('Content-Type'.'text/html; charset=utf-8')
		res.end('<p>dadaqianduan</p>')
	}
	
})

server.listen(3000, function(){
	console.log('server is runing... ')})Copy the code

var http = require('http')
var fs = require('fs')

var server = http.createServer()

server.on('request'.function(req, res){
	var url = req.url
	if(url === '/'){
		fs.readFile('./resource/index.html'.function(err,data){
			if(err){
				res.setHeader('Content-Type'.'text/plain; charset=utf-8')
				res.end('File read failed, please try again later')}else{// data defaults to binary data // toString toString // image resources do not specify encoding // res.setheader ('Content-Type'.'image/jpeg')
				res.end(data)
			}
		})
	}
})

server.listen(3000, function(){}) // url Uniform resource locatorCopy the code

Send files over the network

You’re not sending a file, you’re essentially sending the contents of the file; When the browser receives a response from the server, it will parse it based on your Content-Type.

The difference between server rendering and client rendering

Client rendering is not conducive to SEO search engine optimization
Server-side renderings can be fetched, while client-side asynchronous renderings are harder to get
True web sites are neither pure asynchronous nor pure service rendering

IP address and port number

All programs connected to the network need to carry out network communication. The computer has only one physical nic, and the address of the NIC must be unique in the same LAN.

Network cards are located by unique IP addresses. The port number is used to identify specific applications. All applications that need to communicate with the Internet use a port number. The port number ranges from 0 to 65536.

JavaScript mind maps

A more in-depth look at JavaScript awaits the next summary.

3. Personal collection of interview questions (including answers)

Interview-answe 1+1: Catalog

Github.com/webVueBlog/…

Interview tips

Interview research points:

For the basics, you need to master basic technical points, libraries and frameworks
Experience, such as what projects have been done and what core problems have been solved in the projects; In the process of project development, how to coordinate multiple roles at the front and back end; How many people collaborate on development; How can you talk about all aspects of your work, your thinking, your project, your team, yourself
In the part of thinking, the framework applies to the scene, and the solution of a technical scene is designed
In the interview part, the first round, the boss’s interview, the test focuses on the comprehensive ability, the second round, the technical director, focuses on the algorithm and comprehensive ability, the third round, the HR will be good, etc

For resumes: Don’t list too much, usually two pages long, highlight special skills, management, cross-side, full stack, key projects, core problems solved, github or website, etc.

Interview preparation, the most important technical points that have been done recently are sorted out, the overall structure and thinking improvement can be clearly described, and the common questions are reviewed. It is not necessary to be comprehensive, but it is important to prepare questions to ask the interviewer.

During the interview, be calm, don’t overthink, stick to the facts and let the interviewer listen to you. Master the initiative, many questions do not have standard answers, so try to answer the line, the examiner’s investigation point may not be the question itself.

5. Organized knowledge system

【 suggestion 👍 】 from 0 to 1 web front-end

A web directory – 0-1

Github.com/webVueBlog/…

6. Help provided to friends who have interview needs

Excellent engineer, curiosity, learning ability, analytical problem-solving methods and ability.

Use technology to solve problems in life, have their own small works, columns or learning summary, invest a lot of time in technology, etc.

Read books, read and write, emulate implementations, and learn popular development frameworks

Use the framework to develop widgets, projects, etc

In-depth understanding of the various framework to solve the core problems, to solve the problem of multi-person development, engineering

Deep js bottom layer, understand the core mechanism of various frameworks, architects

More highlights: www.dadaqianduan.cn/#/

7. References

MDN:developer.mozilla.org/

Wikipedia :zh.wikipedia.org/

JavaScript Advanced Programming (version 3)

How to obtain a high note 】 【 thrilling front-end offer essay | the nuggets technology

preface

1. Personal interview experience

2. As an examiner, I will ask you about the key points of the interview

Interviewer: Tell me about itVueRouter

Know JavaScript

Function.prototype.call()

Regular expression

How to use Promise

A collection of keys in JavaScript

Object in JavaScript

Memory management in JavaScript

Node.js

The difference between server rendering and client rendering

IP address and port number

JavaScript mind maps

3. Personal collection of interview questions (including answers)

Interview tips

5. Organized knowledge system

6. Help provided to friends who have interview needs

7. References

Related Posts

Matlab repelem, Repmat, Kron repeat array

Flink Zero-basics Tutorial: How to calculate hot Products in real time

RxSwift Case Study (1)

How to obtain a high note 】【 thrilling front-end offer essay | the nuggets technology

Interviewer: Tell me about it`VueRouter`