写给想学习Javascript的朋友一点学习经验小结

当然只是个人的经验,有什么不对的也请高手见谅和指正。

关于到培训学校学习的忠告:别说现在没有这样的学校,就是有专门的学校也不要去,因为不会有好的老师的。不要浪费你自己(很可能是你父母)的钱和时间。趁早死了这个念头。

关于培训学校的这个我想我要比一般的朋友更有发言权,因为我本人干英语培训将近2年,我很清楚培训市场的情况,你很难碰到一个好的老师。英语可能还好些,毕竟英语说得好的老师还比较多,长期跟老外泡在一起,确实对口语能力的提高很显著,但是代价是很昂贵的。而你现在要学的是Javascript,呵呵,好的前端工程师可不多!

我的个人观点,有资格和有能力的教好Javascript的老师,一定要是个好的有着丰富的前端开发经验的前端工程师。大学的老师,教授可能他们中很少有人符合这个要求,而好的前端工程师,都忙着自己的工作去了。剩下的有时间去教Javascript的人,呵呵,就不多说了。

这里也发点牢骚,我们在大学校园里学习的东西,你学的时候根本不知道这个东西有什么意义,你自己不去钻研,老师他是不会告诉你的。在培训学校,呵呵,也差不多。

如果不是一个好的前端工程师,他很难告诉你为什么我们现在提倡使用闭包把以前的全局变量放到闭包中作为闭包函数的局部变量?他也很难对 Javascript变量作用域的相关知识跟你讲透彻。在Javascript里能够形成scope(作用域)的东西有哪些?为什么说全局变量是魔鬼?闭包又是怎么产生的作用域?等等这样很基础,但很重要的知识的意义,他不清楚,将给你听,让你明白这些知识和他们的意义就更困难。

呵呵,所以我的建议,想学Javascript,还是多跟你的身边认识的朋友,特别是那些从事前端开发的工程师多交流和学习。自己要多钻研。呵呵,不认识前端工程师,就到我们与蓝色理想来多看看(bbs.blueidea.com,记住!这可不是广告哦!),把你不清楚的问题提出来,但是我这里要说一个好的学习习惯。什么时候提问?

什么时候提问?这个也是问题吗?对的,很多人,也是很多在校学生的一个不好的学习习惯,一有问题就问别人请求帮助。我个人这个是个坏习惯。难道问问题也是个坏习惯?对的,我个人觉得,你问问题寻求别人的帮助,应该是在你自己已经动脑经思考,通过各种途径查阅相关资料都无法获取问题的最终解决办法的情况下再来提问?这样你已经对你要解决的问题做过研究,有一定了解,你可以更详细的告诉别人你想要的答案大概是什么样的,或者说你可以把你想描述的问题讲的更清楚。这样别人来解决你的问题的时候,也可以更快速的作出解答。我想你学起来,对这个问题的理解也会更深刻些。

好了,好像扯得有些远了。来谈谈怎么学习Javascript吧!先给大家泼点冷水,我想告诉你的是:Javascript要比其他的开发语言都难学好!

为什么?因为就目前来说,大家(国内甚至是国外的程序员)普遍对Javascript这门编程语言(请允许我这么说)了解和研究得不够深,至少不像大家对 JAVA,C#等这样的语言了解的和研究得那么透。所以这个就引起了另一个问题,现在市面上Javascript的书籍对Javascript这门语言的讲解都不够深入和全面。当然是相对JAVA,C#这样的语言来说。所以这就导致了,学Javascript很困难。当然学任何一门编程语言,特别是学好,学精都不容易。

不过也有好的消息,就是现在大家对Javascript的重视和更深入的研究,现在Javascript书籍里讲解的内容也要比4年前质量高出太多了,可以这么说,你现在开始Javascript正是时候哦!呵呵!所以这里也给大家一个经验,买Javascript的书,最好不要买4年前,也就是2005 年前出版的。最好买近两年出版的书。

说到这里,我想说说一个现象,随这大家近几年对Javascript的重视和研究,主要是很多传统的程序员开始学习和研究Javascript,他们把面向对象编程的思想带入到Javascript的前端开发,极大的促进了Javascript的推广和发展。这点要十分感谢他们。也许是处于这些程序员的传统的开发的思想的影响,现在我们的Javascript库如雨后春笋般的出现。

