一、借助script的异步跨域请求

先说跨域的问题,首先要指出的是,iframe里的js宿主对象一样也躲不开同源策略(Same Origin Policy),仅仅能解决二级域名的跨域而已,比如www.tudou.com和so.tudou.com,如果要请求某个八杆子打不到一起去的域名下的数据(例如你想搞mashup),建议老老实实的用script标签去请求JSONP罢。关于JSONP要附带说一下的是,jQuery对JSONP请求的封装方式很值得提倡:

$.getJSON(url, params + "&jsoncallback=?", function(json){
    /* do something */
});

用jsoncallback作为服务器端支持的标准jsonp参数,而每次执行这个方法都会用时间戳生成一个唯一的全局函数名,替换这个“?”,这个细节被封装到黑盒里,使用者不必了解,可以像普通的ajax请求一样,用匿名的回调函数作为最末尾的参数(这是jquery强调的风格),这种语法糖(syntactic sugar)的作用绝对不仅仅是让前端开发人员可以偷懒而已,对代码的可读性,兼容性和今后的维护都有好处。(我经常要向服务器端的开发人员解释这个道理,否则他们才不给你支持什么jsoncallback参数呢,直接给你返回一个“yy({……})”就算完工……囧)

二、利用前沿技术的跨域方法

当然了,我们还可以走一些目前来看比较野的路子来实现跨域,比如在页面里嵌入一个不到1K的swf,借助flashplayer向部署了crossdomain.xml的服务器请求数据,再用actionscript里的ExternalInterface类把数据还给javascript(我觉得这种方法忒有调用dll的感觉~大心)。

我们还可以指望ie8里支持的XDomainRequestAllowed,和firefox3.1支持的Access Control,甚至传说中的HTML5 socket……噢喔喔,多么甜美的梦……/掐一把脸蛋

三、用iframe直接发送跨域请求

跟script标签一样,iframe也可以用来替代ajax,而且在修改document.domain之后(比如上面提到的两个域名,可以设置document.domain = “tudou.com”),还可以解决部分跨域问题。

通过iframe请求数据的方法,最直接的莫过于在页面里动态的嵌入一个iframe标签,用它的src属性直接请求包含数据的网页,然后利用那个网页里的js把数据传给父页面,比如:

<iframe id="crossdomain" width="0" height="0" style="visibility:hidden;"src="http://yoursite.com/request_url/" ></iframe>

这种方法耦合的太紧,非常不推荐。你请求的URI代表一个资源,应该是单纯的数据,它会作为xml,json,js代码还是html来处理,这个并不重要,不应该把你的程序逻辑跟数据混杂到一起,数据也不应该因为跨域或不跨域,用iframe,script还是ajax来请求就变成完全不同的东西。

有人会说:为了让数据能够被JS处理,返回的内容难免有差异。——但是小的差异可以通过合理的封装隐藏起来,比如JQuery的getJSON方法

有人会说:请求的URI是一个动态页面,同样可以在URI里支持类似jsoncallback的参数,生成一个script标签和其中的JS代码,把数据“包裹”在JS里,比如请求“http://yoursite.com/request_url/?callback=cb1304344”,返回:

<script type="text/javascript">
document.domain="tudou.com";
top.cb1304344({ /* 数据 */ });
</script>

——首先,很多情况下你请求到的不会是动态页面,在这个到处都强调高负载的web世界里,你拿到的经常是squid之类的代理程序返回的缓存。其次,如果你请求的是HTML格式的文本,为了能作为JS代码来执行,服务器端必须对这段文本做转义和清理工作,而且安全性还不一定能保证(因为HTML里经常包含很多来自UGC的内容),如果你请求的是JSON格式的数据……那何必用iframe咧……直接嵌script罢……

四、用iframe直接请求数据的最佳实践

我推荐在上述方法的基础上做改良,首先在服务器端,直接返回数据本身,并且把数据“包裹”在一个textarea标签里,比如:

<textarea><div><p>yyyyy</p></div></textarea>

textarea的优点是可以支持任何格式的内容,而且这些内容不会在iframe子页面里解析(比如创建DOM树,执行JS),接下来前端要做的,只是在父页面里获取到子页面的DOM,把textarea的内容取出来(注意不能取innerHTML而要取value)。

