小白入职, 被第一个项目吓呆?

记入职的第一份项目(不包含具体项目内容)

2020-07-01 正式入职

第一份项目 Shop based on the Wechat min program

1. 先谈一下自己关于这个项目的几点看法(纯属小白自己不成熟见解), 后续内容将根据这几个点展开.

• 1 项目代码耦合性高.
• 2 单页面应用, 没有使用小程序的模块化开发思想.
• 3 技术老旧(当时微信开发没有更新到现版本).

2020.07.09 补充

• 4 数据库表, 部分表没有主键.
• 5 数据库所有除主键、外键外的字段类型都为varchar. ⚠️

2. 好了, 下面从以上几个点阐述自己一点不成熟的看法(小白一枚, 求放过).

• 第一点: 代码耦合性高, 这个先让你们看几张图:

可能有大佬会说, 你个小白, 没见过世面, 人家这业务逻辑复杂, 你不懂瞎说.
不过, 我根据自己学习, 和一些有好几年工作经验的同事交流中, 得出了一般单页面js文件可能多的也就几百行. 比较业务太复杂可以抽组件嘛!

对! 你没看错, 这是.wxml文件, 上图为所有的.wxml页面的一个缩影, 样式全为行内, 微信分好的.wxss层叠样式文件中没有代码!!!

还有一点, 全项目没有代码注释! 对的, 一句没有! 这里可能大佬会说了, 你个小白! 高手出招那都是不见踪迹的, 自己写的代码哪能露出踪迹呢? 好吧, 小弟表示佩服, 所以上手的这几天, 都是根据功能代码来判断方法功能.

• 第二点: 单页面应用, 没有使用组件化开发思想.

整个项目, 没有一个component组件, 可能是小弟涉世不深, 创建项目之时还没学习小程序, 如果没有组件的话, 那就是我言之有错该打! 但是, 如果当时有自定义组件的话, 那…

没有使用组件化开发的模式缺点可能有以下几点, 欢迎各位大佬指正或添加:

1. 单页面代码量大, 难以阅读和维护(尤其没有注释情况下).

2. 项目中使用多次的组件, 比如 搜索框 , 产品或者信息搜索行为的组件, 每次使用到, 都需要写.wxml页面代码=> .wxss样式代码 => .js行为代码. 所以, 那代码的耦合度可想而知.

3. 开发效率低, 同样的代码,假如你的项目中有20个页面使用到了 搜索 框组件, 你就需要 重复写20次 .wxml页面代码=> .wxss样式代码 => .js行为代码. 好吧, 可能有同学喜欢搬砖,那当我没说, 不过, 花时间在这, 去学学vue3.0 (vue-next), ts重写, vite出生, 那比vue2高出几倍的性能体验, 他不香么??? (狗头保命

4. … 欢迎各位小伙伴或者大佬指正.

• 第三点: 技术老旧

这一点, 情有可原, 因为前端技术发展的太快, 写该项目时可能还没有现在各种便捷的技术

1. 全局数据管理=> 开发过小程序的可能都知道, 微信没有redux之于react,vuex之于vue的全局数据管理组件. 所以就导致了微信小程序全局管理这个管理思想的各种各样, 我接触的有(1)直接在全局变量中crud, (2)westore(鹅厂后来发布的),(3)WxNotificationCenter 全局通知 等各种方式.

   该项目使用的是第三种WxNotificationCenter方法, 去到该项目github仓库, 发现有400多的star, 这在github同性交友网站中已经算比较多的了, 毕竟小弟玩了github四年了, 还没有一个star(你个菜鸟, 写的那么垃圾, 当然没人star你啦! )
   但是去学习这个组件的时候, 发现关于他的帖子都是2016-2018年间的, 那么在前端发展这么迅速的时代, 可能这个已经被大多数项目舍弃了.

2. 异步操作的处理, 在es6 出来之前, 没有promise的时代, 异步操作, 都是使用的回调函数来处理, 但是, 在多层嵌套的情况下会出现回调地狱, 也就是下一层处理需要的上层返回结果, 如果返回的不及时, 那么就会导致程序堵塞, 所以, es6中出现了promise.

定义:
getListData () {
    
    
	return new Promise ((resolve, reject)=> {
    
    
		if(/*操作成功 */){
    
    
			resolve('data')
		}else {
    
    
			reject('err message')
		}
	})
}

使用: 
getListData().then((data) => console.log(data))
			.catch((err) => console.log(err))
或者: 
getListData().then((data, err) => {
    
    
	// 成功
	console.log(data)
	// 失败
	console.log(err)
})

这样的话, 即使没有执行到, 也不会出现程序中等待而堵塞. 但是有了另一个问题, 微信小程序之前对于promise没有对应的promise执行器, 这也就导致了, 要想在小程序中使用promise, 就得自己写办法, 来运行promise, 这也就出现了co模块, 该模块可以将promise异步方法解析, 但是, 该方法现在看起来, 好像没有 es6 中出现的 async、await , 这个promise解构方法好使, 而且, 微信小程序开发更新日志中 有一下一行:

所以, 现在的项目可以直接使用async、await来解构promise异步操作.

总结: 目前就了解这么多, 毕竟才上手三天, 我相信项目中一定有值得我学习的优秀之处, 溜了溜了, 继续搬砖去了, 小白第一次记录非技术贴, 感谢您的观看! 文中的错误之处, 烦请您指出, 小弟一定马上修改! 谢谢!

2020.07.09 补充

4. 今天组长给了远程数据库, 让我熟悉一下项目的数据库表, 连上一看, 476个表, 首先, 下意识的点开了user表, 看了字段, 除了id, 其他的所有字段, 不管是地址信息、时间信息, 全是用varchar类型定义的, 然后看了商品表的价格, 也是varchar, 我就懵了, 在大学的时候, 自己做项目不注意数据字段类型, 老师都会批, 一家公司的数据库这样定义. 我…。
   写数据库表去, 感觉我是在做毕设文档的概要设计的数据库设计, 一会还可能让我画数据流图(估计还至少三层). 数据字典也不能忘.

人生没有回头路, 走的每一步路都算数 ! 加油吧.