摘要：作为一名开发人员（WEB前端JavaScript开发），不规范的开发不仅使日后代码维护变的困难，同时也不利于团队的合作，通常还会带来代码安全以 及执行效率上的问题。本人在开发工作中就曾与不按规范来开发的同事合作过，与他合作就不能用“愉快”来形容了。现在本人撰写此文的目的除了与大家分享一点 点经验外，更多的是希望对未来的合作伙伴能够起到一定的借鉴作用。当然，如果我说的有不科学的地方还希望各路前辈多多指教。下面分条目列出各种规范要求， 这些要求都是针对同事编码毛病提出来的，好些行业约定的其它规范可能不会再提及。 1、保证代码压缩后不出错 对于大型的JavaScript项目，一般会在产品发... 阅读全文
jQuery性能优化
2014-03-18 20:36 by 盛世游侠, 197 阅读, 0 推荐, 收藏, 编辑
摘要：在jQuery中最快的选择器是ID选择器，因为它直接来自于JavaScript的getElementById()方法。例如有一段HTML代码：程序代码交通信号灯 红色 黄色 绿色如果采用下面的选择器，那么效率是低效的。程序代码var traffic_button = $("#content .button");因为button已经有ID了，我们可以直接使用ID选择器。如下所示：程序代码var traffic_button = $("#traffic_button");当然 这只是对于单一的元素来讲。如果你需要选择多个元素，这必然会涉及到 DOM遍历和循环 阅读全文
不到30行JS代码实现的Excel表格
2014-03-18 20:35 by 盛世游侠, 271 阅读, 0 推荐, 收藏, 编辑
摘要：不到30行JS代码实现的Excel表格，jQuery并非不可替代 某国外程序员展示了一个由原生JS写成不依赖第三方库的，Excel表格应用，有以下特性：由不足30行的原生JavaScript代码实现不依赖第三方库Excel风格的语义分析(公式以"=" 开头)支持任意表达式(=A1+B2*C3)防止循环引用基于localStorage的自动本地持久化存储 效果展示： 代码分析： CSS略，HTML核心仅一行： JavaScript代码：for (var i=0; i<6; i++) { var row = document.querySelector("tab 阅读全文
javascript 执行顺序详解
2014-03-18 20:34 by 盛世游侠, 301 阅读, 0 推荐, 收藏, 编辑
摘要：JavaScript是一种描述 型脚本语言，它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行。如果你不能理解javaScript 语言的运行机制，或者简单地说，你不能掌握javascript的执行顺序，那你就犹如伯乐驾驭不了千里马，让千里马脱缰而出，四处乱窜。 那么JavaScript是怎么来进行解析的吗？它的执行顺序又是如何的呢？在了解这些之前，我们先来认识几个重要的术语： 1、代码块 JavaScript中的代码块是指由 JS是按照代码块来进行编译和执行的，代码块间相互独立，但变量和方法共享。什么意思呢? 举个例子，你就明白了：... 阅读全文
新手必看的jQuery优化笔记十则
2014-03-18 20:33 by 盛世游侠, 219 阅读, 0 推荐, 收藏, 编辑
摘要：jQuery优化1.简介 jQuery正在成为Web开发人员首选的JavaScript库，作为Web开发者，除了要了解语言和框架的应用技巧外，如何提升语言本身的性能也是开发人员应该思考的问题。文章就以jQuery为例，为大家提供了10个有效提升jQuery性能的小技巧。 2. 合并、最小化脚本 大部分浏览器都不能同时处理多个脚本文件，所以它们都是排队加载——加载时间也相应地延长了。考虑到你网站的每个页面都会加载这些脚本，你应该考虑把它们放到单个文件中，然后利用压缩工具（比如Dean Edwards的这款）把它们最小化。更小的文件无疑将带来更快的加载速度。 引自YUI compressor，一款 阅读全文
编写更好的jQuery代码的建议
2014-03-18 20:29 by 盛世游侠, 154 阅读, 0 推荐, 收藏, 编辑
摘要：讨论jQuery和javascript性能的文章并不罕见。然而，本文我计划总结一些速度方面的技巧和我本人的一些建议，来提升你的jQuery和javascript代码。好的代码会带来速度的提升。快速渲染和响应意味着更好的用户体验。 首先，在脑子里牢牢记住jQuery就是javascript。这意味着我们应该采取相同的编码惯例,风格指南和最佳实践。 首先，如果你是一个javascript新手，我建议您阅读 《JavaScript初学者的最佳实践》 ，这是一篇高质量的javascript教程，接触jQuery之前最好先阅读。 当你准备使用jQuery，我强烈建议你遵循下面这些指南： 缓存变... 阅读全文
你需要知道的三个CSS技巧
2014-03-18 20:28 by 盛世游侠, 224 阅读, 0 推荐, 收藏, 编辑
摘要：各种浏览器之间的竞争的白热化意味着越来越多的人现在开始使用那些支持最新、最先进的W3C Web标准的设备，以一种更具交互性的方式来访问互联网。这意味着我们终于能够利用更强大更灵活的CSS来创造更简洁，更好维护的浏览器前端代码。现在让 我们来看一看一些也许你还不知道的让人兴奋的CSS 功能。 在CSS中用attr()显示HTML属性值 attr()功能早在CSS 2.1标准中就已经出现，但现在才开始普遍流行。它提供了一个巧妙的方法在CSS中使用HTML标签上的属性，在很多情况下都能帮你省去了以往需要Javascript处理的过程。 要想使用这个功能，你需要用到三种元素：一个:befor... 阅读全文
CSS3弹性盒模型布局模块介绍
2014-03-18 20:26 by 盛世游侠, 346 阅读, 0 推荐, 收藏, 编辑
摘要：来源：Robert’s talk原文：http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-introduction-and-demostest-cases/Web布局一直个是难点，但貌似现在我们有更好的选择了。背景首先,我们有表格布局。当不考虑语义并且利用一些适当的嵌套和其他技巧,我们可以用table建立具有一定功能的布局。然后是现在大多数人都在使用的浮动布局。我们可以使用任何我们想用的元素,但浮动并不适用于初学者。表面上它看起来很基础,但背后复杂的功能可以使经验丰富的开发者看着自己的屏幕 阅读全文
不用图片，纯Css3实现超酷的类似iphone的玻璃气泡效果
2014-03-18 20:25 by 盛世游侠, 343 阅读, 0 推荐, 收藏, 编辑
摘要：最近在一个私活做手机项目时候，需要实现一个类似ios 6中短信那样的气泡效果。这里分享下实现心得，希望能给大家一点启发。首先分析下iphone的气泡效果有一下特点1. 四面圆角2. 界面上向下的外阴影3. 上边和下边的内阴影4. 上边内的一个内嵌的玻璃气泡的反光效果因为文字的长度、高度，内容多少都未知，所以如果用图片，会涉及到了多张拼贴，而且效果不好，所以就选择了CSS3。首先定义一个容器，盒模型为display: inline-block，方便自适应文字大小.bubble {position: relative;display: inline-block;min-width: 30px;ma 阅读全文
牛人推荐的跨浏览器兼容性总结
2014-03-18 20:23 by 盛世游侠, 225 阅读, 0 推荐, 收藏, 编辑
摘要：一、 CSS样式兼容1. FLOAT闭合（clearing float）网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真正闭合，这也是div无法自适应高度的一个原因。如果父div没有设 float而其子div却设了float的话,父div无法包住整个子DIV，这种情况一般出现在一个父DIV下包含多个子DIV。解决办法：1) 给父DIV也设上float2) 在所有子DIV后新加一个空DIV（目前Ext是这么做的），比如：.parent{width:100px;}.son1{float:left;width:20px;}.son2{float:left;width:80px; 阅读全文