github.com/hpoenixf

背景

现在工作中有超过一半的时间用于移动端项目的开发，包括app嵌入页，微信页面和移动wap页。

开发移动端页面跟开发PC页面的一个大区别就是移动端对响应式布局的要求更高，不能像PC页面一样设计几个断点利用媒体查询，两边留空白就解决。移动端页面需要把屏幕空间都利用上，而移动设备的尺寸和分辨率多种多样，解决移动端页面的自适应布局问题是搭建新的移动端项目的重点和难点。

经过研究，我在公司的多个移动端项目使用了REM布局来解决移动端自适应布局的问题。

背景

最近开发移动端项目用到了iscroll，踩了不少坑，因此阅读源码加深下对这个工具的了解。
本次阅读的是iscroll-lite，包含了主要的功能，比完整版少了鼠标滚轮，滚动后对齐到特定位置，按键绑定及定制滚动条等功能。

主体结构

以当前的5.2版本为例，前三百行是工具函数，封装了一些工具。三百行到四百行是构造函数IScroll，起到配置和初始化的效果。四百行到一千修改了IScroll的原型，给IScroll实例加上了各种方法。最后是模块化相关的判断。总体的结构是很清晰的。

工具函数

_prefixStyle

用于浏览器兼容。

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

var _vendor = (function () {
	var vendors = ['t', 'webkitT', 'MozT', 'msT', 'OT'],
		transform,
		i = 0,
		l = vendors.length;
	for ( ; i < l; i++ ) {
		transform = vendors[i] + 'ransform';
		if ( transform in _elementStyle ) return vendors[i].substr(0, vendors[i].length-1);
	}
	return false;
})();
   function _prefixStyle (style) {
       if ( _vendor === false ) return false;
       if ( _vendor === '' ) return style;
       return _vendor + style.charAt(0).toUpperCase() + style.substr(1);
   }

背景

公司项目需要用到省市区选择器，找了一阵，感觉饿了么团队的region-picker比较美观且好用。然而有一点不太满意，该组件在点击省份/城市时，下拉选择框就会关闭，导致只选择了省份或城市的信息，导致信息选择的不完整，可以查看demo，本来打算在关闭后，再使用事件触发来模拟一个点击事件让选择框重新打开的，但这样用户体验不好，可能会看到选择框闪动，于是便打算修改组件本身。

过程

通过阅读源码，可以发现该组件包含了单选和多选两种组件，这次只考虑修改单选的，于是找到single.vue,从39行开始，可以简单的明白，点击选项时，会调用select方法，因此只要修改select方法就好。

软件构件中的设计

设计中的挑战

软件设计就是把需求分析和编码调试连在一起的活动。

设计是一个险恶的问题

险恶的问题就是只有通过解决或部分解决才能被明确的问题。只有把问题解决一遍才能明确的定义它，然后再次解决该问题，形成可行的方案。就如同设计大桥时值考虑了是否结实，没考虑到风的影响，最终风让大桥坍塌。

设计是一个了章法的过程

形成设计的过程会采取很多错误的步奏，多次误入歧途。犯错正是设计的关键所在。设计过程犯错并改正比编码后才发现代价要小得多。设计的优劣差异微妙。很难判断设计何时才算足够好了，永无止尽。

设计就是确定取舍和调整顺序的过程

设计的关键内容就是去衡量彼此冲突的各项设计特性，并寻找平衡。

设计受到诸多限制

一部分在创造可能发生的事情，另一部分在限制可能发生的事情。

设计是不确定的

设计同一套程序可能有很多种做法，每种都很不错。

设计是启发式过程

设计具有探索性，不能保证能产生可重复性结果。总有试验和犯错误。没有通用的设计或技术

设计是自然而然形成的

设计不是在谁的头脑中直接跳出来的，是在不断的设计评估、非正式讨论、写实验代码以及修改试验代码中演化和完善的。

软件构建

软件开发中的活动

1. 定义问题
2. 需求分析
3. 规划构建
4. 软件架构
5. 详细设计
6. 编码和调试
7. 单元测试
8. 集成测试
9. 集成
10. 系统测试
11. 保障维护

构建活动主要关注编码调试，也包括详细设计，单元测试，集成测试，集成，规划构建。

项目简介

本次使用了RxJS和react开发了一个mac地址输入框，主要实现的功能有限制输入符合条件的字符1-9,a-f,并每隔两位可以自动添加用于分割的冒号。项目屏蔽了react的事件处理，同时使用setSelectionRange来手动控制光标。可以查看项目的demo,项目地址

