Vue中使用装饰器，我是认真的

作为一个曾经的Java coder, 当我第一次看到js里面的装饰器(Decorator)的时候，就马上想到了Java中的注解，当然在实际原理和功能上面，Java的注解和js的装饰器还是有很大差别的。本文题目是Vue中使用装饰器，我是认真的，但本文将从装饰器的概念开发聊起，一起来看看吧。

公司主营业务：网站设计、成都做网站、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出南部免费做网站回馈大家。

通过本文内容，你将学到以下内容:

  1. 了解什么是装饰器
  2. 在方法使用装饰器
  3. 在class中使用装饰器
  4. 在Vue中使用装饰器

本文首发于公众号【前端有的玩】，不想当咸鱼，想要换工作，关注公众号，带你每日一起刷大厂面试题，关注 === 大厂offer。

什么是装饰器

装饰器是ES2016提出来的一个提案，当前处于Stage 2阶段，关于装饰器的体验，可以点击 https://github.com/tc39/proposal-decorators查看详情。装饰器是一种与类相关的语法糖，用来包装或者修改类或者类的方法的行为，其实装饰器就是设计模式中装饰者模式的一种实现方式。不过前面说的这些概念太干了，我们用人话来翻译一下，举一个例子。

在日常开发写bug过程中，我们经常会用到防抖和节流，比如像下面这样 

 
 
 
    
  
  
  
  1. class MyClass {  
    2. 
  
  
  
  2.   follow = debounce(function() {  
    3. 
  
  
  
  3.     console.log('我是子君，关注我哦')  
    4. 
  
  
  
  4.   }, 100)  
    5. 
  
  
  
  5. }  
    6. 
  
  
  
  6. const myClass = new MyClass()  
    7. 
  
  
  
  7. // 多次调用只会输出一次  
    8. 
  
  
  
  8. myClass.follow()  
    9. 
  
  
  
  9. myClass.follow()  
    10.

上面是一个防抖的例子，我们通过debounce函数将另一个函数包起来，实现了防抖的功能，这时候再有另一个需求，比如希望在调用follow函数前后各打印一段日志，这时候我们还可以再开发一个log函数，然后继续将follow包装起来 

 
 
 
    
  
  
  
  1. /**  
    2. 
  
  
  
  2.  * 最外层是防抖，否则log会被调用多次  
    3. 
  
  
  
  3.  */  
    4. 
  
  
  
  4. class MyClass {  
    5. 
  
  
  
  5.   follow = debounce(  
    6. 
  
  
  
  6.     log(function() {  
    7. 
  
  
  
  7.       console.log('我是子君，关注我哦')  
    8. 
  
  
  
  8.     }),  
    9. 
  
  
  
  9.     100  
    10. 
  
  
  
  10.   )  
    11. 
  
  
  
  11. }  
    12.

上面代码中的debounce和log两个函数，本质上是两个包装函数，通过这两个函数对原函数的包装，使原函数的行为发生了变化，而js中的装饰器的原理就是这样的，我们使用装饰器对上面的代码进行改造 

 
 
 
    
  
  
  
  1. class MyClass {  
    2. 
  
  
  
  2.   @debounce(100)  
    3. 
  
  
  
  3.   @log  
    4. 
  
  
  
  4.   follow() {  
    5. 
  
  
  
  5.     console.log('我是子君，关注我哦')  
    6. 
  
  
  
  6.   }  
    7. 
  
  
  
  7. }  
    8.

装饰器的形式就是 @ + 函数名，如果有参数的话，后面的括号里面可以传参

在方法上使用装饰器

装饰器可以应用到class上或者class里面的属性上面，但一般情况下，应用到class属性上面的场景会比较多一些，比如像上面我们说的log,debounce等等，都一般会应用到类属性上面，接下来我们一起来具体看一下如何实现一个装饰器，并应用到类上面。在实现装饰器之前，我们需要先了解一下属性描述符

了解一下属性描述符

在我们定义一个对象里面的属性的时候，其实这个属性上面是有许多属性描述符的，这些描述符标明了这个属性能不能修改，能不能枚举，能不能删除等等，同时ECMAScript将这些属性描述符分为两类，分别是数据属性和访问器属性，并且数据属性与访问器属性是不能共存的。

数据属性

