zoukankan      html  css  js  c++  java
  • 最近兰州的js风格写个插件和一个template engine

    
    
    /*
    *@Product Name: Rational Framework
    Author: Calos
    Description:  pager
    !important: pager
    */
    (function ($) {
        $.fn.patpager = function (indexedReq) {
            var indexedReqDefault = {
                turnPageTriggered: function (indexer, transform) {
                    fetchIndexer(indexer, transform);
                }, pageIndex: 1, pageSize: 10, pageCount: 10
            };
            indexedReq = $.extend(indexedReqDefault, indexedReq);
            if (indexedReq.pageCount === 0) indexedReq.pageCount = 1;
            var $this = $(this).addClass('patpager');
            $this.data('initialized', false);
            $this.children().remove();
            var timestamp = new Date().getTime();
            var caching = {};
            function fetchIndexer(indexerTo, transform) {
                if (indexedReq.turnPageTriggered) {
                    indexedReq.turnPageTriggered(indexerTo, transform);
                }
            }
            var components = {
                Turntopage: '<label>Turn to page</label>',
                pageIndex: function (num) { return '<input type="text" class="pageTo" value=' + num + '>'; },
                previousPage: '<a class="prev"></a>',
                curStatus: function (pageIndex, totalPages) { return 'page <span class="cur">' + pageIndex + '</span> of <span class="totalPages">' + totalPages + '</span>'; },
                nextPage: '<a class="next"></a>'
            };
            var methods = {
                createPager: function (pageIndex, totalPage) {
                    var html = '<div class=' + timestamp + ' >' + components.Turntopage + components.pageIndex(pageIndex) + components.previousPage + components.curStatus(pageIndex, totalPage) + components.nextPage + '</div>';
                    $this.html(html);
                },
                refreshCache: function () {
                    caching = {
                        pageTo: $this.find('.pageTo'),
                        prev: $this.find('.prev'),
                        pageIndex: $this.find('.cur'),
                        totalPages: $this.find('.totalPages'),
                        next: $this.find('.next')
                    }
                    $(".prev,.next").css('cursor', 'pointer');
                },
                initPager: function (option) {
                    methods.createPager(option.pageIndex, option.pageCount);
                    this.refreshCache();
                },
                setCurrentPage: function (pageTo) { caching.pageIndex.text(pageTo >= 1 ? pageTo : 1) },
                getCurrentPage: function () { return parseInt(caching.pageIndex.text()); },
                ensureFirstPage: function () {
                    return this.getCurrentPage() === 1;
                },
                ensureLastPage: function () {
                    return this.getCurrentPage() === indexedReq.pageCount;
                },
                turnToPreviousPage: function () {
                    indexedReq.pageIndex = methods.getCurrentPage() - 1;
                    fetchIndexer(indexedReq, function () {
                        methods.setCurrentPage(indexedReq.pageIndex);
                    });
                },
                turnToNextpage: function () {
                    indexedReq.pageIndex = methods.getCurrentPage() + 1;
                    fetchIndexer(indexedReq, function () {
                        methods.setCurrentPage(indexedReq.pageIndex);
                    });
                },
                turnTopage: function (index) {
                    indexedReq.pageIndex = index;
                    fetchIndexer(indexedReq, function () {
                        methods.setCurrentPage(indexedReq.pageIndex);
                    });
                },
                ensureValidPageIndex: function () {
                    var i = caching.pageTo.val();
                    var c = parseInt(caching.totalPages.text());
                    if (i <= 0) { caching.pageTo.val(1); caching.pageIndex.text(1); return true; }
                    if (i >= c) { caching.pageTo.val(c); caching.pageIndex.text(c); return true; }
                    return /d/gim.test(i) && i > 0 && i < parseInt(caching.totalPages.text());
                }
            };
            var behaviors = {
                prevClick: function () {
                    methods.turnToPreviousPage();
                },
                nextClick: function () {
                    methods.turnToNextpage();
                }
            };
    
            var getFrame = function (selector) {
                return '.' + timestamp + ' ' + selector;
            }
    
            $this.on('click', getFrame('.prev'), function (e) {
                if (!methods.ensureFirstPage())
                    behaviors.prevClick();
            });
            $this.on('click', getFrame('.next'), function (e) {
                if (!methods.ensureLastPage())
                    behaviors.nextClick();
            });
            $this.on('keydown blur', getFrame('.pageTo'), function (e) {
                var eType = $.inArray(e.type, ['focusout', 'keydown']);
                if ((eType === 1 && e.keyCode === 13) || eType === 0) {
                    if (methods.ensureValidPageIndex()) {
                        var index = caching.pageTo.val();
                        methods.turnTopage(index);
                    }
                }
            });
    
            methods.initPager(indexedReq);
            $this.data('initialized', true);
            return this;
        }
    })(jQuery);
    
    
    

      

     

    兰州基于jquery 写了一个spa架构,不想解耦了

    var TemplateEngine = function(html, options) {
        var re = /<%([^%>]+)?%>/g, reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g, code = 'var r=[];
    ', cursor = 0;
        var add = function(line, js) {
            js? (code += line.match(reExp) ? line + '
    ' : 'r.push(' + line + ');
    ') :
                (code += line != '' ? 'r.push("' + line.replace(/"/g, '\"') + '");
    ' : '');
            return add;
        }
        while(match = re.exec(html)) {
            add(html.slice(cursor, match.index))(match[1], true);
            cursor = match.index + match[0].length;
        }
        add(html.substr(cursor, html.length - cursor));
        code += 'return r.join("");';
        return new Function(code.replace(/[
    	
    ]/g, '')).apply(options);
    

      

  • 相关阅读:
    innerHTML与appendChild(newnodeText)的区别
    转]解析C语言中的sizeof
    #pragma 预处理指令详解
    Linux目录结构和常用命令
    Linux下select, poll和epoll IO模型的详解
    重载,继承,重写和多态的区别:
    CentOs7实现lvs+nginx+keepalived负载均衡(DR模式)
    shell中的通配符(grep、cut、sort等)
    kali虚拟机 联网问题解决办法
    MongoDB 数据库
  • 原文地址:https://www.cnblogs.com/hualiu0/p/5379470.html
Copyright © 2011-2022 走看看