函数
面向对象编程
面向过程编程
使用上面两种方法来实现下图效果（两个方法的效果有些不一样）：
面向对象
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.
9. var p2 = new Point(300, 500)
10. p2.radius = 30
11. p2.color = 'yellow'
12. p2.show()
13.
14. var p3 = new Point(500, 160)
15. p3.radius = 10
16. p3.color = 'blue'
17. p3.show()
18.
19. var line1 = new Line(p1,p2)
20. line1.show()
21.
22. var line2 = new Line(p2,p3)
23. line2.color = 'green'
24. line2.lineSize = '10'
25. line2.show()
26.
27. var line3 = new Line(p3,p1)
28. line3.color = 'yellow'
29. line3.show()
30.
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
5.
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)
8.
9. // 函数：一块有名字的代码 可以使用名字调用这块代码
10. // 如果代码执行需要外部提供数据
11. // 可以通过传入参数向代码提供数据
12. // 如果代码执行完成后产生了一个结果
13. // 可以返回该结果
14.
15. // 构造函数
16. // 是一种特殊的函数 在构造函数的内部通常使用this
17. // 通过new构造函数来创建对象
18. // 构造函数会返回一个新创建的对象 但它不需要return语句
19. // 可以理解为new创建并返回了一个对象 而构造函数初始化了这个对象
20.
21. var p = new Point(100, 100)
22. var p1 = new Point(300, 500)
23. var p2 = new Point(280, 160)
24.
25. showPoint(p, 'green', 10)
26. showPoint(p1, 'rgba(0,0,225,0.8)', 20)
27. showPoint(p2, 'red', 10)
28.
29. showLine(p, p1, 'blue', 4)
30.
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. }
6.
7. function showPoint(p,color,radius){
8. var div = document.createElement('div')
9. // var color = 5
10.
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)
19.
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. }
8.
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. }
16.
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))
7.
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. }
演示效果：
面向对象、面向过程