数据属性包含一个数据值的位置，在这个位置可以读取和写入值。数据属性包含了四个描述符，分别是

  1. configurable

表示能不能通过delete删除属性，能否修改属性的其他描述符特性，或者能否将数据属性修改为访问器属性。当我们通过let obj = {name: ''}声明一个对象的时候，这个对象里面所有的属性的configurable描述符的值都是true

      2. enumerable

表示能不能通过for in或者Object.keys等方式获取到属性，我们一般声明的对象里面这个描述符的值是true,但是对于class类里面的属性来说，这个值是false

      3. writable

表示能否修改属性的数据值，通过将这个修改为false,可以实现属性只读的效果。

      4. value

表示当前属性的数据值，读取属性值的时候，从这里读取；写入属性值的时候，会写到这个位置。

访问器属性

访问器属性不包含数据值，他们包含了getter与setter两个函数，同时configurable与enumerable是数据属性与访问器属性共有的两个描述符。

      1. getter

在读取属性的时候调用这个函数，默认这个函数为undefined

      2. setter

在写入属性值的时候调用这个函数，默认这个函数为undefined

了解了这六个描述符之后，你可能会有几个疑问： 我如何去定义修改这些属性描述符？这些属性描述符与今天的文章主题有什么关系？接下来是揭晓答案的时候了。

使用Object.defineProperty

了解过vue2.0双向绑定原理的同学一定知道，Vue的双向绑定就是通过使用Object.defineProperty去定义数据属性的getter与setter方法来实现的，比如下面有一个对象 

 
 
 
    
  
  
  
  1. let obj = {  
    2. 
  
  
  
  2.   name: '子君',  
    3. 
  
  
  
  3.   officialAccounts: '前端有的玩'  
    4. 
  
  
  
  4. }  
    5.

我希望这个对象里面的用户名是不能被修改的，用Object.defineProperty该如何定义呢? 

 
 
 
    
  
  
  
  1. Object.defineProperty(obj,'name', {  
    2. 
  
  
  
  2.   // 设置writable 是 false, 这个属性将不能被修改  
    3. 
  
  
  
  3.   writable: false  
    4. 
  
  
  
  4. })  
    5. 
  
  
  
  5. // 修改obj.name  
    6. 
  
  
  
  6. obj.name = "君子"  
    7. 
  
  
  
  7. // 打印依然是子君  
    8. 
  
  
  
  8. console.log(obj.name)  
    9.

通过Object.defineProperty可以去定义或者修改对象属性的属性描述符，但是因为数据属性与访问器属性是互斥的，所以一次只能修改其中的一类，这一点需要注意。

定义一个防抖装饰器

装饰器本质上依然是一个函数，不过这个函数的参数是固定的，如下是防抖装饰器的代码 

 
 
 
    
  
  
  
  1. /**  
    2. 
  
  
  
  2. *@param wait 延迟时长  
    3. 
  
  
  
  3. */  
    4. 
  
  
  
  4. function debounce(wait) {  
    5. 
  
  
  
  5.   return function(target, name, descriptor) {  
    6. 
  
  
  
  6.     descriptor.value = debounce(descriptor.value, wait)  
    7. 
  
  
  
  7.   }  
    8. 
  
  
  
  8. }  
    9. 
  
  
  
  9. // 使用方式  
    10. 
  
  
  
  10. class MyClass {  
    11. 
  
  
  
  11.   @debounce(100)  
    12. 
  
  
  
  12.   follow() {  
    13. 
  
  
  
  13.     console.log('我是子君，我的公众号是 【前端有的玩】，关注有惊喜哦')  
    14. 
  
  
  
  14.   }  
    15. 
  
  
  
  15. }  
    16.

我们逐行去分析一下代码

  1. 首先我们定义了一个 debounce函数，同时有一个参数wait，这个函数对应的就是在下面调用装饰器时使用的@debounce(100)
  2. debounce函数返回了一个新的函数，这个函数即装饰器的核心，这个函数有三个参数，下面逐一分析
    1. target: 这个类属性函数是在谁上面挂载的，如上例对应的是MyClass类
    2. name: 这个类属性函数的名称，对应上面的follow
    3. descriptor: 这个就是我们前面说的属性描述符，通过直接descriptor上面的属性，即可实现属性只读，数据重写等功能

      3. 然后第三行 descriptor.value = debounce(descriptor.value, wait), 前面我们已经了解到,属性描述符上面的value对应的是这个属性的值，所以我们通过重写这个属性，将其用debounce函数包装起来，这样在函数调用follow时实际调用的是包装后的函数

