1. 一般页面开发方式 【可读性差、可维护性差】------初级开发工程师
一般页面编写方法
var name = 'iphone8'
var description = '手机中的战斗机 '
var price = 0;
var domName = document.getElementById('pname')
var domPrice = document.getElementById('pprice')
var domad = document.getElementById('p-ad')
var domadd= document.getElementById('add')
var dombuy= document.getElementById('buy') window.onload=function(){
domName.innerHTML = name
domPrice.innerHTML = price
domad.innerHTML = description
domadd.onclick=function(){
price = 7000;
domPrice.innerHTML=price;
}
dombuy.onclick=function(){
price = 7000;
domPrice.innerHTML=price;
}
}
上述代码存在的缺点
可读性差：
放在一起，如果别人拿着你的代码二次开发，读的费劲
可维护性差：
比较难维护，一旦需求变更，需要读懂整个代码，然后再修改。
如果你辞职了，别人接收你的代码，更改就更难了。
呢么怎么办呢，
下面我们讲解如何使用函数来实现 – 面向过程编程
2. 面向过程编程【比较好的编程开发方式】------中级开发工程师
什么是面向过程编程：
面向过程就是使用函数将一个大的功能分成很多小功能，每个功能称之为一个过程，这就是面向过程编程。
我们可以考虑使用函数将原来写在一起的一坨的代码拆分成一个一个的独立的小功能
比如购买方法：
Function init()
{
GetData（）；
BindData();
BindEvent();
}
面向过程编写原则 – 单一功能原则 – 条理性编程法则
一般一个函数只包含某种类似的功能
我们在开发页面的时候：
一般将数据绑定相关的代码放在一个函数里面，取名:bindData（）
一般将事件相关代码放在一个函数里面，取名：bindEvents（）
一般定义一个init函数保存页面在初次加载的时候需要编写的代码：
我们还可以将某个功能专门用一个函数来保存，比如可以将购买产品这个功能专门放在一个函数里面，比如代码：【推荐的常用方法】
window.onload=function(){
init()
}
//我们一般定义一个函数init来保存页面初始化加载的时候代码
function init() {
//其他可能的代码
bindData()
//其他可能的代码
bindEvent()
}
//我们一般定义一个函数保存数据绑定相关代码
function bindData(){
domName.innerHTML = name
domPrice.innerHTML = price
domad.innerHTML = description
}
// 我们一般定义函数封装页面或者某个模块的 事件
function bindEvent(){
//将产品添加到购物车事件
domadd.onclick=function(){
AddProductToCart()
}
//立即购买事件
dombuy.onclick=function(){
buyProduct()
}
}
//购买产品
function buyProduct(){
}
//将产品添加到购物车
function AddProductToCart(){
}
3. 面向对象编程-------高级开发工程师
什么是面向对象编程
原型对象一般用于封装组件，开发一个网页模块的模板
原型对象一般用于封装组件，封装一个功能点的属性和方法。
比如开发京东产品详细信息模块:我们定义一个产品对象，包含名称，描述，添加到购物车等属性，
复制代码
function Sprite5(options){
//函数内容部设置属性
this._init(options);
}
Sprite5.prototype={
_init:function(options){ //只允许内部调用的方法【仅内部调用】
this.name=options.name;
this.age=options.age || 20;
this.color=options.color || 'red';
console.log(this.name);
},
show:function(ele){ //[可以不加参数]外部可以调用的方法不使用下划线
console.log(this.name + ele);
}
};
var s5 = new Sprite5({
name:'shimilygoodabc',
age:20
});
s5.show('yang');