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 相关文章推荐
javascript json2 使用方法
Mar 16 Javascript
jquery.jstree 增加节点的双击事件代码
Jul 27 Javascript
jQuery.getScript加载同域JS的代码
Feb 13 Javascript
Jquery实现带动画效果的经典二级导航菜单
Mar 22 Javascript
js加载之使用DOM方法动态加载Javascript文件
Nov 08 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 Javascript
node.js中的http.response.writeHead方法使用说明
Dec 14 Javascript
分享五个有用的jquery小技巧
Oct 08 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
Nov 16 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
JavaScript实现矩形块大小任意缩放
Aug 25 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文件压缩之PHPZip类用法实例
2015/06/18 PHP
PHP加密解密类实例代码
2016/07/20 PHP
Javascript 跨域访问解决方案
2009/02/14 Javascript
jquery批量控制form禁用的代码
2013/08/06 Javascript
当达到输入长度时表单自动切换焦点
2014/04/06 Javascript
iframe跨域通信封装详解
2015/08/11 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
js获取文件里面的所有文件名(实例)
2017/10/17 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
Flask框架Flask-Login用法分析
2018/07/23 Python
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
在Django admin中编辑ManyToManyField的实现方法
2019/08/09 Python
使用python获取邮箱邮件的设置方法
2019/09/20 Python
Python urlopen()和urlretrieve()用法解析
2020/01/07 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
建筑专业自荐信
2013/10/18 职场文书
暑期实习鉴定
2013/12/16 职场文书
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
小学四年级学生评语
2014/12/26 职场文书
小学运动会开幕词
2016/03/04 职场文书
代码解析React中setState同步和异步问题
2021/06/03 Javascript
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript
Java Spring Boot 正确读取配置文件中的属性的值
2022/04/20 Java/Android
python中使用redis用法详解
2022/12/24 Redis