luoqaxa/blog

learning record blog

blog's Issues

悦动实习Day03

• 今日任务

1. 继续用nativebase布局页面，其中遇到的问题有样式调整的问题，比如有默认样式的组件，不知道它是用了哪个样式，所以不好修改，调试没有浏览器方便。还有就是对react native原生组件View、和ScrollView不熟悉。
2. 把页面拆分为模块，需要注意的问题是import每个模块需要的包，需要注意的是：如果模块是采用export default导出的，在import的时候就可以直接引入。如果是只export的，就需要import时放在{}里面。这是一个小细节，但是容易出错。

• 学习资料

1. 继续学习ES6的语法，在实战中去运用它，比如解构赋值。今天遇到的是对象解构赋值

let {
AppRegistry,
StyleSheet,
Text,
View
} = React

解构赋值还没有完全掌握，再继续实践中学习
最深刻而易懂的ES6解构教程
解构赋值的用途
这里还收集了一份ES5与ES6的对照表便于以后碰到陌生语法时查阅。
2. 继续

Day18

好多天没有写每日总结了，可能都会有疲惫期把，最近上班回来就会感觉很累，什么都不想做，不想学习，不想写论文。清明假期很快过去了，状态才找回来。

• 今日任务

1. 跟着方神又学了一遍webpack，对webpack的使用熟练一写，也能够理解一些深层次的东西。

• 学习资料
  今天接触到的新知识都是关于webpack的。

1. webpack的一些常用插件，比如说用于压缩webpack自带的webpack.optimize.UglifyJsPlugin插件，当然这个功能也可以用webpack -p来完成，-p的意思就是 shortcut for --optimize-minimize --define。webpack还有很多常用插件，和一些性能提升的方法，以后用到慢慢查文档也不迟，只要弄懂原理，使用就是查文档的而已。
2. webpack-dev-server功能，如果只使用--watch来监视还是不够方便，因为需要你手动刷新，我们就可以使用webpack-dev-server。里面有一点需要注意的是，在index.html中引入的bundle.js不再是dist/bundle.js文件。因为webpack-dev-server的原理是启动的时候把打包后的代码存在内存中，如果检测到修改，就直接对内存中的代码进行修改，这样就能够很快的实现热加载功能。看起来是在index.html中请求了bundle.js文件，其实没有请求bundle.js，大概的原理代码可以这样表示app.get('bundle.js',res.send(file))
3. source map，今天才是第一次听说，其实就是用于定位报错的，当你使用一些库文件的时候，这些库文件都是被压缩过的，如果你在使用这些库时发生错误，报错信息你就看不到了，这时候可以使用source map，它记录了压缩前每个字符的位置，这样当你代码报错时，你就可以精准定位，找到错误来源。

悦动实现Day11

• 今日任务

1. 今天感冒更严重了，鼻涕眼泪一起流，完全不能干活，只有请假回宿舍了。
2. 下午睡了一会儿，然后吃了药之后鼻涕没有那么多了。本来应该抓紧时间写论文的，结果还是放下论文去做了node项目。
3. 今天又重温了一遍webpack的一些知识。
4. React-redux的知识拖了两天还没有弄完，明天加紧了。

node

开发环境搭建

1. node +webpack + typescript 开发环境
2. TypeScript在node koa项目中的实践
3. Node.js + TypeScript 写后端工具

stream

Day20

• 今日任务

1. 今天研究了一遍项目的代码结构和react-native中的路由，大概明白了一些，但是还是很糊涂
2. 又布局了，还是有几个问题，比如说怎样将输入框固定到顶部，突然忘记可以用position：fixed
   还有一个问题是当列表只有一张图时放大，几张图时顺序排列，这又需要一个判断。还发现了Image组件margin没有用
3. 代码越来越多，如果不分为组件复用，真的太难管理了，但是组件也有一个问题，有些模块很相似但是又不完全一致，不知道该怎么封装

• 学习资料

1. AppRegistry是javascript运行的入口，应用的根组件通过AppRegistry.registerComponent来注册自己,然后原生系统才能加载应用的代码并且在启动完成之后通过调用AppRegistry.runApplication来真正运行应用
2. react-native 开发还是需要原生和react的知识，还需要不断学习才行。

悦动实习Day07

• 今日任务

