JavaScript 面向对象实战:从全局变量到组件化的思维演进

作者:木棉时间:2026-10-23 01:35:36浏览:224

本文通过购物车开发案例,解析 JavaScript 面向对象编程的核心思想。从全局变量的混乱到单例模式,再到基于原型的对象创建及 MVVM 组件化架构,逐步演示如何提升代码的解耦性、可维护性与团队协作效率,帮助开发者建立抽象化思维。

引言:从基础到项目的思维转变

许多初学者常问:掌握基础语法后如何开展项目?日常工作中具体涉及哪些内容?其实,只要掌握正确方法,任何现有网站都可以作为练手项目。

面向对象思维不仅适用于 JavaScript,也通用其他编程语言。万物皆对象,任何事物都具备特征(属性)和动作(方法)。面对需求文档或浏览网页时,若能提炼出对应的属性和方法,才算具备合格的能力。

面向对象核心:属性与方法的抽象

以购物车功能为例进行说明。

引言:从基础到项目的思维转变

购物车是常见案例。开发任何功能时,应先进行宏观思考,再处理细节,最后组装,如同组装汽车。图中红色部分代表属性,黄色部分代表方法,抽象出属性和方法后,其余实现相对固定。

代码演进:从全局变量到对象封装

初学者常使用全局变量,即面向函数编程。这种方式缺点明显:代码杂乱且冗余度高。


//商品属性
  var name = 'macbook pro'
  var description = ''。'
  var price = 0;
  //商品方法
  addOne:funcion(){alert('增加一件商品')},
  reduceOne:function(){alert('减少一件商品')},

  //购物车属性
  var card = ['macbook pro' ,'dell']
  var sum = 2,
  var allPrice = 22000,
  //购物车方法
  function addToCart:function(){
      alert('添加到购物车')
    }


  addToCart()

若采用单例模式思想,代码结构会有所改善,但仍存在缺陷。对象过多可能导致变量重复,仅在小型项目中勉强可用。


var product={
    name:'macbook pro',
    description:'',
    price:6660,
    addOne:funcion(){},
    reduceOne:function(){},
    addToCart:function(){
      alert('添加到购物车')
    }
  }

  /*购物车*/
  var cart={
    name:'购物车',
    products:[],
    allPrice:5000,
    sum:0
  }

具备一定经验后,通常会采用更规范的实现方式。


function Product(name,price,des) {
    /*属性 行为 可以为空或者给默认值*/
    this.name = name;
    this.price = price;
    this.description = des;
  }
  Product.prototype={
    addToCart:function(){
      alert('添加到购物车')
    }
    addOne:funcion(){},
    reduceOne:function(){},
     /*绑定元素*/
    bindDom:function(){
    //在这里进行字符串拼接,
    //例如
    var str = ''
    str +='<div>价格是:'+this.privce+'</div>'
    return str
    },

  }

function Card(products,allPrice,sum) {
    /*属性 行为 可以为空或者给默认值*/
    this.products = products;
    this.allPrice = allPrice;
    this.sum = sum
  }
  Product.prototype={
    getAllPrice:function(){
      alert('计算购物车内商品总价')
    }
  }

通过创建具体对象(如 MacBook)来管理状态和行为。


//后台给的数据
 var products= [
    {name:'macbook',price:21888},
    {name:'dell',price:63999}
  ]

 var str = ''
 for(var i = 0,len=products.length;i<len;i++) {
    var curName = products[i].name
    var curName = new Product()
    curName.name=products[i].name;
    curName.price=products[i].price;
    str+= curName.bindDom()
  }

架构升级:解耦与 MVVM 组件化实践

上述方式有效降低了耦合度。无论使用何种语言或框架(如模板引擎、jQuery、React 等),其核心思想均源于此类代码结构。

进一步讨论 MVVM 模式(如 Vue)。在此模式下,无需直接操作 DOM,渲染时只需定义组件。属性通过 {{}} 模板语法定义,剩余工作由模板替换机制完成。


data:{
    name ='',
    price='',
    description = ''
},
methods:{
   addToCart:function(){
      alert('添加到购物车')
    }
  addOne:funcion(){},
  reduceOne:function(){}, 
}

页面级组件引入产品组件后,通过循环渲染该组件即可实现列表展示。

总结:组件化的价值与抽象思维训练

组件化带来的优势如下:

实现代码分类管理,使代码结构清晰、易于维护和问题排查,同时提升代码可读性,便于团队协作。本文旨在锻炼抽象化思维能力,虽与 JavaScript 模块化历程相关,但更希望大家在浏览网页时思考:若由你设计该模块,如何实现解耦、版本迭代、可维护性及团队开发便利性?

如有疏漏,欢迎指正。

作者最新文章