萌萌的卡洛奇-CSDN博客

原创移动端Webapp的那些令你头疼的事

持续更新…测试浏览器Chrome: 61.0.3163.73Safari: 10.0（IOS 10.3.3）Github: webapp-bugs1. IOS overflow: scroll 全屏滚动出界1.1 出现场景滑动到最顶部(最底部)的时候，停下，然后继续向上滑动(向下滑动)1.2 解决方案手动设置滑到边界时的scrollTop（scrollFix）当快滑到上边界或者下边界的值时，手动

2017-09-11 12:42:24 824

原创面试题解法二：逆波兰表达式计算'1 + (5 - 2) * 3'

昨天发了一个面试题：关于一道面试题【字符串 ‘1 + (5 - 2) * 3’，怎么算出结果为10，’eval’除外】，受到了各位大大的指点，用一个比较简单的解法就能够计算出来，因此自己在下班后按照各位的指点又实现了一遍，这里贴出来供大家参考。了解前缀、中缀、后缀表达式关于概念这里简单贴一下，想了解更多的可以自行Google前缀表达式：是一种没有括号的算术表达式，与中缀表达式不同...

2018-03-19 23:22:55 3311

原创关于一道面试题【字符串 '1 + (5 - 2) * 3'，怎么算出结果为10，'eval'除外】

最近徘徊在找工作和继续留任的纠结之中，在朋友的怂恿下去参加了一次面试，最后一道题目是：写一个函数，输入一个字符串的运算式，返回计算之后的结果。例如这样的： ‘1 + (5 - 2) * 3’，计算出结果为10最开始看到这个题目的时候，我脑中的第一反应就是eval，真的太直接了。但是我就不明白为什么这竟然是最后一道题目，我也不知道为什么还会考eval的运用，因此当时也很犹豫要不要用e...

2018-03-18 17:29:25 2460

原创微信小程序初探【类微信UI聊天简单实现】

微信小程序最近很火，火到什么程度，只要你一打开微信，就是它的身影，几乎你用的各个APP都可以在微信中找到它的复制版，另外官方自带的跳一跳更是将它推到了空前至高的位置。对比公众号，就我的感觉来说，有以下区别：公众号略显繁琐：我首先要关注才能看到内容，而小程序不用(个人对微信公众号研究不深，不对之处还望见谅)小程序性能要好一些：虽然我不是很清楚小程序用什么实现，就体验来说确实更接近原生一点；但...

2018-03-15 20:24:16 4700

原创小白学Docker之Swarm

承接上篇文章：小白学Docker之Compose，自学网站来源于https://docs.docker.com/get-started系列文章： - 小白学Docker之基础篇 - 小白学Docker之Compose - 小白学Docker之Swarm概念 Docker Swarm 和 Docker Compose 一样，都是 Docker 官方容器编排项目，但不同的是，Do...

2018-02-09 16:34:59 535

原创小白学Docker之Compose

承接上篇文章：小白学Docker之基础篇，自学网站来源于https://docs.docker.com/get-started系列文章： - 小白学Docker之基础篇 - 小白学Docker之Compose - 小白学Docker之Swarm概念Compose是一个编排和运行多容器Docker应用的工具，主要是通过一个YAML文件进行服务配置。使用Compose主要有三步：...

2018-02-09 10:07:15 2106

原创小白学习Docker基础篇

系列文章： - 小白学Docker之基础篇 - 小白学Docker之Compose - 小白学Docker之SwarmPS：以下是个人作为新手小白学习docker的笔记总结1. docker是什么百科上的解释是这样的： Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，然后发布到任何流行的 Linux 机器上，也可以实现虚...

2018-02-07 09:43:52 1262

原创那些年下过的大雨

想了解一下用纯CSS和JS怎么实现一段下雨的动画，于是去CodePen上面搜了一下，发现了很多很有意思的东西。有空可以常去上面逛逛，在对技术产生敬畏的同时也能学到好多好多东西。以下是自己理解的几个代码实现过程，所有源码均出自于CodePen。代码：github效果：http://rynxiao.com/The-heavy-rain-in-those-years/PS: 所有效果均在代码

2018-02-01 11:48:48 750

原创移动端APP列表点透事件处理方法

关于点透事件这里不再赘述，如果不清楚的可以上网搜一搜，或者看小火柴的这篇文章。这里是自己在做移动端时，在列表滑动的时候，遇到的点透问题。出现这个问题的来由是因为在转场的时候，各个手机的转场效果不一样，有的比较好，但是在有些低端机上，转场显得有点卡，于是就把过渡效果去掉了，因此就是直接的路由切换。【具体事件具体分析，可能我遇到的问题并不适合你，这里只是贴出来共享】先看下面两张图片：