通过上面的三步，我们就实现了类属性上面可使用的装饰器，同时将其应用到了类属性上面

在class上使用装饰器

装饰器不仅可以应用到类属性上面，还可以直接应用到类上面，比如我希望可以实现一个类似Vue混入那样的功能，给一个类混入一些方法属性，应该如何去做呢? 

 
 
 
    
  
  
  
  1. // 这个是要混入的对象  
    2. 
  
  
  
  2. const methods = {  
    3. 
  
  
  
  3.   logger() {  
    4. 
  
  
  
  4.     console.log('记录日志')  
    5. 
  
  
  
  5.   }  
    6. 
  
  
  
  6. }  
    7. 
  
  
  
  7. // 这个是一个登陆登出类  
    8. 
  
  
  
  8. class Login{  
    9. 
  
  
  
  9.   login() {}  
    10. 
  
  
  
  10.   logout() {} 
    11. 
  
  
  
  11.  } 
    12.

如何将上面的methods混入到Login中，首先我们先实现一个类装饰器 

 
 
 
    
  
  
  
  1. function mixins(obj) {  
    2. 
  
  
  
  2.   return function (target) {  
    3. 
  
  
  
  3.     Object.assign(target.prototype, obj)    
    4. 
  
  
  
  4.   }  
    5. 
  
  
  
  5. }  
    6. 
  
  
  
  6. // 然后通过装饰器混入  
    7. 
  
  
  
  7. @mixins(methods)  
    8. 
  
  
  
  8. class Login{  
    9. 
  
  
  
  9.   login() {}  
    10. 
  
  
  
  10.   logout() {}  
    11. 
  
  
  
  11. }  
    12.

这样就实现了类装饰器。对于类装饰器，只有一个参数，即target,对应的就是这个类本身。

了解完装饰器，我们接下来看一下如何在Vue中使用装饰器。

在Vue中使用装饰器

使用ts开发Vue的同学一定对vue-property-decorator不会感到陌生，这个插件提供了许多装饰器，方便大家开发的时候使用，当然本文的中点不是这个插件。其实如果我们的项目没有使用ts，也是可以使用装饰器的，怎么用呢？

配置基础环境

除了一些老的项目，我们现在一般新建Vue项目的时候，都会选择使用脚手架vue-cli3/4来新建，这时候新建的项目已经默认支持了装饰器，不需要再配置太多额外的东西，如果你的项目使用了eslint,那么需要给eslint配置以下内容。 

 
 
 
    
  
  
  
  1. parserOptions: {  
    2. 
  
  
  
  2.    ecmaFeatures:{  
    3. 
  
  
  
  3.      // 支持装饰器  
    4. 
  
  
  
  4.      legacyDecorators: true  
    5. 
  
  
  
  5.    }  
    6. 
  
  
  
  6.  }  
    7.

使用装饰器

虽然Vue的组件，我们一般书写的时候export出去的是一个对象，但是这个并不影响我们直接在组件中使用装饰器，比如就拿上例中的log举例。 

 
 
 
    
  
  
  
  1. function log() {  
    2. 
  
  
  
  2.   /**  
    3. 
  
  
  
  3.    * @param target 对应 methods 这个对象  
    4. 
  
  
  
  4.    * @param name 对应属性方法的名称  
    5. 
  
  
  
  5.    * @param descriptor 对应属性方法的修饰符  
    6. 
  
  
  
  6.    */  
    7. 
  
  
  
  7.   return function(target, name, descriptor) {  
    8. 
  
  
  
  8.     console.log(target, name, descriptor)  
    9. 
  
  
  
  9.     const fn = descriptor.value  
    10. 
  
  
  
  10.     descriptor.value = function(...rest) {  
    11. 
  
  
  
  11.       console.log(`这是调用方法【${name}】前打印的日志`)  
    12. 
  
  
  
  12.       fn.call(this, ...rest)  
    13. 
  
  
  
  13.       console.log(`这是调用方法【${name}】后打印的日志`)  
    14. 
  
  
  
  14.     }  
    15. 
  
  
  
  15.   }  
    16. 
  
  
  
  16. }  
    17. 
  
  
  
  17. export default {  
    18. 
  
  
  
  18.   created() {  
    19. 
  
  
  
  19.     this.getData()  
    20. 
  
  
  
  20.   },  
    21. 
  
  
  
  21.   methods: {  
    22. 
  
  
  
  22.     @log()  
    23. 
  
  
  
  23.     getData() {  
    24. 
  
  
  
  24.       console.log('获取数据')  
    25. 
  
  
  
  25.     }  
    26. 
  
  
  
  26.   }  
    27. 
  
  
  
  27. }  
    28.

