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的事情，
可是我却能写这么多，由此可见吹牛逼（理论知识和抽象能力）的重要性。