mass Framework决定用less作为自己的CSS重用工具,决定好好学习一下它的源码,说不定以后用mass Framework重写它。

一上来是个经典结构:自动执行函数

(function (window, undefined) {

})(window)

接着是加载器相关的内容

  function require(arg) {
        return window.less[arg.split('/')[1]];
    };

    // amd.js
    //如果引入AMD的加载器,则把它当成一个AMD模块
    if (typeof define === "function" && define.amd) {
        define("less", [], function () {
            return less;
        } );
    }

再接着ecma262v5的语言补丁,我们总得支持IE6

if (!Array.isArray) {
        Array.isArray = function(obj) {
            return Object.prototype.toString.call(obj) === "[object Array]" ||
            (obj instanceof Array);
        };
    }
    if (!Array.prototype.forEach) {
        Array.prototype.forEach =  function(block, thisObject) {
            var len = this.length >>> 0;
            for (var i = 0; i >> 0;
            var res = new Array(len);
            var thisp = arguments[1];

            for (var i = 0; i >> 0;
            var i = 0;

            // no value to return if no initial value and an empty array
            if (len === 0 && arguments.length === 1) throw new TypeError();

            if (arguments.length >= 2) {
                var rv = arguments[1];
            } else {
                do {
                    if (i in this) {
                        rv = this[i++];
                        break;
                    }
                    // if array contains no values, no initial value to return
                    if (++i >= len) throw new TypeError();
                } while (true);
            }
            for (; i = length) return -1;
            if (i 

接着是宿主环境检测与把命名空间放到全局变量下:


 var less, tree;

    if (typeof environment === "object" && ({}).toString.call(environment) === "[object Environment]") {
        //如果是在Rhino环境中
        // Details on how to detect Rhino: https://github.com/ringo/ringojs/issues/88
        if (typeof(window) === 'undefined') {
            less = {}
        } else                                {
            less = window.less = {}
        }
        tree = less.tree = {};
        less.mode = 'rhino';
    } else if (typeof(window) === 'undefined') {
        //如果是在node.js环境中
        less = exports,
        //我们可以把几个模块合并到一个JS文件中,因此如果是打包了,是调当前文件中的tree模块
        tree = require('./tree');
        less.mode = 'node';
    } else {
        //如果是在浏览器环境中
        if (typeof(window.less) === 'undefined') {
            window.less = {}
        }
        less = window.less,
        tree = window.less.tree = {};
        less.mode = 'browser';
    }

下面就是正式的解析器的内容了最主要的用法是new(less.Parser)().parse,是没有传参,env可能是为了向前兼容。 由于方法间的连联太频繁,从原型上调来调去太低效,改成如下结构

// function (){ /*内部方法与对象*/ return parser = {} }

待续!

相关文章:

  • 2021-06-30
  • 2021-11-26
  • 2022-12-23
  • 2022-12-23
  • 2022-02-17
  • 2022-12-23
  • 2021-05-22
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-11-26
  • 2021-08-23
相关资源
相似解决方案