Recently in JAVASCRIPT Category

jQuery - 一款优秀Javascrīpt框架

| No Comments | No TrackBacks
jQuery是继prototype之后又一个优秀的Javascrīpt框架。对prototype我使用不多,简单了解过。但使用上 jQuery之后,马上被她的优雅吸引住了。有人使用这样的一比喻来比较prototype和jQuery:prototype就像Java,而jQuery就像ruby.实际上我比较喜欢java(少接触Ruby 罢了)但是jQuery的简单的实用的确有相当大的吸引力啊!在项目里我把 jQuery作为自已唯一的框架类包。使用其间也有一点点心得,其实这些心得,在jQuery的文档上面也可能有讲,不过还是记下来,以备忘罢。
 
一,找到你了!
还记得$()这个东西吧?prototype还是DWR都使用了这个函数代替document.getElementById()。没错,jQuery也跟风了。为达到document.getElementById()的目的,jQuery是这样写的:

代码
var someElement = $("#myId");

看起来比其他两个框架的要多了一个#,好,看看下面的用法:
代码
$("div p");(1)   
$("div.container")(2)   
$("div #msg");(3)   
$("table a",context);(4)  

在prototype里看过这样的写法吗?第一行代码得到所有<div>标签下的<p>元素。第二行代码得到class 为container的<div>元素,第三行代码得到<div>标签下面id为msg的元素。第四行代码得到context为上下文的table里面所有的连接元素。
如果你熟悉CSS,Xpath,你会觉得这些写法很眼熟!对了。正是。看出奥妙了吧。jQuery就是通过这样的方式来找到Dom对象里面的元素。跟CSS的选择器相类似。

二,jQuery对象?
jQuery提供了很多便利的函数,如each(fn),但是使用这些函数的前提是:你使用的对象是jQuery对象。使一个Dom对象成为一个jQuery对象很简单,通过下面一些方式(只是一部分):

代码
 
var a = $("#cid");(1)   
var b = $("<p>hello</p>");(2)   
var c = document.createElement("table"); var tb = $(c);  

三,代替body标签的onload
这个惯例,也许是除了$()之外,用得最多的地方了。下面一段代码:

代码
 
$(document).ready(function(){   
  alert("hello");   
});(1)   
   
<body onload="alert('hello');">(2) 

上面两段代码是等价的。但代码1的好处是做到表现和逻辑分离。并且可以在不同的js文件中做相同的操作,即$ (document).ready (fn)可以在一个页面中重复出现,而不会冲突。基本上jQuery的很多plugin都是利用这个特性,正因为这个特性,多个plugin共同使用起来,在初始化时不会发生冲突。
不管怎么说,这个惯例可以分离javascrīpt与HTML。推荐使用。

四,事件机制
我大量使用的事件可能就是button的onclick了。以前习惯在input 元素上写onclick = "fn()",使用jQuery可以使 javascrīpt代码与html代码分离,保持HTML的清洁,还可以很轻松地绑定事件,甚至你可以不知道"事件"这个名词。

代码
 
$(document).ready(function(){   
  $("#clear").click(function(){   
     alert("i am about to clear the table");     
   });   
  $("form[0]").submit(validate);   
});   
function validate(){   
  //do some form validation   
}

五,同一函数实现set&get

代码
 
$("#msg").html();   
$("#msg").html("hello");

上面两行代码,调用了同样的函数。但结果却差别很大。
第一行是返回指定元素的HTML值,第二行则是将hello这串字符设置到指定元素中。jQuery的函数大部分有这样的特性。
 
六,ajax
这是一个ajax横行的时代。多少人,了不了解ajax的都跟着用上一把。呵。使用jQuery实现ajax同样简单异常

代码 

$.get("search.do",{id:1},rend);   
function rend(xml){   
    alert(xml);   
} (1)   
$.post("search.do",{id:1},rend);   
function rend(xml){   
    alert(xml);   
} (2)   
   
$("#msg").ajaxStart(function(){   
   this.html("正在加载。。。。");   
});(3)   
$("#msg").ajaxSuccess(function(){   
   this.html("加载完成!");   
});(4)  

这些都是较常用的方法,get和post用法一样。第一个参数是异步请求的url,第二个为参数,第三个回调方法。
3,4的方法会在指定的Dom对象上绑定响应ajax执行的事件。当然,jQuery的AJAX相关的函数不仅是这些,有兴趣可以去研究再多。
 
