10分钟入门~面试官问我这个问题，我自信的站了起来！一笑生花

最新推荐文章于 2022-03-12 17:45:52 发布
最新推荐文章于 2022-03-12 17:45:52 发布
阅读量353 收藏 6
点赞数 18
分类专栏： 新星计划 javascript 个人心得 文章标签： 新星计划 javascript 面试 闭包 继承
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44070254/article/details/117261922
版权
本文详细讲解前端面试常考知识点——闭包和继承。通过案例解析了闭包的形成条件、应用场景及常见面试题，还探讨了不同继承方案的优缺点，包括原型继承、借用函数继承等。适合初学者巩固知识，也为面试做准备。
摘要由CSDN通过智能技术生成

如果你是一个入门初学者，对前端的重要知识掌握的不够扎实或间接遗忘，亦或你是现在正在寻找工作，背烂了面试题，却被面试官处处难为到，这篇博文一定对你有很大的帮助，这篇博文主要详细结合案例讲述前端的难点：闭包和继承。 是许多前端大佬拿来反复咀嚼的知识，也是面试官们必问的题了吧。下面结合案例来讲述，希望这篇博文对你能起到较大的帮助。

认识函数

函数在内存中执行原理

函数定义过程：

function fn(){
    var num = 10;
    num++;
	console.log(num)
}

在这里插入图片描述
函数调用过程：

函数调用的时候，会在内存中的另外一个空间（执行空间）中进行，当函数执行结束后，执行空间立马销毁：

fn()

在这里插入图片描述

执行空间不销毁的函数

如果一个函数中返回了一个复杂类型数据，这个函数中的执行空间就不会被销毁：

function fn(){
    return {
        
    }
}
var obj = fn()

执行的时候的过程：
在这里插入图片描述
因为栈中变量obj跟执行中间中返回的数据空间保持了引用关系，所以这个fn的执行空间不能销毁，因为一旦销毁后，就没有了obj引用的数据空间了。

闭包

作用域嵌套形成的一种js的高级应用场景。

闭包xmind图

在这里插入图片描述

形成条件

大函数中直接或间接的返回一个小函数，小函数访问大函数中的变量。此时大函数的执行空间不会被销毁了。小函数叫做大函数的闭包函数。

function fn(){
    var num = 10;
    function fun(){
        num++;
        return num
    }
    return fun;
}
var f = fn();

/当一个大函数中，返回一个小函数，小函数中使用了大函数中的变量 - 里面小函数叫做大函数的闭包


 function fn(){
     var num = 10;
     return function(){
         num++;
         console.log(num);
    }
 }

 var fun = fn()
 console.log(fun);

 fun()
 fun()
 fun()
 fun()
 fun()
 fun()

钱包系统 - 存钱、消费、查看余额

var money = 100;

money += 10;

console.log(money);

money -= 20;

定义在全局中的变量，容易被覆盖 - 会污染全局
function fn(){
    var money = 100;
    return money
}

var m = fn()
console.log(m);
没有办法操作局部的money，无法存钱和消费了

function fn(){
    var money = 100;
    function fun(num){
        money += num
        return money
    }
    return fun
}

var f = fn()
var m = f(30)
console.log(m);


var n = f(40)
console.log(n);

闭包的应用场景

闭包的应用场景 - 通常会使用闭包解决 在循环中执行异步代码的问题

for(var i=1;i<=3;i++){
    setTimeout(function(){
        console.log(i);
    },1000*i)
}

for(var i=1;i<=3;i++){
    function fn(i){
        // var i = 1/2/3
        setTimeout(function(){
            console.log(i);
        },1000*i)
    }
    fn(i)
}


for(var i=1;i<=3;i++){
    var fn = (function(i){
        return function(){
            setTimeout(function(){
                console.log(i);
            },i*1000)
        }
    })(i)
    fn()
}

tab切换

var oLis = document.querySelectorAll('li')
var oDivs = document.querySelectorAll('div')
for(var i=0;i<oLis.length;i++){
    (function(i){
        oLis[i].onclick = function(){
            // 将所有的li的active去掉
            for(var j=0;j<oLis.length;j++){
                oLis[j].className = '';
                oDivs[j].className = '';
            }
            this.className = 'active';
            // 让i能用
            console.log(i);
        }
    })(i)
}

