Blazor实现菜单动画

想到动画,你可能会去安装Blazor的动画组件BlazorAnimate,然后使用它。本人初学,暂时我也不知道原理,先不用组件,自己实现吧。虽然项目中我用了AntDesignBlazor,但是我忘了使用它的菜单组件,我用的菜单组件还是VS2022自动生成的,后来我把这个菜单改造了一下,支持多级菜单,加了展示收缩箭头,那就在这基础上做吧。

1. 引用jQuery

这里使用jquery的animate方法实现动画
在wwwroot/js目录放一个jquery-1.9.1.js文件,然后在html(或_Layout.cshtml文件)中引入该js

<script src="js/jquery-1.9.1.js"></script>

2. 为左侧菜单组件NavMenu.razor添加一个js文件:NavMenu.razor.js


内容如下:

export function animate(index) { //index是菜单编码 2位数是一级菜单,4位数是二级菜单,以此类推
    let time = 200;
    let content = $(".content" + index);
    let h = content.height() + "px";
    content.css("overflow", "hidden");

    if (index <= 99 || content.hasClass("collapse")) { //index<=99表示一级菜单,一级菜单只有展开动画,没有收缩动画;content.hasClass("collapse")表示当前是收缩状态。
        content.css("height", "0");
        //展开动画
        content.animate({
            height: h
        }, time, "linear", () => {
            content.css("height", "auto");
        });
    } else { //不是一级菜单并且当前是展开状态,将执行收缩动画
        content.css("height", "auto");
        //收缩动画
        content.animate({
            height: 0
        }, time, "linear", () => {
            setTimeout(function () { //延迟执行,否则会导致闪烁
                content.css("height", "auto");
            }, 100);
        });
        return [time]; //收缩时,需要等待收缩动画展示完成,再隐藏菜单容器div
    }
    return [0];
}

3. 在Blazor组件NavMenu.razor文件中引入该js

@inject IJSRuntime _js;

@code {
    IJSObjectReference _module;

    protected override async void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            _module = await _js.InvokeAsync<IJSObjectReference>("import", "./Shared/NavMenu.razor.js");
        }
    }
}

4. 调用js方法实现菜单动画

@code{
    ...省略此处的代码
    
    private async Task ToggleMenuClick(int index)
    {
        object[] args = new object[] { index };
        object[] objs = await _module.InvokeAsync<object[]>("animate", args);
        int time = ((JsonElement)objs[0]).GetInt32();
        if (time > 0) { await Task.Delay(time); } //time大于0,表示需要等待收缩动画展示完成,再隐藏菜单容器div

        if (index > 99)
        {
            if (_dict.ContainsKey(index))
            {
                _dict[index] = !_dict[index]; //记录非一级菜单的展开状态
            }
            else
            {
                _dict[index] = false; //记录非一级菜单的展开状态
            }
        }
        else
        {
            _index = index; //_index是当前展示的菜单编码
        }
    }

    ...省略此处的代码
}

效果图

@using System.Text.Json;
@inject IJSRuntime _js;

<!-- 菜单组 -->
<div class="top-row ps-3 navbar navbar-dark" @onclick="@(async ()=>await ToggleMenuClick(01))">
    <div class="container-fluid">
        <a class="navbar-brand" href="javascript:void(0);">任务管理</a>
        <button title="Navigation menu" class="navbar-toggler">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="@ArrowClass(01)"></div>
    </div>
</div>

