随笔分类 - javascript
摘要：javascript里的作用域是理解javascript语言的关键所在，正确使用作用域原理才能写出高效的javascript代码，很多javascript技巧也是围绕作用域进行的，今天我要总结一下关于javascript作用域的相关知识。 很多人使用javascript时候会把{}作为作用域的边界，所以我们可以看看下面的代码：function ftn01(){ var i = 1; if (i == 1){ var a = "ok"; } console.log("a = " + a);// a = ok {var b = "bok"
阅读全文
摘要：我最近想好好整理下csshack技术，但是结果很沮丧，下面我将我最初写的笔记和大家分享下。 我在单位整理的研究笔记： 不同的浏览器对某些CSS代码解析会存在一定的差异，因此就会导致不同浏览器下给用户展示的页面效果不一样，碰到这样的情况就需要开发人员通过针对不同的浏览器对应写出不同的CSS代码，从而达到兼容不同浏览器的目的，不会让页面因为浏览器的不同而产生有差异的显示，这种技术有个专门的名称就是CSS Hack。 在中国，这种差异主要是体现在主流浏览器上，我们只要解决了主流浏览器之间的CSS差异就可以了。目前流行的主流浏览器有Internet Explorer,Google Chrom...
阅读全文
摘要：很久之前就有很多人给我推荐twitter的Bootstrap框架，但是直到前几天我才真正学习了下Bootstrap，的确是相当棒的框架，至少从视觉体验上超越了很多以前碰到了前端UI框架。今天我要聊聊Bootstrap，最后给出一份我整理的Bootstrap的UI的demo，以及我自己使用Bootstrap开发的例子。 下面我在这里简单的介绍下Bootstrap框架。 Bootstrap框架属于UI框架，这个和jQuery不太一样，其实准确的描述Bootstrap框架属于css框架而非javascript框架，但是它本身也使用javascript来完善Bootstrap框架的视觉效果。此...
阅读全文
摘要：前不久做了一个文件上传的功能页面，这次开发中我遇到了些问题，开发的时候由于时间比较紧张，因此有些细节做得并不是太仔细，所以最近几天将前面做得东西整理了下，在这里和大家 一起分享下。 首先我介绍下我所做的功能页面，页面会同时上传两个文件，一个是数据文件，一个是签名文件，而且数据文件一般都是比较大的，上传的同时文件的数据要同步解析同步校验，最终录入到数据库里，这就导致文件上传的时间都比较长，为了得到更好的用户体验，上传文件的时候页面做一个等待的遮罩效果，这个如果用ajax异步提交就能很好的作出效果，但是标准的ajax技术可以异步上传文件吗？答案是不行，至少标准的ajax技术里没有直接用来上传...
阅读全文
摘要：奥运会正在进行中，各大网站都因为这盛会有所改版或者是拿出了自己的新的页面特效。其中最牛叉的还是谷歌，如下图： 可以用键盘控制的小游戏，看看它的源码：<div id="hplogo" tabindex="0" dir="ltr" aria-label="跨栏" style="cursor: pointer;"><canvas style="position: absolute;" height="207" width="530&q
阅读全文
摘要：本篇博文讲两件事情，一个是推荐在博客园经常写博客的童鞋们一个很棒的工具--“百度统计”，另一个是“拷贝百度统计”的页面框架。 首先讲第一个事情，我的博客里有不少文章都是讲“用户行为分析”的，虽然现在不做这个方向的项目，但是对它的兴趣不减，所以我今天在自己博客里部署了百度的用户行为分析系统“百度统计”的采集脚本，感受的确是很棒，使用了百度统计后我发现我更能和看过我博客的童鞋们进行互动了。 下面我截取几张图片让大家感受下效果： 如图01： 如图02： （注释：1.PV（page view）即页面浏览量，或点击量，通常是衡量一个网络新闻频道或网站甚至一条网络新闻的主要指标。 ...
阅读全文
摘要：接着写我自己的Grid，做这件事情十分有成就感，只要有时间，我会继续努力下去的。今天的版本里，我主要做了两件事情：第一件：完全套用了jqGrid的css样式；当然不是简单的拿来就用，其实jqGrid的css样式使用的是jqueryUI,下面是jqueryUI的地址：http://jqueryui.com/themeroller/如下图：点击“Gallery”标签，如图所示：大家看到了，jqueryUI有不少皮肤可以用。既然jqueryUI有很多皮肤可以用，我们现在又使用jqGrid默认的css样式，那么就可以让我们自己的Grid达到换肤的效果。第二件：我为自己的Grid加入了一个分组数据的功能
阅读全文
摘要：最近突发奇想，想自己写一个grid控件框架，本来想自己设计一套，尝试几次，发现自己设计样式难度挺大，毕竟自己是个程序员而不是专业美工，所以我打算临摹一下jqgrid框架。 这次开发实践的主要目的是锻炼下自己的javascript编程能力，所以我只是抠出了jqgrid的页面设计，至于javascript代码我不想借鉴，自己独立开发，所以我的代码绝对原创。 下面就是我抠出的页面代码，代码如下： studyjqgrid.html：View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
阅读全文
摘要：1.1用户行为分析的重要性 用户行为分析的重要性，我想做个网站的人都会用很清晰的认识，本来我想谈谈自己想法，但感觉自己毕竟还是做技术的，很难清晰的从商业价值的角度来分析它的重要性，因此放弃了想阐述自己意见的想法。当我第一次见到百度统计，和谷歌分析网站，就有那种惊鸿一瞥的激动，很想自己也能写出一套这样的网站，这也是我持续研究用户行为分析的初衷。 我估计还是有很多童鞋对“用户行为分析”的概念比较陌生，这里将百度百科里的解释在这里贴出来，抛砖引玉，希望能有更多的志同道合者跟我一起研究这个主题，百度百科的地址如下： http://baike.baidu.com/view/2330219.htm ...
阅读全文
摘要：1.1 创建属于jQuery对象的插件前面我看到jQuery插件的方式：通过$.extend方式可以定义属于jQuery本身的全局性的插件，为此我做了下面的测试，大家先看下面这段js代码：;(function($){ // 创建jQuery全局作用域的插件 $.extend({ 'wholeftn':function(){ console.log('你要用jQuery.wholeftn()方式调用，如果jQuery(XX).wholeftn()就会报错'); }, 'wholeattr':'全局jQuery属性...
阅读全文
摘要：1.1 分析$.extend源码在分析源码之前，我还要加一段s测试代码，代码如下：<script type="text/javascript">$(document).ready(function(){ console.log('==================测试06 start'); var targetobj = {'id':'NO1111','name':'xiajun','age':23,'sex':'man','
阅读全文
摘要：今天下午有时间阅读【汤姆大叔的博客】，发现他的博客风格的确很专业，说起来也真惭愧啊，我现在终于得到了专职前端的岗位，自己博客风格还是那么土里吧唧的，这个和我工作十分不相称。不过我还是很喜欢自己现在博客的风格，很简洁，有点谷歌百度的风格，我不想大改自己博客的风格，但是如果发现别人博客里有好东西我就加到自己的博客里。比如【汤姆大叔的博客】里那个可以跟随滚动条一起滚动的【推荐】【反对】层就很不错。我已经将这段代码加入到了我自己博客里，这里我就讲讲我是怎么把这段代码找到，最后如何嵌入到自己博客里的。 我的工具是firefox+firebug插件。 首先打开【汤姆大叔的博客】的一篇博客：http...
阅读全文
摘要：1.1 对$.extend的理解 上面的代码里我编写jQuery插件使用到了$.extend方法。这里要讲讲我以前对jQuery插件开发的误解，这种误解源自于我对jQuery插件开发理解的肤浅。 在我前一家公司，有位做前端的同事很喜欢把自己代码封装成jQuery插件，他曾经对我说：jQuery插件技术是jQuery最让人激动人心的技术，关键就是使用extend方法，当时我阅读一些关于jQuery技术的资料，大多一开始都会提到extend方法的使用，可能自己学习的时候不太仔细，认为jQuery插件技术就是使用extend封装好javascript代码，但我每次查看jQuery手册对exten..
阅读全文
摘要：最近写了个网站，当时借鉴了很多相关网站前端技术，为了让客户的体验更加好，我在网站前端加入了相当多的校验代码，因此代码显的特别臃肿。虽然开发过程中我将前端代码重构了三次，但是我还是对我原来写的代码不满意。五一假期我好好复习了下javascript的知识，这里试着总结下我对代码不满意的地方，大致有以下几点：1) 我一直都在琢磨jQuery源码的写法，觉得jQuery是我见过写的最棒的代码，因此代码里的写了大量的普通的function，这个很不符合jQuery的风格，这个让我很不爽。2) 不同的页面其实有很多类似的操作，这些操作是可以抽取成为公共的方法，例如：不同页面里的文本框、下拉框、多选框...
阅读全文
摘要：这篇博文是我针对项目组开发中遇到的问题研究，今天已经和同事们进行了分享，这里把它贴到我的博客里，和广大博友交流，希望能在和大家交流中自己得到进一步的提高。 和同事交流的文档的标题是：关于javascript的回调函数及ajax回调函数研究 具体内容如下：1.1开发中遇到的问题 最近开发中我和同事都碰到这样的问题，我们使用jQuery的ajax方法做服务端的校验，在success方法里将验证结果存储到一个js的公共变量或者是页面里的隐藏域，接下来的代码我们会根据这个公共的js变量或者是这个隐藏域里的值判断下一步的操作，但是这样做的结果很让人失望，我们发现js公共变量的值或者是隐藏域的值...
阅读全文
摘要：我发现童鞋们对百度的技术很感兴趣哦，呵呵，大型互联网公司真是聚集牛人的地方，不过我感觉和google比起来（看他们网站的源码），google的网页的代码比百度更加复杂，我以前觉得google什么都是开源，什么都会和大众们进行分享，但是它要是不想分享，代码还真是难读。看来看去觉得还是谷歌厉害。 这里想把百度的地震效果嵌入到我的博客里~~~~~，大家好好体验下哈哈~~~~~~~~~~~~~~~~~~~~~~~~
阅读全文
摘要：最近研究了一些在线支付网站的前端代码，在看易宝支付的商户接入网站时候发现他们使用的javascript小键盘很不错。在前端页面通过鼠标输入字符、密码可以防止黑客通过记录你点击键盘的按钮窃取你的重要信息，这里将易宝支付的小键盘组件和大家分享下。 首先还是页面的目录结果，如下图： 页面最终的效果如图所示： vkboard.js的代码：View Code var _default_img_dir = 'js/';var vbk_images=new Array();function vbk_preloadimages(){ if (document.images){ ...
阅读全文
摘要：昨天在同学群里收到这样的信息：【重磅消息：只要在百度搜索"2012世界末日"，你的电脑显示器页面将会震动，出现地震山摇的状况，然后会有一张"船票"飘然而出 】。很想看看百度的前端工程师是怎么写出这个效果的。以前我研究过谷歌logo的代码，特别是昨天的拉链效果，虽然找到了源码，但是谷歌的页面里的代码都被压缩和混淆，加上谷歌自己的前端js框架代码混入其中实在难以看懂，抽百度的源码就想比较下百度和谷歌的前端技术，哈哈，百度还是简单多了，没有被压缩和混淆，可以作为学习的范本，好了不废话了，下面就是百度的地震效果源码。 首先看看我代码的目录层次图：all.png：
阅读全文
摘要：上篇文章里我结束了对象的创建的内容，最后引出了作用域链和执行环境的问题。当我对这块知识有了更深入的了解后，回头看看jQuery源码才知道大师们写的代码是如何的厉害，jQuery源码里很好的运用了作用域链和执行环境的知识来提升程序性能。 好了，不废话了，上篇博文里对作用域讲的比较简略。其实对作用域的理解是理解整个javascript语言的关键所在，特别我在写javascript笔记时候曾对很多怪异的javascript用法无法理解的透彻，究其原因还是没有真正理解javascript里作用域的概念。 Javascript里的作用域到底决定了什么呢？作用域决定了那些变量能被函数所访问（注意：...
阅读全文
摘要：为什么现在主流程序语言里我们都要创建对象了？下面这个定义我想能给我们一个答案： 面向对象语言里对象的定义是：对象是人们要进行研究的任何事物，从最简单的整数到复杂的飞机等均可看作对象，它不仅能表示具体的事物，还能表示抽象的规则、计划或事件。抛开这些抽象的定义，从计算机底层技术来理解，对象其实就是一种存储数据的方式。 写这个系列下篇着实让我犯难了，本来我想写闭包和原型的，但是总觉得不好，在和一位以前同事讨论javascript技术时候他告诉我们在计算机语言里不管是什么样的变量其实本质都是数据在计算机的存放方式了，程序就是数据和运算组成的，他说我既然在学习javascript对象的创建，那么...
阅读全文