- 博客(30)
- 收藏
- 关注
RSS订阅原创 JS Web API BOM 相关
四个 API，navigator 获取浏览器类型、screen 获取屏幕宽高尺寸、location 获取网址信息、history 前进后退网页。
2023-04-05 17:10:18
84
原创 React 组件通讯方式
父子组件用 props 传递数据和函数，传函数时，子组件可回传数据给父组件 ->上下层级组件，用 context，适合简单的共享数据，如语言、主题等 ->全局不相关组件用 redux 共享数据，如复杂的公共业务数据等。
2023-04-05 12:17:30
86
原创 Vue 组件通讯方式
适合全局不相关组件通讯，以及多个组件触发多个组件响应的情况示例// Vue2 里实例已经实现了自定义事件 API// Vue3 里需要引入第三方自定义事件// 触发事件// 绑定响应事件event.$on('onAddTitle', this.addTitleHandler) // 使用 this.addTitle 函数名字而不是匿名函数是为了销毁组件时解绑// 解绑，避免内存泄漏beforeDestroy() { // Vue3 里改成了 beforeUnmount最常用的是。
2023-04-05 08:49:43
118
原创 前端6种常见设计模式及其应用场景
观察者模式和发布订阅模式的区别：观察者模式 subject 和 observer 直接绑定，没有中间媒介；注意：因为 JS 是单线程的，所以创建单例很简单，对于 java 等多线程语言，创建单例要考虑锁死线程问题，否则多个线程同时创建就重复了。使用者不能直接访问对象，而是访问代理层，在代理层监听 get、set 做很多事情。如 Vuex Redux 的 store、全局唯一的 dialog modal。注意：绑定事件要记得解除，防止内存泄漏。全局唯一的实例，无法生成第二个。如监听 DOM 事件。
2023-04-03 19:56:56
437
原创 CSS 水平垂直居中
top: 0, bottom: 0, margin: auto, 注意需要知道子元素的高度,即子元素定高。垂直用 top(50%), margin-top(-子元素高度的一半), 注意需要知道子元素的高度,即子元素定高。垂直用 line-height: 父元素高度，注意只能是单行，多行会让子元素的每一行的行高都是父元素高度。水平用 left(50%), margin-left(-子元素宽度的一半)3.子元素为 absolute 绝对定位元素。1.子元素为 inline 行内元素。
2023-04-03 15:57:10
51
原创 前端框架 Diff 算法（文章）
面试中经常被问到框架 Diff 算法，下面梳理下 Diff 算法相关知识点。首先，用一个 JS 对象模拟 DOM 结构，即 vnode，然后 h 函数是用于生成一个 vnode 的，里面包含元素选择器 sel、子节点 children、key 等属性。
2023-04-02 20:39:08
202
原创 JS 原型 prototype
JS 里有一个很重要的概念就是原型，不管在日常工作中还是面试中经常会遇到，下面我就来系统地给大家讲解下 JS 里原型的相关知识。1.是什么原型是每个函数都有的一个属性，是一个指针，指向一个对象，对象里包含一些属性和方法，由所有实例共享，当然这些属性和方法是根据具体业务情况自己添加的。2.用处由1可知，原型存在的目的就是为了让所有实例共享属性和方法，以便节约内存、共享数据。3.示...
2019-03-10 15:17:54
151
原创 react学习文档
1.安装 // React 的核心库 // 提供与 DOM 相关的功能 // Babel 可以将 ES6 代码转为 ES5 代码2.基本语法 ReactDOM.render( Hello, world!, document.getElementById('example') );3.使用 cre
2017-10-06 17:11:15
807
原创 The header content contains invalid characters
angular项目出现"The header content contains invalid characters"错误问题描述：启动项目，访问"http://localhost:8000/"出现('The header content contains invalid characters');解决方案输入 ”npm install karma --save““
2017-03-07 18:21:40
2540
转载 js跨域问题详解
js中几种实用的跨域方法原理详解这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。下表给出了相对http://store.company.com/dir/page.html同源检测的结果:要解决跨域的问题，我们可以
2017-02-20 23:37:07
351
原创 面试中的html doctype到底是什
声明是指示 web 浏览器使用哪个 HTML 版本进行页面编写的指令。要始终向 HTML 文档添加 声明，这样浏览器才能获知文档类型。在 HTML 4.01 中， 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。HTML5 不基于 SGML，所以不需要引用 DTD。常用的 DOCTYPE 声明
2017-02-20 23:27:43
307
原创 charCodeAt()
charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。
2016-01-21 11:09:08
563
转载 transition, transform和animation
一、前言兼目录索引transition, transform, animation可分别理解为过渡，变换，动画transition指过渡啦，就是从a点到b点，就像过江坐渡轮，是有时间的，是连续的，一般针对常规CSS属性；transform指变换，就那几个固定的属性：旋转啦，缩放啦，偏移啦什么的，若独立于远房亲戚transition使用，效果就是很干涩机械的旋转移动。要是配合transi
2016-01-20 16:56:23
807
转载 perspective
以下两行语句有什么区别？CssCss如果大家不清楚，请听我娓娓道来。CCS3中的Transform是设置界面样式和动画的一大利器。而且在Chrome和FF中还支持3D变换。IE9不支持，IE10支持。只要是3D场景都会涉及视角问题和透视的问题。在Transform中的设置方法比较简单：只能选择透视方式，也就是近大远
2016-01-20 15:01:43
731
原创 transition
transition 属性是一个简写属性，用于设置四个过渡属性：transition-propertytransition-durationtransition-timing-functiontransition-delay值描述transition-property规定设置过渡效果的 CSS 属性的名称。transition-duratio
2016-01-20 13:49:19
322
原创 :nth-child()
规定属于其父元素的第二个子元素的每个 p 的背景色：p:nth-child(2){background:#ff0000;}
2016-01-20 13:42:31
241
原创 backface-visibility
backface-visibility 属性定义当元素不面向屏幕时是否可见。backface-visibility:hidden;-webkit-backface-visibility:hidden; /* Chrome 和 Safari */-moz-backface-visibility:hidden; /* Firefox */-ms-backface-visibility:hi
2016-01-20 13:37:20
554
转载 ::before 和 ::after 伪元素用法
CSS 有两个说不上常用的伪类 :before 和 :after，偶尔会被人用来添加些自定义格式什么的，但是它们的功用不仅于此。前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面，里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外，就是接下来要介绍的这两个伪元素了。Creative Button Styles一
2016-01-20 12:30:30
336
转载 伪类和伪元素
CSS 伪类用于向某些选择器添加特殊的效果。CSS 伪元素用于将特殊的效果添加到某些选择器。可以明确两点，第一两者都与选择器相关，第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。伪类种类伪元素种类区别这里用伪类 :first-child 和伪元素 :first-letter 来进行比较。p>i:first-child {colo
2016-01-20 12:01:35
314
原创 width和max-width
width为宽度max-width为最大宽度如果设置了width，那宽度就定死了而设置了max-width，实际宽度可以在0~max-width之间，当元素内部宽度不足max-width时，外层元素的宽度随内层元素宽度改变何时用max-width要看需求，如果极其简单的布局width是够了
2016-01-20 10:51:28
887
原创 min-width和max-width
min-width与max-width用于设置图片最小最大宽度限制比较多。比如一个图片为主列表，对象里图片大小不定时候，为了不想让他太小不统一这个时候我们可以使用css最小宽度样式。再如，一个盒子里有文章有图片混排的时候，有时图片宽度不能确定，这个时候如果图片宽度超出了div盒子宽度，可能就会撑破div盒子造成图片混乱。
2016-01-20 10:48:10
322
转载 Modernizr的介绍和使用
传统浏览器目前不会被完全取代，令你难以将最新的 CSS3 或 HTML5 功能嵌入你的网站。 Modernizr 正是为解决这一难题应运而生，作为一个开源的 JavaScript 库，Modernizr 检测浏览器对 CSS3 或 HTML5 功能支持情况。 Modernizr 并非试图添加老版本浏览器不支持的功能，而是令你通过创建可选风格配置修改页面设计。 它也可以通过加载定制的脚本来模拟老版本
2016-01-19 18:05:02
271
原创 http-equiv="X-UA-Compatible"
:如果你有ie9的话说明你有ie789，那么就调用高版本的那个也就是ie9这个如果IE有安装Google Chrome Frame，那么就走安装的组建，如果没有就是上面的一样针对IE 6，7，8等版本的浏览器插件Google Chrome Frame，可以让用户的浏览器外观依然是IE的菜单和界面，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核。
2016-01-19 17:59:16
663
原创 <html lang="en">
简体中文页面：html lang=zh-cmn-Hans繁体中文页面：html lang=zh-cmn-Hant英语页面：html lang=en
2016-01-19 17:50:40
1472
原创 box-sizing
box-sizing是css3属性示例div{box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */}content-box：width不包含padding和borderborder-box：widt
2016-01-08 09:56:33
697
转载 block，inline和inline-block
总体概念block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。大体来说HTML元素各有其自身的布局级别（block元素还是inlin
2015-12-25 10:34:57
269
原创 元素定位
基础知识1.position:static：默认定位，出现在正常流中2.position:fixed：相对于浏览器的固定位置，窗口滚动不会变，不占空间，例{position:fixed; top:30px; right:5px;}3.position:relative：相对其正常位置，占空间
2015-12-18 20:14:56
380
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人