<!-- 菜单组内容 -->
<div class="@MenuGroupContentClass(01)">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="kpTask/taskList">
                <span class="oi oi-list" aria-hidden="true"></span> 任务列表
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="kpTask/taskRunList">
                <span class="oi oi-list" aria-hidden="true"></span> 任务执行记录
            </NavLink>

            <!-- 二级菜单组 -->
            <NavLink class="nav-link" href="javascript:void(0);" @onclick="@(()=> ToggleMenuClick(0101))" style="display:;">
                <span class="oi oi-list" aria-hidden="true"></span> 测试二级菜单组
                <div class="@ArrowClass(0101)"></div>
            </NavLink>

            <!-- 二级菜单组内容 -->
            <div class="@MenuGroupContentClass(0101)" style="display:;">
                <nav class="flex-column">
                    <div class="nav-item px-3">
                        <NavLink class="nav-link" href="counter">
                            <span class="oi oi-list" aria-hidden="true"></span> 测试二级菜单
                        </NavLink>

                        <!-- 三级菜单组 -->
                        <NavLink class="nav-link" href="javascript:void(0);" @onclick="@(()=> ToggleMenuClick(010101))" style="display:;">
                            <span class="oi oi-list" aria-hidden="true"></span> 测试三级菜单组
                            <div class="@ArrowClass(010101)"></div>
                        </NavLink>

                        <!-- 三级菜单组内容 -->
                        <div class="@MenuGroupContentClass(010101)" style="display:;">
                            <nav class="flex-column">
                                <div class="nav-item px-3">
                                    <NavLink class="nav-link" href="counter">
                                        <span class="oi oi-list" aria-hidden="true"></span> 测试三级菜单
                                    </NavLink>
                                </div>
                            </nav>
                        </div>
                    </div>
                    <div class="nav-item px-3">
                        <NavLink class="nav-link" href="counter">
                            <span class="oi oi-list" aria-hidden="true"></span> 测试二级菜单2
                        </NavLink>
                    </div>
                </nav>
            </div>
        </div>
    </nav>
</div>

<!-- 菜单组 -->
<div class="top-row ps-3 navbar navbar-dark" @onclick="@(async ()=>await ToggleMenuClick(02))">
    <div class="container-fluid">
        <a class="navbar-brand" href="javascript:void(0);">任务管理</a>
        <button title="Navigation menu" class="navbar-toggler">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="@ArrowClass(01)"></div>
    </div>
</div>

<!-- 菜单组内容 -->
<div class="@MenuGroupContentClass(02)">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="kpTask/taskList">
                <span class="oi oi-list" aria-hidden="true"></span> 任务列表
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="kpTask/taskRunList">
                <span class="oi oi-list" aria-hidden="true"></span> 任务执行记录
            </NavLink>

            <!-- 二级菜单组 -->
            <NavLink class="nav-link" href="javascript:void(0);" @onclick="@(()=> ToggleMenuClick(0201))" style="display:none;">
                <span class="oi oi-list" aria-hidden="true"></span> 测试二级菜单组
                <div class="@ArrowClass(0201)"></div>
            </NavLink>

            <!-- 二级菜单组内容 -->
            <div class="@MenuGroupContentClass(0201)" style="display:none;">
                <nav class="flex-column">
                    <div class="nav-item px-3">
                        <NavLink class="nav-link" href="counter">
                            <span class="oi oi-list" aria-hidden="true"></span> 测试二级菜单
                        </NavLink>
                    </div>
                </nav>
            </div>
        </div>
    </nav>
</div>

<!-- 菜单组 -->
<div class="top-row ps-3 navbar navbar-dark" @onclick="@(async ()=>await ToggleMenuClick(03))">
    <div class="container-fluid">
        <a class="navbar-brand" href="javascript:void(0);">任务管理</a>
        <button title="Navigation menu" class="navbar-toggler">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="@ArrowClass(01)"></div>
    </div>
</div>

