iScroll 是一个js 多平台滚动库，https://github.com/cubiq/iscroll

这几天用下来发现这个库确实强大，github的star数也已经到达10000多。在vue中使用iScroll 和平常使用大同小异，核心思路都一样。

使用时需要注意几个问题：

• iScroll 需要在DOM加载完毕过后在进行初始化
• DOM 更新过后要执行refresh
• 如果需要监听scroll事件，需要使用iscroll-probe.js版本
• iScroll 只会对第一个子节点实现滚动， 其余的子节点会自动忽略
• iScroll 初始化指定的节点最好有position:relative; height: 100%
• 初始化指定的节点可以加上transform: translate3d(0,0,0)，以此开启硬件加速
• vue 组件中初始化iScroll一定要在mounted钩子函数中，并且使用this.$nextTick()回调，也可以用setTimeout延迟执iScroll的初始化

可以自己通过iScroll实现一个vue组件，可以命名为Scroll；在Scroll 的 template中使用slot插槽， 可以很方便的自行决定Scroll 下面的DOM结构

第 3 章 基本概念

typeof 的返回值有undefined, boolean, string, number, object, function

对未初始化的变量执行 typeof 操作符会返回 undefined 值,而对未声明
的变量执行 typeof 操作符同样也会返回 undefined 值

Number.MIN_VALUE 中——在大多数浏览器中,这个值是 5e-324;能够表示的最大数值保存在
Number.MAX_VALUE 中——在大多数浏览器中,这个值是 1.7976931348623157e+308

0 除以 0 才会返回 NaN,正数除以 0 返回 Infinity,负数除以 0 返回-Infinity

转型函数 Number() 可以用于任何数据类型,而另两个函数则专门用于把字符串转换成数值

Number() 函数的转换规则如下:

• 如果是 Boolean 值, true 和 false 将分别被转换为 1 和 0。
• 如果是数字值,只是简单的传入和返回。
• 如果是 null 值,返回 0。
• 如果是 undefined ,返回 NaN 。
• 如果是字符串,遵循下列规则:
  • 如果字符串中只包含数字(包括前面带正号或负号的情况),则将其转换为十进制数值,即 “1”
    会变成 1, “123” 会变成 123,而 “011” 会变成 11(注意:前导的零被忽略了);
  • 如果字符串中包含有效的浮点格式,如 “1.1” ,则将其转换为对应的浮点数值(同样,也会忽
    略前导零);
  • 如果字符串中包含有效的十六进制格式,例如 “0xf” ,则将其转换为相同大小的十进制整
    数值;
  • 如果字符串是空的(不包含任何字符),则将其转换为 0;
  • 如果字符串中包含除上述格式之外的字符,则将其转换为 NaN 。
• 如果是对象,则调用对象的 valueOf() 方法,然后依照前面的规则转换返回的值。如果转换
  的结果是 NaN ,则调用对象的 toString() 方法,然后再次依照前面的规则转换返回的字符
  串值。

String() 函数遵循下列转换规则:

• 如果值有 toString() 方法,则调用该方法(没有参数)并返回相应的结果;
• 如果值是 null ,则返回 “null” ;
• 如果值是 undefined ,则返回 “undefined”

arguments 的行为,还有一点比较有意思。那就是它的值永远与对应命名参数的值保持同步

ECMAScript 中的所有参数传递的都是值,不可能通过引用传递参数

第四章 变量、作用域和内存问题

执行环境定义了变量或函数有权访问的其他数据,决定了它们各自的行为

每个函数都有自己的执行环境。当执行流进入一个函数时,函数的环境就会被推入一个环境栈中。而在函数执行之后,栈将其环境弹出,把控制权返回给之前的执行环境

当代码在一个环境中执行时,会创建变量对象的一个作用域链(scope chain)
。作用域链的用途,是保证对执行环境有权访问的所有变量和函数的有序访问。作用域链的前端,始终都是当前执行的代码所在环境的 变量对象。如果这个环境是函数,则将其活动对象(activation object)作为变量对象。活动对。作用域链中象在最开始时只包含一个变量,即 arguments 对象(这个对象在全局环境中是不存在的)的下一个变量对象来自包含(外部)环境,而再下一个变量对象则来自下一个包含环境。这样,一直延续到全局执行环境;全局执行环境的变量对象始终都是作用域链中的最后一个对象。

传统数组去重

1
2
3
4
5
6
7
8
9