星星评分：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document</title>
</head>
<body>
<img src="./images/rank_3.gif" alt=""><img src="./images/rank_4.gif" alt="">
<img src="./images/rank_3.gif" alt=""><img src="./images/rank_4.gif" alt="">
<img src="./images/rank_3.gif" alt=""><img src="./images/rank_4.gif" alt="">
<img src="./images/rank_3.gif" alt=""><img src="./images/rank_4.gif" alt="">
<img src="./images/rank_3.gif" alt=""><img src="./images/rank_4.gif" alt="">
</body>
<script>
var oImgs = document.querySelectorAll('img')
for(var i=0;i<oImgs.length;i++){
    oImgs[i].onmouseover = fn(i)
}

function fn(i){

    return function(){
        for(var j=0;j<=i;j++){
            if(j%2){
                oImgs[j].src = './images/rank_2.gif';
            }else{
                oImgs[j].src = './images/rank_1.gif';
            }
        }
        for(var j=i+1;j<oImgs.length;j++){
            if(j%2){
                oImgs[j].src = './images/rank_4.gif';
            }else{
                oImgs[j].src = './images/rank_3.gif';
            }
        }
    }
}
</script>
</html>

闭包的作用：

  1. 保护变量私有化 - 定义在函数内部的变量就是私有变量
  2. 使用函数外部访问到函数内部的私有变量
  3. 延长了变量的生命周期

缺点：有一个不会被销毁的内存空间，容易造成内存泄漏。

闭包的应用案例：循环中绑定事件 - 星星评分

闭包的语法糖

语法糖：就是利用这个语法的一种场景，且使用起来方便, 但是看起来不舒服。

闭包有一个语法糖是获取器和设置器，分别是get和set。

正常的写法和用法：

function fn(){
    var num = 100;
    return {
        getNum(){
			return num;
        },
        setNum(val){
            num = val
        }
    }
}

var res = fn();
console.log(res.getNum()) // 100
res.setNum(500)
console.log(res.getNum()) // 500

语法糖写法：

function fn(){
    var num = 100;
    return {
        get num(){
			return num;
        },
        set num(val){
            num = val
        }
    }
}

var res = fn();
console.log(res.num) // 100
res.num = 500
console.log(res.num) // 500

get方法想要做的事情就是访问num的值，set方法想要做的事情就是设置num的值

换语法糖写之后，num作为了res对象的属性，直接可以访问，当访问num值的时候，其实就是在调用get方法，当给num直接赋值的时候，其实就是在调用set方法。

函数柯里化

函数柯里化其实就是利用闭包将函数的多个参数拆分成多个函数使用，方便模块化开发，例：

function fn(reg,username){
	return reg.test(username)
}

这是一个验证用户名是否正确的函数，调用方式如下：

var reg = /^[a-zA-Z]\dw{3,11}$/;
var res = fn(reg,'cuihua')

var res1 = fn(reg,'ruhua')

从上面重复使用的代码中可以看出来，每次使用的reg都是一样的，且在模块化开发中，不建议将变量暴露出来，暴露的都是一个一个的方法，也就是函数，所以讲上面的函数改写：

function fn(reg){
    return function(username){
        return reg.test(username)
    }
}

使用方式如下：

var test = fn(/^[a-zA-Z]\dw{3,11}$/);
var res = test('cuihua')

var res1 = test('ruhua')

这种使用方式，没有将变量暴露在外，而是将函数内部的函数暴露在外面，更加符合模块化的要求。

这就是函数的柯里化。

案例：正则验证的模块化封装

闭包面试题

function fn(i){
    return function(n){
        console.log(n + (--i))
    }
}
var f = fn(2)
f(3)
fn(4)(5)
fn(6)(7)
f(8)  ---结果是  8

继承

继承xmind图

在这里插入图片描述

概念

如下三个构造函数：

function Animal(name,age){
    this.name = name;
    this.age = age
}

Animal.prototype.say = function(){
    console.log('各种声音')
}

function Cat(eye) {
    this.eye = eye
}

