一直以来，很多新手经常会问，在我学完基础知识之后，怎么做项目？你在公司工作时通常做什么？其实我想说，只要找对方法，随便开个网站，就可以是你的项目。

这里的面向对象方法不仅适用于javascript，也适用于其他语言。一切都是对象，所以一切都有特征(属性)和动作(方法)。一般来说，当你得到一个需求概要，或者当你浏览一个网页看到一张图片的时候，你必须有能力在你的头脑中提炼属性和方法，那么你就是合格的。

例如，购物车

估计很多人都做过购物车，所以我不保留悬念，什么都做，先宏观思考，再处理细节，然后组装，就像组装汽车一样。比如上图，红色是属性，黄色是方法，抽象出属性和方法，其他都是死的。

如果你是刚学过前端的学生，可以用这个全局变量，也叫面向函数编程。缺点是凌乱和多余

//商品属性var name=' macbook pro ' var description=' '。var price=0；//商品方法addone: function(){ alert('添加一个商品')}，reduce : function(){ alert('减少一个商品')}，//购物车属性varcard=['macbook pro '，' Dell'] varsum=2，Var allPrice=22000，//购物车方法函数addtocart3360 function () {alert('添加到购物车')} addToCart()如果是singleton pattern的想法，或许可以做到，但还是不太好。对象太多，可能导致变量重复，小项目可以接受

var product={ name : ' macbook pro '，description: ' '，price:6660，addones : function(){ }，reduceOne:function(){}，AddToCart:function(){ alert('添加到购物车')}/*购物车*/var cart={ name: '购物车'，product 3360[]，allprice:5000，sum33600} if

功能产品(名称、价格、des) {/*属性行为可以为空，也可以给定默认值*/this . name=name；this.price=价格；this.description=des} product . prototype={ addtocart 3360 function(){ alert('添加到购物车')} addone3360function () {}，reduce one:function () {}，/* binding element */binddom : function(){//在此执行字符串拼接，//例如var str=' ' str=' div，价格为： '这个。price '/div ' return str }，}功能卡(products，AllPrice，sum) {/*属性行为可以为空或者给默认值*/this . products=products；this . all price=all price；这个。sum=sum}乘积。prototype={ getallprice : function(){ alert('计算购物车中商品的总价')}}通过创建macbook等各种对象，

//后台给出的数据为var products=[{ name : ' macbook '，price:21888}，{name3360' Dell '，price :63999 }]var str=' ' for(var I=0，len=products.length伊琳；i ) { var curName=products[i]。name var curName=新产品()curName.name=产品[i]。姓名；curName.price=产品[i]。价格；Str=curName.bindDom()}这种方式减少了耦合。无论您使用什么语言或任何javascript框架(模板引擎、jquery、react等)。)，这就离不开上面代码的思想。

而且，现在mvvm模式，比如vue，不需要获取dom，所以在渲染的时候，一个一个的定义一个组件就足够了。所有属性都用{{}}定义，剩下的就是替换模板，解决了。

Data: {page=' '，price=' '，description=''}，methods : { addtocart 3360 function(){ alert('添加到购物车')} addone3360function () {}，reduce one3360function () {}，}

组件化的好处

代码分类，管理清晰，维护容易，发现问题容易，团队合作容易。当然，这篇文章是为了锻炼抽象思维能力。虽然有点符合javascript的模块化过程，但也希望大家在浏览任何网页的时候都能分析一下。你设计这个模块。你会怎么设计？是否可以解耦，版本可以迭代维护，有利于团队开发？

如果有什么不对，请纠正我