layui.js

/*!

@Title: Layui
@Description:經(jīng)典模塊化前端框架
@Site: www.layui.com
@Author: 賢心
@License:MIT

*/

;!function(win) {

"use strict";

var Lay = function() {
    this.v = '1.0.9_rls'; //版本號
};

Lay.fn = Lay.prototype;

var doc = document,
    config = Lay.fn.cache = {},

    // 獲取本js所在目錄
    getPath = function() {
        var js = doc.scripts,
            jsPath = js[js.length - 1].src;
        return jsPath.substring(0, jsPath.lastIndexOf('/') + 1);
    }(),

    // 異常提示
    error = function(msg) {
        win.console && console.error && console.error('Layui hint: ' + msg);
    },

    // 檢測opera環(huán)境
    isOpera = typeof opera !== 'undefined' && opera.toString() === '[object Opera]',

    // 內(nèi)置模塊
    modules = {
        layer : 'modules/layer', //彈層
        laydate : 'modules/laydate', //日期
        laypage : 'modules/laypage', //分頁
        laytpl : 'modules/laytpl', //模板引擎
        layim : 'modules/layim', //web通訊
        layedit : 'modules/layedit', //富文本編輯器
        form : 'modules/form', //表單集
        upload : 'modules/upload', //上傳
        tree : 'modules/tree', //樹結(jié)構(gòu)
        table : 'modules/table', //富表格
        element : 'modules/element', //常用元素操作
        util : 'modules/util', //工具塊
        flow : 'modules/flow', //流加載
        carousel : 'modules/carousel', //輪播
        code : 'modules/code', //代碼修飾器
        jquery : 'modules/jquery', //DOM庫(第三方)  
        mobile : 'modules/mobile', //移動大模塊 | 若當(dāng)前為開發(fā)目錄琳状,則為移動模塊入口侠畔,否則為移動模塊集合
        'layui.all' : 'dest/layui.all' //PC模塊合并版
    };

config.modules = {}; //記錄模塊物理路徑
config.status = {}; // 記錄已注冊的模塊集湃番。
config.timeout = 10; //符合規(guī)范的模塊請求最長等待秒數(shù)
config.event = {}; //記錄模塊自定義事件

// 定義模塊
Lay.fn.define = function(deps, callback) {
    var that = this,
        type = typeof deps === 'function',
        mods = function() {
            // 參數(shù)callback涎跨,可選,用于回調(diào)回溺。
            // 回調(diào)參數(shù)function,用于回調(diào)時,注冊模塊累贤。
            typeof callback === 'function' && callback(function(app, exports) {
                // 回調(diào)參數(shù)function的參數(shù)app,必要少漆,代表模塊名臼膏。
                // 回調(diào)參數(shù)function的參數(shù)exports,必要示损,代表模塊的接口方法渗磅。
                layui[app] = exports;
                // config.status,記錄已注冊的模塊集。
                config.status[app] = true;
            });
            return this;
        };

    // 參數(shù)deps始鱼,代表依賴的模塊集仔掸,可選。
    type && (
        callback = deps,
        deps = []
    );

    // 相當(dāng)于layui['layui.all'] || layui['layui.mobile']
    // 模塊名layui.all风响,代表所有模塊嘉汰。
    // 模塊名layui.mobile,代表手機(jī)版的所有模塊状勤。
    // 如果已經(jīng)加載所有模塊鞋怀,則直接執(zhí)行回調(diào)。
    if (layui['layui.all'] || (!layui['layui.all'] && layui['layui.mobile'])) {
        return mods.call(that);
    }

    // 方法layui.use持搜,動態(tài)加載所依賴的模塊集deps密似。
    that.use(deps, mods);
    return that;
};

// 動態(tài)加載模塊集
Lay.fn.use = function(apps, callback, exports) {
    var that = this,
    // config.dir,內(nèi)置文件的基目錄葫盼,默認(rèn)值為layui.js的所在目錄残腌,需以斜杠結(jié)束。
        dir = config.dir = config.dir ? config.dir : getPath;
    var head = doc.getElementsByTagName('head')[0];

    // 參數(shù)apps贫导,必要抛猫,可以是字符串或數(shù)組。
    apps = typeof apps === 'string' ? [ apps ] : apps;

    // 參數(shù)apps中存在jquery時孩灯,如果頁面已加載jQuery1.7+庫闺金,則直接使用該庫。
    if (window.jQuery && jQuery.fn.on) {
        that.each(apps, function(index, item) {
            if (item === 'jquery') {
                apps.splice(index, 1);
            }
        });
        layui.jquery = jQuery;
    }

    var item = apps[0],
        timeout = 0;
    // 參數(shù)exports峰档,可選败匹。
    exports = exports || [];

    // config.host,格式為“//.../”讥巡,默認(rèn)值為config.dir中的主機(jī)掀亩,或當(dāng)前頁面的主機(jī)。
    config.host = config.host || (dir.match(/\/\/([\s\S]+?)\//)/* 匹配“//.../” */ || [ '//' + location.host + '/' ])[0];

    // apps.length === 0 || (layui['layui.all'] || layui['layui.mobile']) && modules[item]
    // 參數(shù)apps欢顷,允許為空集槽棍。
    // 如果需要加載的模塊集為空集,則執(zhí)行回調(diào)吱涉。
    // 模塊名layui.all刹泄,代表所有模塊。
    // 模塊名layui.mobile怎爵,代表手機(jī)版的所有模塊特石。
    // modules,代表layui的內(nèi)置模塊集鳖链。
    // 如果已經(jīng)加載所有模塊姆蘸,并且當(dāng)前模塊是layui的內(nèi)置模塊墩莫,則當(dāng)前模塊不需要加載。
    if (apps.length === 0
        || (layui['layui.all'] && modules[item])
        || (!layui['layui.all'] && layui['layui.mobile'] && modules[item])
    ) {
        return onCallback(), that;
    }

    // 用于監(jiān)聽文件加載完畢
    function onScriptLoad(e, url) {
        var readyRegExp = navigator.platform === 'PLaySTATION 3' ? /^complete$/ : /^(complete|loaded)$/
        if (e.type === 'load' || (readyRegExp.test((e.currentTarget || e.srcElement).readyState))) {
            config.modules[item] = url;
            head.removeChild(node);
            // 輪詢查看當(dāng)前模塊是否已注冊逞敷,每0.025秒輪詢一次狂秦,共論詢config.timeout秒。
            // config.timeout推捐,文件加載超時裂问,默認(rèn)值為10秒。
            (function poll() {
                if (++timeout > config.timeout * 1000 / 4) {
                    return error(item + ' is not a valid module');
                };
                config.status[item] ? onCallback() : setTimeout(poll, 4);
            }());
        }
    }

    var node = doc.createElement('script'),
    // config.base牛柒,代表擴(kuò)展模塊的JS文件目錄堪簿,默認(rèn)值為空串,需要以斜杠結(jié)束皮壁。
    // modules椭更,代表layui的內(nèi)置模塊集。
    // layui.modules[name]蛾魄,代表模塊name的相對路徑(不包括后綴.js)虑瀑,默認(rèn)值為name。
    //         如果當(dāng)前模塊是內(nèi)置模塊滴须,則相對路徑相對于config.dir + "lay/"舌狗。
    //        如果當(dāng)前模塊是擴(kuò)展模塊,則相對路徑相對于config.base扔水。
        url = (modules[item] ? (dir + 'lay/') : (config.base || '')) + (that.modules[item] || item) + '.js';
    node.async = true;
    node.charset = 'utf-8';
    node.src = url + function() {
        // config.version=true時把夸,使用config.v作為版本號,否則自己作為版本號铭污,默認(rèn)值不啟用版本號。
        // config.v膀篮,代表版本號嘹狞,默認(rèn)值為當(dāng)前時間。
        // config.version=true誓竿,config.v不設(shè)置時磅网,使流覽器不會加載緩存文件,而是重新加載筷屡。
        var version = config.version === true ? (config.v || (new Date()).getTime()) : (config.version || '');
        return version ? ('?v=' + version) : '';
    }();

    // config.modules[name]涧偷,代表已加載,或正在加載中的模塊name的相對路徑(不包括后綴.js)毙死。
    if (!config.modules[item]) {
        head.appendChild(node);
        if (node.attachEvent && !(node.attachEvent.toString && node.attachEvent.toString().indexOf('[native code') < 0) && !isOpera) {
            node.attachEvent('onreadystatechange', function(e) {
                onScriptLoad(e, url);
            });
        } else {
            node.addEventListener('load', function(e) {
                onScriptLoad(e, url);
            }, false);
        }
    } else {
        // 輪詢查看是否加載完畢燎潮,每0.025秒輪詢一次,共論詢config.timeout秒扼倘。
        // config.timeout确封,文件加載超時,默認(rèn)值為10秒。
        (function poll() {
            if (++timeout > config.timeout * 1000 / 4) {
                return error(item + ' is not a valid module');
            };
            // config.status爪喘,記錄已注冊的模塊集颜曾。
            (typeof config.modules[item] === 'string' && config.status[item]) ? onCallback() : setTimeout(poll, 4);
        }());
    }
    config.modules[item] = url;

    //回調(diào)
    function onCallback() {
        // 參數(shù)exports,記錄模塊的接口秉剑。
        exports.push(layui[item]);
        // 加載下一個模塊泛豪,如果沒有下一個,則執(zhí)行回調(diào)侦鹏。
        apps.length > 1 ? that.use(apps.slice(1), callback, exports) : (typeof callback === 'function' && callback.apply(layui, exports));
    }

    return that;

};

// 獲取節(jié)點(diǎn)的style屬性值
Lay.fn.getStyle = function(node, name) {
    var style = node.currentStyle ? node.currentStyle : win.getComputedStyle(node, null);
    return style[style.getPropertyValue ? 'getPropertyValue' : 'getAttribute'](name);
};

// 動態(tài)加載CSS
Lay.fn.link = function(href, fn, cssname) {
    var that = this,
        link = doc.createElement('link');
    var head = doc.getElementsByTagName('head')[0];
    
    // 參數(shù)fn诡曙,可選。
    if (typeof fn === 'string')
        cssname = fn;
    
    // 參數(shù)cssname种柑,用于標(biāo)識CSS文件的ID岗仑,默認(rèn)值為href。
    var app = (cssname || href).replace(/\.|\//g, '');
    var id = link.id = 'layuicss-' + app,
        timeout = 0;

    link.rel = 'stylesheet';
    // config.debug=true時聚请,使流覽器不會加載緩存文件荠雕。
    link.href = href + (config.debug ? '?v=' + new Date().getTime() : '');
    link.media = 'all';

    // 參數(shù)cssname,同一ID的CSS文件的只許加載一次驶赏。
    if (!doc.getElementById(id)) {
        head.appendChild(link);
    }

    // 參數(shù)fn炸卑,用于監(jiān)聽CSS加載完畢。
    if (typeof fn !== 'function') return;
    // 輪詢查看是否加載完畢煤傍,每0.1秒輪詢一次盖文,共論詢config.timeout秒。
    (function poll() {
        if (++timeout > config.timeout * 1000 / 100) {
            return error(href + ' timeout');
        };
        parseInt(that.getStyle(doc.getElementById(id), 'width')) === 1989 ? function() {
            fn();
        }() : setTimeout(poll, 100);
    }());
};

// css內(nèi)部加載器
Lay.fn.addcss = function(firename, fn, cssname) {
    // 全局配置dir蚯姆,用于內(nèi)置文件的基目錄五续,默認(rèn)值為layui.js所在的目錄,需要以斜杠結(jié)束龄恋。
    layui.link(config.dir + 'css/' + firename, fn, cssname);
};

// 圖片預(yù)加載
Lay.fn.img = function(url, callback, error) {
    var img = new Image();
    img.src = url;
    if (img.complete) {
        return callback(img);
    }
    img.onload = function() {
        img.onload = null;
        callback(img);
    };
    img.onerror = function(e) {
        img.onerror = null;
        error(e);
    };
};

// 全局配置
Lay.fn.config = function(options) {
    options = options || {};
    for (var key in options) {
        config[key] = options[key];
    }
    return this;
};

// layui.modules[name]疙驾,代表模塊name的相對路徑(不包括后綴.js),默認(rèn)值為name郭毕。
Lay.fn.modules = function() {
    var clone = {};
    for (var o in modules) {
        clone[o] = modules[o];
    }
    return clone;
}();

// 設(shè)置模塊的相對路徑(不含后綴.js)
Lay.fn.extend = function(options) {
    var that = this;

    options = options || {};
    for (var o in options) {
        // layui[name]它碎,如果存在,則表示模塊name已注冊显押。
        // layui.modules[name]扳肛,代表模塊name的相對路徑(不包括后綴.js),默認(rèn)值為name乘碑。
        // 已注冊或已設(shè)置相對路徑的模塊集挖息,不允許再設(shè)置相對路徑。顯然蝉仇,內(nèi)置模塊的相對路徑不允許更改旋讹。
        if (that[o] || that.modules[o]) {
            error('\u6A21\u5757\u540D ' + o + ' \u5DF2\u88AB\u5360\u7528');
        } else {
            that.modules[o] = options[o];
        }
    }
    return that;
};

// 路由
Lay.fn.router = function(hash) {
    var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
    var item,
        param = {
            dir : []
        };
    for (var i = 0; i < hashs.length; i++) {
        item = hashs[i].split('=');
        /^\w+=/.test(hashs[i]) ? function() {
            if (item[0] !== 'dir') {
                param[item[0]] = item[1];
            }
        }() : param.dir.push(hashs[i]);
        item = null;
    }
    return param;
};

// 本地存儲
Lay.fn.data = function(table, settings) {
    table = table || 'layui';

    if (!win.JSON || !win.JSON.parse) return;

    //如果settings為null殖蚕,則刪除表
    if (settings === null) {
        return delete localStorage[table];
    }

    settings = typeof settings === 'object'
        ? settings
        : {
            key : settings
        };

    try {
        var data = JSON.parse(localStorage[table]);
    } catch (e) {
        var data = {};
    }

    if (settings.value)
        data[settings.key] = settings.value;
    if (settings.remove)
        delete data[settings.key];
    localStorage[table] = JSON.stringify(data);

    return settings.key ? data[settings.key] : data;
};

// 設(shè)備信息
Lay.fn.device = function(key) {
    var agent = navigator.userAgent.toLowerCase();

    //獲取版本號
    var getVersion = function(label) {
        var exp = new RegExp(label + '/([^\\s\\_\\-]+)');
        label = (agent.match(exp) || [])[1];
        return label || false;
    };

    var result = {
        os : function() { //底層操作系統(tǒng)
            if (/windows/.test(agent)) {
                return 'windows';
            } else if (/linux/.test(agent)) {
                return 'linux';
            } else if (/iphone|ipod|ipad|ios/.test(agent)) {
                return 'ios';
            }
        }(),
        ie : function() { //ie版本
            return (!!win.ActiveXObject || "ActiveXObject" in win) ? (
                (agent.match(/msie\s(\d+)/) || [])[1] || '11' //由于ie11并沒有msie的標(biāo)識
                ) : false;
        }(),
        weixin : getVersion('micromessenger') //是否微信
    };

    //任意的key
    if (key && !result[key]) {
        result[key] = getVersion(key);
    }

    //移動設(shè)備
    result.android = /android/.test(agent);
    result.ios = result.os === 'ios';

    return result;
};

// 提示
Lay.fn.hint = function() {
    return {
        error : error
    }
};

// 遍歷
Lay.fn.each = function(obj, fn) {
    var that = this,
        key;
    if (typeof fn !== 'function') return that;
    obj = obj || [];
    if (obj.constructor === Object) {
        for (key in obj) {
            if (fn.call(obj[key], key, obj[key])) break;
        }
    } else {
        for (key = 0; key < obj.length; key++) {
            if (fn.call(obj[key], key, obj[key])) break;
        }
    }
    return that;
};

// 阻止事件冒泡
Lay.fn.stope = function(e) {
    e = e || win.event;
    e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
};

// 自定義模塊事件
Lay.fn.onevent = function(modName, events, callback) {
    if (typeof modName !== 'string'
        || typeof callback !== 'function') return this;
    config.event[modName + '.' + events] = [ callback ];

    //不再對多次事件監(jiān)聽做支持
    /*
    config.event[modName + '.' + events] 
      ? config.event[modName + '.' + events].push(callback) 
    : config.event[modName + '.' + events] = [callback];
    */

    return this;
};

// 執(zhí)行自定義模塊事件
Lay.fn.event = function(modName, events, params) {
    var that = this,
        result = null,
        filter = events.match(/\(.*\)$/) || []; //提取事件過濾器
    var set = (events = modName + '.' + events).replace(filter, ''); //獲取事件本體名
    var callback = function(_, item) {
        var res = item && item.call(that, params);
        res === false && result === null && (result = false);
    };
    layui.each(config.event[set], callback);
    filter[0] && layui.each(config.event[events], callback); //執(zhí)行過濾器中的事件
    return result;
};

win.layui = new Lay();

}(window);

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市沉迹,隨后出現(xiàn)的幾起案子睦疫,更是在濱河造成了極大的恐慌,老刑警劉巖鞭呕,帶你破解...
    沈念sama閱讀 207,248評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蛤育,死亡現(xiàn)場離奇詭異,居然都是意外死亡葫松,警方通過查閱死者的電腦和手機(jī)瓦糕,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,681評論 2 381
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來腋么,“玉大人咕娄,你說我怎么就攤上這事∩豪蓿” “怎么了圣勒?”我有些...
    開封第一講書人閱讀 153,443評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長摧扇。 經(jīng)常有香客問我圣贸,道長,這世上最難降的妖魔是什么扛稽? 我笑而不...
    開封第一講書人閱讀 55,475評論 1 279
  • 正文 為了忘掉前任吁峻,我火速辦了婚禮,結(jié)果婚禮上在张,老公的妹妹穿的比我還像新娘用含。我一直安慰自己,他們只是感情好帮匾,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,458評論 5 374
  • 文/花漫 我一把揭開白布耕餐。 她就那樣靜靜地躺著,像睡著了一般辟狈。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上夏跷,一...
    開封第一講書人閱讀 49,185評論 1 284
  • 那天哼转,我揣著相機(jī)與錄音,去河邊找鬼槽华。 笑死壹蔓,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的猫态。 我是一名探鬼主播佣蓉,決...
    沈念sama閱讀 38,451評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼披摄,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了勇凭?” 一聲冷哼從身側(cè)響起疚膊,我...
    開封第一講書人閱讀 37,112評論 0 261
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎虾标,沒想到半個月后寓盗,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,609評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡璧函,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,083評論 2 325
  • 正文 我和宋清朗相戀三年傀蚌,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蘸吓。...
    茶點(diǎn)故事閱讀 38,163評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡善炫,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出库继,到底是詐尸還是另有隱情箩艺,我是刑警寧澤,帶...
    沈念sama閱讀 33,803評論 4 323
  • 正文 年R本政府宣布制跟,位于F島的核電站舅桩,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏雨膨。R本人自食惡果不足惜擂涛,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,357評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望聊记。 院中可真熱鬧撒妈,春花似錦、人聲如沸排监。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,357評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽舆床。三九已至棋蚌,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間挨队,已是汗流浹背谷暮。 一陣腳步聲響...
    開封第一講書人閱讀 31,590評論 1 261
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留盛垦,地道東北人湿弦。 一個月前我還...
    沈念sama閱讀 45,636評論 2 355
  • 正文 我出身青樓,卻偏偏與公主長得像腾夯,于是被迫代替她去往敵國和親颊埃。 傳聞我的和親對象是個殘疾皇子蔬充,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,925評論 2 344

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,527評論 25 707
  • **2014真題Directions:Read the following text. Choose the be...
    又是夜半驚坐起閱讀 9,399評論 0 23
  • 在現(xiàn)實(shí)中,經(jīng)常會有人在痛心班利,我與她是真心相愛饥漫,我喜歡她,她也有表示她喜歡我肥败,可為什么趾浅,我們還是感覺不到在一起...
    殤斷閱讀 264評論 0 2
  • 結(jié)婚,終身大事馒稍,爹不疼娘不愛皿哨,不聞不問。 工作纽谒,高不成低不就证膨。 關(guān)上門,都是不開心鼓黔,沒有未來央勒,沒有安全感,連訴說的...
    淺話閱讀 234評論 0 0
  • 以前 我不信佛 不信主 不信天堂 這些荒唐的謬論 不過是 信徒用來自欺欺人以逃避風(fēng)塵瑣碎的借口 我自作聰明地 表示...
    馬麓閱讀 186評論 0 0