JavaScript 编程范式:面向对象编程、面向过程编程

黄良钵

分类: 程序开发 714 0

函数

函数

面向对象编程

面向对象编程 面向对象程序

面向过程编程

面向过程编程 面向过程程序

使用上面两种方法来实现下图效果(两个方法的效果有些不一样):

编程范式

面向对象

  1. <script src="point.js"></script>
  2. <script src="line.js"></script>
  3. <script src="rect.js"></script>
  1. <script>
  2.     // 对象将其所需要的数据和功能全部整合为一体
  3.     // 对象通常使用名词命名
  4.     var p1 = new Point(100, 100)
  5.     p1.radius = 20
  6.     p1.color = 'green'
  7.     p1.show()
  8.     var p2 = new Point(300, 500)
  9.     p2.radius = 30
  10.     p2.color = 'yellow'
  11.     p2.show()
  12.     var p3 = new Point(500, 160)
  13.     p3.radius = 10
  14.     p3.color = 'blue'
  15.     p3.show()
  16.     var line1 = new Line(p1,p2)
  17.     line1.show()
  18.     var line2 = new Line(p2,p3)
  19.     line2.color = 'green'
  20.     line2.lineSize = '10'
  21.     line2.show()
  22.     var line3 = new Line(p3,p1)
  23.     line3.color = 'yellow'
  24.     line3.show()
  25.     var rectangle = new Rectangle(p1,p2)
  26.     rectangle.show()
  27. </script>

point.js

  1. // 将point有关的数据和函数全部组合到一起
  2. // 构造函数
  3. function Point(x, y) {
  4.     this.x = x
  5.     this.y = y
  6.     this.color = 'red'
  7.     this.radius = 10
  8.     this.show = function () {
  9.         var div = document.createElement('div')
  10.         div.style.width = 2 * this.radius + 'px'
  11.         div.style.height = 2 * this.radius + 'px'
  12.         div.style.backgroundColor = this.color
  13.         div.style.borderRadius = '50%'
  14.         div.style.position = 'absolute'
  15.         div.style.left = (this.x - this.radius) + 'px'
  16.         div.style.top = (this.y - this.radius) + 'px'
  17.         document.body.appendChild(div)
  18.     }
  19.     // 计算两点之间的距离
  20.     this.distanceTo = function (p) {
  21.         var a = this.x - p.x
  22.         var b = this.y - p.y
  23.         return Math.sqrt(a * a + b * b)
  24.     }
  25.     // 计算两点之间连线与x轴的夹角弧度
  26.     this.arcTo = function (p) {
  27.         var a = p.x - this.x
  28.         var b = p.y - this.y
  29.         return Math.atan(b / a)
  30.     }
  31.     // 计算弧度对应的角度值
  32.     this.degreeTo = function (p) {
  33.         return this.arcTo(p) * 180 / Math.PI
  34.     }
  35. }

line.js

  1. // Line对象整合了画线需要的数据和功能
  2. function Line(p1, p2) {
  3.     this.pStart = p1.x < p2.x ? p1 : p2
  4.     this.pEnd = this.pStart == p2 ? p1 : p2
  5.     this.color = 'red'
  6.     this.lineSize = 10
  7.     this.show = function () {
  8.         var div = document.createElement('div')
  9.         div.style.width = this.pStart.distanceTo(this.pEnd) + 'px'
  10.         div.style.height = this.lineSize + 'px'
  11.         div.style.backgroundColor = this.color
  12.         div.style.borderRadius = this.lineSize / 2 + 'px'
  13.         div.style.position = 'absolute'
  14.         div.style.left = this.pStart.x + 'px'
  15.         div.style.top = this.pStart.y - this.lineSize / 2 + 'px'
  16.         div.style.transform = 'rotate(' + this.pStart.degreeTo(this.pEnd) + 'deg)'
  17.         div.style.transformOrigin = 'left center'
  18.         document.body.appendChild(div)
  19.     }
  20. }

rect.js

  1. // Rectangle 对象 整合了画矩形需要的数据和功能
  2. function Rectangle(p1, p2) {
  3.     this.pStart = new Point(Math.min(p1.x, p2.x), Math.min(p1.y, p2.y))
  4.     this.pEnd = new Point(Math.max(p1.x, p2.x), Math.max(p1.y, p2.y))
  5.     this.color = 'red'
  6.     this.lineSize = 10
  7.     this.show = function () {
  8.         var div = document.createElement('div')
  9.         div.style.width = this.pEnd.x - this.pStart.x + 'px'
  10.         div.style.height = this.pEnd.y - this.pStart.y + 'px'
  11.         div.style.borderRadius = this.lineSize + 'px'
  12.         div.style.border = this.lineSize + 'px solid ' + this.color
  13.         div.style.position = 'absolute'
  14.         div.style.top = this.pStart.y - this.lineSize + 'px'
  15.         div.style.left = this.pStart.x - this.lineSize + 'px'
  16.         document.body.appendChild(div)
  17.     }
  18. }