1. 今天组件的设计稿已经出来一部分了，今日的任务就是根据调了几个组件的样式。nativebase的组件样式是通过一个.js文件来定义样式值，然后不同组件引入这个文件，然后使用这些变量来定义组件的样式。除此之外每一个组件都定义了很多属性，加上这些属性，就相当于又加上了对应的样式。其实只要看通了这个逻辑，虽然代码很多，但是修改起来也不会太复杂。

• 学习资料

1. git的使用还仅仅停留在一些基本操作上，仅仅在主分支上，还没有用过分支的管理代码方式。今天学习了一下分支的管理方式
   git checkout 命令详解

2. 一个小技巧：nrm 工具
   input中的placeholder水平居中
   写书城后端使用到了node框架express，使用方式很简单，但是不明白背后的原理，写着没有实感，比如
   express()调用之后到底发生了什么，以后慢慢解读。
   express深入理解

css

布局

1. flex-grow flex-shrink详解
2. CSS Modules 详解及 React 中实践

sass

1. Bourbon: 让你的sass更简洁
   bourbon是一个轻量级的Sass mixin和函数库，可以帮助我们快速开发样式.
2. sass-loader的options配置
   常用配置将需要引入当公共的sass文件目录配置到includePaths项中，引用时就不用按照相对路径去查找了

悦动实习Day19

• 今日任务

1. 设计稿出来了，排完了整个骑闻页面。react-native的布局还是有些坑的，特别是用得native-base库，有时候元素的属性让你很懵逼。问到的一个问题是Text中嵌套Text没能正确设置样式
2. 利用listView做了一个水平滑动的组件，但是在安卓机上会和外层的tab滑动的重叠，不知道怎么解决。
   listView其实就是需要一个dataSource属性，但是不明白为什么要这样设计。

• 学习资料

1. 论文写到了localStorage，梳理了一遍cookie、sessionStorage、localStorage的区别。
2. 搜node.js发现了一篇好文章为什么要用node.js和一个好网站
   留着以后慢慢看，在考虑每周翻译一篇外文，说到做到。

悦动实习Day01

1. React-native开发环境搭建
2. ES6新特性上 ES6新特性下
3. 闭包
4. 使用redux最简单的示例
   上面的内容还没有完全消化。
   下午大概看了一下React的文档，了解了一下React的生命周期,几个月没有看React,发现以前都是用React.createClass()来创建的组件。
   而现在要习惯用class Hello extends React.Component{}来注册组件。习惯用ES6的语法。
5. React三种创建组件的区别
6. React生命周期1 React生命周期2 React生命周期3

Day21

• 今日任务

1. 骑闻模块的样式布局，以及封装组件。封装了评论模块和骑闻模块，等数据接口做好之后，直接在父组件中请求数据，然后通过属性传递给子组件，子组件在内部做自己的处理。

• 学习资料

1. 一整天都没有闲着，体会到组件化开发的优点，要逐步习惯于组件化开发。

早读文章

1. TypeScript - 一种思维方式

和作者一样我也最开始学习ts也是模仿他人的写法，觉得ts就是一种类型约束工具，有时候甚至觉得很啰嗦。

1. 明确的模块抽象过程：真正会写ts的人，会在写代码前想清楚模块的抽象和扩展，而我现在写代码容易先写然后再去添加ts的定义。作者举了一个例子：比如写函数的时候，ts会要求我们对函数的参数以及返回值有一个明确的定义，这些定义就能帮助我们定位函数的作用，比如说设置返回值为void，就明确表明了我们只想利用这个函数的副作用。
2. 减少bug量：ts的静态类型检查能帮我减少至少15%的bug
3. 使用ts的时候也是在学习：我也能够感受到写ts后，通过浏览器查文档的时间少了，并且能够方便的看到相应的接口的确切定义和方便的智能提示，能够更加深刻的理解。
   这篇文章总结了ts给前端编程带来的变化，也给出了学习ts的很多资料很方法。

Day23

• webpack
  entry 可以是字符串、对象、函数、promise
  path 最好是一个绝对路径 chunkhash library libraryTarget包规范：umd chunkfilename hash值有什么用
  publicPath

• anywhere

悦动实习Day12

• 今日任务

