html5网页制作+javascript

JavaScript06

html5网页制作+javascript,第1张

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<title>计算</title>

<meta name="viewport" content="width=device-width, initial-scale=1" />

</head>

<body>

<script>

function student(serialNumber, name, sex, birthday, score) {

this.serialNumber = serialNumber

this.name = name

this.sex = sex

this.birthday = birthday

this.score = score

}

student.prototype.getAge = function() {

var birthday = new Date(this.birthday.replace(/-/g, "\/"))

var d = new Date()

var age =

d.getFullYear() -

birthday.getFullYear() -

(d.getMonth() < birthday.getMonth() ||

(d.getMonth() == birthday.getMonth() &&

d.getDate() < birthday.getDate())

? 1

: 0)

return age

}

student.prototype.study = function() {

this.score++

}

var obj = new student(1, '张三', '男', '1990-01-01', 65)

console.log('入参:', 1, '张三', '男', '1990-01-01', 65)

console.log('年龄:', obj.getAge())

obj.study()

console.log('学习:', obj.score)

obj.study()

console.log('学习:', obj.score)

var obj2 = new student(2, '王五', '女', '1970-01-01', 85)

console.log('入参:', 2, '王五', '女', '1970-01-01', 85)

console.log('年龄:', obj2.getAge())

obj2.study()

console.log('学习:', obj2.score)

obj2.study()

console.log('学习:', obj2.score)

obj2.study()

console.log('学习:', obj2.score)

</script>

</body>

</html>

html5很多人把页面结构写在js中是提高页面的加载速度。

JS写在HTML中是JS的代码不是太多,单独一个JS文件反而影响了页面的加载速度。因此html5很多人把页面结构写在js中是提高页面的加载速度。

HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准。

首先,本人在前端开发方面有点心得,有什么不对的地方希望给出建议让我更好的进步

1.命名

在开发前必须有个命名规范来对代码统一规范团队代码结构,使代码可读性提高

2.注释

我相信每个人看别人代码时看到密密麻麻的代码结构,相信每个人都会很头疼,即使想看也会看不下去,而且很耗时间,所以注释就变得尤其得重要,注释越清楚越详细我相信代码可维护性越高,而且更容易修改维护

3.变量

在js中变量无处不在,所以这么声明变量就变得尤其得重要,首先少使用全局变量,这样会增加加载速度,从而导致项目用户体验不好

4.声明变量如果不用 var 会导致变量成为全局变量。

5.函数

函数的参数数量

函数的参数不应该超过 3 个。如果函数的参数超过 3 个,应该将一些参数进行封装。

6.函数参数传递

只传函数需要的参数。如

// 不推荐

function greet(data){

console.log('Hello, I am ' + data.name)

}

// 推荐

function greet(name){

console.log('Hello, I am ' + name)

}

7.函数的功能

一个函数只做一件事。这有助于测试和代码复用。

函数尽可能无副作用。无副作用指不修改传入的参数和全局变量。

8.减少重复代码

. 记得在某个文章中看到说,如果重复的代码出现 3 次,就应该重构重复的代码。

. 松耦合

. 一个函数只做一件事

. 缓存一些计算结果

9.避免全局变量

. 从分配置和离逻辑代码

. 不要修改不属于你的对象

. 不属于你的对象包括

. 浏览器原生对象,如 Object,Array等

DOM,如 document

BOM,如 window

类库对象

如果想拓展浏览器原生对象的功能,可以创建函数,函数中把浏览器原生对象传入。如Underscore.js 做 的那样。

10.代码风格的统一

11.尽可能的避免代码重复

.如何减少重复的代码呢?

.在JS中,可以将重复的代码写成一个方法,如果是可通用的,可以写在独立的JS文件中。

.在CSS中,则需要借助Sass,Less之类的预处理语言的Mixins的功能。将重复的部分写成一个Mixins。

12.配置和逻辑分开

. JS中,对于整个站的通用配置,写在config.js里。如果是某个js的配置,在文件的开头,用defaultParam 对象来存放可变的配置,用const来定义不可变的配置

. CSS中,依旧要借助预处理语言。对于整站的配置,定 义在_variables.scss里。对于某个具体CSS文件里,在文件开头用变量来定义

13.减少代码的副作用

1>JS中,方法中的沟通尽量不要用全局变量;不要在Array之类的全局对象的原型链上添加方法;尽量不要定义全局的方法和变量:如果确实有很多变量,方法放在全局上,可以学习jQuery,将很多变量,方法放在一个全局对象上;自定义事件,事件的名称也要有命名空间。

2>CSS中,要做到无副作用,难度很大。对于简单页面,一个方法是,把页面上的元素都分成一个个组件,写样式时,选择器要用组件选择器 当前元素选择器。当组件变的复杂时,组件也会包含很多子组件。然后,选择器就会越来越长。。。我的解决方案是用的BEM。

14.提高代码的可读性

.变量,方法等的合理命名,通过名称可以知道这个大概做什么的。

.如果则要加注释来说明一下。对于不容理解的代码加注释

.尽可能不用魔法数字

.对于HTML,选择合适标签

15.一个方法只做一件事

一来提高代码的复用性,二来让调试也变的更容易,三来让测试变的更容易