呵呵!JAVA有JAVA的库和各种各样的框架,C#也是模仿JAVA,也是有着丰富的开发库。这些库为我们的开发带来了极大的方便,这是个很不错的事情。所以这些传统的程序员在从事前端的开发的时候,也为自己编写了库。我们很熟悉的就有prototype,jQuery,YUI,Ext等等,我就不一一列举了。当然这些库的出现也为我们的前端开发带来了极大的方便,但是事情都有两面性的,在这些库的出现后,在给我们的开发带来便利的同时,也让我们的很多朋友产生对库的依赖,可能严重点的,没有库了,给他个记事本(我们姑且不提开发效率)可能就不知道如何下手了。

如果仔细想想,这个也是很可怕的事情。为什么?因为大家都不再去花心思去研究Javascript底层的知识,只是一味的在这些库的帮助下,构建那些炫目的特效(还好,这些库都是免费的)。或者干脆直接用别人写好的插件。都不知道万一这些库要是开始收费(只是瞎想想),怎么办?还有就是这些库比如有别有用心的人,在中加点什么恶意的东西,我想很难有人会从头到位把一个库研究个透。你怎么办?最严重的就是编程能力的下降,但给人的感觉是入门的门槛更底了。不要被“The Write Less, Do More”这样的广告迷惑了,因为在你加载这个库的同时,别忘了“Size of your web page is much bigger, or say the size is HUGE".

所以当大家使用这些库的时候,我希望大家不仅仅是使用者,也要用心去阅读这些库的代码,从中学习。收获会很大的,而且说不定,你会发现可个改善地方,甚至是有错误的地方。这个是很有可能的。还有就是我刚才提到的,这些库的开发者很多都是从传统的程序员转型过来,或者说是因为开发需要而开始学习 Javascript,很可能会有错误。或者说受以前学习语言的影响,写的程序更像是在写其他的语言,而不是写Javascript,执行效率并不高。所以不要迷信库。

问几个问题,你清楚jQuery是怎么实现CSS(3)和XML的XPath选择器的吗?jQuery又是怎么实现eventHandle的?怎么处理其中的浏览器兼容性问题的?

如果你还不明白我提的问题,那么请仔细看看jQuery是怎么实现的吧!如果你还读不懂它,还是多看看我要给你介绍的Javascript的书吧,了解 Javascript的底层和基础的知识。让自己能读懂jQuery,让自己不要jQuery也能实现Dom的拖动,让自己也能写出自己的库。当然这话我说得太大了。不过只要你是真正研究Javascript和相关的知识,你也可以做到的。

绕了这么大一圈,现在让我们正式开始吧,来介绍几本学习Javascript的书吧。(以下介绍的书都是本人自己购买阅读过的,对了我不崇洋媚外,一条真理:不要买中国人写的Javascript书)

入门的书:

《Javascript高级编程技术》:不要被“高级”这两个字吓到,这个书其实是本很不错的入门的书,因为这本书也很详细的介绍了javascript 的全部内置对象和语法,并且介绍了面向对象的思想,DOM、BOM的知识,正则表达式,高级的DOM处理。Ajax的知识,还是很全面的。而且个人认为这本书对基础知识的介绍并不比其他的同类书逊色。比起《Javascript权威指南》(我当时买点的是第4版),我觉得更详细些和更清楚些。在《指南》的第4版中,我觉得那本书中讲的东西有点混乱。感觉一个知识点还没有讲清楚,就给你一个什么类,看得不明不白的。因为没有看《指南》的第五版,所以这里不推荐给大家。而且《高级编程》这本书要比《指南》便宜不少。《高级编程》中也提出了采用功能(future)探测来取代浏览器版本探测来处理脚本兼容性的处理。个人觉得《指南》有的,这本书也都说了。还有我前面提到的,这本书的作者是YAHOO的资深的前端工程师,你可以在他的网站下载到相关的代码。

《Javascript DOM 编程艺术》:我个人的感觉是学习DOM编程的经典入门书籍,作者是webstandards.org的创始人之一,书中以浅显易懂的语言,教你一步一步的来讲解DOM编程,一点点地提升网站的用户体验。书中一直强调不唐突的脚本开发,网站要向后兼容,强调网站的可访问性。这个也是大家在做前端开发时应当努力追求的,也是必须要有的开发指导思想。可惜很多的后台开发的程序员,根本没有这个概念,所以你在开发的时候,一定要给你的程序员多洗脑。呵呵!

《CSS权威指南》第三版:做前端开发,你必须要了解CSS,书中对CSS2的介绍很详细了。仔细的看吧,我每次看的时候,有会有新的收获。

《网站重构》、《CSS网站布局实录》(唯一一本推荐的国人写的书):看完了,你会知道为什么学WEB标准?你会知道前端工程师的工作很重要。

