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中单引号与双引号冲突问题解决方法
Oct 04 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
Nov 26 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
深入浅析JavaScript函数前面的加号和叹号
Jul 09 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 Javascript
详解Node.js access_token的获取、存储及更新
Jun 20 Javascript
微信小程序 rich-text的使用方法
Aug 04 Javascript
vue使用axios跨域请求数据问题详解
Oct 18 Javascript
解决vue.js 数据渲染成功仍报错的问题
Aug 25 Javascript
vuex 中插件的编写案例解析
Jun 10 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 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
PHP自动生成月历代码
2006/10/09 PHP
Laravel 5框架学习之Laravel入门和新建项目
2015/04/07 PHP
jquery miniui 教程 表格控件 合并单元格应用
2012/11/25 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
2013/04/12 Javascript
IE浏览器中图片onload事件无效的解决方法
2014/04/29 Javascript
angularJS中router的使用指南
2015/02/09 Javascript
JavaScript中原型和原型链详解
2015/02/11 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
2016/01/28 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
关于javascript获取内联样式与嵌入式样式的实例
2017/06/01 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
vue组件watch属性实例讲解
2017/11/07 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
paramiko模块安装和使用(远程登录服务器)
2014/01/27 Python
python操作redis方法总结
2018/06/06 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
python实现一个函数版的名片管理系统过程解析
2019/08/27 Python
python使用 request 发送表单数据操作示例
2019/09/25 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
甜美蛋糕店创业计划书
2014/01/30 职场文书
冬季安全检查方案
2014/05/23 职场文书
电子信息工程专业自荐书
2014/06/24 职场文书
大型公益活动策划方案
2014/08/20 职场文书
放飞理想演讲稿
2014/09/09 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
合作协议书模板2014
2014/09/26 职场文书
小英雄雨来观后感
2015/06/09 职场文书