这里存在一个判断iframe是否加载完成的问题,解决方法之一是在iframe标签上写onload事件,不过这样就需要显式的调用一个函数。

方法二如下:

(function(){
try{
   callback(document.getElementById('crossdomain').contentWindow.document.body.getElementsByTagName("TEXTAREA")[0].value);
}catch(e){
    setTimeout(arguments.callee,0);
    return;
}   
})();

最后我们可以封装出这样一个方法:

window.TUI = window.$ = {};
/**
* @public 通过iframe异步请求数据
* @param {string}  url是请求的地址
* @param {function}  cb是处理返回数据的回调函数
*/
TUI.getIframeData = function(url, cb){
    var f = document.getElementById('crossdomain');
    if(f)
        f.src = url;
    else{
        var t = document.createElement("DIV");
        t.innerHTML = '<iframe id="crossdomain" width="0" height="0" style="visibility:hidden;" src="' + url + '" ></iframe>';
        document.body.appendChild(t.firstChild);
    }

    (function(){
    try{
       cb(document.getElementById('crossdomain').contentWindow.document.body.getElementsByTagName("TEXTAREA")[0].value);
    }catch(e){
        setTimeout(arguments.callee,0);
        return;
    }   
    })();
};

//像这样执行
$.getIframeData("http://yoursite.com/request_url/", function(data){
    /* do something */
});

只要再增加一个可选的param参数,这就是一个很标准的jQuery AJAX API,我们还可以在jQuery的$.get上面封装,增加一个是否跨域的判断,当这个request的URI修改成同样的域名后,自动切换到普通的AJAX方法来请求,把返回的文本用类似这样的正则/<(textarea)>(.+)<\/(textarea)>/删掉多余的字符,再传给回调函数,前端和服务器端都不用修改代码。

五、用iframe直接请求数据的缺陷

必须指出的是,iframe在ie里获取数据时会引发一些“小问题”,dojo的创始人Alex Russell把它们称作“灵异点击(phantom click)”和“噩梦般的指示器(throbber of doom)”,前者是指在iframe请求内容的时候会出现一次点击链接的音效(让用户怀疑闹鬼,多差的体验口牙!),后者是指iframe加载过程中,ie的界面上会出现正在读取的提示(比如左下的进度条,右上的图标)……好罢,其实以我个人的标准,这两个问题都可以无视……

这种方法还有一个明显的缺陷,就是只支持GET类型的请求。

六、用iframe结合ajax

不过iframe还有一种使用方法,不但可以避免上面提到的问题,也不需要服务器端做任何调整,简单来说:在iframe的src里调用一个包含ajax方法的页面,然后父页面调用这个方法来发起跟子页面同域名下的ajax请求。在土豆网的播放页面上,我使用这种方法请求用户评论统一接口里的HTML内容,例如这个WH40K:DOWII的视频:

获得评论部分HTML的接口类似这样:

http://comments.tudou.com/itemcomment.srv?method=get&iid=21283123&page=1&tm=5&ban=1

这个接口在独立的一组服务器上实现,在视频播放页,豆单播放页,豆单封面,相册,个人主页都会被调用。由于包含大量用户提交的内容和复杂的HTML结构,如果用JSON形式,前端后端处理起来都效率低,此外,提交新评论,回复,删除,也会用到comments.tudou.com这个域名下的接口,而这些操作显然需要POST类型的请求。在这种需求下,借助iframe的AJAX方法

首先在comments.tudou.com域名下部署一个供iframe调用的跨域文件,感觉很像flashplayer的crossdomain.xml……

http://comments.tudou.com/crossdomain/index.html

可以看到源文件里仅仅包含一个stand-alone的ajax方法……呃……你觉得很眼熟?不用怀疑,就是在jQuery源代码的基础上修改来的-___-b,支持最基本的需求。这个页面可以设置很长的过期头让浏览器缓存起来,因为不会再有变动。

在父页面里通过TUI.videoComment.request提供统一的接口,不做详述了,只列举其中访问跨域方法的部分:

(function(){
    try{
        $('#crossdomain')[0].contentWindow.TUI.ajax(o);   
    }catch(e){
        setTimeout(arguments.callee,500);
        return;
    }   
})();

七、总结一下

