![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html-css-js
文章平均质量分 63
@LitterFisher
陆续对以前的文章进行重写,常更新前端学习过程
展开
-
对象的继承
/** * 对象的继承 *//** * json格式的发明人Douglas Crockford * @param {*} o * @returns */function object(o) { function F() { } F.prototype = o; return new F();}/** * 浅拷贝 */function extendCopy(p) { var c = {}; for (var i in p) {原创 2022-04-21 17:29:32 · 124 阅读 · 0 评论 -
javascript函数的继承
函数的继承原创 2022-04-21 17:11:41 · 972 阅读 · 0 评论 -
回流与重绘
有空再补上文字原创 2022-04-14 18:21:31 · 119 阅读 · 0 评论 -
display:none visibility:hidden opacity:0
详细,欠着,春招完补上原创 2022-04-14 17:50:50 · 73 阅读 · 0 评论 -
javascript 是单线程 ?
js 单线程原创 2022-01-16 01:11:52 · 423 阅读 · 0 评论 -
javascript判断数据类型
数据类型的分类7大基本数据类型注意没有NaN(恶心东西)null typeof(null) ==object 历史bugMDN类型typeofundefinedtypeof instance === “undefined”Booleantypeof instance === “boolean”Numbertypeof instance === “number”Stringtypeof instance === "stringBigInt(.原创 2021-11-06 21:25:37 · 230 阅读 · 0 评论 -
再读原型链
图源互联网,侵删!!!!!function Foo(){}let foo = new Foo();这里new Foo()发生了什么,把Foo()当成一个机器第一条链foo对象通过构造函数Foo()以Foo.prototype对象为原型(模板)制造出来。Foo.prototype 又是通过Object()构造函数以Object.prototype对象为模板制造出来。Object.prototype是null也就是上帝给制造出来的。第二条链:Foo() 机器也是一个对象是吧,它也.原创 2021-11-06 20:03:18 · 268 阅读 · 0 评论 -
javascript 柯里化与反柯里化
什么是柯里化??????看一段代码: function add(a, b, c) { return a + b + c }正常调用:add(1,2,3)但我想这样调用它add(1)(2)(3);又或者:add(1)(2,3)实现这样的功能就是函数柯里化。先抛几个概念:接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术;数学和计算机科学中的柯里化函数,一次只能传递一个原创 2021-10-28 17:59:53 · 144 阅读 · 0 评论 -
session cookie sessionstorage localstorage webstorage
session cookie sessionstorage localstorage webstorage还是需要理一下概念的。客户端:webstorage:(h5)localstorage (永久)sessionstorage(一次性)cookie服务端:session所以说这就是他们的关系名称产生生命周期保存存储内容localstorage客户端永久化保存在客户端,不与服务器通信仅支持 String 类型的存储内容5MBses原创 2021-10-21 17:41:51 · 58 阅读 · 0 评论 -
前端算法之数组排序篇
大一蓝桥杯之后到现在不写算法已经好久了,笔试吃大亏.总结一些常用的.排序图源:https://images0.cnblogs.com/blog2015/601481/201503/301143539671643.png1.1 最简单的javascript 自带的排序.//改变原数组元素按照转换为的字符串的各个字符的Unicode位点进行排序。 let arr = [1, 3, 2, 4, 3, 2, 6]; //sort() arr.sort();原创 2021-10-20 20:44:54 · 1517 阅读 · 0 评论 -
javaScript-执行上下文-作用域链-this-闭包
执行上下文-作用域链-this-闭包:我觉得这几个概念应该不能独立分开讲,他们是有联系的。函数如何定义一个函数:函数声明:function 函数名称(参数) {方法体}函数表达式var x = function 函数名称(可省) (参数){函数体}var x = new Function(’ ');执行上下文(Execution Contexts)它是一个抽象的概念。一个函数执行前后的两个阶段。分为全局上下文,函数上下文,eval(略)。可以想象它为一个栈,jav原创 2021-10-20 15:47:43 · 105 阅读 · 0 评论 -
javascript-垃圾回收
javascript 的内存管理分配,使用,基本不需要我们管理而回收比重要,一不小心就内存泄漏了。垃圾回收算法主要依赖于引用的概念。在内存管理的环境中,一个对象如果有访问另一个对象的权限(隐式或者显式),叫做一个对象引用另一个对象。例如,一个Javascript对象具有对它原型的引用(隐式引用)和对它属性的引用(显式引用)。引用计数垃圾收集(2012前)对象有没有其他对象引用到它。 如果没有引用指向该对象(零引用),对象将被垃圾回收机制回收。缺点:循环引用 var o = {}原创 2021-10-20 13:32:30 · 52 阅读 · 0 评论 -
js原型与继承
233原创 2021-10-16 18:13:40 · 68 阅读 · 0 评论 -
deep clone and shadow clone 2.0
看一段代码 let obj = { name: '张三', child: { age: 23 } } let obj2 = obj; console.log(obj); //{'张三'} obj2.name = "李四"; console.log(obj); //{'李四'}那我把它的值复制不就行了吗,再来一段代码l原创 2021-10-15 16:45:56 · 67 阅读 · 0 评论 -
Object.defineProperty,以及观察者模式,发布订阅模式
为了深入了解vue的原理,Object.defineProperty这个方法必须会。Object.defineProperty(obj, prop, descriptor)MDN该方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。obj:要定义属性的对象。prop:要定义或修改的属性的名称或 Symbol 。descriptor:描述符对象,要定义或修改的属性描述符。属性/方法语义默认值configurable对象的属性是否可以被删原创 2021-10-13 22:59:49 · 362 阅读 · 0 评论 -
Block Formatting Context(BFC)
MDN三个概念:BOX: 普通流/标准流中的 Box(框) 属于一种 formatting context(格式化上下文) block inlineBFC:(Block Formatting Context)块级格式上下文IFC:(Inline Formatting Context)即行内格式化上下文BFC就是一种布局方式,在这种布局方式下,盒子们自所在的containing block顶部一个接一个垂直排列,水平方向上撑满整个宽度(除非内部盒子自己建立了新的BFC)。两个相邻的BFC之间原创 2021-10-13 01:09:10 · 74 阅读 · 0 评论 -
左固定宽度,右边占据剩余空间的3种方法。
面试遇到这道题,我用flex布局,举一反三: <div class="parent"> <div class="left"></div> <div class="right"></div> </div>flex :.parent { width: 100%; height: 600px; display: flex原创 2021-10-13 00:06:02 · 473 阅读 · 0 评论 -
javascript快速排序
昨天面试考了算法题,竟然做不出来,但是好久没认真写过算法了。得反思一下。快速排序:dy> <script> let arr = [4, 3, 6, 2, 8]; console.log(quicksort(arr, 0, arr.length - 1)); function quicksort(arr, left, right) { if (left < right) {原创 2021-10-12 23:48:31 · 40 阅读 · 0 评论 -
原生ajax
源:https://www.jb51.net/article/93037.htm 有修改,侵删<script> function myAjax() { var ajaxData = { type: arguments[0].type || "GET", url: arguments[0].url || "", async: arguments[0].async转载 2021-10-07 11:28:21 · 38 阅读 · 0 评论 -
call apply bind的理解使用。
call apply bind 三者作用是改变某个函数的执行上下文(Execution Context),具体作用是改变函数体内部this的指向。bind:MDNfunction.bind(thisArg[, arg1[, arg2[, …]]])bind() 方法创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind()的第一个参数,而其余参数将作为新函数的参数,供调用时使用。、参数:thisArg:调用绑定函数时作为 this 参数传递给目标函数原创 2021-10-06 18:20:55 · 159 阅读 · 0 评论 -
js执行上下文与栈、堆 ,深浅拷贝
执行上下文(Execution Context): 函数执行前进行的准备工作(也称执行上下文环境)js 的执行环境:全局环境函数环境eval函数环境 (已不推荐使用)执行栈(函数调用栈)后进先出栈底的永远是全局环境的执行上下文栈顶的是当前正在执行函数的执行上下文注意:全局环境只有一个,对应的全局执行上下文也只有一个,只有当页面被关闭之后它才会从执行栈中被推出,否则一直存在于栈底上下文的生命周期:创建阶段:函数被调用时,进入函数环境,为其创建一个执行上下文,此时进入创建阶段.原创 2021-10-06 16:39:46 · 90 阅读 · 0 评论 -
各种前端布局方式总结
前端布局方式:其实现实上最多的是各种布局混合。注意布局与布局方式的区别下面列一下常用的布局方式:flex (Flexible Box): (我的最爱)译为弹性布局6大属性:属性语义可选值flex-direction主轴的方向row , row-reverse , column , column-reverseflex-wrap是否换行nowrap , wrap , wrap-reverseflex-flowflex-direction属性和fle原创 2021-10-05 21:09:09 · 355 阅读 · 0 评论 -
js-数组几个容易混乱的方法
数组 :reducearray.reduce( function(total, currentValue, currentIndex, arr),initialValue)收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值,参数可选描述total必需初始值, 或者计算结束后的返回值。currentValue必需当前元素currentIndex可选当前元素的索引arr可选当前元素所属的数组对象。initia原创 2021-09-22 22:55:50 · 379 阅读 · 0 评论 -
微信小程序基础学习
小程序的开发得安照腾讯的要求来,但是它也是把html-css-js 封装集成罢了(还有个json),学一下它的基础语法。语法思想跟vue差不多html-wxmljs-jscss -wxcssjson全局配置位于app.json 中属性类型必填语义entryPagePathstring否小程序默认启动首页pagesstring[]是页面路径列表windowObject否全局的默认窗口表现tabBarObject否底部 t原创 2021-09-06 15:56:24 · 77 阅读 · 0 评论 -
css 3d 魔方模型
效果:有空再把它做成真正可以扭的魔方<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>3d魔方</title> <style> .parent { width: 700px; height: 700px; margin:原创 2021-08-29 23:39:28 · 147 阅读 · 0 评论 -
jQuery-base 练习
前一篇练习了原生的前端练习这里用jQuery练习一遍$(function () { var parent = $('.parent'); var colorContent = $('.colorContent'); var colorDivs =$('<div class="colorDivs"></div>'); colorContent.append(colorDivs); var colors; //加载数据 $.a原创 2021-08-28 22:19:39 · 89 阅读 · 0 评论 -
原生前端练习
虽然原生的js css html 简单 但是万层高楼平地起,如果连基础都弄不明白又何去学vue react 等整合前端呢?响应式:效果图:代码:<!DOCTYPE html><html lang="cn" xmlns:c="http://www.w3.org/1999/XSL/Transform"><head> <meta charset="UTF-8"> <meta name="viewport" content="wi原创 2021-08-28 20:39:47 · 180 阅读 · 0 评论 -
css2d之旋转小风车
<head> <meta charset="UTF-8"> <title>小风车</title> <style> .parent { width: 600px; height: 600px; margin: 0 auto; position: relative; } section原创 2021-08-19 15:34:10 · 185 阅读 · 0 评论 -
js-jQuery-base
1.x 兼容ie678 不更新2.x 不兼容ie678 不更新3.x 不兼容ie678 更新jq 与dom<script> // $(document).ready(function () { // //页面加载完执行 // }) $(function () { //相当于 原生load //$ 顶级对象 jQuery对象的简写 }); //获取dom对象 var div = .原创 2021-08-17 21:46:27 · 109 阅读 · 0 评论 -
移动端自适应布局
视口宽度(看得见得地方):PC端指的是浏览器的可视区域;移动端指的就是Viewport中的Layout Viewport。视口单位vw:1vw等于视口宽度的1%。vh:1vh等于视口高度的1%。vmin:选取vw和vh中最小的那个。vmax:选取vw和vh中最大的那个兼容性问题(在移动端 iOS 8 以上以及 Android 4.4 以上获得支持,并且在微信 x5 内核中也得到完美的全面支持)ie11 edg14<head> <meta charset=".原创 2021-08-17 15:33:35 · 86 阅读 · 0 评论 -
js-基础-笔记
avaScript 网景Jscript 微软二者的基础是ECMAscriptjs 书写的三种位置位置语义行内直接写在元素内部内嵌<script></script>外部<script src="xxx.js" type="text/javascript"></script>变量数据类型:获得值时确定变量类型分类:一. 基本数据类型类型语义默认值Number数字型 .原创 2021-08-16 16:40:21 · 67 阅读 · 0 评论 -
解决div inline-block 加内容后出现偏移
<div class="con"> <div class="colorDiv">xxx</div> <div class="color"></div></div>加了xxx 出现了div 向下偏移原因: inline-block 默认属性vertical-align:baseline 基线对齐改为 top即可 <style> .con { marg.原创 2021-08-14 15:44:22 · 551 阅读 · 3 评论 -
js-BOM 基础
HTML-BOM 浏览器对象模型 由一系列对象构成 缺乏标准顶级对象 window 定义在全局作用域的变量函数 都会变成window对象的属性和方法包含 dengdengdocumentlocationnavigationscreenhistory常见事件事件语义onload窗口页面加载事件 当文档内容完全加载完成(包括 图片 js css)触发该事件 注意:只能写一个 多了以最后一个为准 但以addEventListener 不收限制DOMConten原创 2021-08-13 22:16:16 · 40 阅读 · 0 评论 -
js-dom-总结
qq原创 2021-08-13 20:25:31 · 52 阅读 · 0 评论 -
js-dom-2
注册事件(绑定事件)2种方式:传统注册方式 :(on开头)唯一性 后面的覆盖前面的 同一元素同一事件只能设置一个函数方法监听注册方式 addEventListener() ie9不支持 (attachEvent()代替)同一元素同一事件可设置多个监听器(监听函数)eventTarge.addEventListener(type,listener[,useCaptrue])type 事件类型 click mouseover 等listener 事件处理函数useCaptrue bool.原创 2021-08-12 23:17:10 · 64 阅读 · 0 评论 -
js-dom
dom 文本对象模型 html 或xml 的编程接口dom树 :文档: 一个页面就是一个文档 document元素 所有的元素节点 网页的所有内容都是 标签属性文本注释等获取页面元素通过 id: 返回文档对象document.getElementById(‘id’)<div id="x1"></div><script> var x1 = document.getElementById('x1') console.log.原创 2021-08-12 15:27:54 · 217 阅读 · 0 评论 -
html5新增 css新增
html 新增基本都有兼容性问题基本ie9+才支持新增语义标签:<headert> 头部标签nav 导航标签article 内容标签section 定义文本某个区域aside 侧边栏标签footer 尾部标签新增多媒体标签:音频audio:mp3尽量跟下面差不多视频video:支持格式有限 mp4尽量autoplay 自动播放controls 用户自定义显示组件muted 静音loop 循环播放poster 加载等待页面图片preload 是否.原创 2021-08-06 15:36:40 · 86 阅读 · 0 评论 -
响应式+bootstrap笔记1
响应式原理 :需要一个父局容器,在不同的屏幕下,通过媒体查询来改变布局容器的大小,再改变子元素的排列和大小。屏幕划分:<768px 超小屏幕 设置宽度100%> 768 小屏幕 设置宽度 750px中等 992px 设 970px>1200px 设1170px <style> .container { background-color: pink; height: 150px;原创 2021-08-05 22:07:35 · 45 阅读 · 0 评论 -
less+rem布局
rem :相对单位 相对与html元素字体的大小media Query 媒体查询 :根据不同屏幕尺寸设置不同的样式,且重置浏览器大小 页面重新渲染参数语义mediatype查询类型 -all所有设备print 打印机及预览scree 电脑 平板 智能手机 屏幕关键字and 多个媒体属性连接在一起且not 非only 指定特定类型 <style> @media screen and (max-width: 800px) { .原创 2021-08-04 22:06:15 · 77 阅读 · 0 评论 -
移动端web开发-flex
手机浏览器基本都是基于webkit 内核开发的。视口视口语义layout viewport布局视口,ios Android 一般设置分辨率980px,但是字太小了visual viewport视觉视口,你能看到的网站区域ideal viewport理想视口(乔布斯)meta视口标签:让布局视口与理想视口宽度一致meta视口标签 <meta name="viewport" content="width=device-width,user-sc原创 2021-08-03 21:24:44 · 91 阅读 · 0 评论