【笔记】如何获得前端offer

router.replace(location, onComplete?, onAbort?)

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

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),
})

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

this.$router.go(-1)

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

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

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

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

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');

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

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)
  }
 ]
})

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'}})

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

});

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

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

npm init -y

npm add -D webpack webpack-cli

npm run build

node dist/main.js

npm add -D html-webpack-plugin

npm add vue

npm add -D webpack-dev-server

npm add -D style-loader css-loader

npm add -D less-loader

npm add -D less

npm add vue-router

npm add express

npm install vue-router

import router from './router';

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

<script>
var pdada = document.querySelector('p');
pdada.addEventListener('click',updateName);
function updateName(){
    var name = prompt('输入一个新的名字');
    pdada.textContent = '魔王哪吒-达达前端'
}

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

console.log(dada); // 抛出ReferenceError
console.log(魔王哪吒); // 打印“魔王哪吒”

var a;
console.log(a); // 打印"undefined"或""（不同浏览器实现不同）
console.log("魔王哪吒"); // 魔王哪吒

var a = 1;
b = 2;
delete this.a; // 严格模式下抛出错误
delete this.b;
console.log(a,b); // 抛出ReferenceError
// b属性已经被删除

var x=0;

function f(){
    var x=y=1; // x在函数内部声明，y不是
}
f();

console.log(x,y); // 0, 1
// x是全局变量
// y是隐式声明的全局变量

// x是全局变量，赋值为0
var x=0;
// undefined，因为z还不存在
console.log(typeof z);

function a() { // 当a被调用时
 var y = 2; // y被声明成函数a 作用域的变量，赋值为2
 console.log(x,y); // 0 2
 function b() {
     // 当b被调用时
     x=3; // 全局变量x被赋值为3,不生成全局变量
     y=4; // 已经在的外部函数的y变量 被赋值为4，不生成新的全局变量
     z=5; // 创建新的全局变量z，并赋值为5
     // 在严格模式下，会抛出ReferenceError
 }
 b(); // 调用b时创建了全局变量z
 console.log(x,z); // 3,5
}

a(); // 调用a时同时调用了b
console.log(x,z); // 3,5
console.log(typeof y); // undefined,因为y是a函数的本地变量

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

{
    constructor: ƒ doSomething(),
    __proto__: {
        constructor: ƒ Object(),
        hasOwnProperty: ƒ hasOwnProperty(),
        isPrototypeOf: ƒ isPrototypeOf(),
        propertyIsEnumerable: ƒ propertyIsEnumerable(),
        toLocaleString: ƒ toLocaleString(),
        toString: ƒ toString(),
        valueOf: ƒ valueOf()
    }
}

// person1 为原型对象创建了person2对象
// person2.__proto__ 结果返回对象person1
var person2 = Object.create(person1);

// person2.__proto__ === person1

person1.constructor
person2.constructor

instanceName.constructor.name

// person1.constructor.name

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;
}

fun.call(thisArg, arg1, arg2, ...)

function dada(){
    this.width = 10;
    this.height = 20;
}

// 无参构造函数继承

function da1() {
    dada.call(this);
    this.opacity = 0.5;
    this.color = 'blue';
}

var a = new da1()

a

Teacher.prototype = Object.create(Person.prototype)

Student.prototype.coonstructor = Student;

// 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);

var student1 = new Student("掘金");
console.log(student1.copy() instanceof Student); // false

Student.prototype.constructor = Student;

var student1 = new Student("掘金");
console.log(student1.copy() instanceof Student); // true

Teacher.prototype = Object.create(Person.prototype)
Teacher.prototype.constructor = Teacher

typeof(null)
// object

typeof({})
// object

const regex = /ab+c/;

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

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

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

var arr = ["a", "b", "c"];
console.log(Object.getOwnPropertyNames(arr).sort());

// 结果
["0", "1", "2", "length"]

// 类数组对象
var obj = { 0: "a", 1: "b", 2: "c" };
console.log(Object.getOwnPropertyNames(obj).sort());

// 结果
["0", "1", "2"]

