BS表单元素的排版,深入理解javascript原型和闭包

首先看看这行代码:

前面提到的上下文环境和作用域的知识,除了了解这些知识之外,还是理解闭包的基础。

(此文章同时发表在本人微信公众号“dotNET每日精华文章”,欢迎右边二维码来关注。)

<label for='account'>帐 号</label>  <input id='account' name='account' type='text' value='' placeholder='请输入手机号/邮箱' />  <p class='help-block'>请输入您注册时的手机/邮箱</p>        <label for='password'>密 码</label>  <input id='password' name='account' type='password' value='' placeholder='请输入账号密码' />  <p class='help-block'>请输入帐号密码</p>        <button type='button' class='btn btn-primary'>登 录</button>

至于“闭包”这个词的概念的文字描述,确实不好解释,我看过很多遍,但是现在还是记不住。

题记:Bootstrap作为一款超级流行的前端框架,已经成为很多人的首选,不过有时未免有点审美疲劳。那么可以试试Metro
UI CSS,一个Windows
8风格的前端框架,和Bootstrap类似,功能也更多。

如图效果:

但是你只需要知道应用的两种情况即可——函数作为返回值,函数作为参数传递。

Bootstrap虽然很流行,扩展也很多,但是如果你希望实现Windows
8的Metro风格的话,除了去寻找一个Bootstrap的主题外,还可以直接使用Metro
UI CSS这套前端框架。

图片 1

第一,函数作为返回值

它具备通用的风格、网格布局系统、印刷排版、超过20个组件(相对于Bootstrap的同样组件功能更强大),超过300个内置图标。也有一些比较有特色的功能,比如内置Tile和Notify。还兼容AngularJS。

为了使之在同一行上,我们需要改进一下代码

图片 2

当然,虽说和Bootstrap类似,但还是有不兼容的地方,比如网格系统的class名称就有些不一致,使用“grid”而非“container”来作为容器,使用“cell”而非“col-*-*”来作为栅格。

<form class='form-horizontal'>      <fieldset>          <legend>用户登录</legend>          <div class='control-group'>              <label class='control-label' for='account'>帐 号</label>              <div class='controls'>                  <input id='account' name='account' type='text' value='' placeholder='请输入手机号/邮箱' />                  <p class='help-block'>请输入您注册时的手机/邮箱</p>              </div>          </div>                            <div class='control-group'>              <label class='control-label' for='password'>密 码</label>              <div class='controls'>                  <input id='password' name='account' type='password' value='' placeholder='请输入账号密码' />                  <p class='help-block'>请输入帐号密码</p>              </div>          </div>      </fieldset>      <div class='form-actions'>         <button type='submit' class='btn btn-primary'>登 录</button>      </div>  </form>

如上代码,bar函数作为返回值,赋值给f1变量。执行f1(15)时,用到了fn作用域下的max变量的值。至于如何跨作用域取值,可以参考上一节。

它用LESS编写,同样是开源的,使用MIT许可协议,GitHub上的Fork数和Star数都不错(当然和Bootstrap是没法比,但是也不算少),更新频率还保持的很好。

说明:

 

安装也非常方便,可直接下载、可通过bower安装(VS
2015推荐这种方式)、可Nuget安装(VS 2013推荐这种方式)。

  legend标签:定义表单描述,且下方会有灰色的线

第二,函数作为参数被传递

“阅读原文”可访问GitHub项目地址,其中可以找到演示和文档页面的地址。

  .form-actions: 灰色背景和适当的边距

图片 3

原文地址:

  .controls:包围住表单元素

如上代码中,fn函数作为一个参数被传递进入另一个函数,赋值给f参数。执行f(15)时,max变量的取值是10,而不是100。


  .control-label:如果要使“密码”文字和文本框在同一线上,需要给“密码”外围的lable添加.control-label类,同时需要给文本框和提示文字外围包围一个类为.cnotrols的div

 

效果如图:

上一节讲到自由变量跨作用域取值时,曾经强调过:要去创建这个函数的作用域取值,而不是“父作用域”。理解了这一点,以上两端代码中,自由变量如何取值应该比较简单。(不明白的朋友一定要去上一节看看,这个很重要!)

图片 4

 

 

另外,讲到闭包,除了结合着作用域之外,还需要结合着执行上下文栈来说一下。


在前面讲执行上下文栈时(

但是在当时那篇文章中留了一个问号——有些情况下,函数调用完成之后,其执行上下文环境不会接着被销毁。这就是需要理解闭包的核心内容。

咱们可以拿本文的第一段代码(稍作修改)来分析一下。

发表评论

电子邮件地址不会被公开。 必填项已用*标注