三个todolist作业总结

github链接

todolist_san：

todolist_react：

todolist_vue：

代码规范（百度）：https://github.com/ecomfe/spec/blob/master/javascript-style-guide.md

学习进度

san：学会框架santd用法，san-store，安慰粗略看了部分源码，走通源码的todo里的demo（源码中使用到路由的形式实现传参跳转，方法统一封装成service使用，同时巩固不同模块化下的书写方式知识 ）；

• 项目热更新：1、下了webpack-dev-server对项目进行了热更新的优化 2、看书的时候发现也有san-hot-loader包对webpack手写配置。3、san.confige.js就封装了webpack-chain也可以写个use（hot...plugin）

• 项目踩坑：1.有eslint校验（webstrom已禁止），上传代码得no--verify才可提交；2. list子组件再做删除和增加操作的时候，监听到todoObj改变后，在父组件不能再直接调用this.data.get('todoObj'),这样会再次获取到修改之前的数据。要么就是从localStorage getItem，要么就是通过ref去获取到子组件更改的值（我采用的是第二种） 3. 全选单单通过赋值的方法不起效, 使用foEach方法 勾选按钮直接消失。

   //bad
   this.todoObj =JSON.parse(localStorage.getItem('todoObj')).forEach((todo)=>{
              todo.done = done
          })
          
  //run successfully
  this.todoObj =JSON.parse(localStorage.getItem('todoObj')).map((todo) => {
      return {...todo, done}
  })

• 《高性能MVVM框架的设计与实现》：仅剩8-9章没完全看完，跨端和单元测试算是自己不怎么接触到的领域，虽然上个安卓课，但也只是会通过可视化构建简单的页面，uni-app多端打包也不是很熟，还有pc端，自己有实践拿别人框架打包过若依的electron版本，以后会加强此类学习。

react：三大组件核心，函数式组件和类式组件，

• 项目踩坑：引入antd报错，改成antd.min.css就解决了

vue：看了部分vue3，巩固vue2知识点,项目也使用到事件总线

• react事件

  • 推荐箭头函数，解决this 指向问题

  • 事件带小括号时，会直接调用（IIFE）

  • 带参传值时，使用柯里化 ，中括号取外层属性；若是不用柯里化就直接在绑定事件里面作为一个返回值

    <input onChange={event => this.saveFormData('username',event) } type="text" name="username"/>

• get/set更新数据变化

  • san ( 更新数据需要重新赋值，项目遇到了视图不更新就采用到了解构和es6对象赋值法)

  • this.data.set('',value) value可以是对象，项目中编辑功能传了内容和id两值

  • this.data.get('') 获取

• react
  • props获取值，setState去更改状态，方法结构有点像小程序的this.setData设定值才能去改变里面值得属性