糊一笑

2.1 search方法它的参数是一个正则表达式，返回第一个与之匹配的子串的起始位置，如果找不到匹配的子串，它将返回-1，比如下面的返回值是4：       "JavaScript".search(/Script/i);如果search()的参数不是正则表达式，则首先会通过RegExp构造方法将它转换成正则表达式，search()方法不支持全局检索，因为它忽略正则表达式参数

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

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

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

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

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

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

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

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

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

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

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

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

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

3.1 RegExp属性       1.source:一个只读的字符串，包含正则表达式的文本。       2.global:一个只读的布尔值，用以说明这个正则表达式是否带有修饰符g。       3.ingoreCase:一个只读的布尔值，用以说明这个正则表达式是否代用修饰符i。       4.multiline:一个只读的布尔值，用以说明这个正则表达式是否带

这里主要给童鞋么介绍js正则表达式的用法，主要参考的是第六版的犀牛书(如果还不知道犀牛书的可以去百度),主要是对其中的一些概念以及我认为比较重要的东西我是摘录，毕竟作为一个初级入门的菜鸟，不敢胡乱造次^_^直接量的定义有两种格式：       1.包含在一对斜杠(/)之间的字符，例如：     var pattern = /s$/;       2.用构造函数Reg

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

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

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

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

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

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

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

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

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

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