[Web] Web开发中你可以借鉴的东西

前言

这段时间重点关注 Android Native 开发以及 Android Web开发，特别研究了PhoneGap 这一利器，PhoneGap 在跨平台方面的确有很大的优势，但是性能（特别某些特效）方面，的确让我抓狂，不过相信一切都会慢慢好起来的，还是很看好它的未来。Native 方面组要研究了如何在实际项目中更好的组织代码，如何使用某些通用的东西到项目中，从而使开发的过程不再过多关注与逻辑无关的东西。

废话少说，这篇文章想向大家介绍Web项目开发中可以借鉴的东西，这些都是经过项目实践，并且效果很好，值得推广的，希望能给大家一些启发。

CSS Reset
CSS Less
CSS Image Sprites
Require JS / LAB JS
jQuery Variable Management
jQuery UI widget factory
jQuery Plugin

CSS Reset

简介

相信许多人对 CSS Reset 可以说是相当熟悉了，但是我今天还是要做为第一点提及，CSS Reset 用于重置浏览器的默认样式。例如ul li 在IE 和Firefox下的默认margin值是不同的，使用YUI Reset CSS可以让各个浏览器默认值相同，这样页面各个元素默认显示的效果就相同了。现成的 reset css 框架主要有 YUI-reset.css 和 Alice-reset.css，不过我比较赞同“滥用不如不用”这个观点，当你使用这些 reset css 时，你需要了解这里面究竟都干了什么，你的项目是不是需要这些东西，不然项目后期各种意想不到的BUG会让你抓狂。

参考

官网：http://developer.yahoo.com/yui/reset/
Less下载：http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css
介绍：http://www.cnblogs.com/jinguangguo/archive/2013/01/04/2844660.html

实践

直接引入（不过最好经过定制化以后，再导入）

CSS Less

简介

Less 是动态样式表语言(The dynamic stylesheet language). Less扩展了CSS，使CSS具有variables, mixins, operations 和 functions等动态行为。Less不仅可以运行在客户端(只能modern browsers上)而且也可以运行在服务端(with Node.js 和 Rhino)。

参考

官网：http://lesscss.org/
Less下载：https://raw.github.com/cloudhead/less.js/master/dist/less-1.3.3.min.js

实践

/* Dimensions
-----------------------------------------*/
@body- 960px;
@content-min- 1024px;
/* Colors
-----------------------------------------*/
@swatch-alpha-0: #000;
@swatch-alpha-9: #999;
@swatch-alpha-a: #aaa;
@swatch-alpha-f: #fff;
@widget-background-color: #F0F0F0;
@widget-border-color: #B3B3B3;
/* Fonts
-----------------------------------------*/
@font-monospaced: Consolas, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Courier, monospace;
@font-sans-serif: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
@font-size: 14px;
/* Body
-----------------------------------------*/
body {
  background-color: @swatch-alpha-f;
  font-family: @font-sans-serif;
  font-size: @font-size;
  width: @body-width;
}
/* Header
-----------------------------------------*/
.ac-header {
  min-width: @content-min-width;
}

你可以使用Less的Variable功能，在你的CSS中定义通用的属性值，比如常见的Dimension, color, font 等，便于统一管理，当然你还可以使用Less的其它功能。

CSS Image Sprites

简介

CSS Image Sprites 简单点说就是将许多图片整合到一张图片中，你只需要根据不同的CSS，就能引用到相应的图片。这显然有很大的好处，比如能很大程度减少向服务端发送请求。比较常见的是，你可以将不同状态的图片，比如某个按钮正常状态、点击状态、不可点击状态的图片整合到一个图片中。

参考

官网：http://www.w3schools.com/css/css_image_sprites.asp
实践：http://spritegen.website-performance.org/

实践

这里就不详细介绍了，大家可以到官网查看具体资料，到参考中的实践中具体体验一下，比较简单。

Require JS / LAB JS

简介