看了上面的代码，是不是发现在Vue中使用装饰器还是很简单的，和在class的属性上面使用的方式一模一样，但有一点需要注意，在methods里面的方法上面使用装饰器，这时候装饰器的target对应的是methods。

除了在methods上面可以使用装饰器之外，你也可以在生命周期钩子函数上面使用装饰器，这时候target对应的是整个组件对象。

一些常用的装饰器

下面小编罗列了几个小编在项目中常用的几个装饰器，方便大家使用

1. 函数节流与防抖

函数节流与防抖应用场景是比较广的，一般使用时候会通过throttle或debounce方法对要调用的函数进行包装，现在就可以使用上文说的内容将这两个函数封装成装饰器， 防抖节流使用的是lodash提供的方法，大家也可以自行实现节流防抖函数哦 

 
 
 
    
  
  
  
  1. import { throttle, debounce } from 'lodash'  
    2. 
  
  
  
  2. /**  
    3. 
  
  
  
  3.  * 函数节流装饰器  
    4. 
  
  
  
  4.  * @param {number} wait 节流的毫秒  
    5. 
  
  
  
  5.  * @param {Object} options 节流选项对象  
    6. 
  
  
  
  6.  * [options.leading=true] (boolean): 指定调用在节流开始前。  
    7. 
  
  
  
  7.  * [options.trailing=true] (boolean): 指定调用在节流结束后。  
    8. 
  
  
  
  8.  */  
    9. 
  
  
  
  9. export const throttle =  function(wait, options = {}) {  
    10. 
  
  
  
  10.   return function(target, name, descriptor) {  
    11. 
  
  
  
  11.     descriptor.value = throttle(descriptor.value, wait, options)  
    12. 
  
  
  
  12.   }  
    13. 
  
  
  
  13. }  
    14. 
  
  
  
  14. /**  
    15. 
  
  
  
  15.  * 函数防抖装饰器  
    16. 
  
  
  
  16.  * @param {number} wait 需要延迟的毫秒数。  
    17. 
  
  
  
  17.  * @param {Object} options 选项对象  
    18. 
  
  
  
  18.  * [options.leading=false] (boolean): 指定在延迟开始前调用。  
    19. 
  
  
  
  19.  * [options.maxWait] (number): 设置 func 允许被延迟的最大值。  
    20. 
  
  
  
  20.  * [options.trailing=true] (boolean): 指定在延迟结束后调用。  
    21. 
  
  
  
  21.  */  
    22. 
  
  
  
  22. export const debounce = function(wait, options = {}) {  
    23. 
  
  
  
  23.   return function(target, name, descriptor) {  
    24. 
  
  
  
  24.     descriptor.value = debounce(descriptor.value, wait, options)  
    25. 
  
  
  
  25.   }  
    26. 
  
  
  
  26. }  
    27.

封装完之后，在组件中使用 

 
 
 
    
  
  
  
  1. import {debounce} from '@/decorator'  
    2. 
  
  
  
  2. export default {  
    3. 
  
  
  
  3.   methods:{  
    4. 
  
  
  
  4.     @debounce(100) 
    5. 
  
  
  
  5.      resize(){}  
    6. 
  
  
  
  6.   }  
    7. 
  
  
  
  7. }  
    8.

2. loading

