微信小程序的小技巧
看到项目中有的文件代码实在是过长,想起之前看的视频教程,里面有很多值得我们借鉴的地方。
欢迎大家提出宝贵的意见。
代码结构
代码结构commponents组件目录。 images:放图片的里面最好以各模块来再划分一下文件夹。models专门处理数据的,后面会说。pages页面内容。util:常用的数据处理 。还有个重要的 config.js ,这个专门放配置信息的,在Java项目中会经常看到这个。比如后台接口地址,百度ApiKey, 等等。另外关于文件、文件夹的命名最好一个项目中做到统一,不要同时出现驼峰,下划线,- 进行分割。 还是比较建议使用‘-’的。
commponents组件目录: 很多人可能会觉得组件就是为了复用的,所以只封装了一些很常用的组件,但是在微信文档里面有句话很到位
开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。自定义组件在使用时与基础组件非常相似。
对,就是解耦合,代码也进行分离。一个pages如果功能稍微多一点,wxml代码会很长,对应的js会更长! 拆分后,代码思路会更清晰,改bug加功能,也会更简单明了写。 比如详情页。可以拆分为这么几个, 1234可以服用,5好好规划下也是可以复用的。最关键的是这么多功能如果不拆分,都搞到wxml,js中,也挺不爽的。
【图片图片过不了审核。】
2、models这个里面包含有各个大模块的数据请求,数据逻辑处理的函数方法。之所以搞这个就是为了拆分js。比如上面的功能,如果合在一起写,js里面的代码将会达到2000行,太长了,阅读不便。目前复杂点的页面对应的js代码都上千行,看代码找bug,太麻烦了。
建议:将数据请求,处理都拆分到数据处理模块。如:新增model文件夹,根据各个大的模块新增js文件,如二手房second-house.js. 创建类
models中的second-house.js 页面中使用models中的js中的类的方法这样,方法就可以单独抽取来。页面的js中对于这些接口请求代码,就少了很多,更关注于页面的响应,代码更简洁。 另外将请求方法单独抽取来,方法也能做到复用,尽量避免在页面的js中写接口请求的代码。
4、如果是一个类型的功能方法,尽量封装在一个类中,比如处理数字的,处理字符串的,最好也封装为一个class,如number-handles.js 封装为类后导出,导入就不用导出每个方法了,写一大串,直接导出类,直接通过类来调用方法。
5、内部使用的属性,方法前面加上_, 对外使用的不用加。
6、对于表单填写页面,加上双向绑定,能省很多代码!!!