JavaScript 编程范式：面向对象编程、面向过程编程
BG7ZAG
|
|
1,693
|
0
|
程序开发

1346 字
|
8 分钟

函数

函数

面向对象编程

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

面向过程编程

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

使用上面两种方法来实现下图效果（两个方法的效果有些不一样）：

编程范式

面向对象

  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()
  9.     var p2 = new Point(300, 500)
  10.     p2.radius = 30
  11.     p2.color = 'yellow'
  12.     p2.show()
  14.     var p3 = new Point(500, 160)
  15.     p3.radius = 10
  16.     p3.color = 'blue'
  17.     p3.show()
  19.     var line1 = new Line(p1,p2)
  20.     line1.show()
  22.     var line2 = new Line(p2,p3)
  23.     line2.color = 'green'
  24.     line2.lineSize = '10'
  25.     line2.show()
  27.     var line3 = new Line(p3,p1)
  28.     line3.color = 'yellow'
  29.     line3.show()
  31.     var rectangle = new Rectangle(p1,p2)
  32.     rectangle.show()
  33. </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
  6.     this.color = 'red'
  7.     this.lineSize = 10
  8.     this.show = function () {
  9.         var div = document.createElement('div')
  10.         div.style.width = this.pStart.distanceTo(this.pEnd) + 'px'
  11.         div.style.height = this.lineSize + 'px'
  12.         div.style.backgroundColor = this.color
  13.         div.style.borderRadius = this.lineSize / 2 + 'px'
  14.         div.style.position = 'absolute'
  15.         div.style.left = this.pStart.x + 'px'
  16.         div.style.top = this.pStart.y - this.lineSize / 2 + 'px'
  17.         div.style.transform = 'rotate(' + this.pStart.degreeTo(this.pEnd) + 'deg)'
  18.         div.style.transformOrigin = 'left center'
  19.         document.body.appendChild(div)
  20.     }
  21. }

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)
  9.     // 函数：一块有名字的代码 可以使用名字调用这块代码
  10.     // 如果代码执行需要外部提供数据
  11.     // 可以通过传入参数向代码提供数据
  12.     // 如果代码执行完成后产生了一个结果
  13.     // 可以返回该结果
  15.     // 构造函数
  16.     // 是一种特殊的函数 在构造函数的内部通常使用this
  17.     // 通过new构造函数来创建对象
  18.     // 构造函数会返回一个新创建的对象 但它不需要return语句
  19.     // 可以理解为new创建并返回了一个对象 而构造函数初始化了这个对象
  21.     var p = new Point(100, 100)
  22.     var p1 = new Point(300, 500)
  23.     var p2 = new Point(280, 160)
  25.     showPoint(p, 'green', 10)
  26.     showPoint(p1, 'rgba(0,0,225,0.8)', 20)
  27.     showPoint(p2, 'red', 10)
  29.     showLine(p, p1, 'blue', 4)
  31.     showRectangle(p1, p2, 'gold', 5)
  32. </script>

point.js

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

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. }
  9. // 计算两点之间连线与x轴的夹角弧度
  10. function calcArc(p1, p2) {
  11.     var a = p2.x - p1.x
  12.     var b = p2.y - p1.y
  13.     // x 的反正切值 返回的值是 -PI/2 到 PI/2之间的弧度值
  14.     return Math.atan(b / a)
  15. }
  17. // 计算弧度相对应的角度值
  18. function calcDegree(arc) {
  19.     return arc * 180 / Math.PI
  20. }

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))
  8.     var div = document.createElement('div')
  9.     div.style.width = pEnd.x - pStart.x + 'px'
  10.     div.style.height = pEnd.y - pStart.y + 'px'
  11.     div.style.border = lineSize + 'px solid ' + color
  12.     div.style.borderRadius = lineSize + 'px'
  13.     div.style.position = 'absolute'
  14.     div.style.top = pStart.y - lineSize / 2 + 'px'
  15.     div.style.left = pStart.x - lineSize / 2 + 'px'
  16.     document.body.appendChild(div)
  17. }

演示效果：

面向对象、面向过程

JavaScript编程范式面向对象编程面向过程编程
暂无评论

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																

							
							
						

																

							
							
						

										
					
											
						

	

		
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
	

	

		
颜文字
Emoji
小恐龙
花!
	


									

			

			
			
		

	






上一篇
下一篇 

                    

                    
			        推荐文章
		            

		            

							
Vue使用websocket即时通信

							
							

							
字号与尺寸、像素对照表

							
							

							
小程序选择、预览、删除、上传图片

							
							

							
vue修改打包文件的路径

							
							

							
微信小程序所有组件初始化样式box-sizing

							
							

							
微信小程序picker组件中多列选择器的使用