08 2018 档案

摘要:sass中有些非常实用的颜色处理函数,总结如下 1.颜色加深或变浅 例如: 2.rgb和十六进制转换 阅读全文
posted @ 2018-08-31 16:17 全玉 阅读(1185) 评论(0) 推荐(0) 编辑
摘要:1. for 2. while 3. each 阅读全文
posted @ 2018-08-31 16:07 全玉 阅读(189) 评论(0) 推荐(0) 编辑
摘要:sass中@mixin,%,@function区别 @mixin 使用@include引用,可传参,返回一段css样式,不用会生成一个class,生成结果是直接拷贝,这样多处引用,会造成代码重复 % 使用@extend引用,不可传参,返回一段css样式。%开头的class只是用来extend,不会生 阅读全文
posted @ 2018-08-31 15:58 全玉 阅读(313) 评论(0) 推荐(0) 编辑
摘要:dom元素脱离文档流,有如下几种方式: 1. float 脱离文档流,其他dom元素无视他,在其下方布局,但是其未脱离文本流,其他元素的文本会认为他存在,环绕他布局。父元素会无视他,因此无法获取其高度,这也就是浮动元素父元素高度塌陷的原因。 下面是一个例子:特别注意的是,浮动元素后面元素的文字虽然对 阅读全文
posted @ 2018-08-29 17:42 全玉 阅读(2144) 评论(0) 推荐(0) 编辑
摘要:React的ref有3种用法: 1. 字符串(已废弃)2. 回调函数3. React.createRef() (React16.3提供) 1. 字符串 最早的ref用法。 1.dom节点上使用,通过this.refs[refName]来引用真实的dom节点 2.类组件上使用,通过this.refs[ 阅读全文
posted @ 2018-08-29 15:45 全玉 阅读(49784) 评论(0) 推荐(3) 编辑
摘要:用法: //deep,布尔值,若为true,则克隆oldNode及其子节点,否则只克隆oldNode本身 关于复制事件 1. 内联的事件,例如<div onclick=""></div>,onclick会被复制,并且可以正常使用 2. IE的attachEvent注册的事件,会被复制,但是这个是IE 阅读全文
posted @ 2018-08-29 13:51 全玉 阅读(702) 评论(0) 推荐(0) 编辑
摘要:mobx使用extendObservable来动态添加observable属性。 例如: observable.object(object) 实际上是 extendObservable({}, object) 的别名 阅读全文
posted @ 2018-08-26 17:07 全玉 阅读(2179) 评论(0) 推荐(0) 编辑
摘要:1. 对外开放本地封闭Server 本地server无法对外开放,nginx做反向代理,对外开发,使得外部可以访问封闭服务。 2. 本地80端口被nginx占用,使用nginx进行端口转发至9000,外部以80端口访问有效 3. nginx在80端口转发至多个本地端口 4. 同一个主域名,不同子域名 阅读全文
posted @ 2018-08-24 17:34 全玉 阅读(176) 评论(0) 推荐(0) 编辑
摘要:直接使用redux,要写很多样板代码,大量的actiontype,actionCreator。一个异步的方法要写三个actiontype,三个actionCreator,十分繁琐。下面是本人使用的一种简化写法,使用数组动态生成一些action和actionCreator,具有参考价值。 action 阅读全文
posted @ 2018-08-24 16:17 全玉 阅读(1013) 评论(0) 推荐(0) 编辑
摘要:bindActionCreators是redux的一个API,作用是将单个或多个ActionCreator转化为dispatch(action)的函数集合形式。 开发者不用再手动dispatch(actionCreator(type)),而是可以直接调用方法。 目的就是简化书写,减轻开发负担。 例如 阅读全文
posted @ 2018-08-24 15:43 全玉 阅读(2991) 评论(0) 推荐(0) 编辑
摘要:redux本身还是过于简单,实际使用的时候需要配合许多插件。 下面是一些插件与vuex的功能对比 redux-actions <=> vuex的mutation的写法 reselect <=> vuex的getters redux-react <=> vuex的mapState,mapActions 阅读全文
posted @ 2018-08-24 14:56 全玉 阅读(2136) 评论(0) 推荐(0) 编辑
摘要:export default导出任意变量,函数,常量,实际上是将其赋值到default属性上导出,相当于export.default = xxx 如果用import package from 'module'; 相当于import {default as package} from 'module' 阅读全文
posted @ 2018-08-24 11:55 全玉 阅读(2773) 评论(0) 推荐(0) 编辑
摘要:vue-router的钩子分为三类: 1. 全局钩子2. 路由独享钩子3. 组件内钩子 1. 全局钩子 beforeEach(to,from,next) afterEach(route) 2. 路由独享钩子 beforeEnter(to,form,next) beforeLeave(to,from, 阅读全文
posted @ 2018-08-23 11:33 全玉 阅读(270) 评论(0) 推荐(0) 编辑
摘要:1. 高阶组件 React中的高阶组件是一个函数,不是一个组件。 函数的入参有一个React组件和一些参数,返回值是一个包装后的React组件。相当于将输入的React组件进行了一些增强。React的高阶组件实际上是装饰器(Decorator)模式的一种实践。 2. 无状态组件(stateless 阅读全文
posted @ 2018-08-22 16:40 全玉 阅读(642) 评论(0) 推荐(0) 编辑
摘要:1.父子通信 父 -> 子 props子 -> 父 回调函数,父组件通过props向子组件传递一个函数,子组件调用函数,父组件在回调函数中用setState改变自身状态 2.跨层级通信 1. 层层传递props 2. 使用React context 3. 使用共同父组件,修改其状态,来两边通信 4. 阅读全文
posted @ 2018-08-22 15:44 全玉 阅读(229) 评论(0) 推荐(0) 编辑
摘要:1. 父子通信 1.1 props和emit 父 -> 子 props子 -> 父 事件$emit 1.2 双向绑定 v-model 子组件用$emit('input',data),可以用model属性修改value和input的名字。 .sync 在vue2.2恢复使用,可以实现双向修改,本质还是 阅读全文
posted @ 2018-08-22 15:21 全玉 阅读(234) 评论(0) 推荐(0) 编辑
摘要:getDefaultProps 不是获取默认props,而是设置默认props,主要用在ES5的React写法中getInitialState 不是获取默认State,而是设置初始的state,主要是用在ES5的React写法中 下面是ES5和ES6的写法对比 阅读全文
posted @ 2018-08-22 15:10 全玉 阅读(1360) 评论(0) 推荐(0) 编辑
摘要:React的生命周期总共8个钩子,三个will,两个Did,一个RecciveProps,一个ShouldUpdate,一个render。分为三个阶段,分别是 装载 Mounting更新 Updating卸载 Unmounting 1. 钩子说明 1.componentWillReceiveProp 阅读全文
posted @ 2018-08-22 14:24 全玉 阅读(288) 评论(0) 推荐(0) 编辑
摘要:vue2.x版本总共有8个生命周期钩子,四个before,四个ed,再加上activated和deactivated两个激活钩子,总共10个周期钩子 1.钩子说明 1. breforeCreate 创建前执行,此时 data: undefined $el: undefined 2. created 阅读全文
posted @ 2018-08-22 11:13 全玉 阅读(473) 评论(0) 推荐(0) 编辑
摘要:Generator函数是一个状态机,封装了多个内部状态。执行一个Generator,会返回一个迭代器对象,通过迭代器对象,可以遍历Generator函数内部的每个状态。因此,Generator函数可以看做是一个迭代器生成器。 1. Generator基本形式 执行foo得到一个迭代器 2.for-o 阅读全文
posted @ 2018-08-21 17:58 全玉 阅读(1318) 评论(0) 推荐(0) 编辑
摘要:React的context就是一个全局变量,可以从根组件跨级别在React的组件中传递。React context的API有两个版本,React16.x之前的是老版本的context,之后的是新版本的context。 1.老版本的context 提供context的组件,需要声明 childCont 阅读全文
posted @ 2018-08-21 15:04 全玉 阅读(33623) 评论(2) 推荐(0) 编辑
摘要:rematch是对redux的二次封装,简化了redux是使用,极大的提高了开发体验。rematch仅仅是对redux的封装,没有依赖redux-saga,也没有关联react,因此其可以用在其他的视图库中,如vue等。 1. rematch的优点 1.省略了action types 不必再多次写字 阅读全文
posted @ 2018-08-21 11:13 全玉 阅读(10105) 评论(2) 推荐(0) 编辑
摘要:dva是一个状态管理工具,整合了redux,redux-saga,react-router,fetch等框架,目前只能用于react的状态管理 1. dva的models dva的主要作用还是整合了redux,redux-saga的多文件的分散的写法,将state,reducers,effects这 阅读全文
posted @ 2018-08-20 17:50 全玉 阅读(1942) 评论(0) 推荐(0) 编辑
摘要:redux-saga是管理redux异步操作的中间件,redux-saga通过创建sagas将所有异步操作逻辑收集在一个地方集中处理。 sagas采用Generator函数来yield Effects。Generator函数可以暂停执行,再次执行的时候从上次暂停的地方继续执行。常见的effect有: 阅读全文
posted @ 2018-08-20 14:49 全玉 阅读(5604) 评论(0) 推荐(0) 编辑
摘要:redux仅仅是一个状态管理的库,不能直接用于react,react-redux是redux作者封装的用于连接redux和react的库。 react-redux基本概念 1. UI组件 1. 只负责UI显示的组件,不包含业务逻辑2. 没有状态3. 所有数据都由(props)提供4. 不使用任何Re 阅读全文
posted @ 2018-08-20 11:39 全玉 阅读(751) 评论(0) 推荐(0) 编辑
摘要:1. State 应用的数据,即状态 2. Action 一个纯对象,携带这个操作的类型和数据信息,主要是用来进行传递信息,如下所示: 3. Action Creater 一个函数,根据指定参数,来生成一个Action,目的是减少代码量 4. Reducer 一个纯函数,用来修改应用的状态,接收当前 阅读全文
posted @ 2018-08-19 22:19 全玉 阅读(260) 评论(0) 推荐(0) 编辑
摘要:mobx是一个简单可扩展的状态管理库,主要用来管理状态之间的依赖关系,可以使用在任何状态管理的场景,并不仅限于react。 结合mobx-react可以用在react中,结合mobx-vue可以用在vue中。mobx的概念与knockout和rxjs中的概念极其相似, 相当于将kouckout中的状 阅读全文
posted @ 2018-08-19 15:55 全玉 阅读(825) 评论(0) 推荐(0) 编辑
摘要:除了雅虎军规35条,这里再强调几条 1. 首屏加载 1. 首屏尽量使用服务端渲染 2. 首屏尽量使用懒加载 此懒加载并非图片的懒加载,而是指这个文档内容的懒加载。可以先服务端渲染用户可见的部分内容(实际要大于此,因为用户可能会滚动屏幕), 剩余的部分用js去加载和渲染,这样可以尽快的显示首屏,又不影 阅读全文
posted @ 2018-08-16 15:25 全玉 阅读(229) 评论(0) 推荐(0) 编辑
摘要:1. 延迟timer,相当于setTimeout 2. 循环timer,相当于setInterval 3. 停止一个timer 4. Phaser中的时间常量 5. 创建一个倒计时的例子 出处:https://phasergames.com/phaser-timer-basics-tutorial/ 阅读全文
posted @ 2018-08-16 11:18 全玉 阅读(641) 评论(0) 推荐(0) 编辑
摘要:在一个有序数组中查找一个元素,最常见的是二分查找。 在数组arr中,数组长度为N,首先比较N/2处数据,若相等,则返回arr[N/2]。若小于arr[N/2],则在左半边数组继续进行二分查找,若大于arr[N/2],则在右半边数组继续进行二分查找。 其中还有一个有趣的结论,就是数组的中间位置的数的索 阅读全文
posted @ 2018-08-13 11:18 全玉 阅读(146) 评论(0) 推荐(0) 编辑
摘要:原因是zsh的插件出问题了,解法方法如下: 把 ~/.oh-my-zsh/lib/misc.zsh 文件中的第一段 if 注释掉 OK 啦 出处:https://www.v2ex.com/t/262240 http://stackoverflow.com/questions/25614613/how 阅读全文
posted @ 2018-08-11 17:37 全玉 阅读(641) 评论(0) 推荐(0) 编辑
摘要:形如 return a,b的形式,最终的返回值是b,就是逗号表达式的后面的值 这个在箭头函数中可以有所应用 例如: 执行了pre[cur] = cur这个表达式,但是返回值是pre 阅读全文
posted @ 2018-08-08 14:06 全玉 阅读(431) 评论(0) 推荐(0) 编辑
摘要:用一个变量判断raf的回调是否已经执行了,已经执行了说明过了一帧,通常是16.7ms,达到了函数节流一帧的目的。 出处:https://juejin.im/post/5976b1ef5188250c980304c9 阅读全文
posted @ 2018-08-05 22:47 全玉 阅读(379) 评论(0) 推荐(0) 编辑
摘要:1. 游戏画布的尺寸 var width = game.width, height = game.height; 2. 中心点坐标 var game = new Phaser.Game(...); var centerX = game.world.centerX, centerY = game.wo 阅读全文
posted @ 2018-08-02 17:40 全玉 阅读(7380) 评论(2) 推荐(1) 编辑

点击右上角即可分享
微信分享提示