前端javascript的学习历程

Posted 2022-12-04 骆宏

为什么需要学习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