<!-- 菜单组内容 -->
<div class="@MenuGroupContentClass(03)">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="kpTask/taskList">
                <span class="oi oi-list" aria-hidden="true"></span> 任务列表
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="kpTask/taskRunList">
                <span class="oi oi-list" aria-hidden="true"></span> 任务执行记录
            </NavLink>

            <!-- 二级菜单组 -->
            <NavLink class="nav-link" href="javascript:void(0);" @onclick="@(()=> ToggleMenuClick(0301))" style="display:none;">
                <span class="oi oi-list" aria-hidden="true"></span> 测试二级菜单组
                <div class="@ArrowClass(0301)"></div>
            </NavLink>

            <!-- 二级菜单组内容 -->
            <div class="@MenuGroupContentClass(0301)" style="display:none;">
                <nav class="flex-column">
                    <div class="nav-item px-3">
                        <NavLink class="nav-link" href="counter">
                            <span class="oi oi-list" aria-hidden="true"></span> 测试二级菜单
                        </NavLink>
                    </div>
                </nav>
            </div>
        </div>
    </nav>
</div>

@code {
    int _index = 01;
    Dictionary<int, bool> _dict = new Dictionary<int, bool>();
    IJSObjectReference _module;

    protected override async void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            _module = await _js.InvokeAsync<IJSObjectReference>("import", "./Shared/NavMenu.razor.js");
        }
    }

    private async Task ToggleMenuClick(int index)
    {
        object[] args = new object[] { index };
        object[] objs = await _module.InvokeAsync<object[]>("animate", args);
        int time = ((JsonElement)objs[0]).GetInt32();
        if (time > 0) { await Task.Delay(time); }

        if (index > 99)
        {
            if (_dict.ContainsKey(index))
            {
                _dict[index] = !_dict[index];
            }
            else
            {
                _dict[index] = false;
            }
        }
        else
        {
            _index = index;
        }
    }

    private string MenuGroupContentClass(int index)
    {
        if (index > 99)
        {
            if (!_dict.ContainsKey(index) || _dict[index])
            {
                return $"collapse content{index}";
            }
            else
            {
                return $"content{index}";
            }
        }
        else
        {
            if (index == _index)
            {
                return $"content{index}";
            }
            else
            {
                return $"collapse content{index}";
            }
        }
    }

    private string ArrowClass(int index)
    {
        if (index > 99)
        {
            if (!_dict.ContainsKey(index) || _dict[index])
            {
                return "arrow-collapse arrow-float";
            }
            else
            {
                return "arrow arrow-float";
            }
        }
        else
        {
            if (index == _index)
            {
                return "arrow";
            }
            else
            {
                return "arrow-collapse";
            }
        }
    }

}
本文转载于网络 如有侵权请联系删除