Cat.prototype.xingwei = function () {
    console.log('抓老鼠') 
}

function Bird(body) {
    this.body = body
}

Bird.prototype.fly = function () { 
    console.log('飞') 
}

const c = new Cat('蓝黄')
console.log(c)
const b = new Bird('翅膀')
console.log(b)

从下面两个实例对象中可以看出，每个对象都有自己的属性和方法，不带有Animal的属性和方法，但Cat和Bird又希望能使用到Animal的属性和方法。

当多个构造函数需要使用一些共同的属性和方法时候，就需要将将共同的属性和方法单独封装在一个构造函数中，方便多个构造函数继承使用。

继承：就是让子构造函数的实例对象能使用父构造函数的属性和方法。

父构造函数叫父类，子构造函数叫子类。继承的目的，就是让子类拥有父类的属性和方法。

继承方案

原型继承

通过概念对象的原型链结构来实现继承，因为对象默认能访问到原型对象的属性和方法

function Animal(name,age){
    this.name = name;
    this.age = age
}

Animal.prototype.say = function(){
    console.log('各种声音')
}

function Cat(eye) {
    this.eye = eye
}

// 改变Cat的原型
Cat.prototype = new Animal('猫',5)

Cat.prototype.xingwei = function () {
    console.log('抓老鼠') 
}

var c = new Cat('眼睛')
console.log(c)

优点：只要处在原型上的方法和属性都能使用

缺点：一个构造函数的实例创建需要在两个地方传递参数，且同样是属性，不在同一个地方显示

借用函数继承

利用借用函数，将父构造函数中的this改成子构造函数中的this，让子构造函数具备跟父构造函数同样的属性。

function Animal(name,age){
    this.name = name;
    this.age = age
}

Animal.prototype.say = function(){
    console.log('各种声音')
}

function Cat(name,age,eye) {
    // 使用借用函数调用父构造函数
    Animal.call(name,age)
    this.eye = eye
}

Cat.prototype.xingwei = function () {
    console.log('抓老鼠') 
}

var c = new Cat('猫',5,'眼睛')
console.log(c)

优点：在同一个地方传递参数了，且属性都放在了一起。

缺点：父构造函数原型上的方法继承不了。

组合继承

组合继承是将原型继承和借用函数继承同时使用。

function Animal(name,age){
    this.name = name;
    this.age = age
}

Animal.prototype.say = function(){
    console.log('各种声音')
}

function Cat(name,age,eye) {
    // 使用借用函数调用父构造函数
    Animal.call(name,age)
    this.eye = eye
}

// 改变Cat的原型
Cat.prototype = new Animal()

Cat.prototype.xingwei = function () {
    console.log('抓老鼠') 
}

var c = new Cat('猫',5,'眼睛')
console.log(c)

优点：

  1. 父类构造函数体内和原型上的内容都能继承
  2. 继承下来的属性放在自己身上
  3. 在一个位置传递所有参数

缺点：当给子类添加方法的时候, 实际上是添加在了父类的实例身上

拷贝继承

拷贝继承是利用for in循环能将原型中的属性和方法也遍历出来的特性，将父对象中属性和方法遍历绑定到子对象的原型上。

function Animal(name,age){
    this.name = name;
    this.age = age
}

Animal.prototype.say = function(){
    console.log('各种声音')
}

function Cat(name,age,eye) {
    // 在子构造函数中实例化父构造函数
    var a = new Animal(name,age)
    // 遍历父对象
    for(var attr in a){
        // 给子对象的原型上添加父对象中的属性和方法
        Cat.prototype[attr] = a[attr]
    }
    this.eye = eye
}

Cat.prototype.xingwei = function () {
    console.log('抓老鼠') 
}

var c = new Cat('猫',5,'眼睛')
console.log(c)

优点：

  1. 父类的构造函数体内的和原型上的都可以继承
  2. constructor 能正常配套
  3. 添加自己的方法的时候, 确实是在自己的原型身上

缺点：

  1. for in 循环: for in 循环需要一直遍历到 Object.prototype - 比较消耗性能
  2. 不能继承 不可枚举 的属性 - 颜色比较暗的属性和方法不能遍历到
  3. 继承来的属性不再自己身上

