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

前言

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

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

  1. CSS Reset
  2. CSS Less
  3. CSS Image Sprites
  4. Require JS / LAB JS
  5. jQuery Variable Management
  6. jQuery UI widget factory
  7. 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-width: 960px;
@content-min-width: 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

 

posted @ 2013-02-28 15:57  书生小C  阅读(1984)  评论(0)  编辑  收藏  举报