相关文章

  • 统计学:你是贝叶斯主义者还是频率主义者?

    如果我告诉你我可以通过抛硬币来展示贝叶斯统计和频率统计的区别呢?在左边,一切都与视角有关。在右边,这完全是关于不会移动的数量。但大多数情况下,在你看到视频之前,我需要一些东西来保护你的眼睛免受下面的剧透。在视频中,有一个时刻我问你,“我手掌中的硬币是正面朝上的概率是多少?”硬币已经落地了,我看着它,但你们还看不到。你在那一刻给出的答案是一个强烈的暗示,表明你是倾向于贝叶斯思想还是频繁主义思想。频繁主义:“这是不可能的。我可能不知道答案,但这不能改变硬币是正面朝上,概率是100%如果硬币是反面朝上,概率是0% 贝叶斯:“对我来说,概率是50%!对你来说,是什么都可以。”只有坚持参数不是一个随机变量(频繁主义),才有理由谈论你的方法是否有能力提供正确的答案。一旦你让参数成为一个随机变量(贝叶斯),就不再有任何对与错的概念。这只是你个人的观点。频繁主义:参数不是一个随机变量。贝叶斯:参数是一个随机变量。所以他们两个有巨大的区别。让我们仔细看看。频率主义与贝叶斯论哪些词告诉你你在和谁打交道?有什么黑话告诉你你已经进入了他们的领地?频率主义者:置信区间、p值、功效、显着性贝叶斯:可信区间,先验,

  • 基于FPGA的超低延时硬件加速行情解析系统

    摘要:对于瞬息万变的证券交易市场,即时的行情信息是行情系统的基础。快速获取行情信息可以给市场参与者提供更宽裕的交易决策时间窗口,交易者获取的行情信息延时越低,往往意味着越多的交易机会和越大的决策空间。传统的基于软件的行情信息系统,信息的解析一般经过网络层数据获取、协议层数据解析、应用层数据处理等过程,在操作系统和协议层面,存在毫秒级别的上下文切换和软件处理延时,由于操作系统的进程调度和CPU主频的动态调整机制,这种延时还具备一定的不确定性。为实现纳秒级超低延时行情解析处理,本文针对上海证券交易所的行情发布系统,采用Verilog硬件描述语言,在FPGA加速卡上开发了对行情信息流的以太网,IP和UDP以及FAST协议的硬件解码,设计了支持指令集编程的微指令加速引擎。与传统的基于软件的方法相比,本文提出的专用硬件处理方案延时可降低10倍以上。·本文选自《交易技术前沿》总第四十一期文章(2020年12月)·环宇翔、崔建军、郑立荣/复旦大学信息科学与工程学院微纳系统中心·高昀、王嘉晨/上证所信息网络有限公司01引言随着量化高频交易在世界范围内的兴起,超低延时的行情信息已经逐步成为高频交易中不可

  • 导入5nm芯片,中兴自研系统发货量已超过两亿套,知耻而后勇的中兴

    中兴自从在被美国芯片断供的事件之后,已经成为国内很多媒体讽刺的对象,更是很多人在号召学习华为,中兴已经成为国内科技企业反面的典型,这点来讲中兴公司倒是有点冤,毕竟当时的中兴公司没有任何的准备,后来的华为公司明显的吸取了中兴的教训不断然后大量的备货,并且提前做了很多的预案,所以华为公司在遭受到美国实体清单的时候,就能够表现的相对硬气很多,不能单纯的给中兴公司下结论这个企业的能力不行,但是在应对极限生存危机面前距离华为公司还是有着很大的差距。中兴在经历了打压之后,中兴公司明显在核心技术领域增加了极强的生存意识,所以才有了后边的很多备胎计划的推出,在忧患意识方面华为公司做的的确非常到位,这和创始人任正非的有着直接的关系。但中兴最近在芯片上投入明显加大了,并且不断在高端的芯片上有输出,7nm技术上已经具备了,并且在5nm上已经开始涉足,一朝被蛇咬十年怕井绳,现在的中兴正在奋发图强的追赶中。中心操作系统新支点系统在政府的大力支持下,销售量总体已经超过了2亿套,得益于在国内的科技大环境下自主研发已经成为国家提倡的大趋势,毕竟从改革开放到现在中国已经取得了巨大的进步,并且已经打了很多的基础,特别是涉

  • go 学习笔记之初识 go 语言

    Go是一种开源编程语言,可以轻松构建简单,可靠,高效的软件.>摘录自github:https://github.com/golang/go,其中官网(国外):https://golang.org和官网(国内):https://golang.google.cn/Go是Google公司推出的静态强类型,编译型,并发型,并具有垃圾回收功能的开源编程语言,最初由RobertGriesemer,RobPike,KenThompson三人主持开发,后来陆续加入其他开发者,最终于2009年11月正式开源.创始人都是大神Go的三位主要创始人分别是:罗伯特·格瑞史莫(RobertGriesemer),和肯·汤普逊(KenThompson)罗伯特·格瑞史莫(RobertGriesemer)JSV8引擎,Chubby,JavaHotSpot虚拟机,Sawzall语言和Strongtalk系统>github:https://github.com/griesemer罗勃·派克(RobPike)Plan9操作系统和UTF-8编码>github:https://github.com/robpike

  • react 常见setState的原理解析

    React.setState首先引入一个栗子 classExampleextendsReact.Component{ constructor(){ super(); this.state={ val:0 }; } componentDidMount(){ this.setState({val:this.state.val+1}); console.log(this.state.val);//第1次log this.setState({val:this.state.val+1}); console.log(this.state.val);//第2次log setTimeout(()=>{ this.setState({val:this.state.val+1}); console.log(this.state.val);//第3次log this.setState({val:this.state.val+1}); console.log(this.state.val);//第4次log },0); } render(){ returnnull; } };复制4次log的值分

  • React 技巧及学习资料

    总结在学习过程中遇到的问题和资料注释要用{/*这是注释*/}注意前后的空格组件篇纯文本组件constComment=({text})=>text.replace(':)','[smile]'); classAppextendsComponent{ render(){ return( <div> <Commenttext="Textonlycomponentsareawesome:)"/> </div> ); } }复制返回数组的纯文本组件 元素类型可不相同constFruits=()=>[ <likey="1">Pear</li>, <likey="2">WeaterMelon</li>, ]; classAppextendsComponent{ render(){ //注意返回的是个数组,减少嵌套层级 return[ <ul> <li>Apple</li&g

  • Git 提交规范

    一、为什么需要规范? 无规矩不成方圆,编程也一样。如果你有一个项目,从始至终都是自己写,那么你想怎么写都可以,没有人可以干预你。可是如果在团队协作中,大家都张扬个性,那么代码将会是一团糟,好好的项目就被糟践了。不管是开发还是日后维护,都将是灾难。这时候,有人提出了何不统一标准,大家都按照这个标准来。于是ESLint,JSHint等代码工具如雨后春笋般涌现,成为了项目构建的必备良品。GitCommit规范可能并没有那么夸张,但如果你在版本回退的时候看到一大段糟心的Commit,恐怕会懊恼不已吧。所以,严格遵守规范,利人利己。二、具体规则先来看看公式:type 用于说明commit的类别,只允许使用下面7个标识。scope用于说明commit影响的范围,比如数据层、控制层、视图层等等,视项目不同而不同。subject是commit目的的简短描述,不超过50个字符。1.以动词开头,使用第一人称现在时,比如change,而不是changed或changes2.第一个字母小写3.结尾不加句号(.)规范参考自阮一峰老师的文章:Commitmessage和Changelog编写指南。http://

  • 教程 | 经得住考验的「假图片」:用TensorFlow为神经网络生成对抗样本

    选自arXiv作者:AnishAthalye机器之心编译参与:李泽南用于识别图片中物体的神经网络可以被精心设计的对抗样本欺骗,而这些在人类看起来没有什么问题的图片是如何产生的呢?最近,来自OpenAI的研究者AnishAthalye等人撰文介绍了他们使用TensorFlow制作「假图片」的方法。为神经网络加入对抗样本是一个简单而有意义的工作:仔细设计的「扰动」输入可以让神经网络受到分类任务上的挑战。这些对抗样本如果应用到现实世界中可能会导致安全问题,因此非常值得关注。仅仅加入一些特殊的噪点,图像识别系统就会把大熊猫认作是长臂猿——而且是99%置信度。想象一下,如果无人驾驶汽车遇到了这种情况…… 在本文中,我们将简要介绍用于合成对抗样本的算法,并将演示如何将其应用到TensorFlow中,构建稳固对抗样本的方法。Jupyternotebook可执行文件:http://www.anishathalye.com/media/2017/07/25/adversarial.ipynb设置我们选择攻击用ImageNet训练的Inceptionv3模型。在这一节里,我们会从TF-slim图像分类库中

  • 【Go 语言社区】HTML5 Geolocation(地理定位)-转

    HTML5Geolocation(地理定位)用于定位用户的位置。定位用户的位置HTML5GeolocationAPI用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。浏览器支持InternetExplorer9+,Firefox,Chrome,Safari和Opera支持Geolocation(地理定位).注意:Geolocation(地理定位)对于拥有GPS的设备,比如iPhone,地理定位更加精确。HTML5-使用地理定位请使用getCurrentPosition()方法来获得用户的位置。下例是一个简单的地理定位实例,可返回用户位置的经度和纬度:实例<script> varx=document.getElementById("demo"); functiongetLocation() { if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else{x.innerHTML="该

  • springboot 中事件监听模型的一种实现

    目录定义事件本身定义事件源定义监听者一、需要实现ApplicationListener二、使用@EventListener注解测试项目结构 前言:事件监听模型是一种常用的设计模式,在springboot中我们如何实现呢? 首先我们要理解事件监听中需要的几个角色 事件发布者(即事件源) 事件监听者 事件本身 废话不多说直接上代码 定义事件本身 事件本身需要继承ApplicationEvent packagecom.yxd; importjava.util.List; importjava.util.Map; importorg.springframework.context.ApplicationEvent; publicclassDemoEventextendsApplicationEvent{ privateStringtype; privateList<Map>msg; publicDemoEvent(Objectobject,Stringtype,List<Map>msg){ super(object); this.msg=m

  • dedecms功能性函数封装(XSS过滤、编码、浏览器XSS hack、字符操作函数)

    dedecms虽然有诸多漏洞,但不可否认确实是一个很不错的内容管理系统(cms),其他也不乏很多功能实用性的函数,以下就部分列举,持续更新,不作过多说明。使用时需部分修改,你懂的 1.XSS过滤。 functionXSSClean($val){ global$cfg_soft_lang; if($cfg_soft_lang=='gb2312')gb2utf8($val); if(is_array($val)) { while(list($key)=each($val)) { if(in_array($key,array('tags','body','dede_fields','dede_addonfields','dopost','introduce')))continue; $val[$key]=XSSClean($val[$key]); } return$val; } $val=preg_replace('/([\x00-\x08,\x0b-\x0c,\x0e-\x19])/','',$val); $search='abcdefghijklmnopqrstuvwxyz'; $se

  • 阿里云-快速搭建LNMP环境(MySQL,Nginx,PHP)

    2.安装MySQL数据库 1. 执行以下命令,下载并安装MySQL官方的YumRepository。 wgethttp://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpm yum-yinstallmysql57-community-release-el7-10.noarch.rpm yum-yinstallmysql-community-server复制     2. 执行以下命令,启动MySQL数据库。 3. 执行以下命令,查看MySQL初始密码。 grep"password"/var/log/mysqld.log 复制     4. 执行以下命令,登录数据库。 mysql-uroot-p 复制 5. 执行以下命令,修改MySQL默认密码。 setglobalvalidate_password_policy=0;#修改密码安全策略为低(只校验密码长度,至少8位)。 ALTERUSER'root'@'

  • sql 删除某个日期字段小于今天的所有数据

    deleteFROMI_PRO_STVALUEWHERE Datediff(day,CreateDate,GETDATE())>0

  • Windows下编译并裁剪FFmpeg

    Windows下编译并裁剪FFmpeg 本文主要介绍下如何在Windows环境下编译出FFmpeg的可执行环境ffmpeg.exe,并通过一个例子演示如何对其进行裁剪,使其体积变小。 一.工具与环境 FFmpeg4.3。本文选择的FFmpeg版本为4.3; MSY2。Windows下的LinuxShell模拟工具,主要用于模拟Linux终端的一些命令和指令。 二.编译工具安装 FFmpeg的安装过程省略,源码可以由https://github.com/FFmpeg/FFmpeg/tags或FFmpeg官网下载,下载完毕后将它解压到任意位置,如本文解压在:E:\linux_share\ffmpeg-4.3.1 这里着重介绍一下MSY2的安装,当然,不是指安装MSY2本身,而是在MSY2安装完成之后还需要安装其它一些其它的编译依赖工具。需要额外安装的依赖工具包括: MinGW64,GCC编译套件在Windows下的移植,编译FFmpeg时会用到; nasm,yasm,一组汇编编译工具,因为FFmpeg源码中包含有部分汇编代码; make,FFmpeg编译前需要先生成Makefile

  • Numpy数组

    Numpy数组 nadarray对象:描述了相同类型元素的集合 数组索引从0开始 数组中元素类型相同,占用的存储空间相同 nadarray包括数据指针,数据类型,维度,跨度 创建(维度) 一维: np.array([2,8,5]) 复制 二维: np.array([[1,3,6],[4,5,7]]) 复制 特殊数组创建 全0:numpy.zeros 全1:numpy.ones 等间距:numpy.arrangenumpy.linspace 数组切片与索引 索引:从0开始取下标 切片:a[0:5]左闭右开 步长切片:a[0:5:2] slice:与上面的步长一样 s=slice(0,5,2) a[s] 复制 切片参数 (start:stop,step) arr[:2,1:]#前面的取行,后面的取列 ret=a[m,:n]#a的m维的前n个参数 复制 通过布尔筛选 a=np.array([[1,2],[3,4]]) print(a[a>2]) #输出[3,4] 复制 广播 对不同形状的数组进行运算,对较小的数组进行拓展,与较大的匹配,沿行或列进行拓展,只能拓

  • Hibernate的检索策略

    Session的缓存中可以存放相互关联的对象。当Hibernate从数据库中加载对象时,如果同时自动加载与之关联的所有对象,那么这些关联的对象就浪费了很多的内存空间。而我们可以设置检索策略,来优化检索性能。 Hibernate提供了三种检索策略 -立即检索策略:检索对象时立即加载对象以及关联的对象。 -延迟检索策略:使用时才会加载对象以及关联的对象。能避免多余加载不需要的对象。 -迫切左外连接检索策略:利用SQL的外连接查询功能,能够减少select语句的数目。 类级别检索策略 定义:只加载某个类对象类级别的检索策略包括立即检索和延迟检索。默认为延迟检索。Hibernate中允许在映射文件中配置检索策略。类级别检索策略,可以配置<class>元素中的lazy属性。属性可选值:true(延迟检索)false(立即检索)。默认值为true。类级别检索策略会影响Session的load方法。 publicclassDemo{ privateSessionsession; @Test publicvoidtest(){ //读取配置文件 Configurationconf

  • jstat命令查看jvm的GC情况 (以Linux为例)

     jstat命令可以查看堆内存各部分的使用量,以及加载类的数量。命令的格式如下:  jstat[-命令选项][vmid][间隔时间/毫秒][查询次数]  注意!!!:使用的jdk版本是jdk8.    类加载统计:   Loaded:加载class的数量 Bytes:所占用空间大小 Unloaded:未加载数量 Bytes:未加载占用空间 Time:时间    编译统计   Compiled:编译数量。 Failed:失败数量 Invalid:不可用数量 Time:时间 FailedType:失败类型 FailedMethod:失败的方法    垃圾回收统计   S0C:第一个幸存区的大小 S1C:第二个幸存区的大小 S0U:第一个幸存区的使用大小 S1U:第二个幸存区的使用大小 EC:伊甸园区的大小 EU:伊甸园区的使用大小 OC:老年代大小 OU:老年代使用大小 MC:方法区大小 MU:方法区使用大小 CCSC:压缩类空间大小 CCSU:压缩类空间使用大小 YGC:年轻代垃圾回收次数

  • 【小程序】缓存

    缓存 每个微信小程序都可以有自己的本地缓存,可以通过wx.setStorage/wx.setStorageSync、wx.getStorage/wx.getStorageSync、wx.clearStorage/wx.clearStorageSync,wx.removeStorage/wx.removeStorageSync对本地缓存进行读写和清理。 同一个微信用户,同一个小程序storage上限为10MB。storage以用户维度隔离,同一台设备上,A用户无法读取到B用户的数据。 注意:如果用户储存空间不足,我们会清空最近最久未使用的小程序的本地缓存。我们不建议将关键信息全部存在storage,以防储存空间不足或用户换设备的情况。 写入缓存 wx.setStorage(Objectobject) 将数据存储在本地缓存中指定的key中。会覆盖掉原来该key对应的内容。数据存储生命周期跟小程序本身一致,即除用户主动删除或超过一定时间被自动清理,否则数据都一直可用。单个key允许存储的最大数据长度为1MB,所有数据存储上限为10MB。 属性类型必填说明 key string 是

  • 中缀转前缀

    #infix[]->中缀表达式;s2[]->栈的顺序表;top2->栈顶指针;len表达式长度 voidinfixToPostFix(charinfix[],chars2[],int&top2,intlen) { chars1[maxSize];#s1辅助栈 inttop1=-1; inti=len-1; while(i>=0) { if('0'<=infix[i]&&infix[i]<='9') { s2[++top2]=infix[i]; --i; } elseif(infix[i]==')') { s1[++top1]=')'; --i; } elseif(infix[i]=='+'||infix[i]=='-'|| infix[i]=='*'||infix[i]=='/') { if(top1==-1||s1[top1]==')'||#当栈为空 getPriority(infix[i])>=getPriority(s1[top1]))#当前优先级>=栈顶优先级 { s1[++top1]=infix[i];

  • 关于“单例模式”的另外一种实现

      传统单例模式的实现有懒汉、饿汉等模式,也有双锁机制(防止不必要的线程再度进入锁的临界区实例化单例模式的全局变量)。不过据说(未经考证)在VS中CPU开启“out-of-orderexecution”,仍然会导致出问题,原因在于:   我们假设a和b线程同时试图初始化单例模式的全局变量,a先进入方法获得了锁,b慢了一拍,判断全局变量!=null之后只能徘徊在外边直到a好了位置。我们设想a线程初始化应该的步骤:     1)调用构造函数,产生实例对象。   2)为全局变量分配栈和堆上的空间。   3)将全局变量指向产生的实例对象。   但是,可惜的是,一旦该优化开启之后,编译器变得“不听话了”,它会先1:为实例对象分配好空间,然后2:直接把全局变量指针指向该空间,最后3:才调用构造函数去“充实”实例。设想一下,如果是这样的话,b徘徊在外边,等到线程a刚完成2,b就发现全局变量已经不为null了!但是实例化构造函数尚未调用(或者调用中),结果会如何?!   因此,如果没有必要延时加载,用“饿汉模式”或者直接写入静态构造函数的“懒汉模式”最好,否则需

  • 简明UML类图教程

    参考链接:10分钟学会UML类图 UML整个系统比较复杂,但通常,我们自己些代码,只会用到最简单的类图,简要的笔记如下。 假设我们要设计一个动物园系统,里面最基本的组成部分,每个动物都是Animal类: 那么怎么抽象这个类呢,通过相应的属性和方法来模拟: 这些属性/方法主要有三种权限: private(-):在类的外部无法被访问(即使是它的子类、或者通过类.私有进行访问) protected(#):在子类中可以访问; public(+):任何地方都可以访问它们; 除此之外,不同类之间主要有4种关系(有且仅有): 继承:海龟继承动物类,其中一种关系(海龟是动物类的一种); 关联:狗类吃食物类,两者没有依赖关系,可以互相独立存在; 聚合:说明整体、部分,一群乌龟军团,army军队,单个乌龟,依然可以单独成立; 组合:游客中心跟厕所的关系,访客大厅由厕所、售票处等组成,游客中心没有厕所就不完整,不能单独存在; 除此之外,我们还需要对它们之间的数量关系进行约束,也称为多重性数字约束。例如:一个访客大厅类只能有一个售票处,但是厕所要好几个。将约束关系写为m..n: 需要说明

相关推荐

推荐阅读