精华内容
下载资源
问答
  • VUE编写可复用性模块

    2021-04-02 10:16:40
    那么提高代码的复用性的关键便在于编写可复用模块,也就是编写可复用的代码、函数和组件等 封装成一个函数 除了使用变量的赋值缓存使用来解决数据的重复读取外,我们在开发过程中重复性更多的也许是功能点的重复...

    在 Vue 项目中,每一个页面都可以看作是由大大小小的模块构成的,即便是一行代码、一个函数、一个组件都可以看作是一个个自由的模块。那么提高代码的复用性的关键便在于编写可复用的模块,也就是编写可复用的代码、函数和组件等
    封装成一个函数

    除了使用变量的赋值缓存使用来解决数据的重复读取外,我们在开发过程中重复性更多的也许是功能点的重复,比如

    <tempalte>
        <div>
            <input type="text" v-model="str1">
            <input type="text" v-model="str2">
            <div>{{ str1.slice(1).toUpperCase() }}</div>
            <div>{{ str2.slice(1).toUpperCase() }}</div>
        </div>
    </template>
    

    上述代码的重复功能点在于截取输入框中第二个字符开始到最后的值并把它们转化成大写字母,像这样很简单的操作虽然重复使用也不会出现太大的问题,但是如果是代码量较多的操作呢?重复书写相同功能的代码是一种不经过大脑思考的行为,我们需要对其进行优化,这里我们可以把功能点封装成一个函数:

    export default {
        methods: {
            sliceUpperCase(val) {
                return val.slice(1).toUpperCase()
            }
        }
    }
    

    如此我们只要在用到该方法的地方调用即可,将值传入其中并返回新值。当然像在双花括号插值和 v-bind 表达式中重复的功能点我们可以封装成过滤器比较合适

    // 单文件组件注册过滤器
    filters: {
        sliceUpperCase(val) {
            return val.slice(1).toUpperCase()
        }
    }
    
    // 全局注册过滤器
    Vue.filter('sliceUpperCase', function (val) {
        return val.slice(1).toUpperCase()
    })
    

    然后在 html 中使用“管道”符进行过滤

    <div>{{ str1 | sliceUpperCase }}</div>
    <div>{{ str2 | sliceUpperCase }}</div>
    

    这样我们就把重复的功能性代码封装成了函数,而不管是过滤器还是正常的方法封装,其本质都是函数的封装

    封装成一个组件
    相比较于函数的封装,规模更大一点的便是组件的封装,组件包含了模板、脚本以及样式的代码,在实际开发中组件的使用频率也是非常大的,我们项目中的每一个页面其实都可以看作是一个父组件,其可以包含很多子组件,子组件通过接收父组件的值来渲染页面,父组件通过响应子组件的回调来触发事件

    封装一个组件主要包含两种方式,一种是最常见的整体封装,用户通过改变数据源来呈现不同的页面状态,代码结构不可定制化。例如

    <div>
        <my-component data="我是父组件传入子组件的数据"></my-component>
    </div>
    

    另一种便是自定义封装,也就是插槽(slot),我们可以开放一部分槽位给父组件,使其能够进行一定程度的定制化,例如

    <div>
        <my-component data="我是父组件传入子组件的数据">
            <template slot="customize">
                <span>这是定制化的数据</span>
            </template>
        </my-component>
    </div>
    

    在 myComponent 组件中我们便可以接收对应的 slot

    <div class="container">
        <span>{{ data }}</span>
        <slot name="customize"></slot>
    <div>
    

    这里我们通过定义 slot 标签的 name 值为 customize 来接收父组件在使用该组件时在 template 标签上定义的 slot=“customize” 中的代码,不同父组件可以定制不同的 slot 代码来实现差异化的插槽。最终渲染出来的代码如下

    <div>
        <div class="container">
            <span>我是父组件传入子组件的数据</span>
            <span>这是定制化的数据</span>
        </div>
    </div>
    

    这样我们就完成了一个小型组件的封装,将共用代码封装到组件中去,页面需要引入的时候直接使用 import 并进行相应注册即可,当然你也可以进行全局的引入

    import myComponent from '../myComponent.vue'
    
    // 全局
    Vue.component('my-component', myComponent)
    

    封装成一个插件
    在某些情况下,我们封装的内容可能不需要使用者对其内部代码结构进行了解,其只需要熟悉我们提供出来的相应方法和 api 即可,这需要我们更系统性的将公用部分逻辑封装成插件,来为项目添加全局功能,比如常见的 loading 功能、弹框功能等

    Vue 提供给了我们一个 install 方法来编写插件,使用该方法中的第一个 Vue 构造器参数可以为项目添加全局方法、资源、选项等。比如我们可以给组件添加一个简单的全局调用方法来实现插件的编写

    /* toast.js */
    import ToastComponent from './toast.vue' // 引入组件
    
    let $vm
    
    export default {    
        install(Vue, options) {
            
            // 判断实例是否存在
            if (!$vm) {            
                const ToastPlugin = Vue.extend(ToastComponent); // 创建一个“扩展实例构造器”
                
                // 创建 $vm 实例
                $vm = new ToastPlugin({                
                    el: document.createElement('div')  // 声明挂载元素          
                });            
                
                document.body.appendChild($vm.$el); // 把 toast 组件的 DOM 添加到 body 里
            } 
            
            // 给 toast 设置自定义文案和时间
            let toast = (text, duration) => {
                $vm.text = text;
                $vm.duration = duration;
                
                // 在指定 duration 之后让 toast 消失
                setTimeout(() => {
                    $vm.isShow = false;  
                }, $vm.duration);
            }
            
            // 判断 Vue.$toast 是否存在
            if (!Vue.$toast) {            
                Vue.$toast = toast;        
            }        
            
            Vue.prototype.$toast = Vue.$toast; // 全局添加 $toast 事件
        }
    }
    

    在这里插入图片描述

    成功编写完插件的 JS 脚本后,我们在入口文件中需要通过 Vue.use() 来注册一下该插件:

    import Toast from '@/widgets/toast/toast.js'
    
    Vue.use(Toast); // 注册 Toast
    

    最后我们在需要调用它的地方直接传入配置项使用即可,比如:

    this.$toast('Hello World', 2000);
    
    展开全文
  • 可复用性

    2019-06-23 16:59:28
    面向复用编程 复用性 软件复用是使用现有软件组件实现或更新软件系统的过程。 复用主要用在 ...对于可复用性,我们期望它: 简单 可移植性和兼容性好 灵活 可扩展 通用和参数化 模块化 将变化限制在...

    面向复用编程

    复用性

    软件复用是使用现有软件组件实现或更新软件系统的过程。
    复用主要用在

    • 为了复用编程
    • 基于复用编程
      其优势在于
    • 成本有效性和及时性
    • 可生成可靠的软件
    • 标准化
      在这里插入图片描述

    同时带来了一些弊端

    • 可复用的组件时空性能往往不如定向开发的同等功能软件

    其评价标准为

    • 复用频度
    • 复用成本

    对于可复用性,我们期望它:

    • 简单
    • 可移植性和兼容性好
    • 灵活
    • 可扩展
    • 通用和参数化
    • 模块化
    • 将变化限制在局部
    • 稳定

    复用分为:

    • 白盒复用:复用代码是可用的,但通常需要一些小改造或适应
    • 黑盒复用:通过提供一些“粘合”以组合现有代码的形式重用,但不必更改代码本身,通常是因为您无法访问代码

    在层次上又分为:

    • 代码级
      • 存在问题如下问题
        1. 需要维护多处修改的一致性问题
        2. 过程具有高风险
        3. 需要了解工作原理
        4. 需要访问源代码
    • 模块级
      • 通过类与接口
    • 库级
      • API和包
    • 系统级
      • 框架

    在模块级复用上有如下方法

    • 继承
      • 在java中就是extend
    • 委托
      • 调用
      • 联合(老师之于学生,学生之于课堂)
      • 包含(人之于心脏)

    :一系列方法和类

    对于一个优秀的API需要:

    • 易于学习
    • 易于使用
    • 难以误用
    • 易于保证代码的可读性
    • 足以满足要求
    • 易于升级
    • 适合阅读者

    系统级复用
    框架:应用框架是包含了接口、抽象类和具体类的可复用程序,使用时需要在其基础上补充所需要的设计元素。

    框架与库的对比
    类库:

    • 较少特定领域
    • 提供较小的重用范围。
    • 类库是被动的; 对控制流没有约束。
    • 被使用者调用

    框架:

    • 类为一系列相关应用程序进行合作。
    • 框架是活跃的; 影响控制流程。
    • 调用使用者代码
    展开全文
  • 在第四章学习如何通过一些方法提高软件的可复用性:如何构造出可以在不同应用中重复使用的...2.最抽象的模块最能被复用(越抽象的模块可复用性越强) 3.为什么要可复用? 1)降低成本和开发时间 2)经过充分测试,可...

    在第四章学习如何通过一些方法提高软件的可复用性:如何构造出可以在不同应用中重复使用的软件模块
    1.什么是软件的可复用性
    目前来说软件的可复用性是不现实的。
    软件的复用可以从两方面展开:
    1)面向复用的编程:开发出可复用的软件
    2)基于复用编程:利用已有的可复用软件搭建应用系统

    2.最抽象的模块最能被复用(越抽象的模块可复用性越强)

    3.为什么要可复用?
    1)降低成本和开发时间
    2)经过充分测试,可靠、稳定
    3)标准化,在不同应用中保持一致

    4.如何衡量可复用性?
    1)复用的机会与场合
    2)复用的代价

    5.可复用性的层级
    最主要的可复用是在代码层面,但软件构造过程中的任何实体都可能被复用(不只是代码)
    白盒复用:源代码课件,可修改和扩展。复用方式:继承。可定制化程度高但是软件复杂度增加。
    黑盒复用:源代码不可见,不能修改。复用方式:调用。 简单清晰安全但是适应性差些。
    1)复用的层级:
    (1)最简单最舒适:代码层级的复用。(不推荐)如copy代码
    (2)模块层级的复用:类的复用,通过API把具体功能给用户。复用类的方案:继承(白盒复用)、委托(黑盒复用)
    (3)库文件的复用:如创建一个List就用到了库函数,通过API调用相应的操作来完成。需要用到-—>在库文件里查找—>拿来用。
    (4)基于框架层级的复用:领域知识的复用。1)白盒复用:通过代码层面的继承。基本功能实现,框架没有实现的特定的功能用户去重写来实现,如果要增加新的功能就继承这个模板然后重写。2)黑盒框架:把想扩充的功能通过API放入。

    6.软件的可复用性的基本原则:
    1)类型可变(泛型)
    2)实现可变
    3)功能分组
    4)表示独立
    5)共性抽取

    展开全文
  • 开发指南篇 2:学会编写可复用性模块 在生活中,重复的机械劳动会消耗我们的时间和精力,提高生产成本,降低工作效率。同样,在代码世界中,编写重复的代码会导致代码的冗余,页面性能的下降以及后期维护成本的增加...

    开发指南篇 2:学会编写可复用性模块

    在生活中,重复的机械劳动会消耗我们的时间和精力,提高生产成本,降低工作效率。同样,在代码世界中,编写重复的代码会导致代码的冗余,页面性能的下降以及后期维护成本的增加。由此可见将重复的事情复用起来是提高生产效率、降低维护成本的不二之选。

    在 Vue 项目中,每一个页面都可以看作是由大大小小的模块构成的,即便是一行代码、一个函数、一个组件都可以看作是一个个自由的模块。那么提高代码的复用性的关键便在于编写可复用的模块,也就是编写可复用的代码、函数和组件等。

    一个简单的例子

    let person = [];
    
    for (let i = 0; i < data.obj.items.length; i++) {
        person.push({
            name: data.obj.items[i].name,
            age: data.obj.items[i].age
        });
    }
    
    

    不知道上方代码给你的第一印象是什么?总之给我的印象是糟糕的,因为出现了重复性的代码片段 data.obj.items,可能这样的代码在我们团队开发中随处可见,这也说明了重复编码现象其实无处不在。

    面对自己编写的代码,我们应该保持一颗去重的心,发现重复的地方就相当于找到了可以复用的模块。在不复用的情况下,上述代码一旦需要修改变量 itemslists,那么我们就得修改 3 处地方,不知不觉就增加了维护成本。而到时候往往修改你代码的人并不是你自己,所以对自己好点,对他人也会好点。复用后的代码如下:

    let person = [];
    let values = data.obj.items;
    
    for (let i = 0; i < values.length; i++) {
        person.push({
            name: values[i].name,
            age: values[i].age
        });
    }
    
    

    我们通过将 data.obj.items 的值赋值给变量 values 来实现了复用,此时修改 itemslists 的话我们只需修改一处地方即可,不管是维护成本还是代码可读性上,复用的优势都显而易见。

    封装成一个函数

    除了使用变量的赋值缓存使用来解决数据的重复读取外,我们在开发过程中重复性更多的也许是功能点的重复,比如:

    <tempalte>
        <div>
            <input type="text" v-model="str1">
            <input type="text" v-model="str2">
            <div>{{ str1.slice(1).toUpperCase() }}</div>
            <div>{{ str2.slice(1).toUpperCase() }}</div>
        </div>
    </template>
    
    

    上述代码的重复功能点在于截取输入框中第二个字符开始到最后的值并把它们转化成大写字母,像这样很简单的操作虽然重复使用也不会出现太大的问题,但是如果是代码量较多的操作呢?重复书写相同功能的代码是一种不经过大脑思考的行为,我们需要对其进行优化,这里我们可以把功能点封装成一个函数:

    export default {
        methods: {
            sliceUpperCase(val) {
                return val.slice(1).toUpperCase()
            }
        }
    }
    
    

    如此我们只要在用到该方法的地方调用即可,将值传入其中并返回新值。当然像在双花括号插值和 v-bind 表达式中重复的功能点我们可以封装成过滤器比较合适:

    // 单文件组件注册过滤器
    filters: {
        sliceUpperCase(val) {
            return val.slice(1).toUpperCase()
        }
    }
    
    // 全局注册过滤器
    Vue.filter('sliceUpperCase', function (val) {
        return val.slice(1).toUpperCase()
    })
    
    

    然后在 html 中使用“管道”符进行过滤:

    <div>{{ str1 | toUpperCase }}</div>
    <div>{{ str2 | toUpperCase }}</div>
    
    

    这样我们就把重复的功能性代码封装成了函数,而不管是过滤器还是正常的方法封装,其本质都是函数的封装。

    封装成一个组件

    相比较于函数的封装,规模更大一点的便是组件的封装,组件包含了模板、脚本以及样式的代码,在实际开发中组件的使用频率也是非常大的,我们项目中的每一个页面其实都可以看作是一个父组件,其可以包含很多子组件,子组件通过接收父组件的值来渲染页面,父组件通过响应子组件的回调来触发事件。

    封装一个组件主要包含两种方式,一种是最常见的整体封装,用户通过改变数据源来呈现不同的页面状态,代码结构不可定制化。例如:

    <div>
        <my-component data="我是父组件传入子组件的数据"></my-component>
    </div>
    
    

    另一种便是自定义封装,也就是插槽(slot),我们可以开放一部分槽位给父组件,使其能够进行一定程度的定制化,例如:

    <div>
        <my-component data="我是父组件传入子组件的数据">
            <template slot="customize">
                <span>这是定制化的数据</span>
            </template>
        </my-component>
    </div>
    
    

    在 myComponent 组件中我们便可以接收对应的 slot:

    <div class="container">
        <span>{{ data }}</span>
        <slot name="customize"></slot>
    <div>
    
    

    这里我们通过定义 slot 标签的 name 值为 customize 来接收父组件在使用该组件时在 template 标签上定义的 slot=“customize” 中的代码,不同父组件可以定制不同的 slot 代码来实现差异化的插槽。最终渲染出来的代码如下:

    <div>
        <div class="container">
            <span>我是父组件传入子组件的数据</span>
            <span>这是定制化的数据</span>
        </div>
    </div>
    
    

    这样我们就完成了一个小型组件的封装,将共用代码封装到组件中去,页面需要引入的时候直接使用 import 并进行相应注册即可,当然你也可以进行全局的引入:

    import myComponent from '../myComponent.vue'
    
    // 全局
    Vue.component('my-component', myComponent)
    
    

    封装成一个插件

    在某些情况下,我们封装的内容可能不需要使用者对其内部代码结构进行了解,其只需要熟悉我们提供出来的相应方法和 api 即可,这需要我们更系统性的将公用部分逻辑封装成插件,来为项目添加全局功能,比如常见的 loading 功能、弹框功能等。

    Vue 提供给了我们一个 install 方法来编写插件,使用该方法中的第一个 Vue 构造器参数可以为项目添加全局方法、资源、选项等。比如我们可以给组件添加一个简单的全局调用方法来实现插件的编写:

    /* toast.js */
    import ToastComponent from './toast.vue' // 引入组件
    
    let $vm
    
    export default {    
        install(Vue, options) {
            
            // 判断实例是否存在
            if (!$vm) {            
                const ToastPlugin = Vue.extend(ToastComponent); // 创建一个“扩展实例构造器”
                
                // 创建 $vm 实例
                $vm = new ToastPlugin({                
                    el: document.createElement('div')  // 声明挂载元素          
                });            
                
                document.body.appendChild($vm.$el); // 把 toast 组件的 DOM 添加到 body 里
            } 
            
            // 给 toast 设置自定义文案和时间
            let toast = (text, duration) => {
                $vm.text = text;
                $vm.duration = duration;
                
                // 在指定 duration 之后让 toast 消失
                setTimeout(() => {
                    $vm.isShow = false;  
                }, $vm.duration);
            }
            
            // 判断 Vue.$toast 是否存在
            if (!Vue.$toast) {            
                Vue.$toast = toast;        
            }        
            
            Vue.prototype.$toast = Vue.$toast; // 全局添加 $toast 事件
        }
    }
    
    

    成功编写完插件的 JS 脚本后,我们在入口文件中需要通过 Vue.use() 来注册一下该插件:

    import Toast from '@/widgets/toast/toast.js'
    
    Vue.use(Toast); // 注册 Toast
    
    

    最后我们在需要调用它的地方直接传入配置项使用即可,比如:

    this.$toast('Hello World', 2000);
    
    

    当然你也可以不使用 install 方法来编写插件,直接采用导出一个封装好的实例方法并将其挂载到 Vue 的原型链上来实现相同的功能。

    更详细的编写插件和实例的方法可以参考我之前写的一篇文章:Vue 插件编写与实战

    展开全文
  • 可复用性 Reusability

    2020-04-25 20:18:03
    可复用性Reusability1.复用层次1.1源代码1.1.1白盒复用1.1.2黑盒复用1.2模块:类和接口类的复用1.3库:API1.4架构: 框架framework2.可重用性的外部表现2.1类型可变2.2实现可变2.3功能分组2.4表示独立性2.5共性抽取 ...
  • 鄙人已付费购买,粘贴出来给更多前端爱好者学习。若掘金小册禁止此类操作,请联系 在生活中,重复的机械劳动会消耗我们的时间和...在 Vue 项目中,每一个页面都可以看作是由大大小小的模块构成的,即便是一行代码、...
  • 如何衡量“可复用性”?可复用组件的级别和形态 源代码级别复用 模块级别的复用:类/抽象类/接口 库级别的复用:API /包 系统级别的复用:框架 对可复用性的外部观察 类型变化 例行分组 实施变更 代表独立 分解...
  • 可复用性的三个层面 代码层面的复用 模块层面的复用 在class与interface层面的复用 复用技术:继承与委托 继承:子类型继承、重写父类型的方法,类型耦合性高 委托:一个对象依赖另一个对象的方法,耦合性底 库层面...
  • 4-1 可复用性概述

    2020-04-21 11:24:46
    1、什么是软件可复用?   使用现有的软件组件来快速实现需要的功能。 软件可复用的两个方面:   1、开发层面:面向复用编程,开发成本高,缺乏针对,性能差些;   2、使用层面:基于复用编程,复用时需要...
  • 面向一个重要的外部质量指标:可复用性——如何构造出可在不 同应用中重复使用的软件模块/API?软件复用/重用软件复用的两种维度软件复用的优越性和缺点为什么进行软件复用软件复用的代价开发可复用的软件使用已有...
  • 雨课堂5.1可复用性

    2019-06-15 07:29:13
    5.1可复用性 1. 2. A是代码层面(复制粘贴)B是模块层面(类/抽象类/接口,正确) C是库层面(API/包)D是系统层面(框架) 3. 显然C 4. 5. 答案全选 6. D反了 ​ ...
  • 5.1 可复用性的度量、形态与外部表现1 什么是可复用的软件2. 如何测量可复用性3. 可复用组件的层次和形态3.1 代码复用3.2 模块复用3.3 库层面的复用3.4 系统层级的复用4. 可重用性的外部观察 综述:本节探讨可复用的...
  • 度量软件的复用性不同应用中使用的频率复用花费的成本代码层面/模块层面/库的层面/系统层面:框架 对类的复用继承:写更多方法, 重写委托(delegation)调用其他对象的方法(比如说调用库函数)例子:做比较。...
  • 可复用性的度量、形态与外部表现 1.什么是软件的可复用性 2.怎样衡量可复用性 3.可复用组件的等级和形态 --源代码级别的复用 --模块级别的复用:类/抽象类/接口 --库级别的复用:API/包 --系统级别的...
  • 论述了在基于秦氏模型的虚拟仪器开发中设计可复用仪器模块的研究意义;介绍了秦氏模型及智能...可复用仪器模块的设计,大大简化了控件化虚拟仪器的开发,提高了整个虚拟仪器开发系统的开放、运行效率和资源利用率。
  • 可复用性指软件的整体或其中一部分可以在其他软件的开发过程中重复使用的能力。 可复用性表现在两个方面:一个是重复使用现有代码的软件开发;另一个是以重复使用为目的的软件开发。 重复使用现有代码的软件开发 ...
  • 可复用

    2018-06-24 16:18:00
    本章面向一个重要的外部质量指标:可复用性——如何构造出可在不同应用中重复使用的软件模块/API? 5-1节探讨可复用软件的形态与特征,下一节学习“如何构造”。 目录 什么是软件复用 如何度量复用性 可复用...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,249
精华内容 899
关键字:

模块可复用性