1. 利用已有接口，渲染出列表。把获取数据函数文件的放在单独的api文件夹里面，方便管理，并且对post请求的url做了一下处理。除此之外，封装的这个接口函数，接收一个post请求的参数对象，利用axios发起请求，返回一个promise对象，然后再定义回调函数。这样的获取数据的接口函数，能够动态的传入不同的请求参数。
2. 自定义已有的searchBar控件属性，新增onSubmit的属性，此属性的值为函数类型，对应的是react-native中的TextInput这个基础组件上的onSubmitEditing属性，它会在文本被提交后（用户按下软键盘上的提交键）调用。所以我们可以将这个属性定义为一个自定义函数，在这个自定义函数中，检测是否有传入我们自定义的属性onSubmit，如果有就执行onSubmit这个传入的属性对应的函数。

• 学习资料

1. ES6语法又来啦。for-of循环和模板字符串。
2. 你还在用for循环和forEach吗？，也不要用for-in来循环数组了，ES6提供了for-of来遍历数组。
3. 今天写了一个toast的模块，但是toast的英文意思不是烤面包、敬酒啥的吗，不懂为啥要这样命名，就深究了一下，查了一会儿也没有得到结果，但是有意外的收获。比如说dialog和toast的区别，平时没有注意这些细节，现在才注意到dialog对用户体验不佳，会打扰到用户当前的运行。toast无疑是一个展示信息的好方式，但是一些不可撤销，影响严重的操作，比如说删除，用户更希望能让她先确认一下。在android中又出现了一个叫snackbar的东西，继承载信息，又能够让用户操作。
   知乎问答
   四种弹窗设计
4. react-native的网路请求。有两种还没试过呢，mark着以后慢慢踩坑。

悦动实现Day02

• 今日完成任务

1. 翻阅nativebase文档，布局app的发现页面。在这个过程中，由于不熟悉这个组件库的现有组件有哪些，每次需要花时间查找合适的组件来修改。除此之外对Flexbox还不太熟悉，在实际应用时容易发生主轴与侧轴弄混淆的情况。
2. 一直想着搭建自己的独立博客，今天终于去做了。用hexo搭建了个人博客，但是主题和样式还没有配置 ，接下来抓紧时间完善。
3. 建一个repo，强化学习flex布局。

• 学习资料

1. 用flexbox构建新闻网站
2. 通过动图形象地为你介绍 flexbox 是如何工作的
3. 使用flexbox写的常用组件
4. React Native之flexbox布局详解篇
5. 我对Flexbox布局模式的理解

Day09

• 今日任务

1. 完成毕业论文的静态页面部分

• 学习资料

1. 多行文本溢出的解决方法
2. css3伪类的进阶使用

悦动实习Day13

今日任务

1. 完成无限加载的功能，用到了一个库。

react-router

react-router v4 动态路由怎么理解：wayou/wayou.github.io#16

悦动实习Day05

• 今日任务

1. 骑行页面的布局，自己模拟数据和定义数据格式，渲染组件。利用到了ListView组件。
2. 学习nativebase库自定义组件的方式。
3. react-native中宽度和高度等长度都没有带单位，经过实验后单位是pt
   今天再一次体会到git的作用，使用server-mock来模拟数据的时候，index.html被覆盖了，还好不久之前commit了。

• 学习资料

1. 版本回退

git log
git reset --hard 哈希值

Day04

• 今日任务

1. 由于设计稿还没有全部做好，只调整了一个小模块的样式，并且把所有样式都写在style.createsheet方法里，但是nativebase不能这样写，因为传入的对象它内部会做这样一个处理，所以只需要传入一个样式对象就好了。
2. 在布局过程中发现line-height没有那么简单，然后深入学习line-height的属性，还没有完全掌握呢。

• 学习资料

1. line-height深入理解，
2. line-height图示
   在布局的时候发现我一直以来的一个误区。设置了文字的字体大小和行高一致，
   3.现在才知道不同字体样式对应的字体高度是不一样的，深入理解字体line-height
3. css中的line-height
4. CSS视觉格式化模型|盒模型|定位方案|BFC
5. 浅析line-height和vertical
6. CSS魔法堂：深入理解line-height和vertical-align
7. 浅析line-height和vertical
   line-height真的挺复杂的！

悦动实习Day06

• 今日任务

1. 利用asxio库获取数据，然后渲染页面。这里主要是要弄清逻辑，是在componentWillMount还是componentDidComponent。如果是在Will时就是第一次渲染到页面前就要获取到数据，那么我们可以在页面中显示loading，当数据获取到之后就显示数据。只要想通这个逻辑，用好生命周期还是不难的。还需要注意的是this值，在回调函数中的this值已经不是实例了，可以有多种解决方式。比如可以用箭头函数、bind(this)、或者在外部先保存this值等。

