分类 web前端下的文章

是的,我们已经实现了这个功能,之前在做一些js开发的时候可能会使用js的alert弹出框来获取一些有意义的数据来调试自己的程序.在IE9中,我们添加实现了Console这个对象,使用visual studio开发asp.net程序的开发人员可能清楚就是我们能够在代码中添加一些条数对象,这样就能够在输出窗口显示这些调试的数据了.而现在的这个Console对象也是同样的功能.

可能你早就发现了在ie8和ie9中的开发人员工具,如何没有,那就赶快打开你的浏览器,然后猛击F12.然后就会打开开发人员工具窗口,然后选中Console tab窗口.

现在在控制台中输入console.log("Hello,world"),然后就会在下面输出下面的内容:

console.log将会在控制台窗口显示传递给他的参数,可以使用这个方法来显示一个字符串或者一个变量.同样你可以在你的代码中使用console类,就像我们使用Javascript alert一样.

有一点需要注意的就是控制台输出只有在打开开发工具的时候才能够看见.你可以在控制台tab或者脚本tab下看见控制台的输出,
在使用控制台调试的时候需要留意的就是如果在没有开发工具的情况下在代码中有访问Console对象的方法是会报错的.

为了避免这样的问题,一个就是移除代码中的调用语句,再就是验证是否支持Console对象:

现在你已经了解了基本的知识,让我们来看看Console类的各个可用方法的不同:

log(message[,object])-Log方法接受一个或者多个参数,来把他们显示在控制台.而且他们还接受格式化字符串哦!

warn(message[,object])-和log方法一样接受多个参数.但是在控制台显示一个警告的icon.

info(message[,object])-将会以一个信息的icon来输出
error(message[,object])-将会以一个error的icon显示输出.

clear()-清空控制台输出.
dir(object)-这个是一个对象探测器.他能够将对象的属性列个表输出.

assert(expression,message[,object])-在表达式为假的时候输出信息或者对象的内容.

就这些了.
还有其他的5点小分享:
1.选择元素
2.格式化javascript
3.浏览模式.可以在IE 7/8/9之间切换.
4.调整大小.可能你想知道你的网页在其他的移动驱动上是否显示足够友好,你可以选择显示尺寸.
5.改变用户代理.

参考文章:

1. http://blogs.msdn.com/b/cdndevs/archive/2011/05/26/console-log-say-goodbye-to-javascript-alerts-for-debugging.aspx

2. http://getfirebug.com/wiki/index.php/Console_API

3. http://www.blueidea.com/tech/web/2009/6701.asp

4. http://jsconsole.com

5. https://developer.mozilla.org/en/Debugging_JavaScript

固定一个div

作者: mathewxiang
时间: 2012-03-10
分类: web前端
暂无评论

很多时候,总想一个比较有意义的div功能块始终显示在用户的眼前,也就是说当用户往下滚动网页的时候,也不会随着页面的滚动而隐藏这个div功能块.很常见的就是取得当前窗口的坐标.当页面滚动到某一个临界值的时候就给这个div添加一个css属性,然后让这个div保持到某一个坐标:

美

作者: mathewxiang
时间: 2012-03-09
分类: web前端
暂无评论

看看有时候完全能够让一个简单的东西看上去非常的美.整洁.而且对于每一个div都是添加了id和class还有title.这样的目的有什么呢?就是为了能够通过js来自动生成TOC也就是目录.简单美观的东西原来隐藏了很多的用心之处.

看看,就是这么简单.看着让人太爽!

YUI Compressor

作者: mathewxiang
时间: 2012-02-13
分类: web前端
暂无评论

之前说到了JSLint,不过在实际的工作中间到底是否能够完全遵循标准来实现就是另一说了.

According to Yahoo!'s Exceptional Performance Team, 40% to 60% of Yahoo!'s users have an empty cache experience and about 20% of all page views are done with an empty cache (see this article by Tenni Theurer on the YUIBlog for more information on browser cache usage). This fact outlines the importance of keeping web pages as lightweight as possible. Improving the engineering design of a page or a web application usually yields the biggest savings and that should always be a primary strategy. With the right design in place, there are many secondary strategies for improving performance such as minification of the code,HTTP compression, using CSS sprites, etc.

阅读剩余部分