XiaoHuangDiLHD-CSDN博客

原创 react初次使用总结

之前一直都是使用vue来写项目，突然想使用react-native来开发app，所以先去学了react，因为之前学过vue，所以上手react很快，基本就是看了三天文档，加一个教学视频基本了解react的理念和如何使用react开发应用。使用到的技术有：react 用于构建用户UI react-router-dom 用于路由跳转 redux 用于状态管理 style-compone...

2018-12-11 19:08:37 302

原创 immutable的使用

immutable是用来避免开发者直接修改state的库。我们首先要将state对象变为immutable对象。使用fromJS方法。import { fromJS } from 'immutable'//使用immutable对象，是state数据不可变，是防止我们直接修改state数据的一个库const defaultState = fromJS({ fouced:fal...

2018-12-07 14:34:12 533

原创 react-thunk的使用流程

react-thunk作用：使我们可以在action中返回函数，而不是只能返回一个对象。然后我们可以在函数中做很多事情，比如发送异步的ajax请求。export const getList = () => { return (dispatch) => { axios.get('/api/headerList.json').then( (res) =...

2018-12-07 14:26:50 999

原创 react中如何使用refs

1.直接使用React.createRef（）class a extends React.Component { constructor(props) { super(props) this.firstRef = React.createRef() } render() { return <div ref...

2018-11-30 14:43:29 201

原创 vuex之mapMutation的使用

1.每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。mutations { increment(state){ //改变状态的操作 }}我们这里只是定义了一个可以改变状态的函数（mutation），我们还需要调用...

2018-11-20 23:01:08 4291

原创 vue之...mapActions的使用

<button @click="add">+1</button>actions: { increment({commit}){ commit("INCREMENT") }, decrement({commit}){ commit("DECREMENT") ...

2018-11-20 22:07:22 37726 1

原创关于css和html的零散知识点

1.js无法获取还没有赋值的css属性。如果没有用js赋值直接获取回来的是一个空字符串。但是js使用style赋值之后却能在DOM中得到渲染，暂时还不清楚js是如何渲染css的。2.可以通过document.defaultView.getComputedStyle()直接获取对于css属性的信息。该方法接受两个参数：要取得计算样式的元素和一个伪元素字符串（可选）。var nav = do...

2018-10-19 20:49:44 180

原创对于BFC（块级格式上下文）的理解

BDC的规则：1.BFC高度计算包括浮动元素的高度。（不是BFC的话，只会计算子元素的高度，而不会计算里面的浮动元素的高度）<div class="fat"> <div class="left"></div></div> .left { width: 100px; height: 300px; b...

2018-10-19 14:08:51 267

原创 javascript基础——函数表达式

函数声明与函数表达式的区别：函数声明提升：就是使用函数声明时，函数会被解析器先读取，以供执行环境使用，所以函数声明的位置可以在函数调用的后面函数表达式则不可以在函数调用的前面，必须先定义函数表达式，才可以调用，不然浏览器会报错。函数表达式：var sayHi = function(name){ console.log(name+",hi");}sayHi("joh...

2018-10-12 09:52:06 204

原创 javascript——ajax

创建一个请求需要三个步骤：1.创建一个XMLHttpRequest对象的引用2.调用open（）方法3.调用send（）方法function createAjax(){ if(window.ActionXObject){ //对IE6,7,8兼容 return new ActiveXObject("Microsoft.XMLHTTP") } else...

2018-10-08 19:14:51 182

原创 html5——离线缓存

实现离线缓存非常简单，只需要在html标签上添加manifest属性就可以了<html manifest="cache.manifest">....</html>然后在创建一个cache.manifest文件文件中的内容是CACHE MANIFEST#v0.11CACHE:js/app.jscss/style.cssNETWORK:r...

2018-10-06 21:34:31 940

原创 javascript中的原型对象

function Person() {}Person.prototype.name = 'kobe'Person.prototype.age = '23'Person.prototype.job = 'player'Person.prototype.sayName = function() { console.log(this.name)}var person1 = new...

2018-10-05 15:21:58 153

转载 http协议——常用的14种状态码

状态码类别类别原因短语 1xx 信息性状态码接受的请求正在处理 2xx 成功状态码请求正常处理完毕 3xx 重定向状态码需要进行附加操作以完成请求 4xx 客户端错误状态码服务器无法处理请求 5xx 服务器错误状态码服务器处理请求错误 200 OK...

2018-10-04 14:44:36 365

原创 http协议——Trailer,Transfer-Encoding,Upgrade,Via,Warning

Trailer : 说明了报文主体后记录了哪些首部字段 Transfer-Encoding: 规定了传输报文主体时采用的编码方式Transfer-Encoding:chunkedUpgrade: 检测HTTP协议及其他协议是否可使用更高的版本进行通信 Via ：为了追踪客户端与服务器之间的请求和响应报文的传输路劲。报文经过代理或者网关时，会先在首部字段Via中附加服务器的信息，然后在进...

2018-10-04 13:59:42 1445

原创 http协议——Pragma

pragma是http/1.1之前版本的历史遗留字段，仅作为与http的向后兼容而定义。规范定义的唯一形式Pragme:no-cache只用于客户端发送的请求中。客户端会要求所有的中间服务器不返回缓存的资源。如果所有的中间服务器都以实现http/1.1为标准，那么直接使用Cache-Control:no-cache即可，如果不是的话，就要包含两个字段Cache-Contro...

2018-10-04 13:38:29 5859 3

原创 http协议——Connection

connection首部字段有两个作用1.控制不再转发给代理的首部字段2.管理持久连接。hop-by-hop首部字段此种类别的首部只对单次转发有效，会因为通过缓存或者代理而不再转发。如果要使用hop-by-hop首部字段，需提供connection首部字段。Connection Keep-Alive Proxy-Authenticate Proxy-Authorizati...

2018-10-04 13:18:13 1665

原创 http协议——cache-Control

http协议属于应用层，用于客户端和服务端之间的通信，通过请求和响应的交换达成通信。它是不保存状态的协议，即无状态协议，每当有新的请求发送时，都会有新的响应产生。1.通用首部字段1）cache-Control 操作缓存的工作机制cache-Control的指令用于请求和响应略有不同。缓存请求指令：缓存请求指令指令参数说明 no-cache 无 ...

2018-10-04 12:40:01 397

原创 es6中的对象解构赋值

const {foo:baz} = {foo:'aaa',bar:'bbb'}此时，baz就等于aaa。由此可以看出，对象解构赋值，是先在赋值对象中找到同名属性，然后将属性的值赋值。注意这里baz才是变量，foo只是匹配模式，只是用来进行寻找同名属性用的。可以根据上面的方法扩展一下。const {foo} = item这个赋值表达式的意思是，ite是一个对象，将item对...

2018-09-29 20:38:45 375

原创 vuex初始化

vuex的初始化（1）文件目录（2）index.jsimport Vue from 'vue'import Vuex from 'vuex'import * as actions from './actions' //es6规则，将actions里面的所有方法都放到actions这个对里面，可以直接通过actions对象调用里面的方法 ...

2018-09-29 12:59:40 393

原创 vue设置固定title而造成无法点击问题

设置title的css时，没有给一个高度，导致它出现的时候，把列表给覆盖住了，所以无法点击下面的列表，设置了一个高度之后，问题解决。

2018-09-29 08:11:54 408

原创 vue利用better-scroll实现通讯录式列表滚动和左右联动效果(2)

3.右边字母列表滑动或者点击时对应的字母高亮 _calculateHeight () { this.listHeight = [] const list = this.$refs.listgroup let height = 0 this.listHeight.push(height) for (let i = 0; i < ...

2018-09-28 19:03:25 1270

原创 vue利用better-scroll实现通讯录式列表滚动和左右联动效果(1)

1.点击右侧字母，滚动到相应的列表位置首先在右侧字母列表监听touchstart事件，当事件发生时则执行相应的函数函数内容onShortCutTouchStart (e) { let anchorIndex = getData(e.target, 'index') this.touch.anchorIndex = anchorIndex this....

2018-09-28 13:55:51 2211

原创 vue-lazyload实现图片懒加载

这个插件使用非常简单安装npm install vue-lazyload --save在main.js文件中引入，注册import VueLazyLoad from 'vue-lazyload'Vue.use(VueLazyLoad, { loading: imgurl //加载时要显示的图片链接})在组件的img中使用<img v-lazy="i...

2018-09-26 20:15:33 139

无法滚动的时候打印一下scroll对象，看看里面的wrapperHeight是否小于scrollerHeight，如果不小于是不能滚动的，因为hasVerticalScroll表示是否有垂直滚动，如果不小于，那么hasVerticalScroll就是false，所以无法滚动。class为recommend的元素是scroll元素的父元素，它要固定高度为wrapperHeight的高度，如果没...

2018-09-26 19:20:42 1096

原创 vue中使用v-for循环加载swiper-slide时loop没有生效

vue中使用v-for循环加载swiper-slide时loop没有生效，数据是异步获取的。<div> <swiper :options="swiperOption" ref="swiperOption" class="swiper" v-if="recommend.length>0"> <swiper-slide v-

2018-09-26 14:10:58 4110

原创 jsonp的使用——qq音乐为例

上一篇中对jsonp的源码进行了分析，所以这篇文章是对jsonp的使用，加深对jsonp的理解。首次使用，如有错误，请告知。互相学习，互相借鉴。因为我最近在看慕课网上的用vue实现音乐app的教程，所以这里我也会使用vue来实现。安装jsonp$ npm install jsonp引入jsonpimport originJSONP from 'jsonp'定义一个实现j...

2018-09-25 20:33:30 531

原创 jsonp源码解析

源码github地址https://github.com/webmodules/jsonp/blob/master/index.jsvar debug = require('debug')('jsonp');//node.js的debug模块，可以在控制台打印错误消息一般我们在测试的时候都是直接console.log()来打印消息的，但是在线上生产环境用console.log的话，每次...

2018-09-25 19:36:54 528

XiaoHuangDiLHD的博客