在加载数据的时候，为了个用户一个友好的提示，同时防止用户继续操作，一般会在请求前显示一个loading,然后在请求结束之后关掉loading，一般写法如下 

 
 
 
    
  
  
  
  1. export default {  
    2. 
  
  
  
  2.   methods:{  
    3. 
  
  
  
  3.     async getData() {  
    4. 
  
  
  
  4.       const loading = Toast.loading()  
    5. 
  
  
  
  5.       try{  
    6. 
  
  
  
  6.         const data = await loadData()  
    7. 
  
  
  
  7.         // 其他操作  
    8. 
  
  
  
  8.       }catch(error){  
    9. 
  
  
  
  9.         // 异常处理  
    10. 
  
  
  
  10.         Toast.fail('加载失败');  
    11. 
  
  
  
  11.       }finally{  
    12. 
  
  
  
  12.         loading.clear()  
    13. 
  
  
  
  13.       }    
    14. 
  
  
  
  14.     }  
    15. 
  
  
  
  15.   }  
    16. 
  
  
  
  16. }  
    17.

我们可以把上面的loading的逻辑使用装饰器重新封装，如下代码 

 
 
 
    
  
  
  
  1. import { Toast } from 'vant'  
    2. 
  
  
  
  2. /**  
    3. 
  
  
  
  3.  * loading 装饰器  
    4. 
  
  
  
  4.  * @param {*} message 提示信息  
    5. 
  
  
  
  5.  * @param {function} errorFn 异常处理逻辑  
    6. 
  
  
  
  6.  */  
    7. 
  
  
  
  7. export const loading =  function(message = '加载中...', errorFn = function() {}) {  
    8. 
  
  
  
  8.   return function(target, name, descriptor) {  
    9. 
  
  
  
  9.     const fn = descriptor.value  
    10. 
  
  
  
  10.     descriptor.value = async function(...rest) {  
    11. 
  
  
  
  11.       const loading = Toast.loading({  
    12. 
  
  
  
  12.         message: message,  
    13. 
  
  
  
  13.         forbidClick: true  
    14. 
  
  
  
  14.       })  
    15. 
  
  
  
  15.       try {  
    16. 
  
  
  
  16.         return await fn.call(this, ...rest)  
    17. 
  
  
  
  17.       } catch (error) {  
    18. 
  
  
  
  18.         // 在调用失败，且用户自定义失败的回调函数时，则执行  
    19. 
  
  
  
  19.         errorFn && errorFn.call(this, error, ...rest)  
    20. 
  
  
  
  20.         console.error(error) 
    21. 
  
  
  
  21.        } finally {  
    22. 
  
  
  
  22.         loading.clear()  
    23. 
  
  
  
  23.       }  
    24. 
  
  
  
  24.     }  
    25. 
  
  
  
  25.   }  
    26. 
  
  
  
  26. }  
    27.

然后改造上面的组件代码 

 
 
 
    
  
  
  
  1. export default {  
    2. 
  
  
  
  2.   methods:{  
    3. 
  
  
  
  3.     @loading('加载中')  
    4. 
  
  
  
  4.     async getData() {  
    5. 
  
  
  
  5.       try{  
    6. 
  
  
  
  6.         const data = await loadData()  
    7. 
  
  
  
  7.         // 其他操作  
    8. 
  
  
  
  8.       }catch(error){  
    9. 
  
  
  
  9.         // 异常处理  
    10. 
  
  
  
  10.         Toast.fail('加载失败');  
    11. 
  
  
  
  11.       }    
    12. 
  
  
  
  12.     }  
    13. 
  
  
  
  13.   }  
    14. 
  
  
  
  14. }  
    15.

3. 确认框

当你点击删除按钮的时候，一般都需要弹出一个提示框让用户确认是否删除，这时候常规写法可能是这样的 

 
 
 
    
  
  
  
  1. import { Dialog } from 'vant'  
    2. 
  
  
  
  2. export default {  
    3. 
  
  
  
  3.   methods: {  
    4. 
  
  
  
  4.     deleteData() {  
    5. 
  
  
  
  5.       Dialog.confirm({  
    6. 
  
  
  
  6.         title: '提示', 
    7. 
  
  
  
  7.          message: '确定要删除数据，此操作不可回退。'  
    8. 
  
  
  
  8.       }).then(() => {  
    9. 
  
  
  
  9.         console.log('在这里做删除操作')  
    10. 
  
  
  
  10.       })  
    11. 
  
  
  
  11.     }  
    12. 
  
  
  
  12.   }  
    13. 
  
  
  
  13. }  
    14.