RxJS简介

RxJS 是 Reactive Extensions 在 JavaScript 上的实现，具体来说是一系列工具库，包括事件处理，函数节流，延时等函数，RxJS应用了’流‘的思想，同时具有事件和时间的概念。RxJS也可以用于处理异步流程，比起Promise具有可取消和可延迟，重试等优点。Promise vs Observable
RxJS中有两个比较重要的概念，分别是Observable和observer。Observable可以使用create,of,from,fromEvent等方法来产生流，而Observer可以对流进行观察。最后两者通过subscribe来结合,例子如下：

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

var Observable = Rx.Observable.create(observer => {
    observer.next(2);
    observer.complete();
    return  () => console.log('disposed');
});
var Observer = Rx.Observer.create(
    x => console.log('Next:', x),
    err => console.log('Error:', err),
    () => console.log('Completed')
);
var subscription = Observable.subscribe(Observer);

来自构建流式应用—RxJS详解

更多关于RxJS,可以阅读Introduction | RxJS - Javascript library for functional reactive programming.

开始

写了一年多vue，感觉碰到了点瓶颈，学习下react找找感觉。刚好最近使用vue写了个基于cropperJS的图片裁剪的组件，便花费了几个晚上的功夫用react再写一遍。代码地址，demo地址
项目是使用create-react-app来开发的，省去了很多webpack配置的功夫，支持eslint，自动刷新等功能，使用前npm install并npm start即可。推荐同样是新学习react的人也用用看。
项目写的比较简陋，自定义配置比较差，不过也是完成了裁剪图片的基本功能，希望可以帮助到初学react和想了解裁剪图片组件的朋友。
组件的结构是这样的。

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

<!--Cropper-->
     <div>
      <ImageUploader handleImgChange={this.handleImgChange} getCropData={this.getCropData}/>
       <div className="image-principal">
         <img src={this.state.imageValue} alt="" className="img" ref="img" onLoad={this.setSize}/>
         <SelectArea ref="selectArea"></SelectArea>
       </div>
     </div>
<!--ImageUploader     -->
      <form className="image-upload-form" method="post" encType="multipart/form-data" >
        <input type="file" name="inputOfFile" ref="imgInput" id="imgInput" onChange={this.props.handleImgChange}/>
        <button onClick={this.props.getCropData}>获取裁剪参数</button>
      </form>
<!--SelectArea     -->
     <div className="select-area" onMouseDown={ this.dragStart} ref="selectArea" >
       <div className="top-resize" onMouseDown={ event => this.resizeStart(event, 'top')}></div>
       <div className="right-resize" onMouseDown={ event => this.resizeStart(event, 'right')}></div>
       <div className="bottom-resize" onMouseDown={ event => this.resizeStart(event, 'bottom')}></div>
       <div className="left-resize" onMouseDown={ event => this.resizeStart(event, 'left')}></div>
       <div className="right-bottom-resize" onMouseDown={ event => this.resizeStart(event, 'right')}></div>
       <div className="left-top-resize" onMouseDown={ event => this.resizeStart(event, 'left')}></div>
     </div>

让代码比你来时干净

一、有意义的命名

1. 变量、函数或者类的名称应该告诉你它为什么存在，它做什么事情，应该怎么用。
2. 要名副其实，让人明白代码是做了什么事情
3. 避免误导。如不是数组不要以list结尾，可以用group或者直接用复数形式。避免使用很相似的命名。
4. 做有意义的区分。别同时用productData，productInfo。
5. 用读的出来的名称，可搜索的名称。单字母名称仅用于短方法的本地变量。名称长短应与作用域大小相对应，变量如果可能在代码中多出使用，应赋予便于搜索的名称。
6. 类名和对象名应该是名词，不该是动词。方法名应该是动词
7. 每个概念对应一个词。类似于fetch、retrieve、get及controllers和managers只用其中的一个。
8. 避免一个单词用于不同目的。
9. 使用命名代替魔术数字。使用SECONDS_PER_DAY代替86400。

二、函数

1. 短小。函数不应该长于一屏。
2. 只做一件事情。
3. 参数。少用多参数，如果有三个以上参数，可以将其封装为对象。参数的名字与函数的名字应该有良好的关系
4. 无副作用。副作用就是做与名字无关的事情。
5. 不重复。