天生我才必有用

对于一个网站其实很多时候都需要对动态的生成所使用的CSS/JS，其中主要是CSS/JS中所包含的一些URL，当然这些URL信息也可以使用相对路径来实现，但在一些情况下使用相对路径并不能解决这个难题。

按照Yahoo YSlow（http://developer.yahoo.com/yslow/help）的建议1，就是必须减少HTTP的请求，当然手动把所有代码合并是一种方法，但这种方法反而会带来两个更糟的问题，把所有CSS/JS都合并到一个文件中，当然不利于代码的阅读和管理。如果使用jQuery，因为不同的Plugin都是会放在不同的js文件中，和Yahoo YSlow的建议有较大的冲突，当然是用动态语言来合并这些js文件应该是个不错的idea。合并过程中还可以使用jsmin.php来进行js文件的压缩。

如想使用这个技术可参考以下的几篇说明：

1. Automatic merging and versioning of CSS/JS files with PHP
2. Adding JSMin to my CSS/JS merging script (这篇写了一般，其实有更好的方法来做)
3. GZip files with .htaccess and PHP (这篇是说明如何对输出的PHP内容进行GZip的压缩，因为动态文件无法使用Apache 的 GZIP的库来压缩，所以为了节省传递数据必须在PHP中把输出内容进行压缩)。

看到一篇用JQuery做的动画效果，现在才发现原来Flash最大对手不是Silverlight，其实是Javascript。
现在一次次看到Safari和Firefox的比拼，一次次看到最终促使js运行性能的提速的消息，不得不考虑这样的问题，实现这类简单的效果有必要使用Flash，毕竟js在下载文件大小上是绝对占有优势的。

此效果的链接地址.

  var head = document.getElementsByTagName("head").item(0);
  var script = document.createElement ("script");
  script.src = "some_javascript_code.js";
  head.appendChild (script);

通过以上代码可以实现动态的javascript代码的载人。

为何需要使用Object? 其实这个不仅仅是为了赶潮流，由于ajax的流行，javascript的代码也变得越来越多的，这样必然会找出定义变量名称的重复，为了让自己撰写的代码有自己的名称的空间，最方便就是把代码包装到Object对象中。

var ajax_json_form = {
    onSubmit : function(formData, jqForm, options){    },
    onSuccess: function (responseText, statusText){    },
    processJson: function (data) {
         $('.errField').removeClass('errField');
         if (data.action == "success"){
               $("#" + data.id).html(data.message).addClass("message");
               $('#' + data.form_name).clearForm();
               for (var next = 0 ; next < data.params.length ; next ++){
                    $("#" + data.params[next].id).html(data.params[next].value);
               }
         }
         else {
               var msg = "<ul>";
               for (var next = 0 ; next < data.errors.length ; next ++){
                    msg = msg + "<li>" + data.errors[next].message + "</li>";
                    $("#" + data.errors[next].id).addClass("errField");
               }
               msg = msg + "</ul>";
         }
     }
}

这样写的代码其实有些类似其他语言中的Static函数，你不用初始化这个对象，因为它是静态对象，所以如需调用processJson，只需要使用ajax_json_form.processJson即可。

$(function() {
    var options = {
         beforeSubmit:  ajax_json_form.onSubmit,  // pre-submit callback
         success: ajax_json_form.processJson,        // post-submit callback
         dataType: "json"
    };
    $('#ajax_form').ajaxForm(options);
});

以上的代码就可以实现对JQuery的Ajax_form的使用，同时相关的callback函数都封装到ajax_json_form对象中，所以你也不用担心processJson的名称会和其它函数冲突了

今天在IBM的Developer Work上的一篇文章中，看到一套未接触过Javascript的库 – Rico ，链接到他的官方网站查看了一下。和其它Javascript库相比，功能也非常的类似，包括: Ajax、Animation等等。当前的版本已经2.0了，看来也有一段时间了。它有个非常不错的优点就是，在官方的Forum中有个Wish List，你可以把需要的功能提交给开发团队。

看了几个Demo，做了非常不错。但官网上的说明还不是太多，同时也无相关的书籍学习。看来流行还有一定的难度，有空学习一下，不过现在还是继续支持JQuery 。