我们可以把上面确认的过程提出来做成装饰器，如下代码 

 
 
 
    
  
  
  
  1. import { Dialog } from 'vant'  
    2. 
  
  
  
  2. /**  
    3. 
  
  
  
  3.  * 确认提示框装饰器  
    4. 
  
  
  
  4.  * @param {*} message 提示信息  
    5. 
  
  
  
  5.  * @param {*} title 标题  
    6. 
  
  
  
  6.  * @param {*} cancelFn 取消回调函数  
    7. 
  
  
  
  7.  */  
    8. 
  
  
  
  8. export function confirm( 
    9. 
  
  
  
  9.    message = '确定要删除数据，此操作不可回退。',  
    10. 
  
  
  
  10.   title = '提示',  
    11. 
  
  
  
  11.   cancelFn = function() {}  
    12. 
  
  
  
  12. ) {  
    13. 
  
  
  
  13.   return function(target, name, descriptor) {  
    14. 
  
  
  
  14.     const originFn = descriptor.value  
    15. 
  
  
  
  15.     descriptor.value = async function(...rest) {  
    16. 
  
  
  
  16.       try {  
    17. 
  
  
  
  17.         await Dialog.confirm({  
    18. 
  
  
  
  18.           message,  
    19. 
  
  
  
  19.           title: title  
    20. 
  
  
  
  20.         })  
    21. 
  
  
  
  21.         originFn.apply(this, rest)  
    22. 
  
  
  
  22.       } catch (error) {  
    23. 
  
  
  
  23.         cancelFn && cancelFn(error)  
    24. 
  
  
  
  24.       }  
    25. 
  
  
  
  25.     }  
    26. 
  
  
  
  26.   }  
    27. 
  
  
  
  27. }  
    28.

然后再使用确认框的时候，就可以这样使用了 

 
 
 
    
  
  
  
  1. export default {  
    2. 
  
  
  
  2.   methods: {  
    3. 
  
  
  
  3.     // 可以不传参，使用默认参数  
    4. 
  
  
  
  4.     @confirm()  
    5. 
  
  
  
  5.     deleteData() {  
    6. 
  
  
  
  6.       console.log('在这里做删除操作')  
    7. 
  
  
  
  7.     } 
    8. 
  
  
  
  8.   }  
    9. 
  
  
  
  9. }  
    10.

是不是瞬间简单多了,当然还可以继续封装很多很多的装饰器，因为文章内容有限，暂时提供这三个。

装饰器组合使用

在上面我们将类属性上面使用装饰器的时候，说道装饰器可以组合使用，在Vue组件上面使用也是一样的，比如我们希望在确认删除之后，调用接口时候出现loading，就可以这样写(一定要注意顺序) 

 
 
 
    
  
  
  
  1. export default {  
    2. 
  
  
  
  2.   methods: {  
    3. 
  
  
  
  3.     @confirm()  
    4. 
  
  
  
  4.     @loading()  
    5. 
  
  
  
  5.     async deleteData() {  
    6. 
  
  
  
  6.       await delete()  
    7. 
  
  
  
  7.     }  
    8. 
  
  
  
  8.   }  
    9. 
  
  
  
  9. }  
    10.

本节定义的装饰器，均已应用到这个项目中 https://github.com/snowzijun/vue-vant-base, 这是一个基于Vant开发的开箱即用移动端框架，你只需要fork下来，无需做任何配置就可以直接进行业务开发，欢迎使用，喜欢麻烦给一个star。

我是子君，今天就写这么多，本文首发于【前端有的玩】，这是一个专注于前端技术，前端面试相关的公众号，同时关注之后即刻拉你加入前端交流群，我们一起聊前端，欢迎关注。

结语

不要吹灭你的灵感和你的想象力; 不要成为你的模型的奴隶。 ——文森特・梵高

文章标题：Vue中使用装饰器，我是认真的
地址分享：http://www.csdahua.cn/qtweb/news1/60901.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

成都快上网为您推荐相关内容

定制网站知识

同城分类信息

成都网站设计　　 　什邡网站建设　　 　研学实践　　 　成都网站建设　　 　ios开发　　 　网站搜索引擎优化　　 　云主机　　 　护栏打桩机　　 　域名注册　　 　成都搅拌罐车　　 　宜宾网站设计　　 　成都包装设计公司　　 　微博营销　　 　大足网站建设　　 　msfdjwx.com　　 　成都网站设计公司　　 　网站建设报价方案　　 　遂宁做网站　　 　成都柴油发电机租赁　　 　不锈钢防护栏