深入前端js基础100例
关注
分享
扫一扫
文章平均质量分 50
深入前端js基础100例 跟着学 你会得到你想要的
前端大歌谣
歌谣 答应我 无论什么时候 请你保持对技术得热爱 佛系玩家~
展开
-
【js学习笔记五十四】BFC方式
目录前言导语总结前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语BFC总结 // BFC 即块级格式上下文， 根据盒模型可知， 每个元素都被定义为一个矩形盒子， 然而盒子的布局会受到尺寸， //定位， 盒子的子元素或兄弟元素， 视口的尺寸等因素决定，.......原创 2022-07-05 09:38:17 · 190 阅读 · 0 评论 -
【js学习笔记五十三】基本数据类型和引用数据类型
v原创 2022-06-07 09:17:40 · 88 阅读 · 0 评论 -
【js学习笔记五十二】weakmap的应用
we原创 2022-06-07 09:17:07 · 150 阅读 · 0 评论 -
【js学习笔记五十一】weakmap
WeakMap原创 2022-06-07 09:16:14 · 97 阅读 · 0 评论 -
【js学习笔记五十】BFC规范
学习原创 2022-06-07 09:14:40 · 126 阅读 · 0 评论 -
【js学习笔记四十九】实现两栏布局的第五种方式
目录前言导语代码部分运行结果前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语实现两栏布局第五种方式代码部分<!DOCTYPE html><html lang="en"><head> <meta charset...原创 2022-05-31 09:18:57 · 150 阅读 · 0 评论 -
【js学习笔记四十八】实现两栏布局的第四种方式
目录前言导语代码部分运行结果前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语实现两栏布局第四种方式代码部分<!DOCTYPE html><html lang="en"><head> <meta charset=...原创 2022-05-31 09:18:10 · 106 阅读 · 0 评论 -
【js学习笔记四十七】实现两栏布局的第三种方式
目录前言导语代码部分运行结果前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语实现两栏布局第三种方式代码部分<!DOCTYPE html><html lang="en"><head> <meta charse...原创 2022-05-31 09:17:37 · 121 阅读 · 0 评论 -
【js学习笔记四十六】实现两栏布局的第二种方式
目录前言导语代码部分运行结果前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语实现两栏布局第二种方式代码部分<!DOCTYPE html><html lang="en"><head> <meta charset=...原创 2022-05-31 09:17:00 · 126 阅读 · 0 评论 -
【js学习笔记四十五】实现两栏布局的第一种方式
目录前言导语代码部分运行结果前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语实现两栏布局第一种方式代码部分<!DOCTYPE html><html lang="en"><head> <meta char...原创 2022-05-31 09:16:30 · 151 阅读 · 0 评论 -
【js学习笔记四十四】遍历对象的属性和值
前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语遍历所有的属性和值代码部分<!-- * @Author: your name * @Date: 2022-04-12 10:29:19 * @LastEditTime: 2022-04-12 10:33:46 * @LastE...原创 2022-05-20 21:40:05 · 294 阅读 · 0 评论 -
【js学习笔记四十三】策略模式
目录前言导语代码部分总结前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语策略模式代码部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g...原创 2022-05-20 21:35:46 · 150 阅读 · 0 评论 -
【js学习笔记四十二】代理模式
前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语代理模式<!-- * @Author: your name * @Date: 2022-03-30 10:41:34 * @LastEditTime: 2022-03-30 14:29:29 * @LastEditors: you..原创 2022-05-10 19:37:45 · 4145 阅读 · 0 评论 -
【js学习笔记四十一】单体模式
目录前言导语代码部分总结前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语单体模式代码部分 // 单体模式 var Singleton = function (name) { this.name = name; }; Singl...原创 2022-04-21 10:16:16 · 10628 阅读 · 0 评论 -
【js学习笔记四十】复杂工厂模式
目录前言导语代码部分前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语复杂工厂模式代码部分 //第一步 定义自行车的构造函数 两个属性 一个name和一个方法methodvar BicycleShop = function(name){ this.name.原创 2022-04-21 10:12:56 · 5219 阅读 · 0 评论 -
【js学习笔记三十九】简单工厂模式
目录前言导语代码部分总结前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语简单工厂模式代码部分 // 简单的工厂模式可以理解为解决多个相似的问题 function CreatePerson(name,age,sex){ //创建一个新的...原创 2022-04-19 15:01:27 · 5101 阅读 · 0 评论 -
【js学习笔记三十八】纯函数
前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语纯函数代码部分 // 函数的返回结果只依赖于它的参数。 //函数执行过程里面没有副作用。 //第一条 函数的结果只能依赖他的参数 纯函数 function animal(name) { console.log(t原创 2022-04-19 14:57:41 · 595 阅读 · 0 评论 -
【js学习笔记三十七】事件冒泡
目录前言导语代码部分总结前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语事件冒泡代码部分<body> <!-- 开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点。 --> <div clas...原创 2022-04-16 17:37:50 · 560 阅读 · 0 评论 -
【js学习笔记三十六】事件委托
目录前言导语代码部分总结前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语事件委托代码部分事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点绑定一百个livar itemli = document.getElementsByTa...原创 2022-04-16 17:35:42 · 655 阅读 · 0 评论 -
【js学习笔记三十五】手写节流
前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语手写节流代码部分 function geyao(fn, delay) { // 记录第一次的调用时间 var prev = null console.log(prev) // 4 return functi.原创 2022-04-15 17:12:01 · 358 阅读 · 1 评论 -
【js学习笔记三十四】手写防抖
前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语手写防抖代码部分 function geyao(fn, delay) { //timer是一个定时器 let timer = null // 返回一个闭包函数，用闭包保存timer确保其不会销毁，重复点击会清理上一次的定.原创 2022-04-15 17:09:55 · 350 阅读 · 0 评论 -
【js学习笔记三十三】前端原型和原型链constructor
前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语前端原型和原型链constructor运行结果 //通过构造函数创建实例，是可以变量提升的。 //es6中的类，必须先有类，才可以实例化。 class Father { constructor(n.原创 2022-04-13 19:41:45 · 198 阅读 · 0 评论 -
【js学习笔记三十二】前端原型和原型链构造函数的使用
前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语前端原型和原型链构造函数的使用代码部分function Father(name) { this.name = name } Father.prototype.dance = function () { console..原创 2022-04-13 19:40:52 · 475 阅读 · 0 评论 -
【js学习笔记三十一】前端原型和原型链构造函数的使用
前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语前端原型和原型链构造函数的使用代码部分 //继承属性，利用call改变this指向。但该方法只可以继承属性，实例不可以使用父类的方法。 function Father(name) { this.name = name.原创 2022-04-11 19:19:24 · 761 阅读 · 0 评论 -
【js学习笔记三十】前端原型和原型链构造函数的使用
前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语前端原型和原型链构造函数的使用原型的构造器指向构造函数 // 原型的构造器指向构造函数。 function Animal(name){ this.name=name } let ob原创 2022-04-11 19:18:04 · 646 阅读 · 0 评论 -
【js学习笔记二十九】前端原型和原型链实例的学习
前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语前端原型和原型链实例的学习在构造函数上定义方法 //在构造函数上直接定义方式 function Animai(){ this.eat=function(){ console.log("我爱.原创 2022-04-09 09:27:47 · 653 阅读 · 0 评论 -
【js学习笔记二十八】手写bind
前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语手写bind代码部分 Function.prototype.mybind = function (target) { //target:改变返回函数执行时的this指向 var obj = target || wind..原创 2022-04-08 09:11:39 · 590 阅读 · 0 评论 -
【js学习笔记二十七】手写apply
目录前言导语前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语apply使用代码部分Function.prototype.myApply = function (context, args) { //这里默认不传就是给window,也可以用es6给参数设置默认参数.原创 2022-04-07 19:52:06 · 344 阅读 · 0 评论 -
【js学习笔记二十六】前端原型和原型链构造函数
前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语前端原型和原型链构造函数 //构造函数 //实例成员： 实例成员就是在构造函数内部，通过this添加的成员。 //实例成员只能通过实例化的对象来访问。 function Animai(name,age){ ..原创 2022-04-07 19:13:16 · 941 阅读 · 0 评论 -
【js学习笔记二十五】数组方法slice使用
前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语数组方法slice使用代码部分 var fangfang=["geyao","fangfang","huahua","mingming"] //arr.slice([begin[, end]]) var fangfangTe.原创 2022-04-07 09:56:30 · 704 阅读 · 0 评论 -
【js学习笔记二十四】手动封装callES6
前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语手动封装callES6代码部分 Function.prototype.myCall=function(){ //如果是undefined和null 则指向window 不是对象用object转为对象let params = Array.fr..原创 2022-04-07 09:55:43 · 495 阅读 · 0 评论 -
【js学习笔记二十三】手动封装callES6
前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语手动封装callES6代码部分 //传入两个参数 一个需要绑定的对象 一个传入的参数 Function.prototype.mycall=function(obj,...args){ //参数不是对象需要转成对象 当值为nul..原创 2022-04-05 09:12:41 · 261 阅读 · 3 评论 -
【js学习笔记二十二】...扩展运算符
前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语歌谣 歌谣 前端...扩展运算符代码部分 <script> var geyao = { name: "geyao", age: "18" } var geyaoTest = { ..原创 2022-04-05 09:10:28 · 330 阅读 · 0 评论 -
【js学习笔记二十一】手动封装call
前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语歌谣 歌谣 前端eval的使用代码封装部分 Function.prototype.mycall = function(obj){ //判断是否为null或者undefined,如果是则默认window;如果传递的参数不是对象用Obje.原创 2022-04-03 08:52:15 · 554 阅读 · 1 评论 -
【js学习笔记二十】前端eval的使用
前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语歌谣 歌谣 前端eval的使用...原创 2022-04-03 08:49:58 · 885 阅读 · 0 评论 -
【js学习笔记十九】前端argument的使用
前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语歌谣 歌谣 前端argument的使用代码部分 <script> //这边的arguments[0]等价于fn var length = 10; function fn(){ console.log(.原创 2022-04-02 13:56:58 · 3817 阅读 · 0 评论 -
【js学习笔记十八】普通函数中的this指向问题解决方案bind
前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语歌谣 歌谣 如下的代码报错了 怎么解决 //口诀 谁调用就会指向谁 这边是普通函数 直接报错this.fang is not a function var name="geyao" var fangfang = {原创 2022-04-02 13:56:00 · 3442 阅读 · 0 评论 -
【js学习笔记十七】普通函数中的this指向问题解决方案call
前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语歌谣 歌谣 如下的代码报错了 怎么解决 //口诀 谁调用就会指向谁 这边是普通函数 直接报错this.fang is not a function var name="geyao" var fangfang = {原创 2022-03-30 18:51:10 · 1531 阅读 · 0 评论 -
【js学习笔记十六】普通函数中的this指向问题解决方案apply
前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语歌谣 歌谣 如下的代码报错了 怎么解决 //口诀 谁调用就会指向谁 这边是普通函数 直接报错this.fang is not a function var name="geyao" var fangfang = {原创 2022-03-30 18:50:23 · 594 阅读 · 0 评论 -
【js学习笔记十五】普通函数中的this指向问题解决方案箭头函数
前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语歌谣 歌谣 如下的代码报错了 怎么解决 //口诀 谁调用就会指向谁 这边是普通函数 直接报错this.fang is not a function var name="geyao" var fangfang = {原创 2022-03-30 18:49:23 · 229 阅读 · 0 评论