iframe适用于 ( 跨域的 && ( 返回大量数据 || 返回HTML内容 || 需要发POST请求 ) ) 的场合,除此之外还有comet里的串流技术(streaming)——本文不涉及。使用时需要注意保持资源的纯粹性,并尽可能隐藏那些跟其他异步请求差异很大的或包含hack的细节(比如嵌入iframe,触发回调函数,处理数据),设计出一致的,兼容性和扩展性良好的,不碍眼的接口XD

关于跨域还要补充一点:修改document.domain可能会产生一些无法预料的问题,比如在firefox里,document.styleSheets的cssRules属性会被拒绝访问。

 

转自:http://www.webjx.com/javascript/jsajax-14580.html

 

Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术。Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。使用 XMLHttpRequest 函数获取数据,它是一种 API,允许客户端 JavaScript 通过 HTTP 连接到远程服务器。Ajax 也是许多 mashup 的驱动力,它可将来自多个地方的内容集成为单一 Web 应用程序。

不过,由于受到浏览器的限制,该方法不允许跨域通信。如果尝试从不同的域请求数据,会出现安全错误。如果能控制数 据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误。但是,如果仅停留在自己的服务器上,Web 应用程序还有什么用处呢?如果需要从多个第三方服务器收集数据时,又该怎么办?

理解同源策略限制

同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说,受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容,以防止它们之间的操作。这个浏览器策略很旧,从 Netscape Navigator 2.0 版本开始就存在。

克服该限制的一个相对简单的方法是让 Web 页面向它源自的 Web 服务器请求数据,并且让 Web 服务器像代理一样将请求转发给真正的第三方服务器。尽管该技术获得了普遍使用,但它是不可伸缩的。另一种方式是使用框架要素在当前 Web 页面中创建新区域,并且使用 GET 请求获取任何第三方资源。不过,获取资源后,框架中的内容会受到同源策略的限制。

克服该限制更理想方法是在 Web 页面中插入动态脚本元素,该页面源指向其他域中的服务 URL 并且在自身脚本中获取数据。脚本加载时它开始执行。该方法是可行的,因为同源策略不阻止动态脚本插入,并且将脚本看作是从提供 Web 页面的域上加载的。但如果该脚本尝试从另一个域上加载文档,就不会成功。幸运的是,通过添加 JavaScript Object Notation (JSON) 可以改进该技术。

 

1、什么是JSONP?

要了解JSONP,不得不提一下JSON,那么什么是JSON ?

JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the language with no muss or fuss.

JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。

 

2、JSONP有什么用?

由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求。

 

3、如何使用JSONP?

下边这一DEMO实际上是JSONP的简单表现形式,在客户端声明回调函数之后,客户端通过script标签向服务器跨域请求数据,然后服务端返回相应的数据并动态执行回调函数。

HTML代码 (任一 ):

Html代码
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  
<script type="text/javascript">  
    function jsonpCallback(result) {  
        //alert(result);  
        for(var i in result) {  
            alert(i+":"+result[i]);//循环输出a:1,b:2,etc.  
        }  
    }  
    var JSONP=document.createElement("script");  
    JSONP.type="text/javascript";  
    JSONP.src="http://crossdomain.com/services.php?callback=jsonpCallback";  
    document.getElementsByTagName("head")[0].appendChild(JSONP);  
</script>

或者

Html代码
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  
<script type="text/javascript">  
    function jsonpCallback(result) {  
        alert(result.a);  
        alert(result.b);  
        alert(result.c);  
        for(var i in result) {  
            alert(i+":"+result[i]);//循环输出a:1,b:2,etc.  
        }  
    }  
</script>  
<script type="text/javascript" src="http://crossdomain.com/services.php?callback=jsonpCallback"></script>

 

JavaScript的链接,必须在function的下面。

服务端PHP代码 (services.php):

Php代码
<?php  

//服务端返回JSON数据  
$arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);  
$result=json_encode($arr);  
//echo $_GET['callback'].'("Hello,World!")';  
//echo $_GET['callback']."($result)";  
//动态执行回调函数  
$callback=$_GET['callback'];  
echo $callback."($result)";

如果将上述JS客户端代码用jQuery的方法来实现,也非常简单。

$.getJSON
$.ajax
$.get

客户端JS代码在jQuery中的实现方式1:

Js代码
<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript">  
    $.getJSON("http://crossdomain.com/services.php?callback=?",  
    function(result) {  
        for(var i in result) {  
            alert(i+":"+result[i]);//循环输出a:1,b:2,etc.  
        }  
    });  
