zoukankan      html  css  js  c++  java
  • 面向对象 | 周月切换日历

    一、说在前面

    最近在完成一个项目,其中需要用到日历组件,但是这个日历组件不同于点击按钮选日期,而是在一个月内选择自己想要的日期,只是单月内,其中还可以折叠,在一周内选择日期,切换周的时候也只能在一个月内,由于这个类似一个组件,想用js面向对象的思维去开发这个功能。

    二、实现效果

     

      三、基本思路
    (function ($) {
        // 构造函数
        var Calendar = function (elem, options) {
            // some public methods
        }
        // 原型链
        Calendar.prototype = {
            // some private methods
            // 填充月日子数据
            showCalendar: function () {
    
            },
            // 填充周日子的数据
            showCalendarWeek: function () {
    
            },
            // 建立dom结构
            renderDOM: function () {
    
            },
            // 初始化操作
            inital: function () {
                // 先渲染dom
                this.renderDOM()
                // 填充日子dom
                this.showCalendar()
                // 填充周日子dom
                this.showCalendarWeek(thisweek()[0], thisweek()[1])
            },
            // 执行点击事件
            dom.click = function () {
    
            },
            // 指向构造函数就是Calendar
            constructor: Calendar
        }
        // some common methods
        var dateObj = (function () {
    
        })
        // 继承
        $.fn.calendar = function (options) {
            return new Calendar(this, options).inital()
        }
    })(Zepto)
    // 执行
    $(function () {
        $('#calendar').calendar({
         // 点击周日子的时候
            clickWeekDay: function ($ele) {
                console.log($ele.data('date'))
            },
         // 点击月日子的时候 
            clickListDay: function ($ele) {
                console.log($ele.data('date'))
            }
        })
    })
    四、倡导原则

      虽然说用的是zepto,相对于高大上的vue和react等比较low,但是接地气,拿来就能用。我在写功能的时候,基本做到先dom渲染,然后再去初始化数据。

    上面大体给了写此功能的思路和结构,源码我已经放在了我的github里面了,有需要可以去下载,希望能帮到写业务的大家。

      下载地址:https://github.com/dirkhe1051931999/writeBlog/tree/master/calendar

  • 相关阅读:
    Pyinstaller(python打包为exe文件)
    matplotlib 填充颜色
    Visual Studio 2015 Enterprise
    latex中pdflatex与xelatex的区别
    latex插图续
    dva+umi+antd项目从搭建到使用(没有剖验证,不知道在说i什么)
    umi+dva+antd新建项目(亲测可用)
    HTTP缓存机制
    企业网站常见需求整理
    立足于运维与监控的前端框架 NoahV
  • 原文地址:https://www.cnblogs.com/dirkhe/p/10171256.html
Copyright © 2011-2022 走看看