面向过程编程

  1. <script src="point.js"></script>
  2. <script src="line.js"></script>
  3. <script src="calc.js"></script>
  4. <script src="rect.js"></script>
  1. <script>
  2.     // function aa(a,b,c){
  3.     //     var d = a + b + c
  4.     //     return d
  5.     // }
  6.     // var a = aa(1,3,4)
  7.     // alert(a)
  8.     // 函数:一块有名字的代码 可以使用名字调用这块代码
  9.     // 如果代码执行需要外部提供数据
  10.     // 可以通过传入参数向代码提供数据
  11.     // 如果代码执行完成后产生了一个结果
  12.     // 可以返回该结果
  13.     // 构造函数
  14.     // 是一种特殊的函数 在构造函数的内部通常使用this
  15.     // 通过new构造函数来创建对象
  16.     // 构造函数会返回一个新创建的对象 但它不需要return语句
  17.     // 可以理解为new创建并返回了一个对象 而构造函数初始化了这个对象
  18.     var p = new Point(100, 100)
  19.     var p1 = new Point(300, 500)
  20.     var p2 = new Point(280, 160)
  21.     showPoint(p, 'green', 10)
  22.     showPoint(p1, 'rgba(0,0,225,0.8)', 20)
  23.     showPoint(p2, 'red', 10)
  24.     showLine(p, p1, 'blue', 4)
  25.     showRectangle(p1, p2, 'gold', 5)
  26. </script>

point.js

  1. // 构造函数构造点这样一个数据对象
  2. function Point(x, y) {
  3.     this.x = x
  4.     this.y = y
  5. }
  6. function showPoint(p,color,radius){
  7.     var div = document.createElement('div')
  8.     // var color = 5
  9.     div.style.width = 2 * radius + 'px'
  10.     div.style.height = 2 * radius + 'px'
  11.     div.style.backgroundColor = color
  12.     div.style.borderRadius = '50%'
  13.     div.style.position = 'absolute'
  14.     div.style.left = (p.x - radius) + 'px'
  15.     div.style.top = (p.y - radius) + 'px'
  16.     document.body.appendChild(div)
  17. }

line.js

  1. function showLine(p1, p2, color, lineSize) {
  2.     var div = document.createElement('div')
  3.     div.style.width = calcDistance(p1, p2) + 'px'
  4.     div.style.height = lineSize + 'px'
  5.     div.style.backgroundColor = color
  6.     div.style.borderRadius = lineSize / 2 + 'px'
  7.     div.style.position = 'absolute'
  8.     div.style.left = p1.x + 'px'
  9.     div.style.top = p1.y - lineSize / 2 + 'px'
  10.     div.style.transform = 'rotate(' + calcDegree(calcArc(p1, p2)) + 'deg)'
  11.     div.style.transformOrigin = 'left center'
  12.     document.body.appendChild(div)
  13. }

calc.js

  1. //  将计算类方法都集中到一起
  2. // 计算两点之间的距离
  3. function calcDistance(p1, p2) {
  4.     var a = p1.x - p2.x
  5.     var b = p1.y - p2.y
  6.     return Math.sqrt(a * a + b * b)
  7. }
  8. // 计算两点之间连线与x轴的夹角弧度
  9. function calcArc(p1, p2) {
  10.     var a = p2.x - p1.x
  11.     var b = p2.y - p1.y
  12.     // x 的反正切值 返回的值是 -PI/2 到 PI/2之间的弧度值
  13.     return Math.atan(b / a)
  14. }
  15. // 计算弧度相对应的角度值
  16. function calcDegree(arc) {
  17.     return arc * 180 / Math.PI
  18. }

rect.js

  1. // 实现通过对角线两端点画矩形的功能
  2. function showRectangle(p1, p2, color, lineSize) {
  3.     // Math.min 返回x和y中最低的值
  4.     // Math.max 返回x和y中最高的值
  5.     var pStart = new Point(Math.min(p1.x, p2.x), Math.min(p1.y, p2.y))
  6.     var pEnd = new Point(Math.max(p1.x, p2.x), Math.max(p1.y, p2.y))
  7.     var div = document.createElement('div')
  8.     div.style.width = pEnd.x - pStart.x + 'px'
  9.     div.style.height = pEnd.y - pStart.y + 'px'
  10.     div.style.border = lineSize + 'px solid ' + color
  11.     div.style.borderRadius = lineSize + 'px'
  12.     div.style.position = 'absolute'
  13.     div.style.top = pStart.y - lineSize / 2 + 'px'
  14.     div.style.left = pStart.x - lineSize / 2 + 'px'
  15.     document.body.appendChild(div)
  16. }

演示效果:

面向对象面向过程

  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
JavaScript、编程范式、面向对象编程、面向过程编程

作者简介: 黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “JavaScript 编程范式:面向对象编程、面向过程编程”

Loading...