</script>

客户端JS代码在jQuery中的实现方式2:

Js代码
<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript">  
    $.ajax({  
        url:"http://crossdomain.com/services.php",  
        dataType:'jsonp',  
        data:'',  
        jsonp:'callback',  
        success:function(result) {  
            for(var i in result) {  
                alert(i+":"+result[i]);//循环输出a:1,b:2,etc.  
            }  
        },  
        timeout:3000  
    });  
</script>

客户端JS代码在jQuery中的实现方式3:

Js代码
<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript">  
    $.get('http://crossdomain.com/services.php?callback=?', {name: encodeURIComponent('tester')}, function (json) { for(var i in json) alert(i+":"+json[i]); }, 'jsonp');  
</script>

其中 jsonCallback 是客户端注册的,获取 跨域服务器 上的json数据 后,回调的函数。

http://crossdomain.com/services.php?callback=jsonpCallback

这个 url 是跨域服务 器取 json 数据的接口,参数为回调函数的名字,返回的格式为

Js代码
jsonpCallback({msg:'this is json data'})

 

Jsonp原理:
首先在客户端注册一个callback, 然后把callback的名字传给服务器。

此时,服务器先生成 json 数据。
然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp.

最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。

客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数)

使用JSON的优点在于:

  • 比XML轻了很多,没有那么多冗余的东西。
  • JSON也是具有很好的可读性的,但是通常返回的都是压缩过后的。不像XML这样的浏览器可以直接显示,浏览器对于JSON的格式化的显示就需要借助一些插件了。
  • 在JavaScript中处理JSON很简单。
  • 其他语言例如PHP对于JSON的支持也不错。

JSON也有一些劣势:

  • JSON在服务端语言的支持不像XML那么广泛,不过JSON.org上提供很多语言的库。
  • 如果你使用eval()来解析的话,会容易出现安全问题。

尽管如此,JSON的优点还是很明显的。他是Ajax数据交互的很理想的数据格式。

 

主要提示:

JSONP 是构建 mashup 的强大技术,但不幸的是,它并不是所有跨域通信需求的万灵药。它有一些缺陷,在提交开发资源之前必须认真考虑它们。

第一,也是最重要的一点,没有关于 JSONP 调用的错误处理。如果动态脚本插入有效,就执行调用;如果无效,就静默失败。失败是没有任何提示的。例如,不能从服务器捕捉到 404 错误,也不能取消或重新开始请求。不过,等待一段时间还没有响应的话,就不用理它了。(未来的 jQuery 版本可能有终止 JSONP 请求的特性)。

JSONP 的另一个主要缺陷是被不信任的服务使用时会很危险。因为 JSONP 服务返回打包在函数调用中的 JSON 响应,而函数调用是由浏览器执行的,这使宿主 Web 应用程序更容易受到各类攻击。如果打算使用 JSONP 服务,了解它能造成的威胁非常重要。

 

转自:http://justcoding.iteye.com/blog/1366102

 

字面上理解下来就是,回调就是一个函数的调用过程。那么就从理解这个调用过程开始吧。函数a有一个参数,这个参数是个函数b,当函数a执行完以后执行函数b。那么这个过程就叫回调。

其实中文也很好理解:回调,回调,就是回头调用的意思。函数a的事先干完,回头再调用函数b。

这里必须清楚一点:函数b是你以参数形式传给函数a的,那么函数b就叫回调函数。

也许有人有疑问了:一定要以参数形式传过去吗,我不可以直接在函数a里面调用函数b吗?确实可以。求解中。

<解惑:如果你直接在函数a里调用的话,那么这个回调函数就被限制死了。但是使用函数做参数就有下面的好处:当你a(b)的时候函数b就成了回调函数,而你还可以a(c)这个时候,函数c就成了回调函数。如果你写成了function a(){…;b();}就失去了变量的灵活性。>

下面用代码来证实我的理解。

  • <html>
  • <head>
  • <title>回调函数(callback)</title>
  • <script language=”javascript” type=”text/javascript”>
  • function a(callback)
  • {
  •     alert(“我是parent函数a!”);
  •     alert(“调用回调函数”);
  •     callback();
  • }
  • function b(){
  • alert(“我是回调函数b”);
  • }
  • function c(){
  • alert(“我是回调函数c”);
  • }
  • function test()
  • {
  •     a(b);
  •    a(c);
  • }
  • </script>
  • </head>
  • <body>
  • <h1>学习js回调函数</h1>
  • <button onClick=test()>click me</button>
  • <p>应该能看到调用了两个回调函数</p>
  • </body>
  • </html>

