JS組件開發之面向對象及物理模型編程

內容簡介：
1，關於面向對象 
2，關於面向物理模型
3，示例
4，總結

1，關於面向對象

javascript中的面向對象是一個老生常談的問題，可能有人問你的話你也能霹靂啪啦的說一通，好比最多見的，

對象的三要素：對象的名字、對象的屬性、對象的方法

//例子：
function obj(){    //對象名： obj
this.desc=「示例」      //對象屬性 desc
this.getDesc=function(){   //對象方法 getDesc
return this.desc;
}
}

或者稍微高級一點：對象的封裝、對象的繼承，對象的實例化

這裏內容太多，略過，能夠本身去查資料，
留個坑，回頭本身寫一篇文章填上 -_-|||,畢竟說太多就跑題了
填坑一：

繼承

還有一點，就是儘可能用面向對象的思惟去解決問題

//例子-錯誤的寫法：
if(a){}
else if(b){}
else if(c){}
else{}

//例子-面向對象的寫法：
let obj = {
    a:function(){},
    b:function(){},
    c:function(){},
    d:function(){}
}
//item = a || b || c || d ...
let result = obj[item]();

//錯誤的寫法
function(a,b,c,d,e){}

//正確的示範
let param = {a:"a",b:"b",c:"c"...}
function(param){}

...

其實以上都不是我要說的，這裏我更偏向於把對象看做一件現實當中的「事物」，即物理上存在的東西，而後把它抽象出來，就是咱們須要的東西

2，關於面向物理模型

面向物理模型這個說法我不知道有沒有人說過，反正我是這麼理解的，就這麼說吧，

簡單點的物理模型

//例如
電燈對象：{
名字：電燈，
方法1：開,
方法2：關,
配置：充電 || 換電池 ？
}
//備註：固然可能還有其它的，我這裏只挑主要的說

複雜點的物理模型

//例如
滑動的滑塊：{
名字：滑塊A，
初始速度：v，
加速度：a，
地面摩擦力：f，
加速度持續時間：t，
可選 ：{
質量：m，
半徑：r
},
計算：{
運動距離：s，
運動時間：T，
.......
}
}

//備註：我不是來幫大家複習物理題的哈，這確實是一個模型，當你寫一些動畫效果時應該算是經常使用的物理模型

混合物理模型

其實說了那麼多，然而咱們用到的時候，基本上都是兩種模式的混合，
因此在實際抽象模型（數學建模？）的時候，分塊拆分是很好的選擇

3，示例

我知道，只談理論不寫代碼都是耍流氓，雖然我很擅長.......不耍流氓，因此，這裏就用代碼來講話

好比我這裏要寫一個多功能選擇器的插件，相似IOS的日曆選擇器，只是不單單是支持日曆，能夠自定義內容,
基於簡單物理模型------靜態-------數據，樣式，配置參數

var picker=function(options){
     this._modelData= options.modelData || {}; //填充數據
     this._lineHeight=options.lineHeight || 40; //行高
     this._character=options.character || 「-」;  //間隔符號
     this._showLines=options.showLines || 3；  //顯示行數,必須爲奇數
     this.getSelectOpti   //獲取選中的選項信息
       //do sth
     }
     this.renderHtml=function(){}  //渲染插件
}
picker.prototype.init=funtion(){}
// .........
//備註：簡要代碼，方面理清思路

基於複雜物理模型------動態------動做，改變，計算

.....{
    this._lineHeight = options.lineHeight || 48;//px *此處lineHeight須要在樣式中設置！
    this._moveDistance = options.moveDistance || 1;//每次滾動的單位 px ，加快滾動速度，與回彈速度
    this._moveDouble = options.moveDouble || 2;// 慣性系數 數字越大 拖動後滾動的距離越遠
    /*this._dragSpeed = options.dragSpeed || 1; //慣性系數*/
    this._moveRate = options.moveRate || 500;// 1~1000 移動頻率 數字越大，頻率越高
    this._character = options.character || null;//間隔符號
    this._showLines = options.showLines || 3;//默認顯示行數
    this._fza = options.fza || 0.02; //阻力系數 單位時間內速度減少的值
    this._resistance = options.resistance || 0.10;// 當滾動超出邊界時受到阻力
}
//........
picker.prototype.scrollToIndex=function(){} //滑動到第N個
picker.prototype.slideY=function(){} //滑動動畫  包括勻速運動，勻減速運動等
picker.prototype.autoFitIndex=function(){} //自動貼合
picker.prototype.updatePicker=function(){} //更新數據
picker.prototype.scrollPrev=function(){}
picker.prototype.scrollNext=function(){}
picker.prototype.stopCallBack=function(){}
//..........

完整代碼 :
Github

4，總結：

其實這玩意說白了就是一個插件，一個地址，一個demo的事情，
但是我卻能寫這麼多，因而可知吹牛逼（理論知識和抽象能力）的重要性。