寄生继承

将父构造函数在子构造函数中实例化，然后在子构造函数中返回实例出来的对象。

function Animal(name,age){
    this.name = name;
    this.age = age
}

Animal.prototype.say = function(){
    console.log('各种声音')
}

function Cat(name,age,eye) {
    // 在子构造函数中实例化父构造函数
    var a = new Animal(name,age)
    // 给这个对象中添加属性
    a.eye = eye;
    return a;
}

Cat.prototype.xingwei = function () {
    console.log('抓老鼠') 
}

var c = new Cat('猫',5,'眼睛')
console.log(c)

这种继承没有了自己的原型，原型完全是父构造函数的继承，改变自己原型后，自己原本原型上的方法又无法使用。

function Cat(name,age,eye) {
    // 在子构造函数中实例化父构造函数
    var a = new Animal(name,age)
    // 改原型
    Cat.prototype = a.__proto__;
    // 给这个对象中添加属性
    a.eye = eye;
    return a;
}
Cat.prototype.xingwei = function () {
    console.log('抓老鼠') 
}

var c = new Cat('猫',5,'眼睛')
console.log(c) // 对象中就没有了xingwei这个方法了

寄生继承的另一种方式修改：

function Cat(name,age,eye) {
    // 在子构造函数中实例化父构造函数
    var a = new Animal(name,age)
    // 改原型
    Cat.prototype = a.__proto__;
    // 给这个对象中添加属性
    a.eye = eye;
    return a;
}
Animal.prototype.xingwei = function () {
    console.log('抓老鼠') 
}

var c = new Cat('猫',5,'眼睛')
console.log(c) // 对象中又有了xingwei这个方法了

但这种继承方式，将父构造函数的原型修改了，以后的继承，都会带有这个方法。

优点：

  1. 原型和构造函数体内的都能继承下来
  2. 寄生原型的话, 自己的属性和方法依旧可以添加和使用

缺点：

  1. 寄生实例的时候, 没有自己的任何内容
  2. 寄生原型的时候, 一旦修改原型上, 父类的实例也会有这些方法

寄生组合继承(完美继承)

寄生组合继承是合并了寄生继承和组合继承以及借助了第三方独立的构造函数而完成。

function Animal(name,age){
    this.name = name;
    this.age = age
}

Animal.prototype.say = function(){
    console.log('各种声音')
}

function Cat(eye) {
    this.eye = eye;
}

Cat.prototype.xingwei = function () {
    console.log('抓老鼠') 
}

// 为了保护全局变量不被污染，使用自调用函数
(function(){
    // 借助第三方构造函数
    function Temp(name,age){
        // 再使用借用函数继承
        Animal.call(this,name,age)
    }
    // 先原型继承
    Temp.prototype = new Animal()
    // 原型继承后的实例对象，原型上有父构造函数的属性，原型的原型上有父构造函数的方法
    // 再加借用函数继承后，实例对象中拥有父类的属性，方法在原型的原型上
    var t = new Temp('猫',5);
    console.log(t)
    // 将得到的实例对象作为子类的原型
    Cat.prototype = t;
})()
// 然后Cat的实例对象中，需要有的就全有了
var c = new Cat('眼睛')
console.log(c)

Animal经过借用函数继承后，属性已经有了，需要的只剩下原型中的方法了，所以对原型进行寄生即可，不用实例化Animal了，简化如下：

(function(){
    // 借助第三方构造函数
    function Temp(name,age){
        // 借用函数继承
        Animal.call(this,name,age)
    }
    // 原型寄生
    Temp.prototype = Person.prototype
    // 寄生原型
    Cat.prototype = new Temp('猫',5)
})()

var c = new Cat('眼睛')
console.log(c)

ES6的继承

es6提供了类的语法和继承的语法：

class Animal{
    constructor(name,age){
        this.name = name
        this.age = age
    }
    
    say(){
        console.log('各种声音')
    }
}

class Cat extends Animal(){
    constructor(name,age,eye){
        super(name,age) // 相当于在调用父类的constructor
        this.eye = eye
    }
    xingwei () {
        console.log('抓老鼠') 
    }
}