转自:http://www.cnblogs.com/yhql/archive/2011/08/08/2131420.html

以上的例子简单易懂,但是对比下面的,我就有点糊涂了,可能是我这水平还看不懂吧,是不是那个option啊

今天想用js调取一个接口,可总不知道如何获取返回值,只能怪自己思维打盹了,其实返回值中是个函数回调,在调用页定义这个函数就可以了,例子如下:

<script     src=”http://blogpagin.sinajs.cn/article?1315019920&0&requestId=scriptId_0.37” ></script>

趁热打铁,看了下公司牛人写的js代码,温习下他们是如何这类问题的

<SCRIPT LANGUAGE=”JavaScript”>

window.$ScriptLoader = {

requestTable : {},

request : function (url, option){
option = option || {};
option.charset = option.charset || “utf-8″;

var id = “scriptId_” + Math.random();
url = url + “&id=” + id ;

this.requestTable[id] = {
id : id,
url : url,
option : option
};
var sTag = document.createElement(“script”);
sTag.id = id;
sTag.src = url;
sTag.charset = option.charset;

document.body.appendChild(sTag);
},
response : function (id, txt){

var entity = this.requestTable[id];
if (entity){
try {
entity.option.onComplete(txt );
} catch (err) {
var oe = entity.option.onException;
try {
if(oe)
oe(txt,    err);
else {
alert(“error occurs while calling onComplete to url : ” + this.requestTable[id].url + ” Error : ” + err);
}
} catch (err) {}
} finally {

}
}
}
}

</SCRIPT>

<body>

<SCRIPT LANGUAGE=”JavaScript”>
function fun( str)
{
alert(str);
}

function errfun()
{
alert(“error”);
}

var url = “http://www.test.com/cms/test.php?quest=” ;
var option = {onComplete:fun,onException:errfun};
window.$ScriptLoader.request(url,option);

</SCRIPT>

</body>

 

原理就是动态加载一个js文件,注意js文件的编码,然后预设一个回调函数,回调函数的触发点就是onComplete时间,这也是ajax的原型

看看test.php服务器端的代码:

<?php
echo “window.\$ScriptLoader.response(‘” . $_GET[id] . “‘,’ttt’);”;
?>

 

转自:http://hi.baidu.com/ywdblog/item/d95878eb6ec891e3fa42bae4

 

