![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
不知名网友小H
vinchin
展开
-
css画皮卡丘
目录前言效果预览素材来源踩坑记录+技巧总结(MVC)源码奉上一、前言学习前端有一段时间了,最近复习了一下 CSS,还有 MVC 模式。发现还是有很多不足的地方。想着,就简单的使用 CSS 画个东西吧。再简单的使用 MVC 实现一个播放器 player不知道有没有机会做你的皮卡丘,举高高,要抱抱~这才是猛男该看的东西(doge)二、效果预览Gitee 预览温馨提示:点击皮卡丘的鼻子可以动的PC 端手机端三、素材来源CodePen搜索 pikachu原创 2020-12-14 16:28:00 · 494 阅读 · 1 评论 -
【React全解2】React生命周期函数含义及使用
目录生命周期函数列表重要生命周期函数细解分阶段看钩子的执行顺序(图解)一、生命周期生命周期就是指一个对象的生老病死。在React中就特指一个组件的“生老病死”。二、函数列表constructor() – 初始化 state 等static getDerivedStateFromProps()shouldComponentUpdate()&React.PureComponent – 是否进行更新render() – 创建虚拟 DOMgetSnapshotBefo原创 2020-12-14 15:31:04 · 223 阅读 · 1 评论 -
【React全解1】React组件、props、state&setState
目录组件简介类组件函数组件props(外部数据)和state(内部数据)&setState复杂state一、组件简介组件,从概念上类似于 JavaScript 函数。它接受任意的入参(即 “props”),并返回用于描述页面展示内容的 React 元素。组件就是用于组合的物件。在编程中,组件的作用就是使代码具有模块化的意义,能让代码有更好的可读性和维护性。在React中,定义组件有两种方式,函数组件和类组件,不成文的规定:组件首字母大写,元素首字母小写二、类组件原创 2020-12-14 15:27:21 · 463 阅读 · 0 评论 -
函数防抖和函数节流
目录函数防抖函数节流一、函数防抖在前端开发中,我们经常需要绑定一些持续触发的事件,如resize、mousemove等。但是我们并不是想在事件持续触发时去频繁的触发函数,而是有一个特定的时机来触发函数。函数防抖就是来解决这样的问题,生活中的例子:电梯,在电梯门打开之后,每一次有人进来,电梯都会进行重新的计时。而电梯关门的时候就是我们真正触发了一整个事件的流程的结束的特定的时机。函数防抖:触发事件的后 n 秒才执行函数,若在这 n 秒之内又触发了事件,则会重新计算执行时间。手原创 2020-12-12 21:53:51 · 83 阅读 · 0 评论 -
【Promise与异步】理解并使用Promise
目录异步回调异步与回调的关系如何判断异步Promise一、异步不能直接拿到结果,如setTimeout,要等到定好的事件之后才能拿到结果。二、回调写好一个函数却不立即使用,而是给别人调用的函数。回调举例在以下的例子中,f1就是回调function f1(value) { console.log("我是f1:" + value);}function f2(fn) { fn("我是f2,调用了f1");}f2(f1);三、异步与回调的关系关联原创 2020-12-03 09:03:07 · 144 阅读 · 0 评论 -
【Vue全解8】Vue表单输入绑定v-model
目录基本用法修饰符v-modelVue表单和v-model官方文档一、基本用法你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。1、 input代码示例(textarea也是一样的,只是标签不同而已)<原创 2020-10-26 14:47:17 · 371 阅读 · 0 评论 -
【Vue全解7】options之组合(mixin、extends、provide/inject)
目录mixin混入extends继承provide提供/inject注入一、mixin混入mixins 选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项,这些选项将会被合并到最终的选项中,使用的是和 Vue.extend() 一样的选项合并逻辑。也就是说,如果你的混入包含一个 created 钩子,而创建组件本身也有一个,那么两个函数都会被调用。Mixin 钩子按照传入顺序依次调用,并在调用组件自身的钩子之前被调用。1、作用混入就是复制减少data原创 2020-10-26 12:32:36 · 376 阅读 · 0 评论 -
【Vue全解6】options之资源(directive、filter、components)+修饰符
目录指令Directive自定义指令filtercomponents修饰符.sync修饰符一、指令Directive什么是指令?在Vue中,以v-开头的就是指令语法v-指令名:参数=值,如:v-on:click='add'如果值里无特殊符号,可以不加引号有些指令没有参数和值:如:v-pre有些指令没有值,如:v-on:click.prevent作用主要用于DOM操作:Vue实例/组件用于数据绑定、事件监听、DOM更新。Vue主要目的就是原生D原创 2020-10-25 17:13:42 · 686 阅读 · 0 评论 -
【Vue全解5】options之DOM(el、template、render)
目录eltemplaterender一、el提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例。在实例挂载之后,元素可以用 vm.$el 访问。如果在实例化时存在这个选项,实例将立即进入编译过程,否则,需要显式调用 vm.$mount() 手动开启编译。代码演示示例import Vue from "vue/dist/vue.js";new Vue({ el:'#app',})或原创 2020-10-25 14:28:55 · 517 阅读 · 2 评论 -
【Vue全解4】option之生命周期钩子(created、mounted、updated、destroyed)
目录createdmountedupdateddestroyed一、created在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),property 和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el property 目前尚不可用。import Vue from "vue/dist/vue.js";new Vue({ data:{ n:0 }, template:` <div>原创 2020-10-25 11:21:05 · 1310 阅读 · 0 评论 -
【Vue全解0】Vue实例
目录内存图option里面有什么颜色的表示重要程度一、内存图二、option里面有什么三、颜色的表示重要程度红色属性易学、必学黄色属性高级一点的属性,理解需要费点劲绿色属性自己看文档就会蓝色属性不常用,可学可不学紫色属性特殊属性,需要特别了解灰色属性很不常用,用到时看文档。...原创 2020-10-24 21:55:29 · 260 阅读 · 0 评论 -
【Vue全解3】Vue的data代理和数组响应式
目录数据响应式小实验getter/setterObject.defineProperty代理和监听小结:vue对data做了什么this.$set和Vue.set数组的变异方法小结:数组的变异方法议题:Vue对option的data做了什么?一、数据响应式响应式就是做某种刺激作出反应,而数据响应式就是对数据的改变作出响应。在Vue中,数据的响应就是意味着数据变化,Vue就会进行一次render()渲染。以此来更新UI界面。-- 个人理解Vue的数组响应式我如果修改原创 2020-10-24 15:50:16 · 1465 阅读 · 0 评论 -
【Vue全解2】Vue模板语法摘要
目录Vue模板语法template模板模板中的语法Vue模板的特点一、Vue模板语法Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。如果你熟悉虚拟 DOM 并且偏爱原创 2020-10-22 16:16:51 · 138 阅读 · 0 评论 -
【Vue全解1】构造选择options之data
【Vue全解】构造选项之options数据/data目录构造Vue实例options的数据/data一、构造Vue实例代码示例import vue from 'vue'; //假设导入了Vue完整版包const vm=new Vue(options); //创建一个vm为Vue的实例常见的写法new Vue({ data(){ //data有两种写法:对象 | 函数 return { n:100 } }, template:` <div cl原创 2020-10-21 11:07:15 · 825 阅读 · 0 评论 -
【Vue】完整版 VS 非完整版
【Vue】深入了解Vue完整版与非完整版目录术语完整版Vue非完整版Vue深入理解两个版本的区别引用出错的结果一、术语编译器:用来将模板字符串编译成为JavaScript渲染函数的代码运行时:用来创建Vue实例、渲染并处理虚拟DOM等的代码。基本就是除去编译器的其他一切。二、完整版完整版体积大(假设它占比100K),功能强,有编译器。vue.js包含注释信息,全部的代码![存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(10)(![在这里插入图片原创 2020-10-21 11:06:25 · 133 阅读 · 0 评论 -
【jQuery】浅析jQuery设计原理
jQuery封装原理技巧,你真的了解吗?目录jQuery有多牛XjQuery设计模式术语+命名风格链式风格浅析jQuery设计封装原理总结+github仓库代码一、jQuery有多牛X它是目前最长寿的库,2006年发布。它是世界上使用最广泛的库,全球80%的网站在用二、jQuery设计模式jQuery用到了那些设计模式?不用new的构造函数,这个模式没有专门的名字$(支持多个参数),这个模式叫做重载用闭包隐藏细节,这个模式没有专门的名字$.text()即可读原创 2020-10-19 12:43:26 · 240 阅读 · 0 评论 -
表驱动编程
表驱动编程目录什么是表驱动编程什么情况下使用表驱动编程代码演示总结一、什么是表驱动编程表驱动法,又称之为表驱动、表驱动方法。 “表”是几乎所有数据结构课本都要讨论的非常有用的数据结构。表驱动方法出于特定的目的来使用表,程序员们经常谈到“表驱动”方法,但是课本中却从未提到过什么是"表驱动"方法。表驱动方法是一种使你可以在表中查找信息,而不必用很多的逻辑语句(if或Case)来把它们找出来的方法。事实上,任何信息都可以通过表来挑选。在简单的情况下,逻辑语句往往更简单而且更直接。但随着逻辑链的原创 2020-10-18 14:28:54 · 2651 阅读 · 0 评论 -
Eventbus对象之间通信
eventBus实现对象之间通信目录什么是eventbus?一个简单的例子代码演示实例(使用jquery演示)一、什么是eventbus?我个人理解:eventbus 可以实现对象之间的通信,当数据或某些特性发生改变时,能自动监听事件作出一些改变。还有更多的内容可能我还没有拓宽。怎么实现通信呢?这里通过一个例子可以理解到其中的精髓。二、一个简单的例子add(){ data+=1; render(data);},minus(){ data-=1; render(data);原创 2020-10-17 16:43:16 · 634 阅读 · 0 评论 -
localStorage
localStorage定义只读的localStorage 属性允许你访问一个Document 源(origin)的对象 Storage;存储的数据将保存在浏览器会话中。localStorage 类似 sessionStorage,但其区别在于:存储在 localStorage 的数据可以长期保留;而当页面会话结束——也就是说,当页面被关闭时,存储在 sessionStorage 的数据会被清除 。应注意,无论数据存储在 localStorage 还是 sessionStorage ,它们都特定原创 2020-10-16 22:44:25 · 411 阅读 · 0 评论 -
【DOM事件】DOM事件及事件委托
目录点击事件?事件的捕获和冒泡addEventListener代码图解target VS currentTarget事件委托自定义事件三、点击事件以下引出一个讨论的问题 <div class='爷爷'> <div class='爸爸'> <div class='儿子'> 文字 </div> </div> </div> <script> /* 均添加点击事件 */原创 2020-10-15 19:37:48 · 206 阅读 · 2 评论 -
【硬核写DOM库】--简单封装DOM
封装DOM – 硬核写DOM库目录前言什么是封装术语常用功能自己手写DOM封装封装DOM的总结附上自己封装DOM库的github仓库一、前言【正文】记住一个事实:原生DOM]很难用!,如果你觉得DOM很傻,不要怀疑自己,相信自己的直觉!API的函数名和属性真的是长的不得了,本来我自己想简单写个原生DOM的博客,没想到就花了我好几个小时的时间去码字,真的是吐了,而且容易被这些函数名给绕晕!好了,废话就到这里了,接下来让我们进入正题吧!二、什么是封装举例一个电脑就是CPU、原创 2020-10-14 10:13:08 · 259 阅读 · 0 评论 -
【原生DOM】DOM编程
DOM编程目录前置知识网页就是一棵DOM树JS如何操作这棵树DOM元素节点的增删改查DOM操作是跨线程的Property VS Attribute一、前置知识理解简单的JS语法JS的七种数据类型:number、string、bool、symbol、undefined、null、ObjectJS五个falsy值:''、undefined、null、0、NaN简单的CSS布局二、网页是一棵DOM树代码+图解 <!DOCTYPE html><htm原创 2020-10-13 10:38:45 · 186 阅读 · 0 评论 -
JS对象基本用法
JS 对象基本用法目录对象增加对象的属性删除对象的属性修改对象的属性 + 隐藏属性查看对象的属性奇怪的属性名'name' in obj 和 obj.hasOwnProperty('name')区别一、对象定义1、无序的数据集合。2、键值对的集合。写法1、--- let obj = {'name':'jack','age':18};2、--- let obj = new Object({'name':'jack','age':18})细节键名是原创 2020-10-10 12:50:21 · 59 阅读 · 0 评论 -
JS基本语法
JS 基本语法目录表达式和语句标识符控制语句循环语句break、continuelabel一、表达式和语句表达式1+2 的表达式的值为 3add(1,2)表达式的值为函数的返回值console.log 表达式的值为函数本身console.log(3)的表达式的值为多少?坑1:console.log()函数的返回值为undefined,所以,console.log(3)表达式的值为undefined。只不过它打印的内容为3。原创 2020-10-09 20:05:17 · 155 阅读 · 0 评论 -
JavaScript的诞生
Javascript 的诞生一、目录Javascript 的历史Javascript 的诞生记Javascript 的 10 个设计缺陷[ 正文 ]二、Javascript 的历史1993 年,伊利诺伊大学厄巴纳-尚佩恩分校的国家超级电脑应用中心(NCSA)发表了 NCSA Mosaic,这是最早流行的图形接口网页浏览器,它在万维网的普及上发挥了重要作用。1994 年,一家名为 Mosaic Communications 的公司在加州芒廷维尤成立了,并雇用了许多原来的转载 2020-10-09 18:48:32 · 100 阅读 · 0 评论 -
HTTP请求与响应--详解+代码
HTTP 请求与响应前置条件安装 node.js 8+理解 URL+IP+端口一、请求与响应模型[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oWcML38E-1601982829765)(./images/模型.png)]二、如何发请求?浏览器地址栏输入网址curl 命令三、如何做出响应?node.js 有一个 http 模块使用代码编程实现注意事项这些代码就是服务器代码,一般放在服务器上query 是查询参数的对象形式{a:原创 2020-10-06 19:15:07 · 221 阅读 · 0 评论