js【面向過程編程】、好、 【init()、 GetData（）、 bindData()、bindDom、 bindEvent()、buyProduct()、AddProductToCart()】*****************

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');

 http://www.cnblogs.com/shimily/p/6240016.html

http://www.cnblogs.com/shimily/p/6241032.html