• 学习资料

1. 虽然感觉promise用法还是挺简单的，但是在把回调函数改为用promise时还有一些问题
   可视化学习promise
   大话promise
2. 今天在用ES6语法写react时，发现好多于ES5方法不一样的地方。比如说在限制props类型和没有getInitialState函数和getDefaultProps还有在绑定的事件需要在constructor中手动bind(this)。
   ES6与ES5的区别
3. 其实react也不难，就是一个状态机。

悦动实习Day08

• 今日任务

1. 自定义nativebase的icon，这个任务弄了我一整天。结果是一个很小的问题。得到一个结论，无论遇到什么bug，首先重头开始一步步的捋一遍整个思路和代码，不要盲目的打log。还需要注意的是在修改一个库文件的时候，一般来说有src目录和dist目录，dist目录是编译之后的文件，也是用到的文件，所以如果只是修改src文件是不起作用的。
   2.今天还用到了安卓开发调试工具adb。

• 学习资料

1. package.json中的依赖文件，可以设置为自定义请求地址，可以更改依赖包的源文件，来定制自己的组件库。更改之后使用npm update来更新依赖包。
2. React Native 自定义字体样式的方法，可以使用一个工具库react-native-vector-icons。

悦动实习Day10

• 今日任务

1. 热门模块的排版

• 学习资料

1. Redux入门
2. 数组的reduce方法
3. [在线便利贴项目任务2],掌握express快速搭建网站，中间件的使用
4. react-native布局篇基本上这些坑都遇到了，好文推荐
5. object.reduce,object.keys的用法

var arr = [1,2,3,4]
// 求和数组
var sum = arr.reduce(function(pre,cur){
  return pre + cur;
})
console.log(sum)

// 数组扁平化
var arr1 = [ [1,2],[3,4],[5,6] ];
var result = arr1.reduce(function(pre,cur){
  return pre.concat(cur)
})
console.log(result)

// 计算数组中各个值出现次数
var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

var count = names.reduce(function(arrNum,name){
   if (name in arrNum) {
     arrNum[name] +=1;
   }else{
     arrNum[name] = 1
   }
  return arrNum
},{})
console.log(count)


// []里面的值是字符串
var obj = {'a':3}
console.log(obj.a)

// Object.keys
var arr = ["a", "b", "c"];
console.log(Object.keys(arr)); 

// 当你想知道对象有哪些属性的时候，可以利用这个方法
var obj = {'a':2,'b':3}
console.log(Object.keys(obj))

//构造函数,能够遍历打印出所有实例属性，但是不能遍历出原型链上的属性
function Person(name,age){
  this.name = name;
  this.age = age;
//   this.show = function (){
//     console.log(this.name)
//   }
} 

Person.prototype.show = function(){
   console.log(this.name)
}
console.log(Object.keys(Person))
var john = new Person('john',18)
console.log(Object.keys(john));

react精选文章

react设计**
精读《React16 新特性》
react portal

typescirpt

Day32

1. Map对象: Map对象就是简单的键/值映射。其中键和值可以是任意值(对象或者原始值) 而对象的键只能是字符串或者是Symbols。
2. 正则表达式 匹配 :smlie: 的正则为 /^:[a-z_]+:$/g 解决react-native中的表情显示问题
3. 在用listview进行下拉刷新，上滑加载更多的实现中有很多可以需要可以用一个state值来判断数据是1、没有数据 2、有数据 3、加载中的三个状态。

Day25

1. model

import Immutable from 'immutable';

export class NewsComment {
  static create() {
    return Immutable.fromJS({
      id: '',
      content: '',
      vote: []
    });
  }
}

export class News {
  static create() {
    return Immutable.fromJS({
      id: '',
      content: '',
      comments: []
    });
  }
}

2、定义Action

import { createAction } from 'redux-actions';
import { ACT_NEWS_SELECT } from './constants';

export const actNewsSelect = createAction(ACT_NEWS_SELECT);

3、使用Action

onSelectNews(id){
      //触发action
       console.log('onSelectNews')
       this.props.actNewsSelect(id)
       Actions['articledetail']()
    }

function bindAction(dispatch) {
  return {
    actNewsSelect: (id) => dispatch(actNewsSelect(id))
  }
}

Webpack Hot Module Replacement 的原理解析

Jocs/jocs.github.io#15

提高开发效率

1. React Hot Loader实现原理

2. npm package anaylsis