前端javascript的学习历程

最新推荐文章于 2024-04-02 20:19:10 发布

骆宏

最新推荐文章于 2024-04-02 20:19:10 发布

阅读量636

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/u010469003/article/details/74454306

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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