七,渐入淡出

代码

$("#msg").fadeIn("fast");   
$("#msg").fadeOut("slow");

没错,上面两行代码已经分别实现了一个id为Msg的jQuery对象的渐入和淡出。做一个像Gmail一样的动态加载通知条,用jQuery就那么简单。两个函数接受的参数除了快慢等,还可以接收整型,作为渐入或淡出的完成时间,单位为MS。
 
八,plugin
这也是一个插件的时代。
jQuery插件给我的感觉清一色的清洁,简单。如Jtip,要使用它的功能,只需要在你的元素的class上加上Jtip,并引入jtip.js及其样式即可以了。其他事情插件全包。我喜欢jQuery的一个重要原因是发现她已经有了很多很好,很精彩的插件。
写得很烂。可能大家看不出jQuery的好处。嗯,光听是没用的,试用一下吧。你会发觉很有趣。
暂时告一段落吧。待有新的发现再来分享。

Jquery资源:
http://www.visualjquery.com/index.xml 很好的API查询站点
http://jquery.com/demo/thickbox/ 知道lightBox吧,看看Jquery是怎样实现相同的东西
http://www.codylindley.com/blogstuff/js/jtip/ Jtip,实用的提示工具
http://jquery.com/plugins/ 很多牛的插件。
http://15daysofjquery.com/jquery 的15天教程 (转载)

用 Ext JS 构建 Ajax 应用程序

| No Comments | No TrackBacks
当今有许许多多的 Web 开发框架,开发人员很难判断哪些框架值得花时间去学习。Ext JS 是一种 JavaScript 开发框架,这种强大的 JavaScript 库通过使用可重用的对象和部件简化了 Ajax 开发,Web 应用程序开发人员应该认真考虑使用这个工具。Ext JS 最初是 Jack Slocum 编写的一组 Yahoo! User Interface(YUI)Library 扩展。但是,随着 2.0 版的发布,它已经成为市场上最简单最强大的 JavaScript 库。

Ext JS 概述

Ext JS 项目最初的目的是扩展 YUI Library 提供的功能。YUI Library 的一个关键方面是跨浏览器支持,这也可以在 Ext JS 中找到。这种支持使开发人员在构建 Web 应用程序时不需要考虑目标浏览器。

Ext JS 提供出色的性能。这个框架是完全面向对象且可扩展的。因为 Ext JS 是用 JavaScript 编写的,所以只需下载并安装,就可以使用 Ext JS 的特性。

许可协议

在采用一个新框架之前,一定要了解框架基于哪种许可协议条款。Ext JS 提供几个许可协议选项:

  • 开放源码许可证:这采用 Open Source LGPL 3.0 许可证的条款。如果打算在另一个开放源码项目或者个人、教育或非盈利项目中使用 Ext JS,这是最合适的许可证。
  • 商用许可证:如果希望在项目中使用 Ext JS 时避免开发源码许可证的某些限制,或者由于内部原因必须拥有许可证,或者希望在商业上支持 Ext JS 的开发,这是最合适的许可证。参考资料 中提供了 Ext JS 站点的链接,这个站点提供关于商用许可证的详细信息。
  • 原始设备生产商(OEM)/转售商许可证:如果您打算对 Ext JS 进行重新打包,或者作为软件开发库销售 Ext JS,这种许可证是最合适的。

Ext JS 浏览器支持

所有主流的 Web 浏览器都支持 Ext JS 框架,包括:

  • Windows® Internet Explorer® 6 及更高版本。
  • Mozilla Firefox 1.5 及更高版本(PC 和 Macintosh)。
  • Apple Safari 2 及更高版本。
  • Opera 9 及更高版本(PC 和 Mac)。

设计模式和 Ext JS

开发人员应该会喜欢 Ext JS 经过深思熟虑的设计和实现。它的面向对象设计模式反映了对象之间的关系和交互。据设计者说,开发 Ext JS 时使用的设计模式在很大程度上受到 Head First Design Patterns 这本书(Eric Freeman 等著,参见 参考资料)的影响。查看 Ext JS 源代码,就会发现创建模式(包括 singleton 设计模式)、结构模式(包括 flyweight 设计模式)和行为模式(包括 observer 模式)。

