前端学习日记11.10 (小程序专题页管理后台)

最新推荐文章于 2024-05-11 22:58:29 发布

原创最新推荐文章于 2024-05-11 22:58:29 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #小程序 #javascript

本文分享了提升编程效率的一些关键点，包括减少变量定义、使用三元表达式简化代码、利用debugger进行断点调试、通过路由传递数据、理解Vue的created与activated生命周期、优化bug修复策略、学习moment.js时间处理以及部署代码的步骤。同时，文章强调了代码质量和维护性的重要性。

1.定义变量过多，很多情况依靠较少的变量进行组合就能应对。

2.三元表达式简写：类似于 a = b == 2 ? true : false应简化为a = b == 2。

3.断点测试方法除了console.log还应该尝试用debugger。

4.通过路由给去往的新页面发送数据格式：

this.$router.push({
                const type = this.unifiedManagement ? 'country' : 'cityList'
                path: `/customManage/diyTopicDetailV3`,
                query: {
                    type,
                    behavior: 'create',
                    curTab: this.curTab
                }
})

在去往的新页面的created()或者activated()下直接利用const query = this.$route.query，来获取query中的请求参数。其中type定义尽量用const进行局部定义，query中type为type: type的简写。

5.created()与activated区别：

created()：在创建vue对象时，当html渲染之前就触发；但是注意，全局vue.js不强制刷新或者重启时只创建一次，也就是说，created()只会触发一次。本次项目created()使用在编辑、复制、新建专题页或者模板页的界面，因为该界面仅通过点击在之前页面的对应按钮进行的路由跳转所访问，每次操作只会访问该界面一次，再次访问时，应相当于重启该页面。

activated()：在vue对象存活的情况(组件或者路由要设置keep-alive)下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等。本次项目在管理界面使用的是activated()，本页面下可归类为三个tab栏切换+table表格，会从编辑界面频繁返回到该界面，且每次返回时都会伴随着数据的变动，故应该能频繁触发。

6.发现bug时的思考方式还需要改变，应先定位到造成该问题的直接原因，而不是列出相关的所有因素并全局审查每处的判断逻辑。并且解决问题的方式应该顺应整体的业务逻辑，而不是为了实现眼下的功能而让后期的维护变得困难。

7.关于moment()的用法学习：
原贴地址:使用moment.js轻松管理日期和时间_极客神殿-优快云博客

本次项目所使用的目的是为了获得时间戳，格式化创建或者编辑时的时间。

当前时间：

moment().format('YYYY-MM-DD HH:mm:ss'); //2021-11-10 10:53:11

当前是周几：

moment().format('d'); //3

相对时间：

moment("20181101", "YYYYMMDD").fromNow(); //3 years ago

其余用法在原贴中有详细介绍。

8.部署代码到代码发布管理系统步骤：
①checkout master ②git pull 确保master分支与远程仓库一致

③checkout 自己的分支 ④git pull 确保自己的分支与远程仓库一致

⑤git merge master 合并 ⑥git push 推送上传

⑦在代码发布管理平台新建分支，任意XXX分支n

⑧vscode中 node publish/local feature-dev-n no 此处的n为上面所选分支的编号，如果选择的是dev分支，则只输入 node publish/local dev no。(代码最初clone的时候要用SSH，不能用HTTP)

⑨新建上线任务，开始创建，等待部署完成

9.Object.assign({obj1},{obj2},{obj3},...)：是将obj1、obj2、obj3...多个对象进行合并。其中obj1为目标对象，后续均为源对象，执行后将所有源对象合并到目标对象上，如果有相同名称的属性或者方法，后者会覆盖前者。更多详细用法参考：浅谈Object.assign_qs8lk88的博客-优快云博客_object.assign