[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