提高阶段:

《Javascript DOM 高级编程》:这本书里不光详细的介绍的DOM编程的技巧,也讲了使用面向对象编程的方法,使用命名空间来管理书中所写的开发库,在不断的学习中,你的个人 DOM Javascript库也不断的充实。呵呵,就像我前面说的,你可以写出自己的库了。当然书中的代码比较松散,还不能运用到实际的企业级的开发中。但是书中对闭包的介绍和面向对象的开发思想,会使你对JS的认识又提高了一个层次,虽然对面向对象开发的讲解还不够深。

《XML开发指南》:我们知道ajax,其中X就是指的XML,所以要了解XML的相关知识,你这本书,是一定要看的。看了之后你会发现XML要了解的东西实在太多了,可能跟你了解的东西相比,你才知道点皮毛。对了,这里说下,我并不推荐你使用XML来作为你的Ajax的程序的数据的载体。为什么?因为很不经济。你先把数据转换成XML文档,然后再通过Javascript把XML文档中的数据提出来,把文档转成数据。而浏览器对XPath处理的兼容性的处理,你会很发狂的。现在我们有一个代替他的东西JSON。但是由于XML已经是很多标准的默认数据通讯载体,比如RSS等,所以你还是得掌握。

个人觉得学Javascript看这些书基本差不多了。当然这些书也建议你看看《精通Javascript》、《PPK 谈 Javascript》、《CSS高级技巧》、《Ajax in Action》、《Ajax高级编程》、《JavaScript:The Good Parts(影印版)》。

看完这些书,你了解了Javascript的相关知识,了解了CSS(你会知道CSS都有哪些选择器),你了解了XML的知识。呵呵,基础的开发你应该都可以自己解决了。而且你对Javascript的面向对象的开发也有了了解,有着向后兼容的开发思想。显然你看完这些书,你对WEB标准也会有一个更深层次的理解。

当然,想成为一个优秀的前端工程师,你要学习的知识并不只有这些,你也要知道SEO的优化知识,因为你写的页面要对搜索引擎也要友好,要结构合理。你还要了解SQL和数据库,最好还要了解C#等后台编程的语言。两个主要原因,要全面的提高自己,而且要充分的理解面向对象的编程,这些传统语言的思想更成熟,但要知道Javascript跟这些传统的编程语言的继承机制是不一样的。所以不要用Javascript来写C#。还有一个重要的原因,你要跟后台的程序员合作,要他们更坚决的执行你的不唐突的开发思想,你必须要经常给他们洗脑。但是你说的话要让他们听得进去,他说的东西你要了解,而你最好也能给他一些有好的建议,他们才会听你的。为了我们WEB标准的开展,辛苦点就辛苦点吧!

这里要补充的就是,前端开发你要自己努力学习还有JSON和正则表达式,目前还没有很详细的介绍正则的书,然后就是AJAX程序中取代XML的JSON的数据载体,掌握JSON要比XML容易得多。最后就是大家也是我提到过很多次的闭包的使用,面向对象的开发的思想。

呵呵,最后就是多练习,把你学到知识运用到实际的开发中,常跟朋友多交流,我也希望能跟大家多交流心得。大家共同进步!

(0)