2018-01-22 10:27:42 1689

原创关于React中状态保存的研究

在使用react搭配react-router做应用的时候，你可能遇到这样的问题，当我从第一个页面过渡到第二个页面，然后返回之后，发现之前的页面的状态全部不见了，即回到了初始的状态。这点在页面存在多个TAB页或者多条件筛选的时候体验会更加明显，这时候我又不得不点击我之前选择的页签，重新选择筛选条件，然后再进行搜索。因此，在这种情况下，保存之前的状态显得尤为亟待解决，下面是自己实践出来的几种方法，

2018-01-17 19:38:22 4850

原创几个关于js数组方法reduce的经典片段

以下是个人在工作中收藏总结的一些关于javascript数组方法reduce的相关代码片段，后续遇到其他使用这个函数的场景，将会陆续添加，这里作为备忘。javascript数组那么多方法，为什么我要单挑reduce方法，一个原因是我对这个方法掌握不够，不能够用到随心所欲。另一个方面，我也感觉到了这个方法的庞大魅力，在许多的场景中发挥着神奇的作用。理解reduce函数 reduc

2018-01-05 08:48:29 2602

原创关于React组件之间如何优雅地传值的探讨

闲话不多说，开篇撸代码，你可以会看到类似如下的结构：import React, { Component } from 'react';// 父组件class Parent extends Component { constructor() { super(); this.state = { color: 'red' }; } render()

2017-12-25 15:32:18 3643 1

原创深入CSS声明(一) —— Background

一直对一些自己常用的css声明掌握得不是很全，只知道常用的一些属性和值，但是对于其他的用法确实一知半解，这篇文章旨在扫盲，先不说有多深的理解，至少做到能够看到这些声明的属性和值的时候做到不陌生。这里后续还会增加更多自己在工作和学习中的一些css声明，供自己查阅，也提供给大家看看。githubbackground-image用于指定一个容器的背景图片，主要的值有三个：none 无背景图片(默认)u

2017-12-14 23:07:26 395

原创记一次改造react脚手架的过程

公司突然组织需要重新搭建一个基于node的论坛系统，前端采用react，上网找了一些脚手架，或多或少不能满足自己的需求，最终在基于YeoMan的react脚手架generator-react-webpack上搭建改造，这里作为记录。代码在这里：github另外推荐地址：react-starter-kit简单文件夹结构├── README.md # 项目RE

2017-12-01 18:29:50 3128

写在前面列表一直是展示数据的一个重要方式，在手机端的列表展示又和PC端展示不同，毕竟手机端主要靠滑。之前手机端之前一直使用的IScroll，但是IScroll本身其实有很多兼容性BUG，想改动一下需求也很不容易，可以看我之前写的这一文章IScroll那些事——内容不足时下拉刷新（这里并不是说IScroll不好，里面对手机、浏览器兼容性都做了大量的处理，只是当遇到bug时或者想改一下需求时不时特别方便

2017-11-20 10:22:00 3750

原创模拟制作网易云音乐(AudioContext)

模拟制作网易云音乐(AudioContext)记得好早前在慕课网上看到一款可视化音乐播放器，当前是觉得很是神奇，还能这么玩。由于当时刚刚转行不久，好多东西看得稀里糊涂不明白，于是趁着现在有时间又重新梳理了一遍，然后参照官网的API模拟做了一款网易播放器。没有什么创新的点，只是想到了就想做一下而已。效果可以看这里：http://music.poemghost.com/，如果看不了，说明博主的服务器已经

2017-11-07 12:43:08 3813 7

原创移动端效果之IndexList

写在前面接着前面的移动端效果讲，这次讲解的的是IndexList的实现原理。效果如下：代码请看这里：github移动端效果之swiper移动端效果之picker移动端效果之cellSwiper1. 核心解析总体来说的原理就是当点击或者滑动右边的索引条时，通过获取点击的索引值来使左边的内容滑动到相应的位置。其中怎样滑动到具体的位置，看下面分解：1.1 基本html代码<div class="index

2017-10-20 09:38:13 1726

原创移动端效果之CellSwiper

写在前面接着之前的移动端效果讲解，刚好项目中需要使用到这一效果，去饿了么的组件库看了一下效果，发现效果和微信端的cellSwiper还是有点差别的，由于项目中又是使用的React，之前使用的React所有组件都是自己一个字母一个字母码起来的（想来也是辛酸），所以结合之前的swiper，道理类似，实现了类似微信端的抽拉效果。代码看这里：github移动端效果之Swiper移动端效果之Picker1.

2017-10-13 12:53:36 1352

原创移动端效果之Picker