网站开发开发大概分为前台和后端,前台又可以分为美工,交互设计,js编程。后端了解不多,前端的话,可以按如下思路学习系统学习:
基础知识
1. html + css 这部分建议在 www.w3school.com.cn 上学习,边学边练,每章后还有小测试。之后可以模仿一些网站做些页面。在实践中积累了一些经验后,可以系统的读一两本书,推荐《head first html 与 css 中文版》,这本书讲的太细了,我没能拿出耐心细读。你可以根据情况斟酌。
2. javascript 要学的内容实在很多,如果没有其他编程语言的基础的话,学起来可能要费些力,还是建议先在 w3school上学习。之后建议马上看《javascript语言精粹》,js是一门很混乱的语言,这本书能够帮助你区分哪些是语言的精华,哪些是糟粕,对于语言精华,应该深入学习。糟粕部分能看懂别人写的代码就行,自己就不用尝试了。
进阶
有了以上基础,就可以进行一般的静态网页设计,不过对于复杂的页面还学进一步学习。
1. css。必看《精通css》,看完这本书你应该对:盒子模型,流动,block,inline,层叠,样式优先级,等概念非常了解了。作为练习可以看下《css艺门之匠》这本书,它对标题,背景,圆角,导航条,table,表单等主题都有详细的介绍。
2. javascript。上面提到内容还不足以让你胜任js编程。在有了基础之后,进一步学习内容包括:
a) 框架。推荐jQuery,简单易用,我的第一web项目就是在w3school简单学习后,直接上手jQuery完成的,真的很难简单,很好用。jQuery适用环境有限,对于那些对性能要求很高的页面无法胜任。推荐了解一下 YUI 或百度的 tangram ,都很好用,学习方法也很简单,照着产品文档做几个页面就行了,不用面面俱到,以后遇到问题查文档就行了。框架可以帮你屏蔽浏览器的差异性,让你能更专注与web开发学习的精髓部分。
b) javascript 语言范式 。这个名字可能并不恰当,只是我找不到可以描述“面向对象”,“函数式”这个两个概念的概念。javascript不完全是一个面向对象的语言,它的很多设计理念都有函数编程语言的影子,甚至说如果你不用面向对象,完全可以把它理解成一门函数式编程语言。javascript的很多语言特性,都是因为他具有函数是语言的特点才存在的。这部分推荐先学习面向对象的基本理论,对封装,继承,多态等概念要理解,维基百科,百度百科会是你的帮手,另外推荐《object oriented javascript》,应该有中文版。对与函数式编程我了解的也不系统,不好多说,可以自己百度一下。
c) javascript 语言内部机制。必须弄清如下概念:js中变量的作用域,变量传递方式,函数的定义环境与执行环境,闭包,函数的四种调用方式(一般函数,对象的方法,apply,call),以及四种调用方式下,‘this’指向的是谁。这部分内容你会在《javascript语言精粹》中详细了解。另外,你必须理解json。
d) dom编程,这个web前端工程师的核心技能之一。必读《dom编程艺术》,另外《高性能javascript》这本书中关于dom编程的部分讲的也很好。
e) ajax编程,这是另一核心技术。ajax建议在网上查些资料,了解这个概念的来龙去脉,百度百科,维基百科上的内容就足够了。真正编程是很容易的,如今几乎所有框架都对ajax有良好的封装,编程并不复杂。
f) 了解浏览器差异性。这部分包括css和js两部分,浏览器差异内容很多,建议在实践中多多积累。另外对于浏览器的渲染模式,DOCTYPE等内容应该系统学习。
再进一阶
有了以上知识,对于大多数小型网站,你应该已经可以写出能够工作的代码了。但写出可以运行的代码,只是编程的最初级阶段。更高要求大概还有三方面:1易维护,2可测试,3高性能,如果页面流量有要求,那第四个就是,4低流量。
1. 易维护。对于页面你该理解‘样式’,‘数据’,‘行为’三者分离,对应的当然就是css,html,js。对于js代码,你最好了解设计模式,重构,MVC等内容。
2. 可测性。js代码可测性的主题,我正在研究,欢迎感兴趣的同学联系我,共同学习
3. 高性能。必读《高性能javascript》
4. 低流量。技巧性太强,非一朝一夕之功,不多说
补充
对于前段开发,核心部分基本就这些了,可以根据自己的兴趣爱好选择性学习以下内容。
1. 美工。 大公司都有专业的美工人员,不过如果爱好也可以了解
2. 交互设计。大公司依然有专业人士搞这些,不过如果爱好也可了解。推荐《简约至上》。
3. 后端。应该说前段工程师必须至少了解一门后端语言,不过如果爱好也可深入学习,入手难度比较低的应该是php了。这部分由可分为基于页面,基于框架两种。大型项目都是基于框架开发的,建议至少了解一个MVC框架,php的zend,asp.net 的 asp.net mvc等等太多了,好还框架的设计思想都大同小异。
4. flash。我并没有吧flash作为前端工程的核心技能之一,因为我不会,不过ActionScript应该和js大同小异,可以根据工作需要学习。不过我的原则是能不用就尽量不用,其实很多效果通过js,css都可以实现,完全不需要flash。而且随着html5的发展flash早晚会淘汰。
5. html5和css3 。html5的标准到现在还没有正式发布,不过目前几乎所有新的浏览器都已经开始支持,手机上就更是如此,建议学习,很好,很强大。

前端开发需要学习的内容,很多很杂,我在最开始学习的前两个月也是一片迷茫。一路走来,发现也走了些弯路。美工,交互设计,flash,js,html+css,后端,随便哪种技能,如果学的特别牛,都可以保证你拥有一个职业。想通吃,没个几年怕是不成。关键是选准自己的爱好,深入学习一项,面要铺开,但深度更重要。

 

转自:http://www.zhihu.com/question/19834302/answer/13108148

© 2012 Hedgehog Suffusion theme by Sayontan Sinha