base.js

目的：记录自己发现并编写的js继承方案。

js作用：为移动应用中，不同大小屏幕上显示不同大小字体的问题提供解决方案。

base.js:

var basejs = function () {
    this.base = {
        model: {
            /*屏幕宽*/
            ScreenWidth: $(window).width()
        },
        /*计算页面相关文字字体，图标宽度*/
        calcSize: function () {
            var model = this.model;
            //产品字体大小,子级a标签大小 
            var psize = model.ScreenWidth * (12 / 320);
            psize = psize > 16 ? 16 : psize;

            //星星大小
            var star_img = model.ScreenWidth * (11 / 320);
            star_img = star_img > 18 ? 18 : star_img;

            //供应商牌牌大小
            var supplier_ico = model.ScreenWidth * (35 / 320);
            supplier_ico = supplier_ico > 42 ? 42 : supplier_ico;

            /*********样式***********/
            var css = "<style type=\"text/css\">";
            //产品字体大小
            css += ".page_js_font{font-size:" + psize + "px} ";
            //子级a标签大小 
            css += ".page_js_next_pa a{font-size:" + psize + "px }"
            //星星大小
            css += ".page_js_star{width:" + star_img + "px;}";
            //供应商牌牌大小
            css += ".page_js_supplier_ico{width:" + supplier_ico + "px;}";

            css += "</style>";
            $("html").append(css);
        }
    };
};

 

应用实例:

js:

/// <reference path="../AppExtends.js" />
/// <reference path="base.js" />
/// <reference path="../lib/underscore.js" />
/// <reference path="../lib/iscroll.js" />

var air = {
    index: new basejs()
};

air.index.ready = function () {
    var _fn = air.index.fn;
    var _model = air.index.model;
    var _base = air.index.base;
    _base.calcSize();

    _fn.swperLoad();
};

air.index.model =
    {

    };

air.index.fn =
    {
        getmodel: function () {
            return air.index.model;
        },
        swperLoad: function () {
            new Swiper('.swiper-container',
                {
                    slideElement: "a",
                    pagination: ".pagination",
                    calculateHeight: true

                });
        }
    };

 

html实例：

     <div class="warp_jgl_Rb">
                    <i class="f_L"><span class="page_js_font">Reviews:</span></i>
                    <img class="page_js_star" src="<%=ProductReviews>=1?'/content/images/xin_man.png':'/content/images/xin_kong.png'%>" />
                    <img class="page_js_star" src="<%=ProductReviews>=2?'/content/images/xin_man.png':'/content/images/xin_kong.png'%>" />
                    <img class="page_js_star" src="<%=ProductReviews>=3?'/content/images/xin_man.png':'/content/images/xin_kong.png'%>" />
                    <img class="page_js_star" src="<%=ProductReviews>=4?'/content/images/xin_man.png':'/content/images/xin_kong.png'%>" />
                    <img class="page_js_star" src="<%=ProductReviews>=5?'/content/images/xin_man.png':'/content/images/xin_kong.png'%>" />
                </div>