原文出处小鱼儿主页高手论坛,用户可以通过点

2019-09-23 作者:小鱼儿主页高手论坛   |   浏览(97)

File杂谈——初识file控件

2015/07/23 · HTML5 · file控件

原文出处: 百码山庄   

首先我说明下,这里介绍的file控件指的是网页中的FileUpload对象,也就是我们常见的<input type=”file”> 。如果你不是想寻找这方面的东西,就可以绕道了。

传统 Web 应用中的身份验证技术

2016/12/13 · 基础技术 · WEB, 身份验证

本文作者: 伯乐在线 - ThoughtWorks 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

标题中的 “传统Web应用” 这一说法并没有什么官方定义,只是为了与“现代化Web应用”做比较而自拟的一个概念。所谓“现代化Web应用”指的是那些基于分布式架构思想设计的,面向多个端提供稳定可靠的高可用服务,并且在需要时能够横向扩展的Web应用。相对而言,传统Web应用则主要是直接面向PC用户的Web应用程序,采用单体架构较多,也可能在内部采用SOA的分布式运算技术。

一直以来,传统Web应用为构成互联网发挥了重要作用。因此传统Web应用中的身份验证技术经过几代的发展,已经解决了不少实际问题,并最终沉淀了一些实践模式。

小鱼儿主页高手论坛 1

在讲述多种身份鉴权技术之前,要强调一点:在构建互联网Web应用过程中,无论使用哪种技术,在传输用户名和密码时,请一定要采用安全连接模式。因为无论采用何种鉴权模型,都无法保护用户凭据在传输过程中不被窃取。

一个前端开发工程师的Vim跟IDE一样

2017/01/18 · 基础技术 · vim

原文出处: 小弟调调   

这里是我新配置出来的 jaywcjlove/vim-web 一直在打磨中,基本上可以用了。拿出来骗 star 先上图

小鱼儿主页高手论坛 2

Chrome 控制台不完全指南

2015/01/10 · JavaScript · 1 评论 · Chrome

本文作者: 伯乐在线 - 刘哇勇 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

Chrome的开发者工具已经强大到没朋友的地步了,特别是其功能丰富界面友好的console,使用得当可以有如下功效:

  • 更高「逼格」更快「开发调试」更强「进阶级的Frontender」
  • Bug无处遁形「Console大法好」

功能

当我们需要在网页中实现文件上传功能的时候,file控件就可以大显身手了。HTML文档中每添加一个 <input type=”file”> ,实际就是创建了一个FileUpload实例对象。用户可以通过点击file控件选择本地文件,当我们提交包含该file控件的表单时,浏览器会向服务器发送用户选中的本地文件。从而将本地文件传输到服务器,供其他网络用户下载或使用,实现文件上传功能。

Basic和Digest鉴权

基于HTTP的Web应用离不开HTTP本身的安全特性中关于身份鉴权的部分。虽然HTTP标准定义了好几种鉴权方式,但真正供Web应用开发者选择的并不多,这里简要回顾一下曾经被广泛运用过的Basic 和 Digest鉴权。

不知道读者是否熟悉一种最直接向服务器提供身份的方式,即在URL中直接写上用户名和密码:

1
2
http://user:passwd@www.server.com/index.html
 

这就是Basic鉴权的一种形式。

Basic和Digest是通过在HTTP请求中直接包含用户名和密码,或者它们的哈希值来向服务器传输用户凭据的方法。Basic鉴权直接在每个请求的头部或URL中包含明文的用户名或密码,或者经过Base64编码过的用户名或密码;而Digest则会使用服务器返回的随机值,对用户名和密码拼装后,使用多次MD5哈希处理后再向服务器传输。服务器在处理每个请求之前,读取收到的凭据,并鉴定用户的身份。

小鱼儿主页高手论坛 3

Basic和Digest鉴权有一系列的缺陷。它们需要在每个请求中提供凭据,因此提供“记住登录状态”功能的网站中,不得不将用户凭据缓存在浏览器中,增加了用户的安全风险。Basic鉴权基本不对用户名和密码等敏感信息进行预处理,所以只适合于较安全的安全环境,如通过HTTPS安全连接传输,或者局域网。

看起来更安全的Digest在非安全连接传输过程中,也无法抵御中间人通过篡改响应来要求客户端降级为Basic鉴权的攻击。Digest鉴权还有一个缺陷:由于在服务器端需要核对收到的、由客户端经过多次MD5哈希值的合法性,需要使用原始密码做相同的运算,这让服务器无法在存储密码之前对其进行不可逆的加密。Basic 和Digest鉴权的缺陷决定了它们不可能在互联网Web应用中被大量采用。

