小牛钱罐子PC版

修改npm镜像源

npm config set registry "http://registry.npm.taobao.org/"

安装

  1. 下载安装node

  2. 安装fis3 npm install -g fis3

  3. 安装fis3常用组件 npm install -g

         fis3-hook-module  
                              
         fis3-hook-commonjs
                             
         fis3-postpackager-loader
                              
         fis3-deploy-replace
    

调试方法

在应用程序根目录运行以下命令
1. fis3 release -wL
2. fis3 server start

技术选型

jquery1.9.1   
json2.js (主要实现json和string之间转换, 底版浏览器)  
Underscore.js 1.8.2 (去掉了atrTemplate, 采用Underscore工具类, 扩展string, array, obejct, 以及模版引擎)  

json2.js Github: https://github.com/douglascrockford/JSON-js    
underscore官网: http://www.css88.com/doc/underscore/

目录结构

./
    libs                       --外部的js库,如avalon、jQuery, artTemp等
        mod.js
        avalon.js
        ...

    modules/    ---业务源码
        common/                 --公共业务
            api/                --api接口
                user.js
                product.js
                ...
            base/                       --基础对象, 对于不支持ES5特性的浏览器进行了扩展
                global.js
                array.js
                string.js
                ...                
            utils/              --常用工具
                regexp.js
                extend_fn.js
                ...
            web/ --页面级别公共业务, 例如:产品基类, 登录注册, 利率计算器等等
                register_views.js
                register_model.js
                product_model.js
                ...
         
        widgets/            --共用的UI组件(如右则浮动的二维码)
            dialog
                dialog.js
                style.css
        pages/      --页面级业务
            includes/        --全局对象, 处理全局业务,例如:头部,尾部,侧边导航栏
                header.js
                footer.js
                sidebar.js 
                ...
            login/          --按业务划分模块
                login.js
                style.css 
                img.png 
            register/ 
                    ... 
    views/                      --视图部分
        css/        
        img/ 
        pages/ 
            includes/           --页面公共部分
                header.html 
                footer.html 
                navbar.html 
                ...

            user/ 
                login.html 
                register.html 
                ... 

fis-conf.js                     --fis配置文件   

全局对象

base/global/global.js       --存放一些通用的常量或者公共属性,变量

源码:
;(function (win, doc) {
    //全局静态变量
    win.xn_global = {
        //客服400电话
        tel400: "400-9989-090",
        //静态文件服务器路径
        staticFileServerUrl : "https://static.xiaoniuapp.com/4cd17b"
    };
})(window, document);

使用方法:
function show400() {
    console.log(window.xn_global.tel400);
}

base/global/date.js     --扩展原生Date函数
Date.format("yyyy-MM-dd hh:mm:ss")          --格式化当前日期
Date.addDate(2)                             --在当前日期上加上指定天数

使用方法:
var date = new Date();

console.log(date.format("yyyy-MM-dd hh:mm:ss"));
//output: 2016-08-30 15:29:22
console.log(date.addDate(5).format("yyyy-MM-dd hh:mm:ss"));
//output: 2016-09-04 15:29:22

base/global/number.js     --扩展原生Number函数
Number.plus                     --加法, 解决小数计算精度问题, 
Number.sub                      --减法, 解决小数计算精度问题
Number.mul                      --乘法, 解决小数计算精度问题
Number.div                      --除法, 解决小数计算精度问题
Number.toYuan                   --将毫转换为元
Number.toHao                    --将元转换为毫
Number.toFixed                  --重写系统toFixed函数,直接截取,避免四舍五入
Number.toUnit                   --将数字转换为带单位的金额,例如10000, 转换后 1万
Number.toConvert                --将数字用逗号间隔,每三位数字间隔一个逗号

使用方法:
var num = 20000.25

var num1 = num.plus(1001.25)                    //output: 21001.50
var num2 = num.sub(1001.11)                     //output: 18999.14
var num3 = Number(20000).mul(2.2)               //output: 44000
var num4 = Number(20000).div(2)                 //output: 10000
var num5 = Number(200).div(2).mul(3).plus(10)   //output: 310 = 200 / 2 * 3 + 10;

将毫转换为元,默认保留两位小数,返回为Number对象, 如果返回值是整数, 则省略小数位
var num6 = Number(21234).toYuan(3)              //output: 2.123 
var num7 = Number(20000).toYuan(2)              //output: 2

将元转换为毫, 返回Number对象
var num8 = Number(2.12).toHao()                 //output: 21200

截取指定位数小数位, 返回string类型, 重写系统方法,将不在四舍五入,直接截取
var num9  = Number(2.16858).toFixed(2)           //output: "2.16"
var num10 = Number(20000).toYuan().toFixed(2)    //output: "2.00"

将指定number转换带单位的金额,如果小于1万, 则返回自身, 否则返回string类型
var num11 = Number(1005670).toUnit(2)               //output: "100.56万"
var num12 = Number(1005670000).toYuan().toUnit(2)   //output: "10.05万"
var num13 = Number(70000).toYuan().toUnit(2)        //output: 7
var num14 = Number(1270000).toConvert(2)            //output: 1,270,000.00

base/global/string.js     --扩展原生String函数
String.trim()                   --删除字符串首尾空格
String.format()                 --字符串格式化
String.toDate()                 --字符串转换为Date

使用方法:
var str1 = " aa ".trim()                        //output: "aa"
var str2 = "{0}1122{1}44".format("00", 33)      //output: "0011223344"
var str3 = "2016-08-30 15:21:36".toDate()       //output: Date()

base/global/array.js     --扩展原生Array函数
Array.isEmpty                   --判断数组是否为空
Array.clone                     --克隆当前数组,返回一个新实例
Array.indexOf                   --查找指定元素在当前数组第一个匹配的位置,若没找到,返回-1
Array.lastIndexOf               --查找指定元素在当前数组最后一个匹配的位置,若没找到,返回-1
Array.remove                    --在当前数组中删除指定元素
Array.filter                    --过滤当前数组中指定条件的元素项, 返回符合条件的元素一个新实例
Array.map                       --迭代器

组件列表

01. 翻页组件                --高路       (已完成)
02. 轮播组件                --廖俊波     (已完成)  
03. svg统计图组件           --高路       (已完成)  
04. dialog                  --金锐       (已完成)
05. 常规提示组件            --金锐       (已完成)   
06. 遮罩层                  --金锐       (已完成)
07. 按钮加载中              --金锐       (已完成)
08. 日历组件                --廖俊波     (已完成)   
09. vip信息                 --金锐       (已完成)   
10. 银行卡信息              --廖俊波     (已完成)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,194评论 6 490
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,058评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,780评论 0 346
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,388评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,430评论 5 384
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,764评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,907评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,679评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,122评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,459评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,605评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,270评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,867评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,734评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,961评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,297评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,472评论 2 348

推荐阅读更多精彩内容