全文:http://www.ibm.com/developerworks/cn/web/wa-aj-extjs/

JavaScript将成Silverlight的最大对手

| No Comments | No TrackBacks

  在Google正式发布基于快速JavaScript技术的Chrome浏览器后,微软高级项目经理Scott Hanselman当地时间周五在研讨会上对听众说出了自己的想法:"我想在18个月之后我们会看到JavaScript以100----1000倍翻番的速 度增长,在Google的推动以及Mozilla的胁迫下,JavaScript的发展会对我们形成威胁。"

  世界著名咨询公司凯捷 (Cap Gemini)公司的高级顾问Jonas Folles对此表示赞同,他认为JavaScript将会延续快速增长速度,并且Chrome浏览器的地位也将会很快变得"举足轻重"。Jonas Folles认为如果用户中使用JavaScript遇到一些限制时,一些很"Cool"的JavaScript编写器将帮助用户实现更容易的操作。

  "如果现在让我们对Silverlight和JavaScript做出取舍是一件很困难的事情,不过我想最终JavaScript将超越Flash成为Silverlight的最大竞争对手。"Jonas Folles最后断言说。

  在众专家发表完一轮意见后,一位听众对专家组提出了自己的问题,问自己是否应该去购买一些JavaScript的书籍,因为这门语言已经几乎被忘于脑后了。

  微软项目经理Harry Pierson抢先从侧面回答了这个问题,他认为对大多数开发人员来说JavaScript是一门非常古老的语言,在做一些高级项目开发时如果需要把程序编译转换为JavaScript也是一件很有意思的事情。

   Hanselman对此有着一个不同的意见,他认为JavaScript是一门非常怪异捉摸不定的语言,它很难实现面向对象的程序设计。"不过在 Netscape 4曾经令我痛恨的JavaScript和如今已经大不一样,所以我想你应该入手几本新的JavaScript书籍瞅瞅先。"

   Jonas Folles最后表示即使加速发展的JavaScript成为主流,也不会影响到Silverlight的壮大发展,特别是在企业普遍对Web 2.0都很感冒的今天。"对于企业内部互联网,如果用户想得到类似Web 2.0的体验,仅使用HTML和JavaScript来实现并不是那么容易,相对而言,Silverlight可能是一个更为简单的选择。"

Firefox要在速度上超越Google Chrome

| No Comments | No TrackBacks

  JavaScript先锋与TraceMonkey程序设计师Brendan Eich在博客中写道:"我们非常投入且进展快速,那些宣告我们 必死的报道实在太夸张。"他强调Firefox的表现更好,并表示:"或许我们应该重新命名为TraceMonkey'V10'。"

  网易科技讯9月5日消息,Mozilla 3日公布的浏览器效能资料,显示新版本的Firefox执行速度超越Google的新浏览器Chrome。

   JavaScript先锋与TraceMonkey程序设计师Brendan Eich在博客中写道:"我们非常投入且进展快速,那些宣告我们必死的报 道实在太夸张。"他强调Firefox的表现更好,并表示:"或许我们应该重新命名为TraceMonkey'V10'。"

   Mozilla订于今年底正式推出的Firefox3.1,内有加速JavaScript执行的新技术TraceMonkey。在Mozilla以新版 Firefox与Chrome beta的较量测试中,Google的浏览器在WindowsXP环境中比新的Firefox慢28%,在Windows Vista也慢了16%。

  但值得注意的是,Mozilla的开发者都认为SunSpider已经过时了。

  不过, Eich在文中写道,TraceMonkey团队正在努力解决造成TraceMonkey比Chrome迟缓的问题。他指出:"图表的确显示V8在一、两 个测试中,超越我们的速度。我们有一个计划,去追踪流程。我们只是没有足够的时间当场解决,但那是接下来的工作。" (网易)

约翰霍普金斯大学的计算机研究人员发现了Adobe Reader 和 Acrobat 软件中的漏洞,这一漏洞可导致黑客完全控制中招的计算机.

Adobe在今天发布的一份安全警示中确认了这一漏洞,Secunia将该漏洞评级为严重,这一漏洞主要对7.0.9,8.1.2以及更早版本有效, Adobe已经修正了问题并发布了更新.但7.1版本用户不受影响,Acrobat and Reader 9因为还没有发布,因此谈不上它的漏洞.

