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操作cookie类实例
Mar 31 Javascript
JS实现简单的图书馆享元模式实例
Jun 30 Javascript
深入解读JavaScript中的Hoisting机制
Aug 12 Javascript
node-http-proxy修改响应结果实例代码
Jun 06 Javascript
js制作支付倒计时页面
Oct 21 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
Mar 06 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
Aug 28 Javascript
js自定义input文件上传样式
Oct 26 Javascript
koa大型web项目中使用路由装饰器的方法示例
Apr 02 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
javascript实现的字符串转换成数组操作示例
Jun 13 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
Aug 12 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
改进的IP计数器
2006/10/09 PHP
php 接口类与抽象类的实际作用
2009/11/26 PHP
Yii框架获取当前controlle和action对应id的方法
2014/12/03 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
PHP连接access数据库
2015/03/27 PHP
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
js生成随机数的方法实例
2015/10/16 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
vue router demo详解
2017/10/13 Javascript
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
Angular网络请求的封装方法
2018/05/22 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
详解Python的Django框架中的templates设置
2015/05/11 Python
Python pass详细介绍及实例代码
2016/11/24 Python
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
对pandas通过索引提取dataframe的行方法详解
2019/02/01 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
软件测试有哪些?什么是配置项?
2012/02/12 面试题
关于青春的演讲稿
2014/05/05 职场文书
简爱电影观后感
2015/06/10 职场文书
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记