[jQuery.FQcomputer] 分期商城汇率计算器

开发需求分析

屌丝逆袭
期数 借款人费用 投资人收益
3个月 0.033 0.007
6个月 0.028 0.008
9个月 0.021 0.009
12个月 0.019 0.01
15个月 0.017 0.012
18个月 0.016 0.014

我帮您
期数 借款人费用 投资人收益
1个月 0.037 0.016
2个月 0.035 0.0125
3个月 0.033 0.0111
4个月 0.031 0.0105
5个月 0.029 0.0101
6个月 0.028 0.0985
借款人费用固定包含固定0.006手续费和0.003保险费
汇率计算表如上，计算方式如下，小明同学借了 100元，分6个月还，则每月需要还，（100x6x0.028+100）/ 6 = 19.46 元

jQeury 插件开发规范（相对于程序的功能，这才是重点）

先发两篇参考教程：

1. 文章先是说了学习jQuery插件的基础，样式和脚本，感触颇多，在实现方式明确的情况下，优雅高效的代码显然更具吸引力。
   http://blog.163.com/guoqiang_s/blog/static/167897871201131424023929
2. 如果第一篇看不懂的话，可以先看下第二篇，更加通俗易懂些，http://www.iteye.com/topic/545971

最后的代码，做了对象级的扩展

计算器js代码

<!-- lang: js -->
(function($) {
    /*
    html tree
    */

    var defaults = {
        money:1000,
        months_loan:{1:0.037,2:0.035,3:0.033,4:0.031,5:0.029,6:0.028},
        months_profit:{1:0.016,2:0.0125,3:0.0111,4:0.0105,5:0.0101,6:0.00985},
        months:{},
        type:'loan',
        tips:'借款人费用固定包含固定0.006手续费和0.003保险费',
    }

    $.fn.FQcomputer = function(options) {     
        var compter = {};
        var el = this;   

        var init = function(){
            // 参数配置
            compter.settings = $.extend({}, defaults, options);

            if(compter.settings.type == 'loan'){
                compter.settings.months = compter.settings.months_loan;
            }else{
                compter.settings.months = compter.settings.months_profit;
            }

            // DOM 初始化
            htmlbody();
            el.cal_fee();

            // 事件绑定
            $(el).find('#cal_fee').on('click',function(){
                el.cal_fee();
                return false;
            });


            $(el).find('input,select').on('click',function(){
                el.cal_fee();
            });
        }

        var htmlbody = function(){
            if(compter.settings.type == 'loan'){
                str = '<form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-md-4 control-label">借贷金额</label> <div class="col-md-8"> <input type="number" class="form-control"  value="{$money}"  id="money" placeholder="借贷金额"> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">分期期数</label> <div class="col-md-8"> <select class="form-control" id="months"> {$months} </select> </div> </div> <div class="form-group" style="display:none;"> <div class="col-md-offset-4 col-md-8"> <span class="label label-success">每月利率：<span id="cp_rate"></span>%</span> </div> </div> <div class="form-group"> <div class="col-md-offset-4 col-md-8"> <span class="label label-success">每月还款：<span id="cp_screen"></span>元</span> </div> </div> <div class="form-group"> <div class="col-md-offset-4 col-md-8"> <span class="label label-success">还款总额：<span id="cp_screen_total"></span>元</span> </div> </div> <div class="form-group"> <div class="col-md-offset-4 col-md-8"> <button type="submit" class="btn btn-success" id="cal_fee">计算</button> </div> </div> </form>';
            }else{
                str = '<form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-md-4 control-label">投资金额</label> <div class="col-md-8"> <input type="number" class="form-control"  value="{$money}"  id="money" placeholder="借贷金额"> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">分期期数</label> <div class="col-md-8"> <select class="form-control" id="months"> {$months} </select> </div> </div> <div class="form-group" style="display:none;"> <div class="col-md-offset-4 col-md-8"> <span class="label label-danger">每月利率：<span id="cp_rate"></span>%</span> </div> </div> <div class="form-group"> <div class="col-md-offset-4 col-md-8"> <span class="label label-danger">每月本息：<span id="cp_screen"></span>元</span> </div> </div> <div class="form-group"> <div class="col-md-offset-4 col-md-8"> <span class="label label-danger">本息总额：<span id="cp_screen_total"></span>元</span> </div> </div> <div class="form-group"> <div class="col-md-offset-4 col-md-8"> <button type="submit" class="btn btn-danger" id="cal_fee">计算</button> </div> </div> </form>';
            }

            str = get_months(str);
            str = str.replace(/\{\$money\}/gi,compter.settings.money)

            el.html(str);
        }  

        // 获取分期数
        var get_months = function(str){
            months = compter.settings.months;
            temp = '';
            model = '<option value="{$op}">{$op}</option>';
            for(var item in  months){
                temp = temp + model.replace(/\{\$op\}/gi,item);
            }

            str = str.replace(/\{\$months\}/gi,temp);
            return str;
        }

        // 获取毛利率
        var get_rate = function(months){
            return compter.settings.months[months];
        }

        el.cal_fee = function(){
            money  = parseInt($(el).find('#money').val());
            months = parseInt($(el).find('#months').val());
            rate = get_rate(months);
            rate_percent = rate*100;
            res = money*months*rate + money;
            res_monthly = res/months;
            $(el).find('#cp_screen').html(res_monthly.toFixed(3));
            $(el).find('#cp_rate').html(rate_percent.toFixed(4));
            $(el).find('#cp_screen_total').html(res.toFixed(3));
            return res_monthly.toFixed(3);
        }

        el.help = function(){
            console.log('jQuery.FQcomputer.help');
        }

        init();

        return this;
    };  
})(jQuery);