相关推荐

  • JavaScript 错误处理与调试经验总结

    下面总结一下JS错误处理与调试的方法 方法1:用alert() 和document.write()方法监视变量值. alert()在弹出对话框显示变量值的同时,会停止代码的继续运行,直到用户单击"确定"按钮,而document.write()则在输出值后继续运行代码.调试JS时可以根据具体情况来选择这种方法. 例如下面代码:将数组a中以1开头的数据添加到数组b中 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

  • 使用node.js半年来总结的 10 条经验

    先不说房价,堵车,雾霾...先说说我这半年使用 Node.js 的经验吧...都是工作上遇到的问题,血的教训.. 1.精确版本号 "一定要精确到具体版本号!使用*直接滚,^和~都不行!",早上刚到公司,我们服务器的头头满眼血丝(估计又凌晨几点睡的),对我抱怨道:"妈蛋,以前写的代码package.json里的版本和服务器正在运行的版本不一样.安装最新的又咣咣一顿报错."此处省略几千字... 好吧.我先打自己脸.以前只会用*...大多时候也没必要写死版本号,使用^和~

  • JS效率个人经验谈(8-15更新),加入range技巧

    首先,要谢谢CSDN hbhbhbhbhb1021(天外水火(我要多努力))和cuixiping(无心)的提醒.我会抽空把IE专有的方法如:insertAdjacentHTML的速度也给测出来看看是否合适大量数据时IE下,不用innerHTML的速度.这里的主要测试不是指生成数据时的速度,指的是匹配速度 ,例如我这里的匹配速度我测的10000条数据,有效数据为1000-1100条,输出复杂的HTML,速度为360ms左右,方法为 正则匹配Match(有循环)希望贴出您的测试数据.行innerHT

  • JS前端框架关于重构的失败经验分享

    好了开始吧 重构这个其实也不是什么大动作,主要要实现的功能嘛,就是把现有的JS代码重新划分一下,解耦现有模块.然后我打算把现有的程序划分一下模块然后重新打包做一个命名空间实现use或者类似于java的Package的东西.那么我只要加载一个use的js文件调用这个文件的use函数,通过设置某些参数,我可以动态地加载所需要的模块.这个是最完美的想法(那时我很傻很天真).好的,噩梦开始了. 前提,我低估了3个月前的自己.//好吧,下面可能会出现un文明用语~~ 首先,计划的第一天,我的打算是分离这个

  • jquery.validate.js插件使用经验记录

    最近做项目,需要用到 jQuery.validate.js插件,于是记录一下工作中的一些经验,以便日后学习. [例子如下] 1.前台页面 <form id="form1" method="post"> 用户名:<input type="text" id="UserName" name="UserName" /><!--<span id="name_error&q

  • 【经验总结】编写JavaScript代码时应遵循的14条规律

    本文讲述了编写JavaScript代码时应遵循的14条规律.分享给大家供大家参考,具体如下: 1. 总是使用 'var' 在javascript中,变量不是全局范围的就是函数范围的,使用"var"关键词将是保持变量简洁明了的关键.当声明一个或者是全局或者是函数级(function-level)的变量,需总是前置"var"关键词,下面的例子将强调不这样做潜在的问题. 不使用 Var 造成的问题 var i=0; // This is good - creates a

  • javascript 构造函数强制调用经验总结

    兴致勃勃地定义了下面这么个构造函数: 复制代码 代码如下: var Coder = function( nick ){ this.nick = nick; }; 定义构造函数结束后呢?没错,赶紧实例化: var coder = Coder( 'casper' ); 这个coder兄弟叫什么名字?赶紧打印下: 复制代码 代码如下: console.log( coder.nick ); //undefined = =b 竟然是undefined!!再回过头看看实例化的那个语句,不难发现问题出在哪里:

  • javascript 操作select下拉列表框的一点小经验

    按照我一贯的web开发风格,所有不直接操作数据库的事件,都尽可能由javascript来实现,所以这个需求我打算使用js来完成. 首先来分析一下具体情况:这个页面是一个更新页面,品牌有品牌1和品牌2两个字段,品牌2可以为空,品牌1不能为空,所以品牌2的下拉列表框比品牌1多一项:如果选择了品牌的前8相中的任意一项,"活跃状态"要隐藏,否则"活跃状态"默认显示状态为"潜在":当查询的结果品牌1和品牌2有任意一项在品牌的前8相中,"活跃状态&

  • js动态调用css属性的小规律及实例说明

    刚才看到一篇好的文章介绍js调用css属性,( ^_^ )不错嘛!免的自己忘记,总结一下 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position等. 2.对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可. 如:obj.style.marginTop,obj.style.borderLeftWidth,obj.st

  • js下关于onmouseout、事件冒泡的问题经验小结

    问题是这样的:一个div元素要触发onmouseout事件,同时这个div内部还有子元素,于是当鼠标移动到该div的子元素上时,onmouseout事件也被触发了.在要做浮动层效果的时候会经常遇到这个问题. 解决方法一: 使用jQuery,这个大家都会的: 复制代码 代码如下: <div id="div1">触发显示浮动层</div> <div id="div2"> <ul> <li>1</li>

  • javascript 框架小结 个人工作经验

    /**************************************************************************************** 作者:萧 枫 QQ:77182997 MSN:xiaofengnet@hotmail.com Email:xiaofengnet@163.com 网址:http://www.d369.net 请保留版权 谢谢合作 版本:V 1.6.1 /*****************************************

  • Javascript 多浏览器兼容总结(实战经验)

    一.document.formName.item("itemName") 问题 问题说明:IE下,可以使用 document.formName.item("itemName") 或 document.formName.elements["elementName"]:Firefox下,只能使用document.formName.elements["elementName"]. 解决方法:统一使用document.formName

随机推荐