精华内容
下载资源
问答
  • 最近在处理前端问题时,看到了dialog的modal属性,意为“模态”,作为中国人这么多年,一听这个词不知道是啥意思,所以就有点好奇,有幸在网上找到一篇相性较高的解释文章,所以转载过来以便日后查阅。 原文地址: ...

    最近在处理前端问题时,看到了dialog的modal属性,意为“模态”,作为中国人这么多年,一听这个词不知道是啥意思,所以就有点好奇,有幸在网上找到一篇相性较高的解释文章,所以转载过来以便日后查阅。


    原文地址:

    什么是模态框


    什么是模态框(modal dialog)

    问题来源

    在学习前端的时候,我遇到一个让人费解的词:「模态框」,它对应一种特殊的弹出式窗口。而且一时之间很难说清楚到底特殊在什么地方,以及这样的弹窗与其他类型窗体的核心区别在哪里。与「对话框」,「面板」这些比较直白的词汇不同,「模态」这个词处处透漏着一种玄乎的感觉,很难直观的感受到它到底是个啥,又想要通过这个词来表达什么,你会不自觉的感到困惑:啥叫模态?

    在计算机领域的词汇中,我一直抱有这样一种信念:如果一个词汇显得玄乎,那它背后肯定隐藏着更多的东西,或许是某些隐喻,或许是一些更深层次的设计原理等等。无论如何,都值得去好好调查一番这些词汇背后的含义,可能这些小小的词汇就成了通往一个个饶有趣味的世界的门径。

    什么是「模态」?

    要理解模态框的含义,除了先用眼睛看看这个词汇对应的东西到底是个啥(可以找bootstrap的模态框组件体验)之外,最应该干的事情,就是先搞明白「模态」的含义了。

    模态,英文词汇叫modal

    先看看「模态」的字典解释:模式的,情态的,形式的。

    再看看使用这个词汇组合出来的一些让人莫名其妙的专业词汇。

    • 模态分析
    • 模态矩阵
    • 模态逻辑
    • 模态框

    我们可以猜想一下这个词汇的引入情景,或者说从英文词汇modal翻译成汉语的情形:想要表达一种特定状态下的内容,那该怎么翻译比较好呢?我们知道「模型」这个词有「一种事物的固定抽象」的含义,那么它可以表达一种「固定模式的含义」,而「状态」一词,可以表示事物在某种情形下的表现。这两者结合一下,「模态」这个词便呼之欲出了。当然,实际的翻译和词汇创造肯定远远比上面描述的情况复杂,但核心思想是一致的,也即:如何信达雅的表示出一个事物的概念。

    经过这样的分析,我们可以说算是对「模态」这个词稍有了解了,它指的是某种特定的状态

    这个时候再来看看上面那些专业词汇,就比较容易理解了,也就是说他们都有一种「研究某些特定状态下的事物」的意思。

    什么是「模态框」

    有了上面的词汇理解基础,我们可以继续往下说模态框的概念了。从字面意思上来看,它指的应当是「某种特定状态下的窗体」。

    当然,仅仅这样来看,可能仍然有些难以理解。这是因为我们缺了另外一些东西造成的,缺少的就是「模态框」这个东西使用的语境,只有加入这些内容才能让我们的理解完整。

    那么模态框使用的语境是什么?当然,这个词是在软件领域产生的,我们可以先看看普通的软件使用流程。在使用软件的时候,我们一般都会按照自己的思路一步步操作,比如我们在使用一个购物系统,我们会按照我们对这个软件的固有理解来执行自己脑中的流程:选购商品,加入购物车,下单付款等等。这些流程可以说是我们使用软件时的一种「正常状态」

    「模态框」这种『特定状态下的窗体』正是相对于上面叙述的这种「正常状态」来说的。模态框是出于一种特定状态下的窗体,它会把我们从正常状态中中断出来,将关注点放在这个特定状态的处理上。可以看看模态框的实际表现:当模态框出现的时候,它会屏蔽掉所有其他操作,用户可关注的范围只限于当前的模态框内部,除非你特意去关闭这个模态框,结束这种中断,回到原先正常的流程中去。

    上面所描述的就是模态框的核心思想。其实准确地说,模态框是一个UI设计领域的概念,维基百科的定义是:

    model window

    In user interface design, a modal window is a graphical control element subordinate to an application’s main window which creates a mode where the main window can’t be used. The modal window is a child window that requires users to interact with it before it can return to operating the parent application, thus preventing the workflow on the application main window. Modal windows are often called heavy windows or modal dialogs because the window is often used to display a dialog box.

    Modal windows are commonly used in GUI systems to command user awareness and to display emergency states, although they have been argued to be ineffective for that use. Modal windows are prone to produce mode errors.

    当然模态框这种设计理念,暗含着一种强制性的思路。它强制用户的关注点从正常思维流中抽出来,来关注模态框内的内容,有些强制思考的意味。这种设计理念一般用在比较危险的操作的提示上。

    但是对模态框的批评也是多种多样,主要是批评这种强制性的设计思路,以及它是否应被更好的方案代替等等,更有些观点宣称模态框是「邪恶的」。关于这些批评,可以参考下面一些资料:

    「非模态」

    有模态的概念,当然也有非模态的概念,关于非模态概念,本文暂时按下不表。

    个人理解非模态就是不将用户从“正常状态”中强制中断出来的操作。

    也就是即使我弹出了一个对话框:

    1. 如果这个对话框是模态的,那么用户只能先操作完毕这个弹出的对话框中的内容或者手动关闭这个对话框后才可以继续操作;2. 如果这个对话框是非模态的,那么用户可以选择不操作我弹出的对话框的内容,而是直接继续进行操作。

    展开全文
  • 单,就是一个的意思。例:就是实例化出来的对象,那合在一起就是保证一个构造函数只能new出一个实例,为什么要学习单例模式呢?或者说单例模式有哪些常见的应用场景.它的使用还是很广泛,比如:弹出一个模态框,...
  • “仅一个组件”是什么意思? 例如,如果您想拥有3个模态,则不需要添加组件3次,只需添加一次(最好在应用程序的根目录中),然后使用npm的Event Bus Install Install即可打开任意数量的模态: npm安装
  • 模态字符串匹配

    千次阅读 2009-10-25 16:16:00
    什么是TTMP算法?不好意思,我发布这篇文章之前,估摸是没有其他地方能找着该算法的,因为那是俺生造的。TTMP是啥意思呢?是Terminator Triggered Multi-Pattern 的意思,也就是结束符触发多模式算法。-_-! 有点难...

    什么是TTMP算法?不好意思,我发布这篇文章之前,估摸是没有其他地方能找着该算法的,因为那是俺生造的。
    TTMP是啥意思呢?是Terminator Triggered Multi-Pattern 的意思,也就是结束符触发多模式算法。
    -_-! 有点难理解,没关系,看完了也许就理解了。

    不过这个自造的算法有点复杂,为了保证大家能够顺利阅读,请大家配合做一个测试:
    拿出你的手表,或者其他计时器,看看你能用多块的时间阅读完下面这篇文章。
    判断标准如下:
    如果你的时间少于15秒,就可以不用读我的文章了,完全有能力造一个更强的算法;
    如果你的时间少于30秒,我们可以沟通交流一下;
    如果你的时间少于45秒,你可以仔细阅读一下,说不定可能也许有点启发作用;
    如果你的时间少于60秒,你一定能够在这里挖到宝矿;
    如果你不属于上述情况,我建议您啊,还是不要费力气阅读了,有点面为其难了。

    Do you raelly know Engilsh?
    At laest in Egnlish, wehn pepole raed, tehy
    usaully wlil not noitce taht the charcatres bewteen
    the frist ltteer and the lsat leettr are not in a
    corrcet oredr. In fcat, hmuan brian does recongize
    wrods by seeknig the fsirt ltteer and the lsat leettr,
    and tehn fnidnig whcih charatcers are insdie of tehm.
    See! All the wrods hree wtih mroe tahn 3 leettrs are
    all wirtten in a worng way! Do you niotice taht?

    嘿嘿!其实刚才那段能力测试的话是瞎扯的,主要是让大家快速阅读,而不是认真阅读。有意思吧?
    这个不是我瞎扯出来的,是一个著名大学的研究结果(好像是剑桥),原文我没工夫找,瞎造一段对付一下。不知道你读上述文字的时候是什么感受,反正我自己觉得比较震撼,也比较有意思。

    确实,如果按照自动机理论,一个字一个字的去认真阅读,那么也还是很有可能能够理顺语法结构,搞清楚一句话的含义的(理论上如此吧,实际上还没有任何一个 机器能做到真人般的感知能力)。但是如果每个字都认真读,并查找语法表,一来速度会慢,二来需要海量的空间去做这个事情。而人脑比较聪明,经过若干年的锻 炼之后,已经自动的学会了放弃细节,比如读"cerroct"这个词的时候,找到前面是c开头,后面是t结尾,中间有eoc各一个,r两个,一查表就知道 肯定是“正确”这个词而不管他正确与否——哦,不好意思,我又写错了,应该是correct!

    嗯?这个跟我们这次的主题——字符串多模式精确匹配,有什么关系呢?
    有啊!当然有啦。不过在我告诉大家这个关系之前,我们先来分析一下,字符串多模式精确匹配的效率问题是什么?写之前我先给大家说一下,我下面的说明也许不 会很严谨,因为有时候太严谨了,就不好理解了。例如什么令X=Y……反正我最近为了这个事情找的一些资料,尽是这个,看着也觉得头晕。

    所谓字符串多模式精确匹配是啥意思呢?字符串不多说了,实际上能用于搜索字符串的,也能搜索其他东西。多模式嘛:比如
    string s="xxx";
    string t="xx";
    s.IndexOf(t);
    这个是在一个字符串s中,找出另外一个字符串t所在的位置(或者说是否存在),这种叫做单模式,只有一个要被寻找的字符串t——唯一的一个搜索模式;如果说是
    string s="xxx";
    string[] t= new string[]{"x1", "x2", "x3"...};
    s.Scan(t);
    这种呢,就叫做多模式匹配了。因为我要在s里面找出一组t中任意一个所在的位置,或者说是看看我们的文章里面是否有脏字表里面的敏感词汇。

    关于多模匹配问题,有很多已有的算法,我没有仔细的看,只看了一个可能是WM的算法,实际上可能还有什么grep/agrep等算法。不过需要提醒大家的 是,还有不少的算法是讨论模糊匹配的,比如说容许其中有一个字不正确,那些算法就不是我这个主题要讨论的内容了。我要讨论的是精确搜索,即要找“地瓜”就 找“地瓜”,不要“地鼠”。

    多模式精确匹配很难吗?不难,很简单:我们只需要循环一下,先找s.IndexOf(t1),再找s.IndexOf(t2)……但是如果你果然这么做, 效率就会很低了,因为你会需要扫描文本很多很多遍。可以想象,我们的目标是只要扫描整个文章一遍就能够找出这个文章里面都有哪些敏感词汇。不过,很明显该 目标并不容易达成,但至少我们可以尽量接近“只扫描一次”这个目标。在进一步分析之前,建议先看另外一篇文章:
    (重发).NET脏字过滤算法
    这篇文章的算法(比如叫做XDMP算法)其扫描速度已经是比较快的了,并且其思路也比较好理解,我们在这个文章的基础上进行讨论会比较有意义。首先我们先整理一下这个算法的思路:
    1、首先扫描 文章里面的每一个字符,只有当某一个字符是脏字表中任意一个脏词的第一个字符(称为“起始符 ”),我们才试图看看接下来是否是脏字(触发检索 )。
    2、但是我们也不是毫无头绪的就开始循环脏字表的每一个词条:
    2.1、我们往后检索 一个字符,先看一下这个字符是否是脏字表里面的任意一个字符,如果不是,就表明不可能是脏字表中的任何一个条目,就可以退出了。
    2.2、如果是,我们就取从第一个被检出字符到目前扫描到的字符之间的字符串,求哈希值,看看能否从哈希表中检出一个脏词。
    如果检出了,那就大功告成,否则继续检索后面一个字符(重复2.1、2.2),直至找不到,或者超出脏字表条目最大的长度。
    2.3、如果都找不到,或者超长,那么接下来就回到刚才的那个“起始符 ”后一个字符继续扫描(重复1、2),直至整个文章结束。

    我这里先引入了三个重要概念:
    1、扫描,指扫描文章,看看是否有需要和脏字表开始进行对比的情况;
    2、检索,指已经发现可能存在情况了,在将文本和脏字表进行对比的过程;
    3、起始符,指脏字表中条目中的第一个字符。

    如果我们只要扫描,不需要检索就可以完成任务,那一定是最快的,不过目前我比较孤陋寡闻,没有找到这样的算法。
    又或者,如果我们扫描一遍,而检索全中,那也很不错,很不幸,还是没见过。
    很明显,扫描不应该多于1遍,否则肯定效率不可能高。那么检索就是算法的关键了!拆开来,提高检索质量有下列几个方式:
    1、尽可能不触发检索;
    2、如果确实需要触发检索了,那么每次触发检索的时候,要尽可能减少检索所需要遍历的字符数量;
    3、每次对比脏字表的时候,减少运算量。

    回过头分析上面的XDMP算法,是:
    1、一次扫描;(很好,没啥好说的)
    2、只要发现“起始符”就触发检索;
    3、检索的时候,需要遍历的字符数是 1+2+3+...+n,这里的n是被命中的脏词的长度,或者最接近的长度;
    4、每次检索,需要重复计算HashCode,不要忘了,计算HashCode,也是需要扫描字符串的,也就是又要遍历1+2+3+..+n个字符。

    于是,我就有了一下问题:
    1、难道每次遇到“起始符”了,就一定要触发检索吗?哎呀妈呀,这个也要检索(因为脏字表里面可能有MB)?!
    2、难道每次触发检索,都非得要检索长度为1的,长度为2的,长度为3的……直到检索成功,或者出现非脏字表字符的时候吗?
    3、难道每次检索,我们都需要把特定长度的待检文本截取出来吗?
    4、难道每次检索,都需要从头开始计算哈希值吗?不能利用同一次触发检索后,上一次检索的哈希值,来减少本次计算的不必要运算量吗?

    这四个问题,基本上是我想要解决的问题。其中前两个是一类问题,后两个是另一类问题。首先我们检查第一类问题:
    好,我们回顾一下最开始的那篇英文,我们是否有点什么启发?对!我们触发检索的条件太简单了!
    如果一个单词我们都没有看完呢,为什么要开始想这个事一个什么词呢?
    另外,我们触发检索之后,也作了很多不必要的检索,因为当我们遇到"cao"这个字符的时候,很可能脏字表里面只有"caoT妈","caoN妈"这两种 情况。如果有文章里面是"操作",脏字表里面正好又有"作LOVE",上述XDMP算法还是会乖乖的搜索两个字符的情况,而实际上又是没有必要的。

    那么我们如何减少这些不必要的运算呢?首先,我们改一下,不要每次遇到“起始符”就触发检索。我们扫描到起始符怎么办?记录下来他的位置等信息,然后继续 扫描下去。当我们遇到了“结束符”,也就是脏字表每一个词条中,最后一个字符中的任意一个时,我们才考虑是否要开始触发扫描。而扫描的时候呢,也不一定非 得要脏字长度为1、2、3……的情况。因为之前记录了各种起始位置,我们可能只需要扫描1、3两种情况,或者5这种情况。

    接下来是第二类问题:
    上述算法里面,为了加快检索某串字符是否在脏字表里面,使用了哈希表。为了能够查表,所以就必须把这个哈希值给截取出来。可是这就引发了两个性能损耗点:
    1、每一次截取,都要重新计算哈细值;
    2、每一次都需要截取出一个字符串。
    要避免这个问题,首先我们需要了解哈希表大致是怎么工作的:
    哈希表实际上是根据当前的字符串内容,得出一个概率相对比较平均的散列值(这样哈希效表才不会容易出现冲突,即内容不同数值却一样),然后找出表中哈希值相等的第一个结果,然后对内容进行比较,如果相同就是找到了。否则就找下一个,直到没有相等哈希值的条目为止。

    于是,我们可以这么来解决上述问题:
    1、首先,我们造一个哈希值的计算方法,使得我们可以利用上一次的计算结果,接着计算下一个结果。
    比如说,我们可以一个字节一个字节的进行异或(好处是方向性不敏感),或者也可以规定从字符串后方往前开始计算。
    为什么规定从尾部进行计算?因为TTMP是结束符触发扫描的,比如说有文本:
    ABCDE
    如果E是结束符,那么就会检索ABCDE、BCDE、CDE、DE、E(还要看是否扫描到这些起始符)。如果我们是从后方往前计算,那就可以利用E的哈希值以及字符D,就可以计算DE的哈希值,而不需要再次对E字符进行计算了。
    2、其次,我们可以构造这样的哈希表:
    Dictionary<int, List<string>> hash;
    其key就是我们刚才算出来的哈希值,根据算出来的哈希值,我们就可以得到一个该哈希值下的脏字列表,然后我们一个个的和待检文本进行字符对字符的比较。这里看起来很奇怪,为什么有了哈希值,还不能够通过哈希值直接找到对应的字符呢?
    不要忘了,哈希值本来就是会冲突的,我现在只不过把冲突的情况单独取出来自行处理,这样实际上的检索次数并没有增加(放在哈希表里面,也必须一个个的进行 字符对字符的比较,才能够确定Key值是否完全相等,而不是Key的哈希值相等但Key值不等)。而好处是,我们不需要非得取出一个字符串,好让哈希表去 获取这个字符串的哈希值(需要从头遍历每一个字符)。
    通过以上的措施,我们就可以让每一次对n长度待检文本触发检索,只需要最多遍历n个字符,就可以得到最多n次遍历的所有哈希值了,而原XDMP算法则需要遍历Sum(n)个字符。

    当然了,上述这几个措施,其效果并不会非常明显,原因有三个:
    1、通常我们的文本都是很正常的文本,顶多偶尔有点敏感词汇,因此并不会经常挑战前面说到的性能损耗点;
    2、通常我们的脏字表数量不会极其巨大,起始符和结束符也应该集中在有限的那些字符里面,因此绝大多数时候首字符表,以及结束符表就已经能够极大地提高性能了;
    3、即使我们真的需要触发检索了,我们的脏字通常长度会比较短,或者大多数会比较短,因此上面的改进所带来的性能提升会比较有限。比如说两个字符的情况下,原算法计算哈希值需要遍历3个字符,而TTMP则只需要遍历2个字符……汗
    而如果是5个字符,原算法需要遍历15个字符,而TTMP则只需要遍历5个字符,开始有差距感了。
    可惜的是,5个字符的敏感词毕竟还是比较少的,而一篇文章正好中这个5字敏感词的地方也是很少的。

    目前我这个TTMP算法还没有优化,已经能够做到和XDMP算法消耗时间比为1:1.5-2.5,算是很不错了。当然了XingD后来又做了一个新的算法,测试速度很快,可是当时我测的时候还不稳定,有漏检的情况,因此暂时不做评论了。
    至于我的TTMP算法,也还有不少可以挖掘潜力的地方,比如现在是前向检索的,以及预先计算哈希值的。如果改成后向检索,检索时计算哈希值,性能应该会更好一点。不过暂时不打算继续挖掘了,准备把他先放到实战里面应用再说。

    呃,其实本文开头说的还是没错的,本文还是有点难度,而本人描述能力也不是特别好,不知道各位看官有没有看懂了?
    源码?嘿嘿,私货,先收藏一段时间再说。当然了,如果你有一段源码,能够合法制造让制造者合法拥有的人民币真币,能够用VS2005编译通过,部署过程只 需要点一下鼠标,运行过程无需看管,并且你愿意和我交换的话,我会考虑一下的……真实的情况是,我现在还要继续让算法更稳定,不能放出一个问题多多的代码 出来吧?
    私下说一下,这个程序比XDMS算法复杂不少,如果将来放出来,并且各位想要整明白的话,还需要自己花点心思。

    哦,顺预先给某人回复一下:
    KMP算法是单模匹配算法,BM据说也是单模式的算法。
    WM算法是多模匹配的,我找了一个据说是WM的算法看了看:
    http://blog.chinaunix.net/u/21158/showart_228430.html
    不知道你说的是不是这个。
    我发现思路其实和KMP/BM类似,主要是通过“跳跃”技术来提升性能的。但是该文里面也提到了这么一段话:
    假设其中一个模式非常的短,长度仅为2,那我们移动的距离就不可能超过2,所以短模式会使算法的效率降低。

    可问题就在于,一般脏字表的长度都是1到2个的居多,因此绝大多数跳跃的作用并不强。即使是5个字符,再TTMP里面,也很可能因为超出长度没有遇到“结 束符”而不会触发扫描。而WM需要有一个Shift表,为了节省空间还需要压缩,这就意味着需要对每一个扫描单元进行一个压缩计算。综上所述,TTMP和 WM进行搜索脏字任务的PK,谁胜谁负还不一定呢。顺便说一下,即使是WM,也不是一次扫描的,因为如果不跳跃的话,就会要多扫描一下某些字符。

    TTMP效率描述:
    Ot = Ot(文本长度) + Ot[ 起始符与结束符在出现在扫描窗口中的次数*Avg(同一个结束符中哈希值相等的词条数目) ]
    =Ot(N) + Ot[f*Avg(h)]

    Om = Om(字符类型表) + Om(结束符表) + Om{ 词条总数*[哈希表内部变量消耗内存+列表消耗内存数量+Avg(词条长度) ] }
    =256K + 256K + Om{n * [12+12+Avg(k) ] }
    =512K + Om[n*(c+k)]

    ^_^ 唐僧回来了……

    展开全文
  • ... 具有多个模式内容/按钮。 这不是什么这个组件并不意味着是Vue的引导式...这是什么意思:它想更进一步:它为您提供了基本的骨架结构,您可以在其中自由地根据自己的要求/网站应用自己CSS样式,并为您提供格式化的自由
  • 单,就是一个的意思。例:就是实例化出来的对象,那合在一起就是保证一个构造函数只能new出一个实例,为什么要学习单例模式呢?或者说单例模式有哪些常见的应用场景.它的使用还是很广泛,比如:弹出一个模态框,...

    什么是单例呢?

    单,就是一个的意思。例:就是实例化出来的对象,那合在一起就是保证一个构造函数只能new出一个实例,为什么要学习单例模式呢?或者说单例模式有哪些常见的应用场景.它的使用还是很广泛,比如:弹出一个模态框,一般来说在网站中弹出的模态框,不停的一直点击,一般只能创建一个。还有后台的数据库连接,一般都是保证一个连接等等。今天的主题就是单例在模态框中的应用,我们先要搞清楚,怎么弄个单例出来.

    我们先看下普通的构造函数加原型方式。下面这种是常见的方式

     1         function Singleton ( uName ){
     2             this.userName = uName;
     3             this.ins = null;
     4         }
     5         Singleton.prototype.showUserName = function(){
     6             return this.userName;
     7         }
     8         var obj1 = new Singleton( 'ghostwu' );
     9         var obj2 = new Singleton( 'ghostwu2' );
    10         console.log( obj1 === obj2 ); //false

    每次new都会在内存中生成一块新的内存区域保存新的实例,所以这种方式就不能保证只能new出一个单例,所以,我们想要创建一个单例,就要能够控制new创建实例的过程!!!,这就是单例的关键,那么要控制这个过程,肯定不能让用户直接调用构造函数,所以我们要另外想办法.

    第一种办法: 在函数中添加一个静态方法,来控制创建实例的过程

     1         function Singleton ( uName ){
     2             this.userName = uName;
     3         }
     4         Singleton.prototype.showUserName = function(){
     5             return this.userName;
     6         }
     7         Singleton.getInstance = function( uName ){
     8             if ( !this.ins ) {
     9                 this.ins = new Singleton( uName );
    10             }
    11             return this.ins;
    12         }
    13 
    14         var obj1 = Singleton.getInstance( 'ghostwu' );
    15         var obj2 = Singleton.getInstance( 'ghostwu2' );
    16         console.log( obj1 === obj2 ); //true

    第8行判断ins这个变量是否保存了一个实例,如果没有就new一个,否则直接返回。第二次在调用的时候,由于已经存在了ins,所以直接返回,就不需要在new了,这要就能确保是单例

    第二种办法:利用闭包和立即表达式的特性

     1         function Singleton ( uName ){
     2             this.userName = uName;
     3         }
     4         Singleton.prototype.showUserName = function(){
     5             return this.userName;
     6         }
     7         Singleton.getInstance = (function(){
     8             var ins = null;
     9             return function( uName ) {
    10                 if ( !ins ) {
    11                     ins = new Singleton( uName );
    12                 }
    13                 return this;
    14             }
    15         })();
    16 
    17         var obj1 = Singleton.getInstance( 'ghostwu' );
    18         var obj2 = Singleton.getInstance( 'ghostwu2' );
    19         console.log( obj1 === obj2 );

    这两种方法都可以,接下来,我就选择第二种方法来实现弹出单一的模态框

    三、传统面向对象方式,每次点击都会弹出新的模态框

    样式:

    1      div {
    2             width: 200px;
    3             height: 200px;
    4             border:1px solid #09f;
    5             box-shadow: 2px 2px 1px #666;
    6             position: absolute;
    7         }

    html: 

    1 <input type="button" value="弹窗">

    js部分: 

     1         var oBtn = document.querySelector("input"),
     2             offset = 20, index = 1;
     3         function Module( pos ){
     4             this.offset = pos || 20;
     5         }
     6         Module.prototype.create = function(){
     7             var oDiv = document.createElement( "div" );
     8             oDiv.style.left = ( ++index ) * offset + 'px';
     9             oDiv.style.top = ( ++index ) * offset + 'px';
    10             oDiv.innerHTML = 'ghostwu教你用设计模式实战';
    11             return oDiv;
    12         }
    13         oBtn.onclick = function(){
    14             var oDiv = new Module();
    15             document.body.appendChild( oDiv.create() );
    16         }

    四,用单例改造

    html:

    1 <input type="button" value="弹窗1">
    2 <input type="button" value="弹窗2">
     1         var aBtn = document.querySelectorAll("input"),
     2             offset = 20, index = 1;
     3         function Module( pos ){
     4             this.offset = pos || 20;
     5         }
     6         Module.prototype.create = function(){
     7             var oDiv = document.createElement( "div" );
     8             oDiv.style.left = ( ++index ) * offset + 'px';
     9             oDiv.style.top = ( ++index ) * offset + 'px';
    10             oDiv.innerHTML = 'ghostwu教你用设计模式实战';
    11             return oDiv;
    12         }
    13         Module.one = (function(){
    14             var ins = null, isExist = false;
    15             return function( pos ){
    16                 if ( !ins ) ins = new Module( pos );
    17                 if ( !isExist ) {
    18                     document.body.appendChild( ins.create() );
    19                     isExist = true;
    20                 }
    21             }
    22         })();
    23         aBtn[0].onclick = function(){
    24             Module.one( 10 );
    25         }
    26         aBtn[1].onclick = function(){
    27             Module.one( 10 );
    28         }

    在Module.one中通过变量isExist的两种状态和闭包特性控制元素只能被添加一次

     

    展开全文
  • binary Mask 叫做二元掩膜,什么意思呢。因为在图像处理的时候,计算机识别图像是将图像当作一个矩阵,你要把一个遮挡板放在一个图像上进行操作,图像矩阵和另外一个“遮挡板”矩阵进行乘积运算,从而得到你想要的...

    掩膜 mask

    定义

    掩膜,通俗地讲就是一个遮挡板,喷漆,或者雕刻或者喷漆的时候,会用一个特定形状的遮板放在被修改的材料上,按照挡板的形状就可以很贴合地得到最后你想要的图案。掩膜就是这么个东西。

    binary Mask 叫做二元掩膜,什么意思呢。因为在图像处理的时候,计算机识别图像是将图像当作一个矩阵,你要把一个遮挡板放在一个图像上进行操作,图像矩阵和另外一个“遮挡板”矩阵进行乘积运算,从而得到你想要的结果。举例来说:

    图1
    图中可以看出,经过掩膜处理之后,其他的部分都被“掩膜”中的0值过滤掉了,剩余的部分就是想要的部分。
    (一般机器学习矩阵之间都用点乘)

    用法

    • 提取感兴趣区:用预先制作的感兴趣区掩膜与待处理图像相乘,得到感兴趣区图像。感兴趣区内图像值保持不变,而区外图像值都为0;
    • 屏蔽作用:用掩膜对图像上某些区域作屏蔽,使其不参加处理或不参加处理参数的计算,或仅对屏蔽区作处理或统计;
    • 结构特征提取:用相似性变量或图像匹配方法检测和提取图像中与掩膜相似的结构特征;
    • 特殊形状图像的制作。

    细粒度图像分类(fine-grained image classification)

    相比(通用)图像分类,细粒度图像分类需要判断的图像类别更加精细。比如,我们需要判断该目标具体是哪一种鸟、哪一款的车、或哪一个型号的飞机。通常,这些子类之间的差异十分微小。比如,波音737-300和波音737-400的外观可见的区别只是窗户的个数不同。因此,细粒度图像分类是比(通用)图像分类更具有挑战性的任务。

    细粒度图像分类的经典做法是先定位出目标的不同部位,例如鸟的头、脚、翅膀等,之后分别对这些部位提取特征,最后融合这些特征进行分类。这类方法的准确率较高,但这需要对数据集人工标注部位信息。目前细粒度分类的一大研究趋势是不借助额外监督信息,只利用图像标记进行学习,有以下几种方法。

    双线性CNN

    模型:包含两个特征提取器,其输出经过外积相乘,然后池化,最后获得图片描述
    在这里插入图片描述
    在这里插入图片描述

    双线性注意力池化方法(BAP)

    在这里插入图片描述
    在这里插入图片描述
    全局池化:把A×B的矩阵pooling成一个数字。因为每个part feature maps都有N个“A×B的矩阵”,所以全局池化池化并且拼接以后变成了一个N×M的矩阵。

    BN(批量标准化)和IN(实例标准化)

    BN

    Why BN?
    我们知道网络一旦train起来,那么参数就要发生更新,除了输入层的数据外(因为输入层数据,我们已经人为的为每个样本归一化),后面网络每一层的输入数据分布是一直在发生变化的,因为在训练的时候,前面层训练参数的更新将导致后面层输入数据分布的变化。以网络第二层为例:网络的第二层输入,是由第一层的参数和input计算得到的,而第一层的参数在整个训练过程中一直在变化,因此必然会引起后面每一层输入数据分布的改变。我们把网络中间层在训练过程中,数据分布的改变称之为:“Internal Covariate Shift”。BN的提出,就是要解决在训练过程中,中间层数据分布发生改变的情况。

    How BN?
    不仅仅对输入层做标准化处理,还要对每一中间层的输入(激活函数前) 做标准化处理,使得输出服从均值为 0,方差为 1 的正态分布,从而避免内部协变量偏移的问题。之所以称之为 批 标准化:是因为在训练期间,我们仅通过计算 当前层一小批数据 的均值和方差来标准化每一层的输入。在这里插入图片描述
    在这里插入图片描述

    IN

    BN 和 IN 其实本质上是同一个东西,只是 IN 是作用于单张图片(对单个图片的所有像素求均值和标准差),但是 BN 作用于一个 batch(对一个batch里所有的图片的所有像素求均值和标准差)。

    激活函数

    各种激活函数的介绍

    GLU(Gated Liner Unit)
    表达式为:f(X) = (X * W + b) * O(X * V + c)
    组成结构:Relu激活单元:(X * W + b),加上一个Sigmoid激活单元:O(X * V + c),构成的gate unit,就构成了GLU单元。

    Pytorch:autograd及Variable

    Pytorch的Variable相当于一个Wraper,如果你想将数据传送到Pytorch构建的图中,就需要先将数据用Variable进行包装,包装后的Variable有三个attribute:data,creater,grad:(如下图所示)
    在这里插入图片描述
    其中data就是我们被包裹起来的数据,creator是用来记录通过何种计算得到当前的variable,grad则是在进行反向传播的时候用来记录数据的梯度的。

    展开全文
  • 其实上文只是对如何加代码的顺序方法的表述,这里面的代码每个函数是什么意思,要如何理解?需要我们深思。 我们先大框子去理解:我们上文在控制器里只是去HTTPGET了,HTTPget理解其实就是请求。那么我么要保存,要...
  • 在这里说的重复提取商品的时候你们可能不太明白是什么意思,接下来通过一张功能流程图来加深一下本主题的意思: 第一步:点击时间框上的红圈搜索按钮,打开商品浏览的模态窗体; 第二步:在模态窗体的数据表格内...
  • structure dynamic modify

    2021-01-03 12:51:14
    (我没搞懂这个设计与原型是什么意思。) SDM问题:更正模型,使得振动与噪声很小。 动力学方程 MX''+CX'+KX=F,修改M C K。 动力学方程X=H*F,修改频响函数H。 通过修改M C K 后,会得到新模型的模态。可计算...
  • 1. Multimodal Unsupervised Image-to-Image Translation 针对什么问题? 本文指出,在许多场景中,对于交叉领域的映射是...这是什么意思呢? 举个例子,一个冬天的场景可能会有多个状态,天气、时间、光线等因素...
  • MVC新增

    2019-04-18 09:08:42
    增也就新增的意思,新增什么呢?下面我就来看看。 一、弹出新增表单 模态框,代码如下: 图2只是模态框的css样式代码,这代码里我们要用到的就只有那么2个,id就不用说了,上面有个fade,作用...
  • DELPHI 中 mrok的作用

    2020-09-01 14:56:13
    if Form1.showmodal = mrok then 这句话什么意思? 首先,所有的命令按钮(不论是Button还是BitBtn)都有一个属性:ModalResult,该属性可以设置为mrOk、mrCancel…等等,默认值是mrNone(ModalResult是一个整型值,...
  • keras中的 concatenate() 详解

    千次阅读 2020-11-01 21:33:02
    最近看模态融合,用到了 keras 中的 concatenate() 函数,之前没有搞明白其中的 axis 这个参数是什么意思。后来经过一番研究,总算是搞明白了。 先看代码 import numpy as np import keras.backend as K import ...
  • data-toggle与data-target的作用

    万次阅读 多人点赞 2017-06-22 21:51:53
    :因为Bootstrap为这些元素都绑定上了事件,而终止了链接默认行为,你可以看看Bootstrap的文档,data-toggle指以什么事件触发,常用的如modal,popover,tooltips等,data-target指事件的目标,你这段代码的意思就是指...
  • 什么意思呢?先举个例子,在IE中,所有的模态对话框都是不可编辑的状态,即不能对里面的文本进行“复制”。这是你就需要使用到contentEditable属性,将此属性设置为“true”,并把需要对其进行“复制”的文本放至此...
  • 近期在坐一个ipad项目,只支持横屏,所以适配什么的都不用搞,但是问题来了,当我调UIImagepickcontroller的时候报错了,大概意思是说系统默认的时可以旋转屏幕的,而我的应用只支持横屏,所以崩溃了。怎么办?第一...
  • modal verbs(一)

    2017-09-19 22:21:00
    什么是modal verb?翻译成中文就是情态动词。 modal的意思是模式的,情态的,形式的。Bootstrap中的模态框就是这个词modal。 情态动词翻译挺准确的,就是表达说话人的情绪,态度或语气的词,本身就有一定的意义。...
  • 什么是Gralig? grålig的意思是丹麦语中的灰色。 Gralig是一个适度的灰色CSS库。 (您可以通过助手使它变得富有色彩)。 它可以作为您CSS开发的起点。 它提供了一组小模块,包括基于flexbox的网格和暗模式。 没有...
  • 隐居源自“逃逸”,意思是逃避或以熟练的方式逃避。 这就是我们创建隐居游戏时的预期目的! 每当您希望创建一个网站时,您都需要担心CMS /框架,学习它,了解它,然后编写代码并经常对其进行调整! 使用Selude,您...
  • JAVA面试题最全集

    2010-03-13 13:09:10
    87.UNIX中QT是什么意思? 88.在软件开发生命周期中的哪个阶段开始测试? 89.dotnet与J2EE的比较? 90.什么是ActiveX? 91.Java中IDL是什么? 92.ISO9000和CMM是什么?IS09000和CMM(软件能力成熟度模型)认证是国际上...
  • 下面代码的意思就是通过ajax得到我们json数组data1和data2,因为他们两个是有联系的所以用到了for循环写在一起,然后在后面用到了setinterval函数来刷新,但是却不是局部的刷新我的活动列表框&#...
  • PT80-NEAT开发指南v1.1

    2014-06-24 18:38:34
    NEAT 开 发 指南 文档 适用于 PT80 系列 移动数据终端 版本记录 版本号 版本描述 发布日期 V 1.0 初始版本。 2012-04-12 V1.1 修改前三章内容 2012-09-25 目录 第一章 关于本手册.....................................
  • 单,就是一个的意思。例:就是实例化出来的对象,那合在一起就是保证一个构造函数只能new出一个实例,为什么要学习单例模式呢?或者说单例模式有哪些常见的应用场景.它的使用还是很广泛,比如:弹出一个模态框,...

空空如也

空空如也

1 2
收藏数 29
精华内容 11
关键字:

模态什么意思