var c = new Cat('猫',5,'眼睛')
console.log(c)

喜欢的欢迎收藏，记得点赞关注哦！

贪吃ღ大魔王
关注
  • 18
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 17
    评论
专栏目录
小米面试——计算机视觉算法实习生
FPGA/MATLAB学习教程/源码/项目合作开发
09-25 1247
13.虚函数表（原来就是虚表，卤煮答 没听过啊，这里面试官笑了，说“没听过不要紧，我们换下一道”）面完百度了一下，主要就是 动态绑定，继承类调用基类虚函数，指针数组，虚函数的指针什么的。6.买卖股票的合适时间-入门I级（记录最小值和最大值，卤煮舍友昨日头条原题，真香！卤煮表示，简历写的是 C++使用经验，并不精通， 看不懂啊啊啊！5. 求取单链表的中间值（①遍历求表长，取n/2②快慢指针）7.字符串最长不重复子串（ 哈希表，思路和 买卖股票一样）16.进程与线程，线程共享的资源（ 堆，全局变量）
2015腾讯暑期实习武汉站面试经历
果冻虾仁
04-24 6412
不得不吐槽一下腾讯的面试短信。在面试前一天（13号）晚上十点半才收到，通知14号下面四点面试。我赶紧去楼下打印了两份简历。第二天坐上十点半的动车从南昌触发去武汉了。细节不表了。下面给大家讲讲一下我的经历：一个无项目经验的非著名大学的本科生是如何获得腾讯实习offer的。
js闭包
susanliy的博客
11-03 110
闭包–函数内部可以读取函数外部的变量，但是函数外部不能读取内部的 所以函数要返回一个值给到函数的外部去调用 在函数中去包含一个函数 使得函数内部的函数返回的值生成为一个全局的变量 闭包去嵌套立即执行函数 闭包两个函数互相嵌套 把里面的函数保存到了外部 ...
JavaScript进阶入门(一) 预解释作用域this
weixin_33912445的博客
04-29 156
1 JavaScript有哪些数据类型 1.1 基本数据类型 number、string、boolean、null、undefined 1.2 引用数据类型 object：{}、[ ]、/$/、Datefunction 2 全局作用域（global/window） 当浏览器加载html页面的时候，首先会提供一个全局jsdiam执行的环境 var num = 12; var obj = {...
（二）JS 基础篇—函数与作用域
m0_47182519的博客
11-14 1055
⛺️ 欢迎大家拜访我的：个人博客 ⛽️ 前端加油站之【JavaScript】⛽️ 内容 地址 （一）JS 基础篇—基础知识总结 ⛳️ https://www.csdn.net/ （二）JS 基础篇—函数与作用域 ⛳️ （三）JS 基础篇—对象与内置对象 ⛳️ （四）JS 进阶篇—DOM文档对象模型 ⛳️ （五）JS 进阶篇—BOM浏览器对象模型 ⛳️ （六）JS 高级篇—面向对象编程 ⛳️ （七）JS 高级篇—ES6学习 ⛳️ 思维导图 ⏳ ...
js进阶知识—函数
qq_48687155的博客
08-16 144
函数（三种创建方式），立即执行函数，回调函数，箭头函数，变量，const，let，作用域，暂时性死区，闭包，this，改变函数内部的this指向
JS函数总结
m0_61373758的博客
03-12 253
typora-copy-images-to: media 函数-上 引入： 先问大家一个问题，大家洗过衣服吧？ 手动怎么洗？拿个盆，接水，放衣服，倒洗衣粉，洗，涮，拧干 挺费劲的，有没有简便的方法？ 使用洗衣机，衣服放进去，倒上洗衣粉，按开关，一切就都搞定了 在生活中这样的例子有很多，大到洗衣机空调，小到水龙头剪刀。每个工具都有自己不同的功能。为了生活方便简洁，就会使用这些工具。 程序员是一群很会享受生活的群体，所以在代码中也有很多这样的工具，就是咱们今天要学习的函数。 总结：代码中工具----函数 概.
一次惊险的跳槽面试经历（阿里美团头条网易有赞)
长亭路
04-22 437
转 一次惊险的跳槽面试经历（阿里/美团/头条/网易/有赞…) 为啥跳槽每次说因为生活成本的时候面试官都会很惊奇，难道有我们这里贵？好想直接给出下面这张图，厦门的房价真的好贵好贵好贵。。。面试过程有兴趣加入阿里的欢迎发简历至 zhangzb2007@gmail.com，或简书上给我发信息。面的是Java岗，总共面了7家公司，通过了6家。按自己的信心提升度我把面试过程分为上半场和下半场。上半场曹操专车...
{Android}-开发进阶大纲（持续更新~）
Android061503的博客
06-22 467
摘要 开篇之前，首先说一下，大神就别点进来了。小编只是尘世间一个迷途小开发，二流程序员。 这篇文章并不像其他面经一样金光闪闪，只是一个二流Android攻城狮在市场的大潮之下，用一个月时间面试+复习+总结，最终拿到了自己喜欢公司offer(非一线大厂，但是薪资也涨了40%多，对我来说已经很满意惹)的故事。当然，大厂谁不想去呢？可是时间紧，生活压力大，计划赶不上变化。生活的真谛就是妥协而已。 前提 出来社会摸爬滚打三年多，不得不承认人是分三六九等的。即便是专注度、努力这些颇为客观的因素，也是因人而异的。(没.
我的保研经历——中国科学院计算技术研究所
热门推荐
在努力！
12-07 3万+
忙碌了大半年的保研事情已经尘埃落定了，心理也踏实下来了，总想着把自己的这段保研经历记录下来，希望能对小伙伴们有所帮助。 能来到ZZ并且读软件工程这个专业并且阴差阳错的进了卓越班也算是老天注定吧（可以这样认为），高中的我一心想读金融，却因高考分数不够，录了我小学初中时最喜欢的计算机相关专业，现在想想，错过了金融并不是一件遗憾的事情。 仔细想一想，我的保研经历还是非常顺利的，在7月中旬就确定了最终...
墨菲定律-感悟甚多，出于程序员用xmind做的
Camel
03-16 1469
更多免费教学文章请关注这里 墨菲定律 目录 [隐藏] ?1 墨菲定律 ?2 墨菲定律的起源 ?3 墨菲定律的案例 ?4 墨菲定律的启示 ?5 墨菲定律的演化版本 ?6 墨菲定律应用分析 ?6.1 案例一：从墨菲定律看安全管理的警示职能[1] ?7 参考文献 [编辑]墨菲定律 　　“墨菲定律”（Murphy’s Law）亦称莫非定律、莫非定理、或摩菲定理，是西方世界常用...
【JS】 函数作用域（面试常考，还不来看）
qq_45677671的博客
03-18 4335
文章目录一、作用域1. 全局作用域2. 局部作用域二、作用域上下级1. 变量定义机制2. 变量使用机制3. 变量赋值机制三、作用域和预解析面试案例 1：面试案例 2：面试案例 3：面试案例 4：面试案例 5：上一篇：预解析：[https://blog.csdn.net/qq_45677671/article/details/114988263](https://blog.csdn.net/qq_45677671/article/details/114988263) 一、作用域 用来教你怎么写代码 作用：生
手把手教弟弟写了个扫雷demo，弟弟竟拿去跟大学同学装* 附（思路注释+源码）
贪吃ღ大魔王
06-19 1万+
js实现扫雷demo???? 一睹为快：???? 思路：???? 创建地图，随机生成100个div盒子，设置相应样式 创建10个地雷，在地图中位置随机产生???? 判断一个div的周围有几个地雷，并将相应的数量给这个div，那么怎么找呢？往以下步骤看 如果div在地图中间，周围有八个相邻的div，如果div在四个边界那么分别周围只有5个相邻的div，如果div是在地图四个角落，周围分别只有3个相邻的div 例： 在地图中间 在地图边界 在地图四个角落 根据随机一个div在这
一篇博文带你 jQuery入门，万字肝爆！ 建议收藏~
贪吃ღ大魔王
05-29 6755
jQuery 介绍 jQuery伪数组和DOM元素???? 选择器⭐⭐⭐ 筛选器⭐⭐⭐ 表单元素选择器 -- 了解 表单对象选择器 - 重点⭐⭐⭐ 筛选器方法 -- 重点⭐⭐⭐ 事件⭐ 属性操作⭐ 样式操作⭐⭐ 类名操作 元素内容操作⭐ 元素节点操作 创建元素： 添加元素⭐ 替换元素 删除元素 复制元素 元素尺寸 元素位置 动画⭐ 基本动画 自定义动画 JQ高级???? jquery发送ajax请求⭐⭐⭐ get请求 post请求⭐⭐ ajax请求⭐⭐ jsonp请求⭐⭐ 全局ajax函数⭐ jquery的
我用端午假期写了个贪吃蛇，学弟玩的不亦乐乎！附（思路注释+源码）
贪吃ღ大魔王
06-12 5259
学弟玩法：（蚯蚓找妈） 我的玩法：（王母摇头） 模块化开发 为什么要用面向对象写，有三大特性：封装、继承、多态。 为什么要封装 ： 实现模块化开发，封装为一个块一个块的，利于维护，有某个模块出现bug只用修改这个模块，其他模块不受影响。在工作中，开发速度快，同时开发模块。 分三个模块写：地图，食物，蛇。 蛇模块分为：定义蛇、蛇移动、蛇死亡、蛇吃食物、蛇移动方向、蛇显示。 地图模块： 创建地图板块，设置样式 function Map() { // 创建一个div thi
一小时：手把手教你入门express【建议收藏】
贪吃ღ大魔王
07-05 3654
express 简介 Express 是基于 Node.js 平台，快速、开放、极简的 Web 开发框架。搭建web服务器 Express 的本质：就是一个 npm 上的第三方包，提供了快速创建 Web 服务器的便捷方法。 使用Express开发框架可以非常方便、快速的创建Web网站的服务器或API接口的服务器 官方网址：https://www.expressjs.com.cn/ 简单使用 下载安装： npm init -y npm i express -S 使用步骤： 导入包 创建服务器 处理请求 监
1小时，带你前端【上传文件】方法汇总，一篇就够了~
贪吃ღ大魔王
06-08 3629
文章目录上传文件传统开发模式上传前后端分离上传ajax上传FileReader读取文件jquery上传webWorker离线缓存 上传文件 项目中会有很多文件上传的需求，例如：头像上传、表格文件、word文档等… 上传必备表单元素： <input type="file"> 进行文件上传的时候，⭐⭐ 1.表单必须是post请求 2.表单必须声明不要对数据进行编码 - enctype=multipart/form-data 传送数据的格式就是键值对的形式，且数据都是js的数据类型，但文件进行传.
一篇博文：带你TypeScript入门，两万字肝爆，建议收藏！
贪吃ღ大魔王
06-15 2710
前言 ts是什么？ts其实是TypeScript的一个简称，就跟JavaScript简称为js一样，官方给的解释是，ts它是js的超级，其实js的代码本质上都是ts编译的，例如写一个js代码 document.write() ，上面的提示就是ts，如图： 系统里面写的是ts代码，所以ts是js的超级，是给js添加拓展功能的语言，这样的语言曾经还有一个叫as，但是这个语言已经没了，它其实就是flash语言。但我么开发需要完善js的话，必须得有这样的一个东西，所以微软拿着这个as的语法开发了ts这个语言，也就
10分钟，手把手教学【正确】还原京东倒计时，初学者必看，简单易懂！
贪吃ღ大魔王
06-11 2224
前言     由于今天在c站意外看到了一篇写京东倒计时的案例，觉得代码写的有问题。于是就在百度和c站搜了一下，发现基本上写的京东倒计时都是有问题的，根本没有完全还原京东的倒计时，逻辑是有问题的，感觉有点误人子弟了，这对刚入门的小白非常的不友好。于是我决定写一下这个案例，还原一下真正的京东倒计时案例。 我直接把过程给写一下，希望对初学者理解有帮助。 源码可以在末尾获取。⭐ 作为一个前端切图仔，我先去把京东倒计时的背景图片给扒下来把。 倒计时源背景图： 然
评论 17
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

贪吃ღ大魔王

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值