html 模板代码

<!-- 还贷表单 -->
<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-md-4 control-label">借贷金额</label>
    <div class="col-md-8">
        <input type="number" class="form-control"  value="{$money}"  id="money" placeholder="借贷金额">
    </div>
  </div>

  <div class="form-group">
    <label class="col-md-4 control-label">分期期数</label>
    <div class="col-md-8">
         <select class="form-control" id="months">
            {$months}
         </select> 
    </div>
  </div>


  <div class="form-group" style="display:none;">
    <div class="col-md-offset-4 col-md-8">
        <span class="label label-success">每月利率：<span id="cp_rate"></span>%</span>
    </div>
  </div>

  <div class="form-group">
    <div class="col-md-offset-4 col-md-8">
        <span class="label label-success">每月还款：<span id="cp_screen"></span>元</span>
    </div>
  </div>

  <div class="form-group">
    <div class="col-md-offset-4 col-md-8">
        <span class="label label-success">还款总额：<span id="cp_screen_total"></span>元</span>
    </div>
  </div>

  <div class="form-group">
    <div class="col-md-offset-4 col-md-8">
      <button type="submit" class="btn btn-success" id="cal_fee">计算</button>
    </div>
  </div>
</form>


<!-- 收益表单 -->
<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-md-4 control-label">投资金额</label>
    <div class="col-md-8">
        <input type="number" class="form-control"  value="{$money}"  id="money" placeholder="借贷金额">
    </div>
  </div>

  <div class="form-group">
    <label class="col-md-4 control-label">分期期数</label>
    <div class="col-md-8">
         <select class="form-control" id="months">
            {$months}
         </select> 
    </div>
  </div>


  <div class="form-group" style="display:none;">
    <div class="col-md-offset-4 col-md-8">
        <span class="label label-danger">每月利率：<span id="cp_rate"></span>%</span>
    </div>
  </div>

  <div class="form-group">
    <div class="col-md-offset-4 col-md-8">
        <span class="label label-danger">每月本息：<span id="cp_screen"></span>元</span>
    </div>
  </div>

  <div class="form-group">
    <div class="col-md-offset-4 col-md-8">
        <span class="label label-danger">本息总额：<span id="cp_screen_total"></span>元</span>
    </div>
  </div>

  <div class="form-group">
    <div class="col-md-offset-4 col-md-8">
      <button type="submit" class="btn btn-danger" id="cal_fee">计算</button>
    </div>
  </div>
</form>


<!-- 备用标签 -->
<div class="form-group">
  <div class="col-md-offset-4 col-md-8">
    <div class="checkbox">
      <label>
        <input type="checkbox"> Remember me
      </label>
    </div>
  </div>
</div>