SecurityFocus 警告,用户如果不当使用可被攻击者远程执行代码并被接管控制,这一问题主要源自JavaScript在PDF中的嵌入运用.(csdn)

10 Free Chart Scripts

| No Comments | No TrackBacks

This week I’ve been working on a project that required data to be shown visually. I needed a Chart Script that was attractive yet gets the data across. The Charts scripts below are built using JavaScript, Flash, Silverlight, and Java.

  • Flot - Flot is a pure Javascript plotting library for jQuery. The focus is on easy usage , attractive plots and interactive features. With Flot you can interact with the data, look at specific data by zooming in, plot a time series, and other various options.
  • Open Flash Chart - Open Flash Chart is a Flash charting component. It is fairly easy to setup and has classes written in PHP, Perl, Python, Java, Ruby on Rails, and .Net to connect to the Chart. You can create some really nice looking Bar Charts, Pie Charts, Area Charts and etc…
  • AmCharts - AmCharts are animated interactive flash charts. The charts include Pie Charts, Line Charts, Scatter/Bubble Charts, Bar/Column Charts, and even a stock chart. AmCharts can extract data from simple CSV or XML files, or they can read dynamic data generated with PHP, .NET, Java, Ruby on Rails, Perl and ColdFusion. All the charts are free but they have a link to AmCharts on the upper left.
  • Emprise JavaScript Charts - Emprise JavaScript Charts is a 100% Pure JavaScript Charting Solution that requires no JavaScript frameworks. Emprise JavaScript Charts include Line, Area, Scatter, Pie, Bar charts with zooming, scaling and scrolling ability. Tested and works with all major browsers.
  • PlotKit - PlotKit is a Chart and Graph Plotting Library for Javascript. PlotKit works with MochiKit javascript library. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support. PlotKit also has great documentation.
  • Flotr - Flotr is a javascript plotting library based on the Prototype Framework version 1.6.0.2. Flotr lets you create graphs in modern browsers with features like legend support, negative value support, mouse tracking, selection support, zoom support, event hooks, CSS styling support and much more.
  • PHP/SWF Charts - PHP/SWF Charts is simple yet powerful tool to create attractive web charts and graphs from dynamic data. You use PHP to gather the data and put it into flash. It supports many charts types, Line, Column, Stacked column, Floating column, 3D column, Stacked 3D column, Parallel 3D column, Pie, 3D Pie, Bar, Stacked bar, Floating bar, Area, Stacked area, Candlestick, Scatter, Polar, Mixed, Composite and Joined. These Charts have some great features like Animated transitions, Printable charts, and more.
  • Visifire - Visifire (Powered by Silverlight) is a set of open source data visualization components. With Visifire you can create animated Silverlight Charts with ASP, ASP.Net, PHP, JSP, ColdFusion, Ruby on Rails or just simple HTML.
  • FusionCharts - FusionCharts is a cross-browser and cross-platform flash charting component that can be used with ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, simple HTML pages or even PowerPoint Presentations. All you need to know is the language you’re programming in.
  • JFreeChart - JFreeChart is an open source Java chart library that makes it easy for developers to display quality charts in their applications. The JFreeChart project was founded seven years ago, in February 2000, by David Gilbert and is used by approximately 40,000 to 50,000 developers. JFreeChart supports many different output types that includes JPEG, GIF, PDF, EPS and SVG. This is a great resource for Java developers.

If you know of any other Charting Scripts please post below.