// 使用Array.forEach输出属性名和属性值
Object.getOwnPropertyName(obj).forEach(function(val, idx, array) {
   console.log(val+"->"+obj[val]); 
});

// 输出
0 -> a
1 -> b
2 -> c

// fs是 file-system的简写,就是文件夹系统的意思
// 在Node中如果想要进行文件操作,就必须引入fs这个核心模块
// 在js这个核心模块中,就提供了所有的文本操作相关的api
// fs.readFile 就是用来读取文件的

// 使用require方法加载fs核心模块
var fs = require('fs')

// 读取文件
// 第一个参数就是要读取的文件路径
// 第二个参数就是一个回调函数
// error
// 如果读取失败,error就是错误对象
// 如果读取成功,error就是Null
// data
// 如果读取失败,error就是错误对象
// 如果读取成功,data就是读取到的数据

// 成功
// data 数据
// error null
// 失败
// data null
// error 错误对象

fs.readFile('./dada.txt', function(error, data){
    // 文件中存储的其实都是二进制数据0或1
    // 看到的是二进制转16进制
    // toString方法
    console.log(data.toString())
})

var fs = require('fs')

// 第一个参数:文件路径
// 第二个参数:文件内容
// 第三个参数:回调函数

// 成功
// 文件写入成功,error是null
// 失败
// 文件写入失败,error是错误对象
fs.writeFile('./da.md', '大家好,我是达达前端', function(error){
    console.log('文件写入成功')
})

// http 帮你创建服务器

// 加载核心模块
var http = require('http')

// 使用http.createServer()方法创建一个web服务器

// 返回一个server实例
var server = http.createServer()

// 服务器提供服务:对数据的服务
// 发请求
// 接收请求
// 处理请求
// 给个反馈

// 注册 当客户端请求过来,就会自动触发服务器的request请求事件
// 然后执行第二个参数
// 回到处理函数

// request请求事件处理函数,需要接收两个参数:
// Request 请求对象
// 请求对象可以用来获取客户端的一些请求信息,例如请求路径
// Response 响应对象
// 
server.on('request', function(request, response){
    console.log('收到客户端的请求了'+request.url)
    
    // response 对象有一个方法
    // write 用来给客户端发送响应数据
    // write 可以使用多次
    // 最后一定一定要使用end来结束响应
    // 否则客户端会一直等待
    response.write('dada')
    response.write('掘金魔王哪吒')
    response.end()
})

// 绑定端口号 启动服务器
server.listen(3000, function(){
    console.log('服务器启动成功')
})

var http = require('http')

// 创建server
var server = http.createServer()

// 监听request 请求事件,设置请求处理函数
server.on('request',function(req,res){
    console.log('收到请求'+req.url)
    
    res.end('达达前端,魔王哪吒-掘金')
    
    // 根据不同的请求路径发送不同的响应结果
    // 获取请求路径
    // 判断路径响应
    
    // res.end() 响应内容必须是字符串,或二进制数据
    // res.end(JSON.stringify())
    
    var url = req.url
    
    if(url === '/') {
        res.end('index')
    }else if(url === '/login') {
        res.end('login page')
    }else {
        res.end('404 not found')
    }
    
})

// 绑定端口号,启动服务
server.listen(80,function(){
    console.log('服务器启动')
})

var ret = request('./b')

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

console.log(ret.add(1,2))

var foo = '达达前端'
// console.log(exports)
exports.foo = 'hello'

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

var http = require('http')

var server = http.createServer()

server.on('request', function(req, res){
    // 解决编码问题
    // res.setHeader('Content-Type','text/plain;charset=urf-8')
    // res.end('dadaqianduan')
    
    var url = req.url
    // text/plain 普通文本
    if(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...')
})

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('文件读取失败,请稍后重试')
            }else{
                // data默认是二进制数据
                // toString转为字符串
                
                // 图片资源不要指定编码
                // res.setHeader('Content-Type','image/jpeg')
                res.end(data)
            }
        })
    }
})

server.listen(3000, function(){
    
})

// url 统一资源定位符