快应用书写规范

一K海棠
197 阅读4分钟

前言

很多开发者在使用UX语法开发快应用遇到问题，其中大部分是可以严格按照书写规范规避掉的。除此之外，保证良好的书写习惯和代码分层有助于团队其他成员快速上手和后续维护。下面我将从常见错误、代码规范以及代码分层这几个方面一一展开。

常见错误

  • 组件错误使用data属性

有部分开发者将对象直接赋值给data属性，如果实例化多个组件就会造成多个对象共享一个被Observe的对象，导致问题。

    export default {
        data: {
            name: '一棠'   
        }
    }

推荐使用工厂函数返回一个新对象，这样多个组件实例维护不同的Observable对象，相互独立。

    export default {
        data() {
            return {
                name: '一棠'
            }
        }
    }
  • 在data中定义未参与到template绑定的变量

部分开发者也会写出如下代码：

    export default {
        data() {
            return {
                name: '一棠',
                timer: null
            }
        },
        onReady() {
            this.timer = setInterval(() => {
                this.name = '一棠世界'
            }, 1000)   
        },
        onDestroy() {
            // 记得在销毁时消除引用
            clearInterval(this.timer)
            this.timer = null
        }
    }

上述代码中的this.timer并未参与到template中的绑定，只是负责引用一个定时器，那么在data中就不需要定义，对对象每个变量进行劫持也是需要时间的。将timer变量挂载到实例上就可以了，修改后：

    export default {
        data() {
            return {
                name: '一棠'
            }
        },
        onReady() {
            this.timer = setInterval(() => {
                this.name = '一棠世界'
            }, 1000)   
        },
        onDestroy() {
            // 记得在销毁时消除引用
            clearInterval(this.timer)
            this.timer = null
        }
    }

代码规范

  • template标签书写遵守HTML规范
<template>
    <div class='class1' id='id2' style='background-color: "{{$item.color}}";'>
        <text>一棠</text>
    </div>
</template>

部分开发者书写如上代码，使用单引号包裹属性的value虽然在解析上没有问题，但是与HTML的规范相左，对其他开发成员不友好。 再者，使用快应用语法做绑定时，不需要加双引号包裹，这样会导致编译工具编译错误。修改后：

<template>
    <div class="class1" id="id2" style="background-color: {{$item.color}};">
        <text>一棠</text>
    </div>
</template>
  • 方法或属性语义不明确

这个问题是开发者代码中最常见的问题。代码是给其他人看的，使用合适的变量可以清晰地展示开发者的思路。开发者不用写注释或只需少量注释即可让其他人理解代码也是能力的体现。 下面的代码就是一个典型的例子

    export default {
        data() {
          return {
            status: false
          }  
        },
        changeStatus() {
            this.status = !this.status
        },
        emit() {
            // todo
        }
    }

status的语义不明确，emit也没有具体意义，团队新成员接手项目就会产生疑惑，在开发中应该尽量避免这样定义变量名。 修改后：

    export default {
        data() {
          return {
            componentShouldUpdate: false
          }  
        },
        notifyUpdateName() {
            // todo
        }
    }
  • 合理拆分组件

部分开发者习惯将一个页面的代码写入一个页面组件中，所有的模板样式和业务逻辑全都放在一起。

使用UX语法开发的快应用，其运行时DSL框架类似于Vue1.0，Watcher是基于指令对DOM元素进行绑定，不会基于组件进行VNode的diff算法。看起来是否组件化对性能影响不大，但是为了代码的可维护性以及复用性，组件的合理划分就显得很重要。除此之外合理拆分组件也能提升样式计算的效率。

后续使用Vue2.0以上版本开发快应用，合理的组件划分可以减少diff的时间，提高性能。

  • 合理使用样式

快应用的组件是贴近Web Component规范的，主要表现在各个组件之间的样式不会相互影响。每个组件的样式只受到组件内部的样式影响，这也是上面提到要拆分组件的原因。快应用支持后代选择器但并不提倡频繁使用后代选择器，使用BEM方案进行CSS模块化开发，能够提升样式计算的效率。详情请看我公众号之前的文章。

  • 减少硬编码

大多数开发者的代码都偏硬，可维护性较低。除了少数配置模块，其他模块尽量做到可复用。

代码分层和抽象

不论是做框架开发还是业务开发，代码分层都是一个考验开发者能力的重要指标。

一个好的框架或者业务项目都必须有良好的架构以方便后续拓展。比如说快应用framework，包含框架platform、native桥接、运行时DOM实现和运行时DSL框架四个分层，各个层相互独立。在此基础上，只需要修改DSL层的部分代码就可以完美接入其他运行时框架，比如说Vue2.0。

针对快应用开发的业务代码，建议抽象出一个统一的接口层。代码如下：

import fetch from '@system.fetch'

class API {
    constructor() {}
    _fetch(options) {
       return new Promise((res, rej) => {
           fetch.fetch({
               sucess(data, code) { // todo },
               fail(data, code) { // todo }
           })
       }) 
    }
    
    get(options) {
        return this._fetch(Object.assign({}, options, {
            methods: 'post'
        }))
    }
    
    post(options) {
        return this._fetch(Object.assign({}, options, {
            methods: 'post'
        }))
    }
}

之后可以引入redux/vuex之类的数据层，用该层操作接口层。保证应用所使用的所有外部数据都从数据层获取。

小结

良好的代码习惯不仅有助于项目的维护，更能培养个人的代码能力和设计思维能力。 如果还有其他问题，可以关注我的微信公众号：一棠世界。

avatar
文章
阅读
粉丝