Popularity: 28% (via webtecker.com

一、在JavaScript中调用Flex方法
在Flex中可以用ExternalInterface来调用Flex的方法,途径是
1.通过在Flex应用可调用方法列表中添加指定的公用方法。在Flex应用中通过调用addCallback()可以把一个方法添加到此列表中。addCallback将一个ActionScript的方法注册为一个JavaScript和VBScript可以调用的方法。
addCallback()函数的定义如下:
addCallback(function_name:String, closure:Function):void
function_name参数就是在Html页面中脚本调用的方法名。closure参数是要调用的本地方法,这个参数可以是一个方法也可以是对象实例。

举个例子:
<mx:Script>
    import flash.external.*;
    public function myFunc():Number {
        return 42;
    }
    public function initApp():void {
        ExternalInterface.addCallback("myFlexFunction",myFunc);
    }
</mx:Script>

2.那么在Html页面中,先获得SWF对象的引用,也就是用<object .../>声明的Swf的Id属性,比如说是MyFlexApp。然后就可以用以下方式调用Flex中的方法。
<SCRIPT language='JavaScript' charset='utf-8'>
    function callApp() {
        var x = MyFlexApp.myFlexFunction();
        alert(x);
    }
</SCRIPT>
<button onclick="callApp()">Call App</button>



二、在Flex中调用 JavaScript
你 可以调用Html页面中的JavaScript,通过与JavaScript的交互,可以改变Style,调用远程方法。还可以将数据传递给Html页 面,处理后再返回给Flex,完成这样的功能主要有两种方法:ExternalInterface()和navigateToUrl()。
在Flex中调用JavaScript最简单的方法是使用ExternalInterface(),可以使用此API调用任意JavaScript,传递参数,获得返回值,如果调用失败,Flex抛出一个异常。
ExternalInterface封装了对浏览器支持的检查,可以用available属性来查看。
ExternalInterface的使用非常简单,语法如下:
flash.external.ExternalInterface.call(function_name: String[, arg1, ...]):Object;
参数function_name是要调用的JavaScript的函数名,后面的参数是JavaScript需要的参数。
举个例子说明如何调用JavaScript函数
Flex应用中,添加如下方法:
<mx:Script>
<?xml version="1.0" encoding="iso-8859-1"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        import flash.external.*;
    
        public function callWrapper():void {
            var f:String = "changeDocumentTitle";
            var m:String = ExternalInterface.call(f,"New Title");
            trace(m);
        }
    </mx:Script>
    <mx:Button label="Change Document Title" click="callWrapper()"/>
</mx:Application>
Html页面中有如下函数定义:
<SCRIPT LANGUAGE="JavaScript">
    function changeDocumentTitle(a) {
        window.document.title=a;
        return "successful";
    }
</SCRIPT>

原文:http://www.blogjava.net/oathleo/archive/2008/04/11/192140.html

非常有用的上传图片JS代码

| No Comments | No TrackBacks

<script language="JavaScript">
var AllowImgFileSize=2000;        //允许上传图片文件的大小 0为无限制  单位:KB
var AllowImgWidth=3000;            //允许上传的图片的宽度  0为无限制 单位:px(像素)
var AllowImgHeight=3000;            //允许上传的图片的高度  0为无限制 单位:px(像素)
function load(Obj){
    var tempImg=new Image();
    tempImg.onerror=function(){                   //不是图片
        thisform.button.disabled=true;            //提交不可用
        Obj.outerHTML=Obj.outerHTML;              //清除表单
        document.getElementById("err_msg").innerHTML="目标类型格式不正确或者图片已损坏!"
        document.getElementById("ErrMsg").innerHTML=""
    };

    tempImg.onreadystatechange=function(){
      thisform.button.disabled=false;          //提交可用
      document.getElementById("err_msg").innerHTML="&nbsp;&nbsp;&nbsp; 图片宽度:<font color=red>" +this.width + "</font><br>&nbsp;&nbsp;&nbsp; 图片高度:<font color=red>" + this.height + "</font><br>&nbsp;&nbsp;&nbsp; 图片大小:<font color=red>" + parseInt(this.fileSize/1024) + "K</font>";

        if(AllowImgWidth!=0&&AllowImgWidth<this.width ||AllowImgHeight!=0&&AllowImgHeight<this.height ||AllowImgFileSize!=0&&AllowImgFileSize*1024<this.fileSize ){
            document.execCommand("Delete");
            Obj.outerHTML=Obj.outerHTML;
            document.getElementById("ErrMsg").innerHTML="\n图片不要超过<font color=red>"+AllowImgFileSize+"</font>KB。<font color=red>"+AllowImgWidth+"</font>X<font color=red>"+AllowImgHeight+"</font>"
            thisform.button.disabled=true;
        }else{
            document.getElementById("ErrMsg").innerHTML=""
            document.all.err_msg.style.display='';
        }
    };
    tempImg.src=Obj.value;
}

function up(){
  if(thisform.button.disabled) event.returnValue=false;
}

var flag=false;
function DrawImage(ImgD){
    var image=new Image();
    image.src=ImgD.src;
    if(image.width>0 && image.height>0)
        {
    flag=true;
    if(image.width/image.height>= 350/300){
     if(image.width>350){
     ImgD.width=350;
     ImgD.height=(image.height*350)/image.width;
     }else{
     ImgD.width=image.width;
     ImgD.height=image.height;
     }
     }
    else
        {
     if(image.height>300)
         {
       ImgD.height=300;
       ImgD.width=(image.width*300)/image.height;
     }
         else
         {
     ImgD.width=image.width;
     ImgD.height=image.height;
     }
     }
    }
}
function FileChange(Value){
    flag=false;
    document.getElementById("uploadimage").width=0;
    document.getElementById("uploadimage").height=0;
    document.getElementById("uploadimage").alt="";
    document.getElementById("uploadimage").src=Value;
}
function mysub()
{
    esave.style.visibility="visible";
}

var i=11;
function addNew()
{
    tr=document.getElementById("t136").insertRow();
    tr.insertCell().innerHTML='图片说明<input type=text name=fileName>选择<input type=file name=pic'+i+' style=width:100 content Editable=false value onpropertychange=javascript:load(this); onchange=javascript:FileChange(this.value);><a href=javascript:void(0) onclick=del()>删除</a>'
}
function del()
{
    document.all.t136.deleteRow(window.event.srcElement.parentElement.parentElement.rowIndex);
}
</script>
<form name="thisform" action="/system/shopinfo/upimage.jsp" method="POST" onsubmit="javascript:up();" ENCTYPE="multipart/form-data">
<div id="esave" style="position:absolute; top:162px; z-index:10; visibility:hidden; width:210px; height:49px; left:24px">
   <marquee align="middle" scrollamount="5" width="210" height="50" style="background-color: #C0C0C0" behavior="alternate">...图片上传中...请等待...</marquee>
</div>

<table border="0" cellspacing="0" cellpadding="0" id="t136">
<tr>
  <td>
    图片说明<input type=text name=fileName>选择<input type=file name=pic1 style=width:100 content Editable=false onpropertychange=javascript:load(this); onchange=javascript:FileChange(this.value);><a href=javascript:void(0) onclick=del()>删除</a><br>
  </td>
</tr>
<tr>
  <td>
    图片说明<input type=text name=fileName>选择<input type=file name=pic1 style=width:100 content Editable=false onpropertychange=javascript:load(this); onchange=javascript:FileChange(this.value);><a href=javascript:void(0) onclick=del()>删除</a><br>
  </td>
</tr>
<tr>
  <td>
    图片说明<input type=text name=fileName>选择<input type=file name=pic1 style=width:100 content Editable=false onpropertychange=javascript:load(this); onchange=javascript:FileChange(this.value);><a href=javascript:void(0) onclick=del()>删除</a><br>
  </td>
</tr>
<tr>
  <td>
    图片说明<input type=text name=fileName>选择<input type=file name=pic1 style=width:100 content Editable=false onpropertychange=javascript:load(this); onchange=javascript:FileChange(this.value);><a href=javascript:void(0) onclick=del()>删除</a><br>
  </td>
</tr>
</table>
<input type="button" onclick="addNew()" value="增加一个上传>>">
<input type="submit" name="button" value="文件上传" disabled onclick="javascript:mysub()">
</form>

<p>图片说明是您所上所的图片的描叙信息,如果图片说明为空的话默认为文件的名称!</p>

<div id="err_msg">            </div>
<div id="ErrMsg">            </div>
<img id="uploadimage" height="0" width="0" src onload="javascript:DrawImage(uploadimage);">
<br>
(注:加入的图片文件大小不能超过1M,图片的长宽不能超过1280*1280!支持的图片类型有:gif,jpg)


把值传给父窗口:
<script>window.opener.document."&upload.form("FormName")&"."& upload.form("EditName")&".value='文件名.gif'</script>

FCKeditor 2.5 released

| No Comments | No TrackBacks

http://www.fckeditor.net/whatsnew

This is the most important release since FCKeditor 2.0. It introduces Safari and Opera compatibility, but also new features that leverage the quality of FCKeditor to an upper level. You will find no similar solution on other products.


The most exciting feature is the new Style System. Now you have full control over every single formatting and semantic command available in the editor interface. Why having a limited interface to achieve a XHTML 1.1 experience? Enjoy a full featured editor, while well controlling how things work on it. No more <font> tags? Well, the system is so flexible that it is up to you to decide (but don't worry... no <font> tags by default :).


Do you want more? What about blockquote support, the revamped Undo System, the Data Processor which makes it possible to handle non HTML data, and much more.

Ajax的兴起,给Javascript带来了新的生机,大量的javascript框架(Javascript Framework)层出不穷,一些框架来至于开发人员项目经验的总结和提炼,也有一些框架来至于商业公司,同时以开源和商业两种方式发布。借助这些框 架,可以大大加速Ajax项目的开发速度,但同时也面临不同的学习曲线,以及架构扩展性等等问题。如何选择Javascript框架,成为开发人员和架构 师头痛的一个问题。如果你正面临这样的问题,希望下面的几个建议对你在选择javascript框架上会有所帮助。

你的项目需求是什么

首 先要问自己这是一个什么项目,具体的需求是什么,是一个普通类型的网站还是一个在线的web应用程序,是否需要处理大量的键盘和鼠标事件,是否需要给用户 各类高级的ajax特性,还是说只要实现一个简单的异步页面刷新和一些简单dom操作,如果是后者,则可以选择一个相对简单的javascript框架, 封装基本的xmlhttprequest操作和dom操作就足够了。

浏览器的支持情况

不 同的框架兼容的浏览器会有所不同,尤其是一些高级的javascript框架,对低版本的浏览器都不支持,还有一些框架只支持ie和firefox,对其 他浏览器如opera、safari不支持。所以在框架的选择上还要考虑到系统的目标用户,如果目标用户都只使用ie6.0以上浏览器,那么在框架的选择 上余地就更大了。

框架后面是否有一个核心的开发团队

很多框架往往都是个人在业务时间开发的,随时可能停止更新,而如果后面有一个团队,则可以在一定程度上保准代码的更新,对bug和一些问题的及时响应,同时在代码质量上也相对有保准。

框架的成熟度

如果一个新的框架刚刚发布,使用的人往往不多,如果你贸然采用,在使用过程中遇到问题,可能要找个能帮你解决问题的人或者在网上找资料都显的很难。所以在这方面也要有所考虑。

框架的发布更新频率

一个框架有很高的发布更新频率说明新的功能在不断加入或者bug被fix的速度很快,反之一个框架半年都不出一个版本,基本可以说明这个框架已经不被开发者重视,很难得到新的发展。

文档的友好性

一个框架尤其是相对比较复杂的框架,如果没有充分和友好的文档,学习曲线会比较高,使用者在使用过程中往往需要通过阅读代码和其他外部的文章来学习怎么使用和解决一些问题。所以文档也是很重要的一个因素。

是否有个活跃的社区

一些成功的开源框架背后往往有一个社区在支撑,大家在里面交流使用经验,互相帮助解决使用过程中遇到的问题。任何问题,只要在这类社区中寻求帮助,往往很快就可以得到他人的帮助。这样的框架,即使一开始不是很成熟,也会很快发展起来。

框架的扩展性

在 实际的项目过程中,往往一个特定的框架是很难直接满足你的所有需求的,这就要求你需要去做一些定制和扩展的工作,如果一个框架没有很好的扩展性,则你可能 在项目后期为了实现某个特定的需求,不得不采用另一个新的框架,大大加大了项目的成本。所以选择一个有很好扩展性,如支持plugin等机制的框架,对你 今后系统的扩展会有很大的帮助。

性能和网络环境

不同的系统在性能和功能的侧重上会 有所不同,比如一个基于互联网的项目,可能考虑更多的是要求在保准性能的前提下,再来讲功能,很多高级的javascript框架往往在性能上不能让人满 意,一部分原因是封装了太多功能,导致js文件会非常大,在互联网环境下,下载这个js文件就会耗去不少时间,还有就是为了保准如框架的扩展性,往往做了 多层封装和抽象,在某种程度上其实是以牺牲部分性能为代价的。所以这样的框架可能更适合一些intranet内部的项目,而不是基于互联网的项目。

相关归档

当前归档JAVASCRIPT

上一归档:JAVA

下一归档:JSP