前端模塊化開發應用——日曆組件開發

一、建立組件：calendar_test3spm2

二、在package.json中引入依賴：

"dependencies": {
        "jquery": "<=1.9",
        "backbone": "~1",
        "moment": "~2",
        "observer": "~0",
        "lodash": "~3",
        "nunjucks-slim":"~1.1",
        "jquery-chosen": "~0",
        "common-model":"~0",
        "style-base":"~0",
        "layer":"~2"
    },

 在源碼calendar_test3spm.js中調用依賴：

 1 /引入依賴
 2 var $ = require('jquery');
 3 var _ = require('lodash');
 4 var backbone = require('backbone');
 5 var nunjucks = require('nunjucks-slim');
 6 var moment = require('moment');
 7 var observer = require('observer');
 8 var chosen = require('jquery-chosen');
 9 var CommonModel = require('common-model');
10 var layer=require('layer');
11     
12 //引入樣式
13 require('../css/calendar_test3spm-theme-base.css');

View Code

三、首先進行整個日曆功能（包括翻年月）的功能實現：（寫在源碼中的backbone.View框架中）

 

四、模板文件寫於：\trunk\template\calendar_test3spm.html中，主要是：第一行區域選擇的DOM，下部的日曆展現的DOM。

 

五、樣式文件寫在：\trunk\css\calendar_test3spm-theme-bass.css

 

六、在\trunk\examples\index.html