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 相关文章推荐
为Extjs加加速(javascript加速)
Aug 19 Javascript
javascript中数组的冒泡排序使用示例
Dec 18 Javascript
100个不能错过的实用JS自定义函数
Mar 05 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
May 29 Javascript
jquery背景跟随鼠标滑动导航
Nov 20 Javascript
浅析Bootstrap缩略图组件与警示框组件
Apr 29 Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 Javascript
EasyUI在Panel上动态添加LinkButton按钮
Aug 11 Javascript
浅谈webpack编译vue项目生成的代码探索
Dec 11 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
Sep 11 Javascript
vue车牌号校验和银行校验实战
Jan 23 Javascript
tracking.js实现前端人脸识别功能
Apr 16 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
apache php模块整合操作指南
2012/11/16 PHP
php判断邮箱地址是否存在的方法
2016/02/13 PHP
PHP-FPM实现性能优化
2016/03/31 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
jquery 笔记 事件
2011/11/02 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
JavaScript实现类似淘宝的购物车效果
2017/03/16 Javascript
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
vux uploader 图片上传组件的安装使用方法
2018/05/15 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
pandas数据处理之绘图的实现
2020/06/15 Python
python 用pandas实现数据透视表功能
2020/12/21 Python
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
面试求职的个人自我评价
2013/11/16 职场文书
理工科学生的自我评价
2013/12/15 职场文书
关于是否需要写商业计划书
2014/02/07 职场文书
产品发布会策划方案
2014/05/12 职场文书
服务承诺书格式
2014/05/21 职场文书
公安学专业求职信
2014/07/27 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
个人简历求职信范文
2015/03/20 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS
Python与C++中梯度方向直方图的实现
2022/03/17 Python
纯CSS实现一个简单步骤条的示例代码
2022/07/15 HTML / CSS