RequireJS 和 LABJS 都可以做模块加载器，当然各自都有侧重，不同项目中，可以有选择的使用，这篇文章中我将具体介绍RequireJS，对LABJS感兴趣的也可以看看，会有收获的。我的实践例子中将会介绍到如何使用RequireJS进行Cache管理、依赖管理等。

参考

RequireJS官网：http://requirejs.org/
LABjs官网：http://labjs.com/

实践

(function (require) {

  var urlArgs = ''; // used for browser cache
  if (CNBlogs.isProduct) {
    urlArgs = 'v=1';
  } else {
    urlArgs = "dev=" + (new Date()).getTime();
  }

  require.config({
    baseUrl: '/scripts', //By default load any module IDs from baseUrl
    urlArgs: urlArgs,
    //except, if the module ID starts with "app",
    paths: {
      'hello1': 'hello1.min',
      'hello2': '/document/11111-11100-010101/latest?' // append ? to avoid .js extension
    },
    shim: {
      'hello3': ['hello1', 'hello2'],
      'bootstrap': ['hello3', 'hello4']
    },
    waitSeconds: 200
  });

})(require);

require(['jqueryui', 'bootstrap'], function () {
  CNBlogs.bootstrap();
});

jQuery Variable Management

简介

我们都知道在JavaScript开发中，一个很敏感但是不得不直面的问题就是全局变量，我经常和别人说看一个人写JavaScript是不是合格，就看看他的代码产生多少全局变量就行了。对于如何控制全局变量，有很多的方法，大家可以了解了解，我今天的例子大家可以看一下，希望能对你的开发有一定的作用

参考

网上搜索下，应该有

实践

(function($) {

  function load() {}
  
  function getNamespace(id) {}
  
  function getNamespaces() {}
  
  function getApplication(id) {}
  
  function getApplications() {}
  
  function getLastLoadTime() {}

  if ($.type($.CNBlogs) == "undefined" || $.type($.CNBlogs) == "null") {
    $.CNBlogs = {};
  }
  $.CNBlogs.MetaModel = {
    reload: load,
    getNamespace: getNamespace,
    getNamespaces: getNamespaces,
    getApplication: getApplication,
    getApplications: getApplications,
    getLastLoadTime: getLastLoadTime
  };
})(jQuery);

jQuery UI widget factory

简介

Widget factory 是 jQuery对象提供的一个简单的函数 jQuery.widget。可以用来管理组织JavaScript 代码。值得注意的是，该widget是有状态的，即它是需要依托于具体的某一个Dom节点，在具体开发的过程中，大家需要注意。

参考

官网：http://wiki.jqueryui.com/w/page/12138135/Widget%20factory

实践

(function( $ ) {
$.widget('ab.form', {
  options: {
    namespace: 'ab'
  },
  _create: function() {
    var self = this;
    this.options.$form = this.element;
    
  },
  save: function(callback) {
    var self = this;

  },
  update: function(callback) {
  
  },
  remove: function(callback) {
  
  },
  value: function(values) {

  },
  resize: function(reset) {
   
  },
  refresh: function(recordData) {
    
  },
  _bind_data: function() {
    var self = this;
    
  },
  _initialize: function() {
    
  }
});
}( jQuery ) );
/*
 * Call recordform widget
 */
$('#something').form();

jQuery Plugin

简介

同很多人一样，JQuery之所以如此的吸引人，它的插件功能功不可没，

参考

官网：http://plugins.jquery.com/
实践：http://liu-da101.iteye.com/blog/1180845

实践

这里就不详细介绍了，大家可以搜索一下jQuery 插件开发教程，相信你会看到铺天盖地的资料。

后续

以上几点都是抛砖引玉，介绍的比较简单，只是希望分享给大家，如果大家项目中需要使用的话，可以查询相关资料。本人最近对Web的移动话比较感兴趣，如果志同道合，可以交流交流。

本人QQ： 1321518080