安装

最新版本的Vim 7.4 使用(brew install macvim)安装,vim 版本更新 brew install macvim --override-system-vim

Shell

$ git clone ~/.vim $ ln -s ~/.vim/.vimrc ~/.vimrc # 上面执行完成之后 # 开始下载安装插件 $ vim # 在vim中运行 ":PlugInstall" # 上面插件安装完成之后执行下面内容 # command-t 文件搜索插件安装 $ cd ~/.vim/plugged/command-t $ rake make # 搜索文本内容工具 # 需要安装 CtrlSF的依赖ripgrep $ brew install ripgrep # 代码提示插件也需要你运行安装哦,不然没有效果嘞 cd ~/.vim/plugged/YouCompleteMe ./install.sh # 需要安装ctags 不然配置没效果哦 # ctags for Mac $ brew install ctags # ctags for Centos7 $ yum install ctags

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$ git clone https://github.com/jaywcjlove/vim-web.git ~/.vim
$ ln -s ~/.vim/.vimrc ~/.vimrc
 
# 上面执行完成之后
# 开始下载安装插件
$ vim # 在vim中运行 ":PlugInstall"
 
# 上面插件安装完成之后执行下面内容
# command-t 文件搜索插件安装
$ cd ~/.vim/plugged/command-t
$ rake make
 
# 搜索文本内容工具
# 需要安装 CtrlSF的依赖ripgrep
$ brew install ripgrep
 
# 代码提示插件也需要你运行安装哦,不然没有效果嘞
cd ~/.vim/plugged/YouCompleteMe
./install.sh
 
# 需要安装ctags 不然配置没效果哦
# ctags for Mac
$ brew install ctags
# ctags for Centos7
$ yum install ctags

注: 默认已经安装了前端必备插件。.vimrc 是控制 vim 行为的配置文件,位于 ~/.vimrc,不论 vim 窗口外观、显示字体,还是操作方式、快捷键、插件属性均可通过编辑该配置文件将 vim 调教成最适合你的编辑器。

console.log

大家都会用log,但鲜有人很好地利用console.error , console.warn 等将输出到控制台的信息进行分类整理。
他们功能区别不大,意义在于将输出到控制台的信息进行归类,或者说让它们更语义化。
各个所代表的语义如下:

  • console.log:普通信息
  • console.info:提示类信息
  • console.error:错误信息
  • console.warn:警示信息

当合理使用上述log方法后,可以很方便地在控制台选择查看特定类型的信息。

JavaScript

console.log('一颗红心向太阳','吼吼~'); console.info('楼上药不能停!'); console.warn('楼上嘴太贱!'); console.error('楼上关你毛事?');

1
2
3
4
console.log('一颗红心向太阳','吼吼~');
console.info('楼上药不能停!');
console.warn('楼上嘴太贱!');
console.error('楼上关你毛事?');

小鱼儿主页高手论坛 4

如果再配合console.group 与console.groupEnd,可以将这种分类管理的思想发挥到极致。这适合于在开发一个规模很大模块很多很复杂的Web APP时,将各自的log信息分组到以各自命名空间为名称的组里面。

JavaScript

console.group("app.foo"); console.log("来自foo模块的信息 blah blah blah..."); console.groupEnd(); console.group("app.bar"); console.log("来自bar模块的信息 blah blah blah..."); console.groupEnd();

1
2
3
4
5
6
console.group("app.foo");
console.log("来自foo模块的信息 blah blah blah...");
console.groupEnd();
console.group("app.bar");
console.log("来自bar模块的信息 blah blah blah...");
console.groupEnd();

小鱼儿主页高手论坛 5

而关于console.log,早已被玩儿坏了。一切都源于Chrome提供了这么一个API:第一个参数可以包含一些格式化的指令比如%c

比如给hello world 做件漂亮的嫁衣再拉出来见人:

JavaScript

console.log('%chello world','font-size:25px;color:red;');

1
console.log('%chello world','font-size:25px;color:red;');

小鱼儿主页高手论坛 6

如果你觉得不够过瘾,那就把你能写出来的最华丽的CSS样式都应用上吧,比如渐变。于是你可以得到如下华丽丽的效果:

JavaScript