写在前面接着前面的移动端效果的研究，这次来看看picker选择器的实现原理移动端效果之Swiper代码看这里：github1. 核心解析1.1 基本HTML结构<!-- 说明： 1. 类 picker-3d 是为了提供3d视角，如果不需要可以去掉 2. 类 picker-slot-absolute 在3d视角中需要加上，因为下面相对定位的 picker-items 是要相对

2017-10-10 18:08:03 6221

原创移动端效果之swiper

写在前面在做移动端方面运用到了饿了么的vue前端组件库，不满足于只用在表面，故想深入了解一下实现原理。1. 说明父容器overflow:hidden;，子页面transform:translateX(-100%);width:100%;2. 核心解析2.1 页面初始化由于所有页面都在手机屏幕左侧一个屏幕宽度的位置，因此最开始的情况是页面中看不到任何一个子页面，所以第一步应该设置应该显示的子页面，默认

2017-10-09 12:53:57 1743

原创 React渲染问题研究以及Immutable的应用

写在前面这里主要介绍自己在React开发中的一些总结，关于react的渲染问题的一点研究。另外本人一直希望在React项目中尝试使用，因此在之前已经介绍过immutable的API，可以参看这里Immutable日常操作之深入API，算是对其的一个补充。本文所有代码请参看github仓库：https://github.com/Rynxiao/immutable-react渲染房间列表这个例子主要是写

2017-09-01 01:02:39 1084

原创 immutable日常操作之深入API

写在前面本文只是个人在熟悉Immutable.js的一些个人笔记，因此我只根据我自己的情况来熟悉API，所以很多API并没有被列举到，比如常规的push/map/filter/reduce等等操作，这些API我认为只要你自己稍微看一下官网的介绍都可以知道怎么用。本文所有的代码请参看本人的github地址https://github.com/Rynxiao/immutable-learn。一、什么是I

2017-08-29 23:44:19 3184

原创 redux深入理解之中间件(middleware)

理解reduce函数 reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。arr.reduce([callback, initialValue])关于reduce的用法，这里不再做多述，可以去这里查看看如下例子：let arr = [1, 2, 3, 4, 5];// 10代表初始值，p代表每一次的累加值，在第一次为10/

2017-08-21 00:25:41 2166

原创 IScroll的那些事——内容不足时下拉刷新