Array.prototype.unique = function() {
    var a = [], l = this.length;
    for(var i=0; i<l; i++) {
      for(var j=i+1; j<l; j++)
            if (this[i] === this[j]) j = ++i;
      a.push(this[i]);
    }
    return a;
};

优化数组去重方法,利用对象的键名不重复来筛选数组

1
2
3
4
5
6

Array.prototype.unique = function() {
    var o = {}, i, l = this.length, r = [];
    for(i=0; i<l;i+=1) o[this[i]] = this[i];
    for(i in o) r.push(o[i]);
    return r;
};

还有一种比较简便的方法

1
2
3
4
5
6
7

function unique1(array){
  var n = [];
  for(var i = 0; i < array.length; i++){
    if (n.indexOf(array[i]) == -1) n.push(array[i]);
  }
  return n;
}

最后还有一个最简便的方法

1

var a = [new Set(someArray)]

后两种需要考虑兼容性, 但是比较简便,第二个方法的性能完胜第一个

React Component Lifecycle

https://solome.js.org/web/react/2016/11/30/react-lifecycle.html

React.createElement: type is invalid – expected a string or a class/function but got: undefined

resolution:

1
2
3
4
5
6
7
8
9
10

<Menu.Item key='logout' className='register'>
  <Button type="primary">{this.state.username}</Button>
  &nbsp;&nbsp;
  {/* <Link target='_blank'><Button type='dashed'>个人中心</Button></Link> */}
  <Button type="ghost">退出</Button>
</MenuItem>//error
:
<Menu.Item key='register' className='register'>
  <Icon type="appstore"/>注册/登录
</MenuItem>

to

1
2
3
4
5
6
7
8
9
10
11
12

...
const MenuItem = Menu.Item;
<MenuItem key='logout' className='register'>
  <Button type="primary">{this.state.username}</Button>
  &nbsp;&nbsp;
  {/* <Link target='_blank'><Button type='dashed'>个人中心</Button></Link> */}
  <Button type="ghost">退出</Button>
</MenuItem>
:
<MenuItem key='register' className='register'>
  <Icon type="appstore"/>注册/登录
</MenuItem>

Warning: Failed context type: The context router is marked as required in Link, but its value is undefined.

resolution: change /src/root.js

1
2
3
4
5
6
7
8

<div>
  <MediaQuery query='(min-device-width:997px)'>
    <PCIndex />
  </MediaQuery>
  <MediaQuery query='(max-device-width:997px)'>
    <MobileIndex />
  </MediaQuery>
</div>

to

1
2
3
4
5
6
7
8
9
10

<Router>
  <div>
    <MediaQuery query='(min-device-width:997px)'>
      <PCIndex />
    </MediaQuery>
    <MediaQuery query='(max-device-width:997px)'>
      <MobileIndex />
    </MediaQuery>
  </div>
</Router>

how to modify themes of ant design via third-party or custom webpackConfig

resolution: change webpack.config.js to

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

{
  test: /\.js?$/,
  exclude: /(node_modules)/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['react','es2015'],
      // ant design  babel-plugin-import
      plugins: [['import',{'libraryName':'antd','style':true}]]
    }
  }
},
{
  test: /\.less$/,
  include: path.resolve(__dirname, './node_modules'),
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'less-loader',
      options: { // add less-loader option 'modifyVars' to change less var that defined in ant-design css
        modifyVars: {
          "primary-color": '#1da57a'
        }
      }
    }
  ]
}

loading static sources (images) with webpack

resolutions: add rules like this

1
2
3
4
5
6
7
8
9
10
11

{
  test: /\.(png|jpe?g|gif|svg)$/,
  exclude: /(node_modules)/,
  use: {
    loader: 'url-loader',
    options: {
      limit: 8192,
      name: 'img/[hash:5].[ext]'
    }
  }
}

now can use require(...) or ‘import’ to load images by relative path in jsx;

how to use css media query in css-modules

https://npm.taobao.org/package/postcss-modules-values

cannot read videos of null

when map the this.state.videos
resolution:
add this.state={...} to constructor

1
2
3
4
5
6
7
8
9
10
11

constructor() {
}
to
constructor() {
  this.state= {
    videos: '';
  }
}

how to use Promise.all to fetch two urls simultaneously

refer to: https://segmentfault.com/q/1010000004101262/a-1020000004101642

how to use BMap with webpack

resolution:
add option externals to the end of webpack-config.js

1
2
3
4
5
6
7
8

