05 2013 档案

css中间固定宽度，两边自适应宽度
摘要：之前看到的很多布局都是两边固定宽度，但是中间自适应，实现方式有几种，可以用absolution布局，float布局或者用负margin解决，下面我用了float...html部分:<div id="left">left </div><div id="right">right</div><div id="main">mian</div>css部分:#left,#right {float: left;width: 220px;height: 200px;backgro 阅读全文
posted @ 2013-05-29 19:09 GM_Lv 阅读(7890) 评论(0) 推荐(1)
js--函数式编程
摘要：这两天看书看到了函数式编程那节，感觉学到了挺多东西，之前看别人代码都写的挺漂亮，现在我写的代码是有点乱，所以还是要学习下别人的编程模式..（1）平常写的函数大多是接受值，合并值，返回值，比如经常写的for循环:function printArray(array){ for(var i=0;i<array.length;i++){ print(array[i]); } }但是如果我们想做print之外的事情呢？怎么办？再写一个相似的，未免显得浪费，我们可以这样function forEach(array,action){ for(var i=0;i<... 阅读全文
posted @ 2013-05-25 17:16 GM_Lv 阅读(4577) 评论(1) 推荐(3)
CodeMirror js代码加亮小小总结
摘要：CodeMirror是一个基于JavaScript的代码编辑器，CodeMirror支持大量语言的语法高亮,也包括css,html,js等的高亮显示。此外，CodeMirror还支持代码自动完成、搜索/替换、HTML预览、行号、选择/搜索结果高亮、可视化tab、代码自动格式等。 CodeMirror源码的github地址：https://github.com/marijnh/CodeMirror/。这几天除了上课之外有空我都是在啃着它的源码，在网上相关资料基本一点都没找到，发觉看起来真是很吃力，这篇总结也只是说个大概原理，具体细节我也很多不明白，虽然很多代码都读得懂，但是串联起来有很大... 阅读全文
posted @ 2013-05-23 17:05 GM_Lv 阅读(19944) 评论(1) 推荐(1)
浏览器和内核杂谈
摘要：把目前浏览器占有率以及内核分布情况了解一下,写一份简单的报告,然后加一下自己的分析和总结1.全球浏览器的一个占有率（http://liulanmi.com/category/top）根据Net Applications于今日发布了2013年3月份浏览器市场份额的数据报告，数据显示如下：（3月份的浏览器排列顺序为IE、Firefox、Chrome、Safari、Opera。它们在三月份的 市场份额分别为55.83%、20.21%、16.45%、5.31%、1.74%）2.国内浏览器的一个占有率数据来自CNZZ数据中心（http://brow.data.cnzz.com/）3.浏览器内核介绍主流浏 阅读全文
posted @ 2013-05-17 23:26 GM_Lv 阅读(535) 评论(0) 推荐(1)
argument.callee问题
摘要：今天写了段js代码，然后用jshint测试了下，提示了一个建议： avoid arguments.callee具体代码我是这么写的：...（function (){ $(this).animate({"marginTop":"35px","opacity":0.7},800) .delay(400) .animate({"marginTop":"5px","opacity":1},800); $(this).queue(arguments.callee); //再入队列 $( 阅读全文
posted @ 2013-05-17 16:42 GM_Lv 阅读(675) 评论(0) 推荐(0)
queue && dequeue
摘要：今天在做一个小东西的时候，用到了queue这个东西,代码如下：$('.overlay').click(function(e){ $(this).addClass('up').delay(600).queue(function(){ $(this).hide().removeClass('up'); $(this).dequeue(); }); });应该是很好理解的，接着找了下他们的用法，参考别人的思路写了个小小的模拟测试：var myQueue=function(fnArr){ //将队列放入fnArr this.fnArr=fnArr||[] 阅读全文
posted @ 2013-05-15 15:30 GM_Lv 阅读(236) 评论(0) 推荐(0)
sticky属性
摘要：忘记说了，position 还有一个 「sticky」 属性值，不是「static」哦！该属性值类似 relative 和 fixed 的合体，当元素在视口内的时候表现类似relative，当滚动后元素移出视口就会固定在那里，类似fixed。目前Chrome 23.0.1247.0 开始支持，W3C讨论：http://t.cn/zTrkHq2，Demo：http://t.cn/zWeNSjJ在微薄上看到这条微薄和一些讨论 @一丝yisi研究了下源码，发觉利用fixed和js简单实现贴上主要代码：<style> body { margin: 0; text-align: cente. 阅读全文
posted @ 2013-05-14 15:26 GM_Lv 阅读(305) 评论(0) 推荐(0)
前端工程打开速度优化的循序渐进总结
摘要：前端工程打开速度优化的循序渐进总结:http://www.cnblogs.com/zhengyun_ustc/archive/2013/05/09/frontendoptimize.htmljs和css的顺序关系:http://hikejun.com/blog/2012/02/02/js%E5%92%8Ccss%E7%9A%84%E9%A1%BA%E5%BA%8F%E5%85%B3%E7%B3%BB/http://www.douban.com/note/153864670/ 阅读全文
posted @ 2013-05-12 14:51 GM_Lv 阅读(152) 评论(0) 推荐(0)
Canvas Clock
摘要：这两天在看html5的canvas,实现了上面那个东西需要注意的地方：1.canvas的sava()和restore()理解和使用2.canvas的translate scale rotate ..的使用，每个变化都应该清楚圆心和角度..看：http://blog.sina.com.cn/s/blog_8fab526c01015tqs.html3.自定义旋转transform方法，实现数字的fillTextView Code <!DOCTYPE html><html><head> <meta http-equiv="Content-Type& 阅读全文
posted @ 2013-05-11 21:00 GM_Lv 阅读(298) 评论(0) 推荐(0)
canvas width/height和style.width/style.height
摘要：今天写了个canvas的热点图测试，发觉画笔的点和鼠标的位置不一致，有挺大的偏差。开始还以为是jq中位置函数引用错误，offset和pageX...那几个的属性再看了遍，发觉没什么问题。后来google了下，发觉是html5的canvas问题，这是一个很常见的误区！！在w3网站上是这样解释的：Thecanvaselement has two attributes to control the size of the coordinate space:widthandheight. These attributes, when specified, must have values tha... 阅读全文
posted @ 2013-05-11 15:42 GM_Lv 阅读(370) 评论(0) 推荐(0)
backboneJS入门项目todos解析
摘要：backbone.js的中文文档：http://www.csser.com/tools/backbone/backbone.js.html#manual/Collection-create看了个很不错的入门项目，逻辑写得很好。刚开始看有点吃力，不过结合研究了几个小时，终于算是明白了。项目分为几个部分：1.module部分，也就是todo,定义了todo的几个属性View Code var Todo = Backbone.Model.extend({ // Default attributes for the todo item. defaults: function() { ... 阅读全文
posted @ 2013-05-09 16:41 GM_Lv 阅读(820) 评论(0) 推荐(0)
QUnit单元测试
摘要：首先需要了解Qunit是个什么东西？为什么要用这个东西？我也是最近才发觉用单元测试的好处，Qunit在众多的单元测试中我觉得是很不错的，是jq团队写的一个东西/基本配置：<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.11.0.css" /><script src="http://code.jquery.com/qunit/qunit-1.11.0.js"></script>一篇很不错的入门介绍：http://www 阅读全文
posted @ 2013-05-08 12:42 GM_Lv 阅读(284) 评论(0) 推荐(0)
backboneJS入门
摘要：backbone.js是一个web端javascript的mvc框架，算得上是重量级的框架。它能让你像写java代码一些写js代码，定义类，类的属性以及方法。更重要的是它能够优雅的把原本无逻辑的javascript代码进行组织，并且提供数据和逻辑相互分离的方法，减少代码开发过程中的数据和逻辑混乱。关于backbone的更多介绍参看这个：http://documentcloud.github.com/backbone/, http://backbonetutorials.com/很好的一篇入门文章:http://www.the5fire.com/backbone-tutorials-cat... 阅读全文
posted @ 2013-05-08 10:41 GM_Lv 阅读(694) 评论(0) 推荐(0)
gruntjs配置
摘要：Gruntjs官网：http://gruntjs.com/api/gruntGruntjs是前端项目构建工具，基于node的命令行工具，并且语法是采用json。主要功能：合并文件压缩html/js/css/图片文件语法检测单元测试（基于Qunit）watch功能每个GruntJS都包括两个文件：package.json：依赖模块+你可能用到的变量和说明，例如：version、nameGruntfile.js：node module写法的任务管理文件,里面包括要合并和压缩的文件以及路径主要的文件内容如下：module.exports = function(grunt) { // 以下代码初始化. 阅读全文
posted @ 2013-05-03 09:15 GM_Lv 阅读(188) 评论(0) 推荐(0)
node.js事件驱动--Why are event-driven servers so great?
摘要：http://andrewbrobinson.com/2012/01/27/why-are-event-driven-servers-so-great/ 阅读全文
posted @ 2013-05-02 17:29 GM_Lv 阅读(173) 评论(0) 推荐(0)