帮我解释下这段代码

Question

    //===============================================
    //  简易框架
    //===============================================    //获得框架扩展对象
    var $ = function(element) {
        return fn.extend(typeof element == 'string' ? document.getElementById(element) : element, fn);
    };    //创建扩展对象
    $.create = function(elementType) {
        return $(typeof elementType == 'string' ? document.createElement(elementType) : elementType);
    }    var fn = $.prototype =
    {
        //实现简单继承功能
        extend: function(dest, source) {
            for (var i in source) dest[i] = source[i];
            return dest;
        },        //为对象增加css样式
        css: function(style) {
            this.extend(this.style, style);
            return this;
        }
    }我这是在网上找的
这段代码看的有点晕为什么写成  var fn = $.prototype= {}
而不直接   $.prototype= {}还有就是 extend属性里原理是什么?搞不懂.
return fn.extend(typeof element == 'string' ? document.getElementById(element) : element, fn);
这句里,调用fn.extend为什么把自己传进去?最晕了.

Answer 1

为什么写成  var fn = $.prototype= {} 
而不直接  $.prototype= {} 
-------------------------------------------
因为 fn 比 $.prototype 更短，后面代码都会用 fn 的！还有就是 extend属性里原理是什么?搞不懂. 
-------------------------------------------
extend 不是属性，而是方法，无非是将源对象（source）的所有属性/方法循环赋给目的对象（dest）。return fn.extend(typeof element == 'string' ? document.getElementById(element) : element, fn); 
-------------------------------------------
第一个对象为源对象，即 typeof element == 'string' ? document.getElementById(element) : element，element 可以为元素 id 或元素；
第二个对象为目的对象，fn 即 $.prototype，
执行 fn.extend 以后，element 对应的元素就拥有了 extend 和 css 两个方法。建议 lz 不要学习这种垃圾代码，还是从基本 js 语法学起吧，代码的易读性和可维护性远远高度功能实现！