之前项目中的列表是采用的IScroll，但是在使用IScroll有一个问题就是：当内容不足全屏的时候，是木有办法往下拉的，这样就达不到刷新的目的了。【这是本人工作中遇到的，具体例子具体分析，这里只作一个参考】大致的例子是这样的：<style> * { margin: 0; padding: 0; } html,body,.container {

2017-07-18 00:09:13 1802 1

原创 webpack2归纳总结

本文github仓库:https://github.com/Rynxiao/webpack2-learn从v1迁移到v21. 配置类型在webpack1的时候，主要是通过导出单个object来进行配置。例如下面的配置：// webpack1 导出方式module.export = { entry : 'app.js', output : { */... */}, /* ..

2017-07-14 17:36:55 884

原创正则表达式归纳总结

正则表达式1. 使用正则创建正则表达式有两种方式，一种是以字面量方式创建，另一种是使用RegExp构造函数来创建。var expression = / pattern / flags;var expression = new RegExp( pattern / flags );var expression = new RegExp( patternStr, flags );// example

2017-04-18 16:06:36 3626 2

原创关于IE10输入框focus后触发input事件的bug

工作中遇到的问题，谨记录以作备忘！！！问题描述IE10 在页面输入框上同时绑定了input以及foucs事件，当触发foucs事件的时候会触发input事件，导致我的第一次搜索无效。注：本人只在IE8/IE10/Chrome等浏览器上进行测试，表现结果为：IE8、Chrome表现正常，IE10表现异常暂时解决办法在一番搜索之后，在这个异常反馈(注意这个链接得翻墙)中找到相同的表现，具体如下： T

2017-03-01 18:24:43 4236 1

原创 react - 基础入门

react新手入门，适合初学者看一下。另外本人github中包含了所有的源码，麻烦在各位fork的同时，给小的赏一颗star，谢谢！

2016-12-28 10:55:41 1163

原创用react写一个日历插件

说明个人娱乐所写(不保证BUG不存在)，UI方面参照其他人的UI设计详情见本人github案例：案例支持功能初始化日期高亮’今天’以及选择日期历史记录选择日期支持tag标识支持选择日期回调屏幕适应效果图基本思路计算出这一年中的每个月对应的天数，其中需要根据年份来判断2月份到底是28天还是29天，使用数组保存计算出这个月的第一天是星期几，来决定前面应该会有多少上个月的空格以及根据天

2016-08-07 13:11:51 10102 1

原创 webpack知识梳理

1. 导语1.1 什么叫做webpack webpack is a module bundler. webpack takes modules with dependencies and generates static assets representing those modules.简单的概括就是：webpack是一个模块打包工具，处理模块之间的依赖同时生成对应模块的静态资源。1

2016-07-23 14:26:30 4193 3

原创 node 编译遇到 Exit status 137问题解决

问题描述在虚拟机执行npm run build执行打包文件时候一直失败，然而在windows上就没有这个问题解决途径加上管理员权限 sudo npm run buildgoogle找到两篇解决方案(npm ERR! weird error 137, npm install fails on Digital Ocean Ubuntu)其中关键引用： ① I’m getting this now

2016-07-13 17:50:45 16469 1

原创 react生命周期

react生命周期react生命周期主要包括三个阶段：初始化阶段、运行中阶段、销毁阶段react在不同的生命周期会触发不同的钩子函数初始化阶段getDefaultProps() 设置组件默认的属性，注意这个钩子函数只会在组件第一次实例化的时候被调用，多次实例化的组件会共享同一份propsgetInitialState() 组件的初始化状态，可以通过用户的操作来更改组件自身的状态componentW

2016-07-11 20:24:05 505

原创用react+redux编写一个页面小demo

初步目录结构整体目录结构src目录结构entry 存放页面的入口文件src 页面的源文件static 页面源文件打包后生成的文件webpack webpack打包文件package.json package.json文件.babelrc 支持es6语法其中 src 中子目录结构如下：components 页面组件constants 页面需要用到的一些常量helpers 工具方法mock 模拟json

2016-07-11 14:36:10 11399 2

原创手机端长按文字复制功能

遇到的问题解决方案关于user-select语法取值说明兼容性自我检讨遇到的问题微信上要实现一个点击复制兑换码的功能，上网找了很久，找到了zero clipboard插件只能在PC端用，手机端并没有比较好的解决方案，无奈苦逼找产品商量，改为长按复制。解决方案微信默认就是支持文本长按选择，所以只需要调整字体样式后，几乎不需要写什么代码，这份任务就完成了，但是。。。情况并不如我所想。找

2016-06-28 17:18:43 30247 1

原创 ajax重新认识：(3)ajax跨域

一、概念一个域名地址的组成：http:// www · abc.com : 8080 / scripts/jquery.js协议子域名主域名端口号请求资源地址当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算跨域比如：http:

2015-06-16 12:21:51 705

原创 ajax重新认识：(2)json数据解析两种方式

有如此json字符串：var jsondata = '{"staff" : [{"name" : "洪七", "age" : 70},{"name" : "郭靖", "age" : 35},{"name" : "黄蓉", "age" : 30}]}';一、eval解析var jsonobj = eval('(' + jsondata + ")");alert(jsonobj.sta

2015-06-16 12:19:06 436

原创 ajax重新认识：(1)ajax初步

说明：个人在慕课网中学到的一些知识，根据讲解做了一些总结，仅此备忘兼分享学习网址：http://www.imooc.com/learn/250一、创建XHR对象var request;if(window.XMLHttpRequest) { request = new XMLHttpRequest(); // IE7+,FireFox,Chrome,Opera,Safar

2015-06-16 12:11:33 428

原创删除一个数组中指定位置的元素

var array = ["111", "222", "333", "444", "555", "666"];var indexList = [0, 5, 2];Array.prototype.del = function(indexList) { function isValidate(number) { if(isNaN(lastIndex) && lastindex > thi

2015-05-28 16:36:27 7556

原创 RequireJs边学边写：(一)初识RequireJs

由于笔者也是初学RequireJS,所以在某些概念上来说，笔者也是拿不准啊，所以主要是在官网以及前辈的一些博客中吸取精华，加上一些自己的理解以及案例的制作，那么下面主要给一些我自学的一些链接吧RequireJs中文网阮一峰关于javascript模块化编程的理解另外一些参考requireJs是一个采用了javascirpt AMD(Asynchr

2015-05-08 16:56:00 778

原创自定义全文显示插件

今天给大家带来的是一个自定义的全文显示插件，具体来说呢，就是当文章过长时，我们只希望特定地显示几行字符，然后点击"显示全文"的时候可以加载全文，那么这个怎么做呢？我想了想提供一种思路，就是根据获取当前的文本，截取出特定个数的字符，就可以精确的控制初始化时显示的文本了。就是下面截图的样子:当点击"显示全部"的时候，就可以显示全文了，同时提供了"收起文章"的选项，点击可以收起文

2015-05-08 16:54:07 515