console.log('%chello world', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');

1
console.log('%chello world', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');

小鱼儿主页高手论坛 7

各种招大招的节奏啊~

看着上面密集的代码不用惊慌,上面console.log()第二个参数全是纯CSS用来控制样式的,你不会陌生。而第一个参数里可以带用百分号开头的转义指令,如上面输出带样式的文字时使用的%c指令。更详细的指令参见官方API文档的这个表格。

如果还不够过瘾,那咱们来log一些图片吧,甚至。。。动图?
对,你得先有图,我们拿这张图为例。

JavaScript

console.log("%c", "padding:50px 300px;line-height:120px;backgroundnull:url('') no-repeat;");

1
console.log("%c", "padding:50px 300px;line-height:120px;backgroundnull:url('http://wayou.github.io/2014/09/10/chrome-console-tips-and-tricks/rabbit.gif') no-repeat;");

小鱼儿主页高手论坛 8

看着上面摇摆的豆比兔是不是有种抽它一脸的冲动。

除此,console.table 更是直接以表格的形式将数据输出,不能赞得太多!
借用之前写过的一篇博文里的例子:

JavaScript

var data = [{'品名': '杜雷斯', '数量': 4}, {'品名': '冈本', '数量': 3}]; console.table(data);

1
2
var data = [{'品名': '杜雷斯', '数量': 4}, {'品名': '冈本', '数量': 3}];
console.table(data);

小鱼儿主页高手论坛 9

另外,console.log() 接收不定参数,参数间用逗号分隔,最终会输出会将它们以空白字符连接。

JavaScript

console.log('%c你好','color:red;','小明','你知道小红被妈妈打了么');

1
console.log('%c你好','color:red;','小明','你知道小红被妈妈打了么');

小鱼儿主页高手论坛 10

美中不足

无可厚非,file控件很强大,给网页上传文件带来了极大的便利。但是,它并非完美!

首先,从控件本身而言,我们可以通过value属性获取到用户选择的文件名称,但出于安全性等因素考虑,该属性无法指定默认值,并且该属性为只读属性。

其次,恐怕也是file控件令很多开发者头疼的地方。file控件在各个主流浏览器之间的表现大有差异,给用户带来的视觉感受大相径庭,而且几乎不可能通过直接修改样式来达到统一,下面我用一张图来更清晰的告诉大家:

小鱼儿主页高手论坛 11

一目了然了吧?更可恶的是“选择文件”、“Browse…”、“浏览…”三处文字均无法更改!!然而,这仅仅是视觉上的差异,不同浏览器下file控件的行为也存在一些差异:

  • A1、A2、A3、A4、A6,五处我们均可以单击触发文件选择
  • A5 处我们却需要双击才能触发文件选择

总之,file控件从默认视觉效果和交互体验方面来讲,是开发人员和普通用户都很难接受的。

简单实用的登录技术

对于互联网Web应用来说,不采用Basic或Digest鉴权的理由主要有两个:

  1. 不能接受在每个请求中发送用户名和密码凭据
  2. 需要在服务器端对密码进行不可逆的加密

因此,互联网Web应用开发已经形成了一个基本的实践模式,能够在服务端对密码强加密之后存储,并且尽量减少鉴权过程中对凭据的传输。其过程如下图所示:

小鱼儿主页高手论坛 12

这一过程的原理很简单,专门发送一个鉴权请求,只在这个请求头中包含原始用户名和密码凭据,经服务器验证合法之后,由服务器发给一个会话标识(Session ID),客户端将会话标识存储在 Cookie 中,服务器记录会话标识与经过验证的用户的对应关系;后续客户端使用会话标识、而不是原始凭据去与服务器交互,服务器读取到会话标识后从自身的会话存储中读取已在第一个鉴权请求中验证过的用户身份。为了保护用户的原始凭据在传输中的安全,只需要为第一个鉴权请求构建安全连接支持。

服务端的代码包含首次鉴权和后续检查并授权访问的过程:

IUser _user_; if( validateLogin( nameFromReq, pwdFromReq, out _user _)){ Session["CurrentUser"] = _user_; }

1
2
3
4
5
IUser _user_;  
if( validateLogin( nameFromReq, pwdFromReq, out _user _)){  
  Session["CurrentUser"] = _user_;  
}
 

(首次鉴权)

IUser _user_ = Session["CurrentUser"] as IUser; if( _user_ == null ){ Response.Redirect( "/login?return_uri=" Request.Url.ToString() ); return; }

1
2
3
4
5
6
7
IUser _user_ = Session["CurrentUser"] as IUser;  
if( _user_ == null ){  
     Response.Redirect( "/login?return_uri="
     Request.Url.ToString() );  
     return;  
}
 

(后续检查并拒绝未识别的用户)

类似这样的技术简易方便,容易操作,因此大量被运用于很多互联网Web应用中。它在客户端和传输凭据过程中几乎没有做特殊处理,所以在这两个环节尤其要注意对用户凭据的保护。不过,随着我们对系统的要求越来越复杂,这样简易的实现方式也有一些明显的不足。比如,如果不加以封装,很容易出现在服务器应用程序代码中出现大量对用户身份的重复检查、错误的重定向等;不过最明显的问题可能是对服务器会话存储的依赖,服务器程序的会话存储往往在服务器程序重启之后丢失,因此可能会导致用户突然被登出的情况。虽然可以引入单独的会话存储程序来避免这类问题,但引入一个新的中间件就会增加系统的复杂性。

查看配置位置

Shell

# 进入vim输入下面字符 :echo $MYVIMRC

1
2
# 进入vim输入下面字符
:echo $MYVIMRC

console.assert

当你想代码满足某些条件时才输出信息到控制台,那么你大可不必写if或者三元表达式来达到目的,cosole.assert便是这样场景下一种很好的工具,它会先对传入的表达式进行断言,只有表达式为假时才输出相应信息到控制台。

JavaScript

var isDebug=false; console.assert(isDebug,'开发中的log信息。。。');

1
2
var isDebug=false;
console.assert(isDebug,'开发中的log信息。。。');

小鱼儿主页高手论坛 13

道高一尺,魔高一丈

既然默认的东西我们都不能接受,那么不能接受的东西我们就要去改变它。

经过无数开发者的不断实践证明,我们不能通过改变宽度,高度,来控制file控件中按钮的尺寸,但是我们可以通过设置file控件的字体大小(font-size)来改变这个按钮的尺寸,更令人可观的是主流浏览器对改变font-size的表现是一致的。

那么,聪明的开发者们就有了应对之策了。

首先,我们从前面表现差异描述中可以发现A2、A4、A6,三处均可单击触发文件选择文件,并且这三处还有一个共同点——它们均处于控件右侧,那么我们就可以改变控件字体大小,让右侧这一部分足够大,并且只让用户看见这一区域(或部分),并且只让用户操作该区域,那么A5处交互效果不一致的问题就可以解决了。为了达到这个目的,我们可以在file控件外面包裹一层容器,并设置尺寸,通过定位将file控件右边区域显示到目标区域,并为容器设置溢出隐藏( overflow: hidden )。我还是用代码来说明吧:

XHTML

<style> .file-group { position: relative; width: 200px; height: 80px; border: 1px solid #ccc; /* 为了显示可见区域,非必须 */ overflow: hidden; } .file-group input { position: absolute; right: 0; top: 0; font-size: 300px; } </style> <div class="file-group"> <input type="file" name="" id="J_File"> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
    .file-group {
        position: relative;
        width: 200px;
        height: 80px;
        border: 1px solid #ccc; /* 为了显示可见区域,非必须 */
        overflow: hidden;
    }
    .file-group input {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 300px;
    }
</style>
<div class="file-group">
    <input type="file" name="" id="J_File">
</div>

在浏览器中查看上面代码的效果,显然Chrome、Firefox、IE下显示效果明显太不一样了(其实文字被放大挤出可见区域了,几乎啥都看不到),那么怎么应对呢?所谓“道高一尺,魔高一丈”,这里简单的原理就是让file控件处于较高的层(z-index),并且设置透明(opacity,低版本IE用filter),让后面的元素来设置样式,以此达到视觉风格统一。说得不是很明白,还是直接上代码吧:

XHTML

<style> .file-group { position: relative; width: 200px; height: 80px; border: 1px solid #ccc; /* 为了显示可见区域,非必须 */ overflow: hidden; cursor: pointer; line-height: 80px; font-size: 16px; text-align: center; color: #fff; background-color: #f50; border-radius: 4px; } .file-group input { position: absolute; right: 0; top: 0; font-size: 300px; opacity: 0; filter: alpha(opacity=0); cursor: pointer; } .file-group:hover { background-color: #f60; } </style> <div class="file-group"> <input type="file" name="" id="J_File"> 选择文件 </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<style>
    .file-group {
        position: relative;
        width: 200px;
        height: 80px;
        border: 1px solid #ccc; /* 为了显示可见区域,非必须 */
        overflow: hidden;
        cursor: pointer;
        line-height: 80px;
        font-size: 16px;
        text-align: center;
        color: #fff;
        background-color: #f50;
        border-radius: 4px;
    }
    .file-group input {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 300px;
        opacity: 0;
        filter: alpha(opacity=0);
        cursor: pointer;
    }
    .file-group:hover {
        background-color: #f60;
    }
</style>
<div class="file-group">
    <input type="file" name="" id="J_File">
    选择文件
</div>

最后我们再看下各浏览器表现一致的最终显示效果及交互体验:

小鱼儿主页高手论坛 14

OK,到这里我们算是对file控件有个简单的认识了,后面我还会提供更多file控件或根据file控件延伸出去的相关资料,有兴趣的朋友可以持续关注。

1 赞 3 收藏 评论

小鱼儿主页高手论坛 15

传统Web应用中身份验证最佳实践

上文提到的简单实用的登录技术已经可以帮助建立对用户身份验证的基本图景,在一些简单的应用场景中已经足够满足需求了。然而,用户鉴权就是有那种“你可以有很多种方法,就是不怎么优雅” 的问题。

最佳实践指的是那些经过了大量验证、被证明有用的方法。而用户鉴权的最佳实践就是使用自包含的、含有加密内容的 Cookie 作为替代凭据。其鉴权过程与上文所提到基于会话标识的技术没有什么区别,而主要区别在于不再颁发会话标识,取而代之的是一个代表身份的、经过加密的 “身份 Cookie”。

小鱼儿主页高手论坛 16

  1. 只在鉴权请求中发送一次用户名和密码凭据
  2. 成功凭据之后,由服务器生成代表用户身份的 Cookie,发送给客户端
  3. 客户端在后续请求中携带上一步中收到的 “身份 Cookie”
  4. 服务器解密”身份 Cookie”,并对需要访问的资源予以授权

这样,我们消除了对服务器会话存储的依赖,Cookie本身就有有效期的概念,因此顺便能够轻松提供“记住登录状态”的功能。

另外,由于解密Cookie、既而检查用户身份的操作相对繁琐,工程师不得不考虑对其抽取专门的服务,最终采用了面向切面的模式对身份验证的过程进行了封装,而开发时只需要使用一些特性标注(Attribute Annotation)对特定资源予以标记,即可轻松完成身份验证预处理。

插件管理

这里面刚开始使用的Vim插件管理工具VundleVim/Vundle.vim,后面为了大家安装方便,使用了 junegunn/vim-plug,这个插件管理工具,俺十分不喜欢,多了个 autoload 目录,安装过程也奇丑无比,安装快速,所以就使用它吧,下面命令更新安装的 plug.vim,默认已经有了不需要这一步。

Shell

curl -fLo ~/.vim/autoload/plug.vim --create-dirs

1
2
curl -fLo ~/.vim/autoload/plug.vim --create-dirs
    https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim

console.count

除了条件输出的场景,还有常见的场景是计数。
当你想统计某段代码执行了多少次时也大可不必自己去写相关逻辑,内置的console.count可以很地胜任这样的任务。

JavaScript

function foo(){ //其他函数逻辑blah blah。。。 console.count('foo 被执行的次数:'); } foo(); foo(); foo();

1
2
3
4
5
6
7
function foo(){
//其他函数逻辑blah blah。。。
console.count('foo 被执行的次数:');
}
foo();
foo();
foo();

小鱼儿主页高手论坛 17

传统Web应用中的单点登录

单点登录的需求在向用户提供多种服务的企业普遍存在,出发点是希望用户在一个站点中登录之后,在其他兄弟站点中就不需要再次登录。

如果多个子站所在的顶级域名一致,基于上文所述的实践,可以基于Cookie共享实现最简单的单点登录:在多个子站中使用相同的加密、解密配置,并且在用户登录成功后设置身份 Cookie时将domain值设置为顶级域名即可。这样,只要在其中一个网站登录,其身份 Cookie将在用户访问其他子站时也一起带上。不过实际情况中,这个方案的应用场景很有限,毕竟各个子站使用的用户数据模型可能不完全一致,而加密密钥多处共享也增加了服务器应用程序的安全风险。另外,这种方式与“在多个网站中分别存储相同的用户名与密码”的做法相似,可以说是一种“相同的登录”(Same Sign-On),而不是“单点登录”(Single Sign-On)。

对于单点登录需求来说,域名相同与否并不是最大的挑战,集成登录系统对各个子站点的系统在设计上的影响才是。我们希望便利用户的同时,也期待各个子系统仍拥有独立用户身份、独立管理和运维的灵活性。因此我们引入独立的鉴权子站点。

小鱼儿主页高手论坛 18

当用户到达业务站点A时,被重定向到鉴权站点;登录成功之后,用户被重定向回到业务站点 A、同时附加一个指示“已有用户登录”的令牌串——此时业务站点A使用令牌串,在服务器端从鉴权子站点查询并记录当前已登录的用户。当用户到达业务站点B时,执行相同流程。由于已有用户登录,所以用户登录的过程会被自动省略。

这样的单点登录系统能够较好地解决在多个站点中共享用户登录状态的需求。不过,如果在编程实践过程中略有差池,就会让用户陷入巨大的安全风险中。例如,在上述重定向过程中,一旦鉴权系统未能验证返回URL的合法性,就容易导致用户被钓鱼网站利用。在传统Web应用开发实践中,被广泛部署的身份验证体系是比较重量级的WS-Federation 和 SMAL 等鉴权协议和相对轻量级的 OpenID 等技术。

安装插件

将配置信息其加入 ~/.vim/.vimrc 中的call plug#begin()call plug#end() 之间,最后进入 vim 输入下面命令,摁 enter 进行安装。

Shell

:PlugInstall

1
:PlugInstall

console.dir

将DOM结点以JavaScript对象的形式输出到控制台
console.log是直接将该DOM结点以DOM树的结构进行输出,与在元素审查时看到的结构是一致的。不同的展现形式,同样的优雅,各种体位任君选择反正就是方便与体贴。

JavaScript

console.dir(document.body); console.log(document.body);

1
2
console.dir(document.body);
console.log(document.body);

小鱼儿主页高手论坛 19

总结

本文简要总结了在传统Web应用中,被广泛使用的几种典型用户登录时的鉴权处理流程。总体来说,在单体 Web 应用中,身份验证过程并不复杂,只要稍加管理,可以较轻松地解决用户鉴权的问题。但在传统 Web 应用中,为了解决单点登录的需求,人们也尝试了多种方式,最终仍然只有使用一些较复杂的方案才能较好地解决问题。

在现代化 Web 应用中,围绕登录这一需求,俨然已经衍生出了一个新的工程。“登录工程” 并不简单,在后续篇目中将会介绍现代化 Web 应用的典型需求及解决方法。

1 赞 4 收藏 评论

更新插件

插件更新频率较高,差不多每隔一个月你应该看看哪些插件有推出新版本,批量更新,只需在 vim 中执行下面命令即可。

Vim

:PlugUpdate

1
:PlugUpdate

console.time & console.timeEnd

输出一些调试信息是控制台最常用的功能,当然,它的功能远不止于此。当做一些性能测试时,同样可以在这里很方便地进行。
比如需要考量一段代码执行的耗时情况时,可以用console.time与 console.timeEnd来做此事。

这里借用官方文档的例子:

JavaScript

console.time("Array initialize"); var array= new Array(1000000); for (var i = array.length - 1; i >= 0; i--) { array[i] = new Object(); }; console.timeEnd("Array initialize");

1
2
3
4
5
6
console.time("Array initialize");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
    array[i] = new Object();
};
console.timeEnd("Array initialize");

小鱼儿主页高手论坛 20

当然,我们也可以选择自己写代码来计时:

JavaScript

var start=new Date().getTime(); var array= new Array(1000000); for (var i = array.length - 1; i >= 0; i--) { array[i] = new Object(); }; console.log(new Date().getTime()-start);

1
2
3
4
5
6
var start=new Date().getTime();
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
    array[i] = new Object();
};
console.log(new Date().getTime()-start);

小鱼儿主页高手论坛 21

相信你也看到了,用内置的console.time是多么地方便,省去了自己写代码来计算的工作量。另外值得一提的是,通过调用内置的console.time得到的结果要比自己手动计算的时间差更精确可靠。

关于作者:ThoughtWorks

小鱼儿主页高手论坛 22

ThoughtWorks是一家全球IT咨询公司,追求卓越软件质量,致力于科技驱动商业变革。擅长构建定制化软件产品,帮助客户快速将概念转化为价值。同时为客户提供用户体验设计、技术战略咨询、组织转型等咨询服务。 个人主页 · 我的文章 · 84 ·   

小鱼儿主页高手论坛 23

卸载插件

先在 .vimrc 中注释或者删除对应插件配置信息,然后在 vim 中执行下面命令,即可删除对应插件。

Vim

:PlugClean

1
:PlugClean

console.profile & console.timeLime

当想要查看CPU使用相关的信息时,可以使用console.profile配合 console.profileEnd来完成这个需求。
这一功能可以通过UI界面来完成,Chrome 开发者工具里面有个tab便是Profile

与此类似的功能还有console.timeLine配合 console.timeLineEnd,它的作用是开始记录一段时间轴,同样可以通过Chrome开发者工具里的Timeline 标签来进行相应操作。

所以在我看来这两个方法有点鸡肋,因为都可以通过操作界面来完成。但至少他提供了一种命令行方式的交互,还是多了种姿势供选择吧。

启动Vim

Shell

$ vim

1
$ vim

console.trace

堆栈跟踪相关的调试可以使用console.trace。这个同样可以通过UI界面完成。当代码被打断点后,可以在Call Stack面板中查看相关堆栈信息。

上面介绍的都是挂在window.console这个对象下面的方法,统称为Console API,接下来的这些方法确切地说应该叫命令,是Chrome内置提供,在控制台中使用的,他们统称为Command Line API。

常用快捷键

这里的快捷键是我配置好的可用的。

Vim

;fl # 换出菜单列表 nw # 窗口切换 ;lw # 跳转至右方的窗口 ;hw # 跳转至左方的窗口 ;kw # 跳转至上方的子窗口 ;jw # 跳转至下方的子窗口 # 可以直接在Tab之间切换。 gt # 后一个Tab标签 gT # 前一个Tab标签 ;q # 关闭一个标签 ctrl-f # 下一页 f 就是`forword` ctrl-b # 上一页 b 就是`backward` ;t # 通过搜索文件打开文件 # 快速文本内定位 ;;b # 光标前代码定位 ;;e # 光标后代码定位 ;;f # 光标后代码定位 <搜索自负> 出现定位信息 ;;F # 光标前代码定位 <搜索自负> 出现定位信息 ;ilt # 设置显示/隐藏标签列表子窗口(函数列表)的快捷键。速记:identifier list by tag 0 # 行首 $ # 行尾 :r ~/git/R.js # 将文件内容导入到该文件中 :!which ls # 找命令不推出vim运行命令 :!date # 查看编辑时间 :r !date # 将当前编辑时间导入当前文本光标所在行 U # 选中 - 变大写 u # 选中 - 变小写 ~ # 选中 - 变大写变小写,小写变大写 ;cc # 代码注释"//" ;cm # 代码段落注释"/**/" ;ci # 注释相反,注释的取消注释,没注释的注释 ;cs # 段落注释,注释每行前面加"*" ;c$ # 光标开始到行结束的位置注释 ;cA # 在行尾部添加注释符"//" ;cu # 取消代码注释 za # 单个代码折叠 zM # 折叠左右代码 zR # 所有代码折叠取消 ;i # 开/关缩进可视化 > # 代码锁进 - 选中摁尖括号 < # 代码锁进 - 选中摁尖括号 :1,24s/header/www/g # 第1到24行将header替换成www <c-z> # 退出Vim

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
;fl # 换出菜单列表
nw  # 窗口切换
;lw # 跳转至右方的窗口
;hw # 跳转至左方的窗口
;kw # 跳转至上方的子窗口
;jw # 跳转至下方的子窗口
 
 
# 可以直接在Tab之间切换。
gt # 后一个Tab标签
gT # 前一个Tab标签
;q # 关闭一个标签
 
ctrl-f # 下一页 f 就是`forword`
ctrl-b # 上一页 b 就是`backward`  
 
;t # 通过搜索文件打开文件
 
# 快速文本内定位
;;b # 光标前代码定位
;;e # 光标后代码定位
;;f # 光标后代码定位 <搜索自负> 出现定位信息
;;F # 光标前代码定位 <搜索自负> 出现定位信息
 
;ilt # 设置显示/隐藏标签列表子窗口(函数列表)的快捷键。速记:identifier list by tag
 
0   # 行首
$   # 行尾
 
:r ~/git/R.js # 将文件内容导入到该文件中
:!which ls  # 找命令不推出vim运行命令
:!date      # 查看编辑时间
:r !date    # 将当前编辑时间导入当前文本光标所在行
 
U # 选中 - 变大写
u # 选中 - 变小写
~ # 选中 - 变大写变小写,小写变大写
 
;cc # 代码注释"//"
;cm # 代码段落注释"/**/"
;ci # 注释相反,注释的取消注释,没注释的注释
;cs # 段落注释,注释每行前面加"*"
;c$ # 光标开始到行结束的位置注释
;cA # 在行尾部添加注释符"//"
;cu # 取消代码注释
 
za # 单个代码折叠
zM # 折叠左右代码
zR # 所有代码折叠取消
 
;i  # 开/关缩进可视化
>   # 代码锁进 - 选中摁尖括号
<   # 代码锁进 - 选中摁尖括号
 
:1,24s/header/www/g  # 第1到24行将header替换成www
 
<c-z>  # 退出Vim

$

似乎美刀总是被程序员及各种编程语言所青睐「你看看PHP代码就知道PHPer有多爱钱了」,在Chrome的控制台里,$用处还真是蛮多且方便的。
$_命令返回最近一次表达式执行的结果,功能跟按向上的方向键再回车是一样的,但它可以做为一个变量使用在你接下来的表达式中:

JavaScript

2 2//回车,再 $_ 1//回车得5

1
2
2 2//回车,再
$_ 1//回车得5

小鱼儿主页高手论坛 24

上面的$_需要领悟其奥义才能使用得当,而$0~$4则代表了最近5个你选择过的DOM节点。
什么意思?在页面右击选择审查元素,然后在弹出来的DOM结点树上面随便点选,这些被点过的节点会被记录下来,而$0会返回最近一次点选的DOM结点,以此类推,$1返回的是上上次点选的DOM节点,最多保存了5个,如果不够5个,则返回undefined
小鱼儿主页高手论坛 25

另外值得一赞的是,Chrome 控制台中原生支持类jQuery的选择器,也就是说你可以用$加上熟悉的css选择器来选择DOM节点,多么滴熟悉。

JavaScript

$('body')

1
$('body')

小鱼儿主页高手论坛 26

$(selector)返回的是满足选择条件的首个DOM元素。
剥去她伪善的外衣,其实$(selector)是原生JavaScript document.querySelector() 的封装。
同时另一个命令$$(selector)返回的是所有满足选择条件的元素的一个集合,是对document.querySelectorAll() 的封装。

JavaScript

$$('div')

1
$$('div')

小鱼儿主页高手论坛 27

基础使用

  • inoremap (Insert Mode)就只在插入(insert)模式下生效
  • vnoremap (Visual Mode)只在visual模式下生效
  • nnoremap (Normal Mode)就在normal模式下(狂按esc后的模式)生效
  • 快捷键<c-y>, 标示(Ctrly,)

copy

通过此命令可以将在控制台获取到的内容复制到剪贴板。

JavaScript

copy(document.body)

1
copy(document.body)

然后你就可以到处粘了:

小鱼儿主页高手论坛 28

看完此条命令行,机智的你是不是跟脑洞全开的我一样,冒出了这样一个想法:那就是通过这个命令可以在JavaScript里进行复制操作从而不用依赖Flash插件了。
But现实是残酷的,如之前所述的,这里的控制台命令只能在控制台中环境中执行,因为他不依附于任何全局变量比如window,所以其实在JS代码里是访问不了这个copy方法的,所以从代码层面来调用复制功能也就无从谈起。但愿有天浏览器会提供相应的JS实现吧~

快捷键通配符

快捷键通配符 <leader> 相当于是一个通用的命令符,默认好像是,你可以在.vimrc中将他改为任意一个按键,在我们这个配置我改为了冒号;

Vim

" 定义快捷键的前缀,即 <Leader> let mapleader=";"

1
2
" 定义快捷键的前缀,即 <Leader>
let mapleader=";"

keys & values

这是一对基友。前者返回传入对象所有属性名组成的数据,后者返回所有属性值组成的数组。具体请看下面的例子:

JavaScript

var tboy={name:'wayou',gender:'unknown',hobby:'opposite to the gender'}; keys(tboy); values(tboy);

1
2
3
var tboy={name:'wayou',gender:'unknown',hobby:'opposite to the gender'};
keys(tboy);
values(tboy);

小鱼儿主页高手论坛 29

本文由小鱼儿玄机30码发布于小鱼儿主页高手论坛,转载请注明出处:原文出处小鱼儿主页高手论坛,用户可以通过点

关键词: 小鱼儿玄机30码