前端javascript的学习历程

为什么需要学习javascript

在九天工作时，与同事一起开发一个crm系统，但是公司同事却没有人擅长javascript，所以最开始阶段，使用了大量的全局function来写，后面一个多月之后，逐渐的发现javascript的代码越来越多，项目的复杂度也在不断的增长，导致前端开发效率非常糟糕。基于这一点，我开始尝试使用javascript面向对象的方式来组织代码，开始学习javascript的教程，比如w3c，javacript权威指南等。经过一段时间的尝试，前端的代码写的越来越多后，对javascript有了一定的了解。逐渐的，由于crm系统大部分后台业务都不是很复杂，反而是前端需要考虑到界面排版，易用性等问题，我逐渐花更多的时间到前端。于是乎，前端占用的时间逐渐的超越了后端。

对于一个运营系统而言，由于业务的复杂度，并发性，对性能的要求都不算太高，反而对界面的易用性，排版等有着不小的要求，所以对于有些项目而言，全栈工程师是很有必要的。比如在我经历过的几个团队，由于大家都是后端开发人员，加上资源的限制，也不太可能配备专业的前端，所以就要求小组内大家都必须开发前后端。可能前端的工程师，初步涉猎前端时，都会觉得很简单，不求甚解，所以前端的能力一直处于似懂非懂的状态。熟悉一门语言，将会大大的提高开发的效率，以及完善个人的知识体系，对于web工程师而言，前端还是非常必要的。

javascript的关键：原型链，闭包，面向对象，执行效率

第一阶段：w3c

       在最初学习javascript时，通过w3c，快速的知道了javascript时啥，以及基本的语法特性。在这里面存粹就有了一个基本的概念，但是javascript的高级特性基本一无所获。

function xxx(){}function yyy(){}

      一般初学javascript的代码都是这样子写的，这种代码存在的问题就是对命名空间的污染非常严重，并且随着项目的演进，代码量上来之后，基本就失控了。

第二阶段：jquery

       经过使用javascript一段时间后，为了提升工作的效率，又开始学习了jquery，看了jquery相关书籍。

$('#xxx').click(function(){    //});$('#xxx').hide();$('#xxx').show();

       引入jquery后，可以不用关心浏览器之间的差异，也不用关心IE的特殊语法等，引入jquery后，对dom的操作变得赏心悦目，工作效率瞬间高涨。但是第一阶段的问题还是没有解决。

第三阶段：javascript面向对象

       使用了一段jquery后，对javascript有了更深入的了解，但是这时候我们随着项目的发展，我们的javascript的代码量越来越多，function的污染问题也慢慢体现了出来，所以这时候开始学习javascript的面向对象特性，开始研究原型链，犀牛书，jquery的内部源码，面向对象的代码雏形如下所示

function Student(name, age){}Student.prototype = {    eat: function(){    },    work: function(){    },    study: function(){    }}

       引入面向的技术后，我们的function会大大的减少，同时使用领域模型的思想，我们只需要根据业务来构建合适的对象即可，比如一个典型的后端界面，一般就是save,list,load几个属性即可，如下代码所示，对整个window的命名空间，几乎是0污染，这钟技术的使用，基本上能够解决命名空间污染的问题了。

$(function(){    function Role(){    }    Role.prototype = {        save: function(){        },        list: function(){        },        load: function(){        },        bindEventHandler: function(){ //绑定界面的操作事件            var that = this;            $('#save').click(function(){                that.save();            });            $('#load').click(function(){                that.load();            });            $('#search').click(function(){                that.search();            });        }    };});

第四阶段：制作jquery插件

       有了上面的基础理论与实践后，开始寻找jquery插件来提高开发效率，也开始写一些简单的jquery插件

(function() {    //定义Beautifier的构造函数    var Beautifier = function(ele, opt) {        this.$element = ele,        this.defaults = {            'color': 'red',            'fontSize': '12px',            'textDecoration': 'none'        },        this.options = $.extend({}, this.defaults, opt)    }    //定义Beautifier的方法    Beautifier.prototype = {        beautify: function() {            return this.$element.css({                'color': this.options.color,                'fontSize': this.options.fontSize,                'textDecoration': this.options.textDecoration            });        }    }    //在插件中使用Beautifier对象    $.fn.myPlugin = function(options) {        //创建Beautifier的实体        var beautifier = new Beautifier(this, options);        //调用其方法        return beautifier.beautify();    }})();

      使用第三方jquery插件，能够节省大量的时间，并且对UI的帮助非常的显著，大家需要的可以查阅jquery插件的官方文档。

第五阶段：使用js template模板技术来渲染界面

       由于在渲染界面时，字符串的拼接会带来代码可维护性的问题，所以这时候开水寻找类似freemarker的js技术，后面查找到了js template，然后使用该技术来替换字符串拼接。

<script type="text/html" id="template1">    <tr>        <td>${ID}</td>        <td>${Name}</td>    </tr></script><script type="text/javascript">    var users = [        {            ID: 'think8848',            Name: 'Joseph Chan',            Langs: [                'Chinese',                'English'            ]        },        {            ID: 'aCloud',            Name: 'Mary Cheung',            Langs: [                'Chinese',                'French'            ]        }    ];    $('#template1').tmpl(users).appendTo('#table1')</script>

第六阶段：angular，vue，react框架的引入，gulp等构建工作的引入

      由于前端的代码越来越多，项目不得不引入工程管理的管理方式，所以引入gulp构建；angular，vue，react可以的引入是为了提高前端的开发效率，以及项目管理的复杂度

总结

      从学习的历程我们可以看到，没学习一个技术，我们都是希望能够解决某个问题，比如jquery解决dom操作的问题，面向对象解决了命名空间污染等问题，js template界面了数据的渲染，有了这个理论的支持，我们队javascript就有了主要的把握，在选型时，方能做到胸有成竹。

附录

      学习教材：《锋利jquery》，《javascript权威指南》，《javascript设计模式》

      jquery源码解析：http://www.cnblogs.com/nuysoft/archive/2011/11/14/2248023.html

      javascript面向对象：https://www.ibm.com/developerworks/cn/web/1304_zengyz_jsoo/index.html

      javascript效率：http://www.cnblogs.com/couxiaozi1983/p/3510891.html