HiCSS — 海玉’s Blog

引爆你的Javascript代码进化

分类: Javascript

方才在程序里看到一段JS代码，写法极为高明，私心想着若是其按照规范来写，定可培养对这门语言的理解，对JS编程能力提高必是极好的。说人话：丫代码写的太乱，看的窝火！

最近闲暇无事，准备对自己JS学习做一个总结。众所周知，JS是一种语法极其灵活的语言，一千个人会有一千种JS书写方式。这造成的结果往往就是给项目日后的开发及维护留下一个不小的隐患，也对你和团队再次开发及阅读代码造成一定困难，个人认为良好的书写规范是应该首当其冲的。所以参考一些优秀前端开发团队的代码规范后，总结了几点，希望能让你的Javascript代码上升一个台阶。

变量命名：

变量名包括全局变量，局部变量，类变量，函数参数等等，他们都属于这一类。

变量命名都以类型前缀+有意义的单词组成，用驼峰式命名法增加变量和函式的可读性。例如：sUserName，nCount。

前缀规范：

每个局部变量都需要有一个类型前缀，按照类型可以分为：

s：表示字符串。例如：sName，sHtml；
n：表示数字。例如：nPage，nTotal；
b：表示逻辑。例如：bChecked，bHasLogin；
a：表示数组。例如：aList，aGroup；
r：表示正则表达式。例如：rDomain，rEmail；
f：表示函数。例如：fGetHtml，fInit；
o：表示以上未涉及到的其他对象，例如：oButton，oDate；
g：表示全局变量，例如：gUserName，gLoginTime；

continue reading »

我知道你不知道的负Margin

分类: Html/CSS

现如今，负margin技术的应用可谓越来越广，任一个大型站点惊鸿一瞥之下都会有其身影所在。个人认为负margin技术是学习css路上必不可缺少的课题之一，许多高级应用及疑难杂症修复都可以使用负margin技术进行实现。

负margin理论：

在说明什么是负margin之前，你得清楚margin是个啥么玩意，如果还不清楚可以先阅读本人的前一篇文章《不要告诉我你懂margin》，预补下知识，回头再读这篇文章，相信俩篇文章都能给你带来不少的收获。

为了形象、易懂的解释负margin，我们将引入W3C上没有的参考线的说法。何谓参考线？参考线就是 margin移动的基准点，此基准点相对于box(自身)是静止的。而margin的数值，就是box相对于参考线的位移量。

一个完整的margin属性是这么写的margin: top right bottom left;(eg: margin:10px 20px 30px 40px)。在margin属性中一共有两类参考线，top和left的参考线属于一类，right和bottom的参考线属于另一类。top和left是以外元素为参考，right和bottom是以元素本身为参考。margin的位移方向是指margin数值为正值时候的情形，如果是负值则位移方向相反。

continue reading »

[转] Web前端研发工程师编程能力飞升之路

分类: Javascript

今天看到这篇文章。写的非常有意思。发现自己还有很长的一段路要走。

【背景】

如果你是刚进入WEB前端研发领域，想试试这潭水有多深，看这篇文章吧；

如果你是做了两三年WEB产品前端研发，迷茫找不着提高之路，看这篇文章吧；

如果你是四五年的前端开发高手，没有难题能难得住你的寂寞高手，来看这篇文章吧；

WEB前端研发工程师，在国内是一个朝阳职业，自07-08年正式有这个职业以来，也不过三四年的时间。这个领域没有学校的正规教育，没有行内成体系的理论指引，几乎所有从事这个职业的人都是靠自己自学成才。自学成才，一条艰辛的坎坷路，我也是这样一路走来。从2002年开始接触WEB前端研发至今已然有了9个年头，如今再回首，期间的走了很多弯路。推已及人，如果能让那些后来者少走些弯路，辛甚辛甚！

【前言】

