javascript 面向对象实战思想分享


Posted in Javascript onSeptember 07, 2017

一直以来,很多新手都会经常问,我学完了基础知识,如何做项目?平时在公司工作都是做些什么?其实我想说,只要你找对方法,随便打开一个网站,都能是你的项目。

这里指的面向对象不单单适用于javascript,也适用其他语言。
万物皆对象,所以,任何事物都是有特征(属性)和动作(方法)的,一般拿到一份需求分档,或者你浏览一个网页看到一个画面的时候,脑子里就要有提炼出来的属性和方法的能力,那你才是合格的。

例如一个购物车例子

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()
  }

上面这种方式,就降低了耦合性,不管你用什么语言,还是任何javascript框架(模板引擎,jquery,react等),都是脱离不开上面那段代码的思想,

再来说说,现在mvvm的模式,例如vue,他们不需要获取dom,那么渲染的时候,定义好一个一个的组件就行了。属性全部用{{}}定义好,剩下的就是替换模板,就解决了。

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

然后page级组件引入这个产品组件,然后循环这个产品组件就好了。

组件化的好处

将代码分类管理
代码清晰
容易维护
容易发现问题
代码可读性好
易于团队化协作
当然这篇文章是为了锻炼抽象化思维的能力,虽然跟javascript模块化的历程也有点搭边,我还希望大家在浏览任何网页的时候,去分析一下,这个模块你来设计,你会怎么设计,能做到解耦和,版本可迭代可维护,利于团队开发吗?

如有不对,请指正

Javascript 相关文章推荐
[转]JS宝典学习笔记
Feb 07 Javascript
javascript 动态加载 css 方法总结
Jul 11 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
Aug 18 Javascript
JavaScript中的值类型详细介绍
Dec 29 Javascript
使用js画图之饼图
Jan 12 Javascript
jQuery使用之设置元素样式用法实例
Jan 19 Javascript
js解决movebox移动问题
Mar 29 Javascript
简单实现js页面切换功能
Jan 10 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
Vue分页组件实例代码
Apr 17 Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
Jul 19 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
Sep 07 #Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 #Javascript
vue使用drag与drop实现拖拽的示例代码
Sep 07 #Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
Sep 07 #Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
Sep 07 #Javascript
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 #Javascript
bootstrap-table组合表头的实现方法
Sep 07 #Javascript
You might like
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
PHP实现多图片上传类实例
2014/07/26 PHP
php基础教程
2015/08/26 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
javascript字符串拼接的效率问题
2010/12/25 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
2014/07/29 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
Javascript Dom元素获取和添加详解
2019/09/24 Javascript
JavaScript DOM常用操作代码汇总
2020/07/03 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
keep-alive保持组件状态的方法
2020/12/02 Javascript
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
Python列表和元组的定义与使用操作示例
2017/07/26 Python
Python切片操作实例分析
2018/03/16 Python
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
pytest中文文档之编写断言
2019/09/12 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
超级搞笑检讨书
2014/01/15 职场文书
平民服装店创业计划书
2014/01/17 职场文书
高二英语教学反思
2016/03/03 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server
js面向对象编程OOP及函数式编程FP区别
2022/07/07 Javascript