part1. 如何减少代码中的指针错误,我们知道空指针错误会试整个页面挂掉,所以这个错误要尽量避免
最近读到了一篇阿里是如何减少前端空指针错误的文章,里面介绍了两个比较常见的写法来避免这,一个是写了一个工具函数遍历对象,判断有没有值,没有返回空
,一个是使用的时候判断前面一个父对象是不是空再使用
。其实我们在以前的项目里面为了避免空指针就是使用的类似方法的办法,然后这次写了个工具方法实践第一张方法,但是在项目中如果遇到了复杂的对象这个方法就很难写了,例如:对象和数组混用的情况
。
然后在这次项目的数据初始化中用到了这种写法,感觉还不错.
arr&&arr.length>0&&arr.map((value)=>{
return <component value={value}/>);
});
以及
let initArr = arr.map((v)=>{
return v;
}) || []
以及
let xx = obj&&obj.obj2&&obj.obj2[0]||{};
这三种方法基本上可以解决空指针的问题
part2. 如何写组件更利于维护
之前的项目组件管理都有点混乱,这次组件目录按功能先分一级目录
,然后按名称分二级目录
,没错就是按名字分二级目录,然后每个文件夹必须有个index.js作为组件入口,这样命名比较容易找主组件,这种命名和目录结构很多开源的项目有用到。
part3. 不同功能的职能分配
首先功能模块 大概有 store用于存储数据和action
,model用于确定数据模型,数据初始化需要的二级接口也在model中调用
,组件渲染页面和组件中不设计到store的操作函数,遇到操作store则调用store的action
。
分配好各模块职能后,不同代码函数不同分类,使代码不过与太乱利于维护。
part4. 关于store的定义
之前项目差不多是一类数据用一个store,这次仔细想了下,两个store已经可以应付大部分的需求,如果遇到新需求另加store,一个mainStore主要数据
,一个controlStore控制页面
。
part5. 暂时只想到这么多,项目完结后再补充