所谓的天才，只不过是比平常人更快的掌握技能、完成工作罢了；只要你找到了正确的方向，并辅以足够的时间，你一样能够踏上成功彼岸。

本文将WEB前端研发编程能力划分了八个等级，每个等级都列举出了对应的特征及破级提升之方法，希望每位在看本文的同学先准确定位自己的等级(不要以你目前能力的最高点，而是以你当前能力的中档与之等级作对比，以免多走弯路)，参考突破之法破之。

所谓的级别，只是你面对需求时的一种态度：能够完成、能够完美地完成、能够超出预期地完成。以追求完美的态度加以扎实的编程功力，那就是你的编程水平。

切记心浮气燥，级别够了，那级别里的东西自然就懂了。悟了就是悟了，没悟也没关系，静下心来，投入时间而已。

一.【入门】

能够解决一些问题的水平。有一定的基础(比如最常见的HTML标签及其属性、事件、方法;最常见的CSS属性;基础的JavaScript编程能力)，能够完成一些简单的WEB前端研发需求。

continue reading »

CSS设计模式之三权分立模式篇

分类: Html/CSS

市面上我们常常会看到各种各样的设计模式书籍，Java设计模式、C#设计模式、Ruby设计模式等等。在众多的语言设计模式中我唯独找不到关于CSS设计模式的资料，即使在网上找到类似内容，细细一看之下才发觉是南辕北辙。经过浩瀚文章搜索发掘下依旧一无所获之后，直接导致了我萌生一股写一篇CSS设计模式的冲动，至此写下这篇文章，其中叙述如有不当之处，也恳请各位提出意见，分享出您宝贵的经验。

在写页面之中，width, margin, padding这三个CSS属性可以说是用到频率最高的几个属性之一。但根据我的观点来看，许多人，甚至于大多数前端对于这三个属性的书写把握上乏善可陈，以至于兼容和灵活性不得兼顾，导致日后的开发维护成本直线上升，代码不断增长，覆盖重写样式，接着再修复一个又一个的Bug。这样的情况下，使用一种合理高效的CSS设计模式不失为一种明智的选择，个人称之为：width,margin,padding三权分立模式(以下简称三权分立模式)。

什么是三权分立模式：

说明这个模式之前，必定先要明白什么是盒子模型，你可以参考如下Firebug的盒模型截图：

continue reading »

拿什么来拯救你，我的table

分类: Html/CSS

table曾经在网页开发中占据着举重若轻的地位——布局，即使到了Web2.0我们依旧可以看到其布局的身影。然而技术是不断进步的Div+Css组合方式终究敲开了老式布局的大门刮起了新的一轮布局浪潮。之后而来的就是新仇旧恨，许许多多无论是对table有意见亦或没意见的人也开始了对table笔诛口伐——臃肿的代码、无语义标签、繁杂的书写方式等等。记住，table被创造之初并非是用于布局，而是显示数据。舍弃table布局，并非舍弃table本身。拿什么来拯救你，我的table。

何为table：

table者Html表格也，数据之载体。

下面是一个比较标准的table代码写法：

<table border="0" cellspacing="0" cellpadding="0" width="100%">
  <tr>
    <th>Month</th>
    <th>Date</th>
  </tr>
  <tr>
    <td>AUG</td>
    <td>18</td>
  </tr>
</table>

简单的HTML表格由table元素以及一个或多个tr、th或td元素组成。tr元素定义表格行，th元素定义表头的单元格，td元素定义表格单元格。border属性规定表格边框的宽度，cellpadding规定单元边沿与其内容之间的空白，cellspacing规定单元格之间的空白，这三个属性我们一般手动设置为0避免浏览器差异。width属性规定表格的宽度，因为table宽度是随内部元素的宽度撑起多少而变化，而常用情况下我们希望table是同外部容器等宽，所以常常默认设置100%宽度使之撑满容器。

不得不说的table-layout:fixed属性

table-layout: auto（默认）|fixed。

continue reading »