对此有兴趣的可以参考IBM DeveloperWork上的文章。

是不是非常喜欢del.icio.us那种风格的标签？其实实现这个功能非常的简单：JQuery + JTagging (Plugin)即可。范例可参见：http://www.alcoholwang.cn/jquery/jTaggingDemo.htm

1. 示例1

最简单的例子,

Javascript:

$(document).ready(function(){
     $("#tags").jTagging("#tag_list", " ");
}

其中输入input的Id是tags，候选内容id为tag_list

2. 示例2

$(document).ready(function(){
    var tag_list = new Array($("#tags_candidate1"), $("#tags_candidate2"));
    var normalClass = { padding : "2px 1px 0 1px", textDecoration : "underline", color : "#f00", backgroundColor : "" };
    var selectedClass = { padding : "2px 1px 0 1px", textDecoration : "underline", color : "#fff", backgroundColor : "#f00"};
    var normalHoverClass = { padding : "2px 1px 0 1px", textDecoration : "none", color : "#fff", backgroundColor : "#00f"};
    $("#tags").jTagging(tag_list, " ", normalClass, selectedClass, normalHoverClass);
}

其中tag_list为多个候选标签的id数组，normalClass, Select Class, normaHoverClass为自定义的CSS风格

今天开始准备放弃Prototype开始学习JQuery，原因非常简单：

1. JQuery 和Prototype不是非常兼容，主要就是在那个$函数的功能定义上。（奇怪为何两套如此优秀的Javascript Framework竟然会涉及成不兼容） 。
2. JQuery的架构设计上可能比Prototype更加出色，也可能两者设计目标的不同，JQuery设计成更利于扩充；而Prototype的设计理念就是实现一些基础功能，不考虑其他复杂的实现。如果有一套JS完整解决方案，相信你也会选择这种方案，那JQuery就是这种完整的解决方案。它可以实现Prototype + script.aculo.us的功能，那我们何必去学多套框架呢。
3. JQuery的Extension都提供一些基础的CSS设定，这样对我们这些CSS菜鸟来说就轻松了很多。同时这些CSS还都做了挺漂亮的。:)

以下的功能可能就是JQuery更讨人喜欢的原因：

• Leverage knowledge of CSS
• Support extensions. （这个是我最欣赏它的优点）
• Abstract away browser quirks.
• Always work with sets.
• Allow multiple actions in one line.

今天看到几个非常不错的基于Javascript UI控件，不过是基于JQuery库的，自己对这套库不是非常熟悉。

它包括以下的功能：

• UI Datepicker （一个非常不错的日期选择器）。
• Beyond Flash （一个Pop消息的特效）。
• Clean Form Validation （Form校验)。
• Ajax Message
  1. Insert, update and add new messages automagically.
  2. Clicking on a message automagically changes into an editable textbox!
• Clean Calendar （允许用户选择日期后，添入Text文本框中）。
• Fisheye Menu (一个类似Mac OSX的菜单选择)

所有代码可以在http://marcgrabanski.com下载。

今天发现自己成了版本报告者，不过这个还是非常不错的消息，毕竟属于现在两强的Javascript的编辑器。此版本加入了对Opera和Safari最新版本的支持。

其实Javascript的程序就怕各类浏览器的不兼容，不止浏览器类型，不同的版本都是会不一致，觉得这个也是严重阻碍Ajax发展的一个重要因素。真的还不如那个浏览器一统天下算了，至少能减少一些我们这些Web开发及测试者 工作量。:)

下载：链接

经常会碰到这样的情况：当用户点击了某个按钮后，此时页面由于网络速度，或者网页在调用Curl等命令，还未能及时地重定向到下一个页面，为了避免用户再次点击（特别是cURL的一些付费过程），必须把此Image Button设为不可见。

可能会想到使用HTML Tag的visible属性来把此按钮设为不可见。其实这种方法对于Image Button并不可行。不过也不必觉得没有办法做到，方法很简单，使用Javascript来控制CSS，把此Image button的宽度设置为零即可，可能从语法的角度来说有些取消，但这的确是非常有效的一种方法。

(全文…)