- 博客(101)
- 收藏
- 关注
RSS订阅原创 类、变量、方法
$global_name = "Sir"class Customer @@no_of_customers = 0 def initialize(id, name, addr) @cust_id = id @cust_name = name @cust_addr = addr end def display_de...
2019-02-22 14:06:37
248
转载 react子组件如何通过父组件传入的函数，将自己的值再传回父组件
class Son extends React.Component { render() { return <input onChange={this.props.onChange}/>; }}class Father extends React.Component { constructor() { super(); this.state ...
2019-01-24 16:39:29
752
转载 react协调算法（页面更新机制）
对比算法：当对比两棵树时，React首先比较两个根节点。根节点的type不同，其行为也不同 1. 不同类型的元素：卸载（销毁旧的节点及状态）旧的元素重建新的元素<div> <Counter /></div><span> <Counter /></span>2. 相同类型元素：对比属性，仅更新变...
2019-01-18 16:18:14
766
转载 react中es6的使用
1. class创建组件class Greeting extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }}2. 声明默认属性class Greeting extends React.Component { // ...}G...
2019-01-18 15:23:46
2321
原创 受控组件与非受控
受控：通过state与onChange控制class Form extends Component { constructor() { super(); this.state = { name: '', }; } handleNameChange = (event) => { this.setState({ name: eve...
2019-01-18 11:18:08
647
转载 react中setState的隐患
隐患出处：setState异步更新状态https://ruby-china.org/topics/32715https://www.jianshu.com/p/c6257cbef1b1 浅合并（shallow merge）：当调用setState修改组件状态时，只需要传入发生改变的State，而不是组件完整的State如：return {...state, orders: **...
2019-01-17 11:21:23
606
原创 多余文字隐藏，悬浮显示
width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; &:hover{ overflow: visible; }
2019-01-17 10:12:03
1097
转载 利用react的state机制实现钟表计时器
涉及：state、生命周期钩子 class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMount() { this.timerID = setInterval( ...
2019-01-17 10:11:13
1366
原创 解构赋值
解构对象const tom = { name:'tom', age:21, height:170, greet:function () { return `hello ,I'm ${this.name}` // console.log(`hello, I'm ${this.name}`) // console.log(thi...
2018-12-26 10:28:30
204
转载 另一只快排写法
function quickSort(arr) { // 交换元素位置 function swap(arr, m, n) { let temp = arr[m]; arr[m] = arr[n]; arr[n] = temp; } // 数组分区，左小右大 function partition(arr, he...
2018-12-03 21:45:41
140
原创 求一个数组中的最大值
求最大值：arr.sort()、arr.reverse() Math.max(...arr) Math.max.apply(null, arr) function findMax(arr){ let max=arr[0]; for(let i=0;i<arr.length;i++){ arr[i]>max?max=arr[i]:null...
2018-11-30 10:21:10
472
原创 快速排序和冒泡排序，二者效率比较
快速排序let arr1 = [1, 23, 4, 2, 5, 6, 90, 0, 2, 55, 1.3]function quickSort(arr) { function sort(arr, left, right) { let index; if (arr.length > 1) { index = partit...
2018-11-29 17:21:36
3641
原创 快速排序
let arr1 = [1, 23, 4, 2, 5, 6, 90, 0, 2, 55, 1.3];function quickSort(arr) { if (arr.length <= 1) { return arr; } let pivotIndex = Math.floor(arr.length / 2), pivot = ...
2018-11-29 15:01:01
95
原创 输入网址后发生了什么
网站文件都是放在服务器上的，服务器地址是一串数字，为方便记忆会为其绑定一个域名。输入网址—DNS域名解析—建立TCP连接—发送HTTP请求—服务器处理并返回结果—浏览器生成页面 域名解析：先查找本地host文件，如果有则跳过查询直接访问对应网站的ip地址，如果无则由本地dns服务器向根dns服务器发送查询请求，并逐级向下最后查询到具体的网址ip 建立tcp连接：三次握手（客户端向服务器发...
2018-11-28 12:58:57
1669
1
转载 浏览器发送请求时的缓存判断顺序
浏览器发起请求：是否有缓存？——无：发送请求；有：判断缓存 验证Cache-Control中的max-age时间限定、验证Expires到期日？——未过期：使用缓存（200 form-cache）；过期：发送缓存信息至服务器验证 验证E-tag和Last-Modified信息？——无更新：304，使用缓存；有更新：200，返回新文件并更新缓存 https://juejin.im/e...
2018-11-28 12:10:18
1039
转载 https是什么
本质：在http和tcp之间加了一层ssl用于加密信息过程：服务器生成公钥和私钥，将公钥发送给第三方认证机构生成数字证书 然后将数字证书发给客户端，客户端解析数字证书并再次加密发送给服务器 服务器解析正确后维持通信https://segmentfault.com/a/1190000015969377 ...
2018-11-28 11:24:02
167
原创 js事件三阶段与事件委托
首先明确一个概念，js中事件包含三个阶段：捕获 到达目标 冒泡 事件委托：将子元素上的事件委托给父元素监听，从而无需对每一个子元素设置监听事件。例如ul嵌套多个li，要点击时alert每个li的innerText<ul id="ul"> <li>1</li> <li>2</li> <l..
2018-11-26 20:01:19
296
原创 requestAnimationFrame和定时器的区别
旧式定时器的问题：执行时机不可控（js异步执行队列机制、软硬件实现方式区别）rAf：页面重绘时立刻执行回调函数，不需要人为设置执行间隔，避免了过度绘制的问题 参考：https://www.zhangxinxu.com/wordpress/2013/09/css3-animation-requestanimationframe-tween-%E5%8A%A8%E7%94%BB%E7%...
2018-11-26 17:23:18
698
原创 重排与重绘
当dom的变化影响了元素的几何属性（宽高），浏览器需要计算页面元素的布局变化，对所有元素进行重新排序的的过程被称为重排，将重排后的元素渲染至页面被称为重绘。何时发生：添加或删除可见的dom元素 元素位置改变 元素尺寸改变（边距、边框宽度、内容宽高） 内容改变（如：文字变为图片、图片大小更改） 页面渲染器初始化 浏览器窗口尺寸改变并不是所有的dom操作都会影响几何属性，如改变背景...
2018-11-26 17:08:36
162
原创 css布局、flex、响应式、grid
一、常见布局类型表格布局：原始布局方式，利用表格的特性展示布局，没有页面逻辑且大量冗余代码，现在几乎不用 固定宽：常用960px，移动端缩放表现差，不友好 流式：使用float实现动态浮动，各分辨率下样式无法保证 flex弹性盒子：简洁且强大，主流使用 css栅格布局（grid）：将网页分成一系列行和列，将对应内容放入对应区域；新属性兼容性差二、flex弹性盒子：1.组成部分：弹...
2018-11-24 14:32:48
531
原创 使用flex实现一个固定在底部的footer
要求：实现一个footer页脚，内容不足一页时在底部显示，当内容超过一屏高度时依然在内容底部实现要点：html要设置height为100% body要设置min-height为100% 必须直接将内容区包裹在body内，且display: flex; 给需要占满整屏的元素添加flex: 1; <!DOCTYPE html><html lang="en"&...
2018-11-23 21:29:54
7935
1
原创 background-image样式和img标签如何选择
background-image的优势：节省img标签所占用的空间 便于布局（例如将文字布局在图片上，直接使用padding调整即可，使用margin会导致边距冲突）什么情况下应该使用img标签：由于搜索引擎不搜索css，所以当图片可以帮助网页获取流量时，应该使用img标签，且同时设置alt属性对图像进行说明 ...
2018-11-23 12:44:23
2140
原创 原生js实现添加删除和查询元素的class
<p id='p' class='dec'>hello</p>.active{ color:red;}.bigger{ font-size:30px;}.dec{ text-decoration:underline;}let p=document.getElementById('p');p.classList.add('ac...
2018-11-22 23:34:30
243
原创 性能优化（《建设高性能网站》总结）
1.减少http请求图片地图（指定area） 合成雪碧图（限定显示区域，再依次移动图片），现在常用svg或icon-font 内联图片（src属性内写入base64文件信息） 合并js和css文件2.设置CDN（使用户就近访问服务器上的静态资源）3.设置长久的缓存（max-age缓存时间或expires过期时间）4.压缩组件（在http请求中设置Accept-Encoding: gzi...
2018-11-22 20:33:55
177
原创 使用border画正方形、三角形等
<div></div>div{ width:0; border-top:100px solid blue; border-right:100px solid red; border-bottom:100px solid green; border-left:100px solid orange;} 需要三角形只需将对应的...
2018-11-22 09:32:46
966
原创 css隐藏元素的方法
仍在文档流：div{ visibility: hidden; opacity: 0; clip-path: circle(0);} clip-path可以创建一个基于当前元素的剪切区域不存在文档流：div{ display: none;}div{ position: absolute; margin-left: -999...
2018-11-21 10:25:12
101
原创 行内元素和块元素
块元素：前后有换行 可以设置margin和padding行内元素：前后无换行 无法设置上下margin，但可以设置padding img标签是个例外，可以在行内拥有上下margin若想使行内元素也可以设置上下margin，可使用display: inline-block...
2018-11-21 10:01:54
97
原创 margin重叠问题
相邻垂直元素<div class='a'>a</div><div class='b'>b</div>.a{ width:100px; height:100px; background-color: #ccc; margin-bottom:30px;}.b{ width:100px; h...
2018-11-19 11:29:28
177
原创 如何判断该使用padding或margin、id或class、div或语义化
padding或margin二者角色定位不同：padding在内容和边框之间添加空白以便于阅读，margin在元素间添加空白，使页面布局更加清晰 padding可以被填充背景色或背景图，margin无此效果 class或id在充当选择符时，class和id的区别在于优先级；id的特别作用：关联label和input（for id）、页面定位（a href） 因此，id可用于实现行为与...
2018-11-18 10:13:25
142
原创 更新v-for循环输出项（数组、对象属性）
数组：数组变异：push、pop、unshift、shift、splice、sort、、reverse 直接令其指向新的数组对象：app.list=[***] Vue.set(app.list, index, '***')或app.$set(app.list, index, '***')对象： 指向新对象：app.userInfo={***} Vue.set(app.userInf...
2018-11-12 16:17:54
1273
原创 响应式：媒介查询的方式及常见测试特性
link标签<link rel='stylesheet' type='text/css' media='screen and (orientation:portrait) and (min-width:800px)' href='portrait-screen.css' /> css文件内引入其他样式表@import ulr('phone.css') screen an...
2018-11-11 10:42:22
114
原创 vue模板语法：插值、指令
插值：{{}}指令：v-（在{{}}和v-指令进行数据绑定时，支持js单个表达式）<p v-text='msg'></p>，就相当于插值表达式的功能<p v-html='title'></p>，可以解析标签data:{ msg:'test message', title:`<h1 style='color:...
2018-11-10 17:32:44
3278
原创 MVP与MVVM模式的区别
MVP：M：数据；V：视图；P：逻辑交互P是主要编码位置，主要是操作dom如：jQueryMVVM：M：数据；V：视图；VM：监听数据层，更新视图层M是主要编码位置，主要操作数据如：Vue （VM的实现原理主要依赖于Object.defineProperty()方法中的get和set，和虚拟dom技术）...
2018-11-08 12:29:17
1109
原创 Ajax、JSONP、CORS
背景知识： Http的8种请求类型：HEAD、GET、POST、OPTION、PUT、DELETE、TRACE、CONNECT一、常规Ajax <script> function loadXMLDoc(){ var xhr; if (window.XMLHttpRequest){ ...
2018-11-02 21:27:46
159
原创 cookie与session；sessionStorage、globalStorage与localStorage
一. cookie与session 存在的原因：http是无状态的协议，客户端每次发送请求都会重新验证身份 为了在一次会话中便于验证客户端身份，服务端采取了cookie机制 实现方法是服务器返回Set-Cookie的HTTP头信息并由客户端保存，之后客户端每次发送请求都会带上cookie作为自己的身份证明相同点：都可以用来跟踪会话，实现客户端的身份整明不同点：cookie存储...
2018-11-02 15:55:52
216
原创 继承
js只支持实现继承，由于函数没有签名无法实现接口继承;new的作用是什么：var obj=new Object();创建obj={}; 将__protoo__指向构造函数的原型，即obj.__proto__=Object.prototype; 将this指向当前对象，即Object.call(obj); 1.原型链继承//父类型function Parent...
2018-10-28 12:53:30
85
原创 创建对象的方法
工厂模式（单纯的以函数模式进行对象创建，内部新声明一个Object，然后添加属性和方法，最后return这个Object） 构造函数模式（将属性与方法都放在构造函数中，但可能会造成方法的重复创建占用空间） 原型模式（构造函数只用作实例化工具，将属性和方法都放在原型对象中） 构造函数与原型混合模式（构造函数中加属性，原型中加方法） 动态原型模式（添加if判断是否已有某方法，不可重写原型对象，...
2018-10-28 09:39:06
88
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人