module.exports = {
  ...
  entry...
  output...
  externals: {
    'BMap': 'BMap'
  }
}

and then import BMap from 'BMap' when you need;

where to find svg pics

pixabay.com

this.props.dispatch is not a function

when using react-redux to connect store and component;
resolution: explicitly return it yourself in mapDispatchToProps implementation;

1
2
3
4
5

const mapDispatchToProps = (dispatch,ownProps) => {
  return {
    "dispatch": dispatch,
  }
}

ant design Carousel component connot autoplay when using react-redux to connect component which has imported the Carousel

resolution:
dont use “connect” for Carousel contained components;

ant design Tabs animated lag during switch tabpane via big data

do not forget to call callback in the validator of Form.Item when you call this.props.form.validateFields or this.props.form.validateFieldsAndScroll with a Form.Item which contains a validator’s callback not called

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

{getFieldDecorator('r_confirm',{
  rules: [{
    required: true, message: '请确认密码'
  },
  {
    validator: (rule, value, callback) => {
        if(value && value!==this.props.form.getFieldValue('r_password')) {
          callback('密码不一致')
        }
    }
  }
]
})(
  <Input type="password" placeholder='请确认您的密码' />
)}

is not equal to:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

{getFieldDecorator('r_confirm',{
  rules: [{
    required: true, message: '请确认密码'
  },
  {
    validator: (rule, value, callback) => {
        if(value && value!==this.props.form.getFieldValue('r_password')) {
          callback('密码不一致')
        }
        callback()
    }
  }
]
})(
  <Input type="password" placeholder='请确认您的密码' />
)}

nodejs server router is in conflict with react-router BrowserRouter

resolution:
use HashRouter instead of BrowserRouter or manualy set histroyFallback
http://www.cnblogs.com/YZH-chengdu/p/6855237.html

textarea height auto increment

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

(() => {
    // textarea height auto increment
    var textarea = document.getElementById('textarea');
    // hide scroll bar
    textarea.style.overflow = 'hidden';
    var height = parseInt(window.getComputedStyle(textarea).height);
    var width = parseInt(window.getComputedStyle(textarea).width);
    var autoHeight = function() {
        if(this.scrollHeight <= height || this.value == '') {
            this.style.height=height + 'px';
            return;
        }
        this.style.height = this.scrollHeight +  'px';
    }
    textarea.oninput = autoHeight;
    textarea.onpropertychange = function (event) {
        if(event.propertyName.toLowerCase() == 'value') {
            autoHeight();
            console.log(this.value);
        }
    }
})()

有时候希望textarea 能够自动调整高度来适应输入的内容

网上看到了很多解决方案，比如动态创建一个隐藏的div，当用户输入的时候将textarea的内容绑定到div，由于div的高度会自动撑开，因此可以动态检测div的高度，然后将div的高度复制给textarea。这个方法应该是兼容性较好而且比较稳健的办法，但实在太繁琐

还有一个解决办法就是动态将textarea的scrollHeight 复制给高度。我采用的是后者

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var textarea = document.getElementById('textarea');
    // hide scroll bar
textarea.style.overflow = 'hidden';
var height = parseInt(window.getComputedStyle(textarea).height);
var width = parseInt(window.getComputedStyle(textarea).width);
var autoHeight = function() {
    if(this.scrollHeight <= height || this.value == '') {
        this.style.height=height + 'px';
        return;
    }
    this.style.height = this.scrollHeight +  'px';
}
textarea.oninput = autoHeight;

这个方法就是通过监听textarea的oninput 来实现，也可以监听keyup，keydown；但是如果使用keyup或者keydown来监听的话会存在一个问题，那就是如果textarea有复制或者剪切操作，keyup，keydown不会立即响应内容的变化，并且也不能响应鼠标右键粘贴。

最后再象征性地增加兼容

1
2
3
4
5
6

textarea.onpropertychange = function (event) {
    if(event.propertyName.toLowerCase() == 'value') {
        autoHeight();
        console.log(this.value);
    }
}

然而悲伤的是这种方式并不适用移动端，移动端所有浏览器均测试无效

另外还有一个解决办法就是不使用textarea，而是使用普通div模拟textarea，因为div本身高度就自动增长，所有就不用担心其他问题了。实现方式就是给div设置属性contentEditable=true，这样div就变为可编辑的了。不过这种方式在某些firefox上面，div外层会出现虚框，从而使得div的本质暴露无疑。解决办法就是css配置outline:0 none