js框架封装(一)——框架介绍

来源:互联网 发布:淘宝网汽车用品配件 编辑:程序博客网 时间:2024/06/05 16:37

作者的话

如果你和我一样是初窥前端的一个怀抱梦想的初学者,我希望我走过的这段路能对你有些许的启示,让你对前端收获一点感悟。如果你是一个前端的大牛,也由衷的希望你能留下些许的指教。

为什么使用框架

    我们知道,原生的js虽然代码强大,可以完成几乎所有项目的开发。    但是,如果纯用原生的js来写项目,未免过于繁琐。而借助于一些js框架可以使得代码变得简练。    类比jquery和原生的id选择器:    jquery: $('#panini');    原生js: document.getElementById('panini');    可见框架的好处了吧。

为什么封装自己的框架

    会用框架不代表能够理解一个框架。    Jquery八千多行的代码我是无法理解的了,但是封装一个自己的框架会让你对js认识更加深入,对js的使用更加熟练。    这也是我写这个系列的初衷。

框架雏形

/*******    create by panini      set time: 2017/10/17 20:52    copy@1.00*******/(function(){    var $$ = function() {        this.init();    };    $$.prototype = {        init:function(){            this.functionExtend();//为对象Function扩展方法            this.stringExtend();//为对象String扩展方法            this.arrayExtend();//为对象Array扩展方法            this.dateExtend();//为对象Date扩展方法            this.numberExtend();//为对象Number扩展方法        },        extend:function(obj) {            //遍历对象            for(var key in obj){                this[key] = obj[key];            }        },        //Function扩展        functionExtend:function (){},        //String扩展        stringExtend:function(){},        //Array扩展        arrayExtend:function(){},        //Date扩展        dateExtend:function(){},        //Number扩展        numberExtend:function(){},    }    $$ = new $$();    //封装框架    $$.extend({    })    window.$$ = $$;})();
原创粉丝点击