layui.js

/*!

@Title: Layui
@Description:经典模块化前端框架
@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环境
    isOpera = typeof opera !== 'undefined' && opera.toString() === '[object Opera]',

    // 内置模块
    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', //树结构
        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', //移动大模块 | 若当前为开发目录,则为移动模块入口,否则为移动模块集合
        'layui.all' : 'dest/layui.all' //PC模块合并版
    };

config.modules = {}; //记录模块物理路径
config.status = {}; // 记录已注册的模块集。
config.timeout = 10; //符合规范的模块请求最长等待秒数
config.event = {}; //记录模块自定义事件

// 定义模块
Lay.fn.define = function(deps, callback) {
    var that = this,
        type = typeof deps === 'function',
        mods = function() {
            // 参数callback,可选,用于回调。
            // 回调参数function,用于回调时,注册模块。
            typeof callback === 'function' && callback(function(app, exports) {
                // 回调参数function的参数app,必要,代表模块名。
                // 回调参数function的参数exports,必要,代表模块的接口方法。
                layui[app] = exports;
                // config.status,记录已注册的模块集。
                config.status[app] = true;
            });
            return this;
        };

    // 参数deps,代表依赖的模块集,可选。
    type && (
        callback = deps,
        deps = []
    );

    // 相当于layui['layui.all'] || layui['layui.mobile']
    // 模块名layui.all,代表所有模块。
    // 模块名layui.mobile,代表手机版的所有模块。
    // 如果已经加载所有模块,则直接执行回调。
    if (layui['layui.all'] || (!layui['layui.all'] && layui['layui.mobile'])) {
        return mods.call(that);
    }

    // 方法layui.use,动态加载所依赖的模块集deps。
    that.use(deps, mods);
    return that;
};

// 动态加载模块集
Lay.fn.use = function(apps, callback, exports) {
    var that = this,
    // config.dir,内置文件的基目录,默认值为layui.js的所在目录,需以斜杠结束。
        dir = config.dir = config.dir ? config.dir : getPath;
    var head = doc.getElementsByTagName('head')[0];

    // 参数apps,必要,可以是字符串或数组。
    apps = typeof apps === 'string' ? [ apps ] : apps;

    // 参数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;
    // 参数exports,可选。
    exports = exports || [];

    // config.host,格式为“//.../”,默认值为config.dir中的主机,或当前页面的主机。
    config.host = config.host || (dir.match(/\/\/([\s\S]+?)\//)/* 匹配“//.../” */ || [ '//' + location.host + '/' ])[0];

    // apps.length === 0 || (layui['layui.all'] || layui['layui.mobile']) && modules[item]
    // 参数apps,允许为空集。
    // 如果需要加载的模块集为空集,则执行回调。
    // 模块名layui.all,代表所有模块。
    // 模块名layui.mobile,代表手机版的所有模块。
    // modules,代表layui的内置模块集。
    // 如果已经加载所有模块,并且当前模块是layui的内置模块,则当前模块不需要加载。
    if (apps.length === 0
        || (layui['layui.all'] && modules[item])
        || (!layui['layui.all'] && layui['layui.mobile'] && modules[item])
    ) {
        return onCallback(), that;
    }

    // 用于监听文件加载完毕
    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);
            // 轮询查看当前模块是否已注册,每0.025秒轮询一次,共论询config.timeout秒。
            // config.timeout,文件加载超时,默认值为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,代表扩展模块的JS文件目录,默认值为空串,需要以斜杠结束。
    // modules,代表layui的内置模块集。
    // layui.modules[name],代表模块name的相对路径(不包括后缀.js),默认值为name。
    //         如果当前模块是内置模块,则相对路径相对于config.dir + "lay/"。
    //        如果当前模块是扩展模块,则相对路径相对于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作为版本号,否则自己作为版本号,默认值不启用版本号。
        // config.v,代表版本号,默认值为当前时间。
        // config.version=true,config.v不设置时,使流览器不会加载缓存文件,而是重新加载。
        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,文件加载超时,默认值为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;

    //回调
    function onCallback() {
        // 参数exports,记录模块的接口。
        exports.push(layui[item]);
        // 加载下一个模块,如果没有下一个,则执行回调。
        apps.length > 1 ? that.use(apps.slice(1), callback, exports) : (typeof callback === 'function' && callback.apply(layui, exports));
    }

    return that;

};

// 获取节点的style属性值
Lay.fn.getStyle = function(node, name) {
    var style = node.currentStyle ? node.currentStyle : win.getComputedStyle(node, null);
    return style[style.getPropertyValue ? 'getPropertyValue' : 'getAttribute'](name);
};

// 动态加载CSS
Lay.fn.link = function(href, fn, cssname) {
    var that = this,
        link = doc.createElement('link');
    var head = doc.getElementsByTagName('head')[0];
    
    // 参数fn,可选。
    if (typeof fn === 'string')
        cssname = fn;
    
    // 参数cssname,用于标识CSS文件的ID,默认值为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';

    // 参数cssname,同一ID的CSS文件的只许加载一次。
    if (!doc.getElementById(id)) {
        head.appendChild(link);
    }

    // 参数fn,用于监听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内部加载器
Lay.fn.addcss = function(firename, fn, cssname) {
    // 全局配置dir,用于内置文件的基目录,默认值为layui.js所在的目录,需要以斜杠结束。
    layui.link(config.dir + 'css/' + firename, fn, cssname);
};

// 图片预加载
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),默认值为name。
Lay.fn.modules = function() {
    var clone = {};
    for (var o in modules) {
        clone[o] = modules[o];
    }
    return clone;
}();

// 设置模块的相对路径(不含后缀.js)
Lay.fn.extend = function(options) {
    var that = this;

    options = options || {};
    for (var o in options) {
        // layui[name],如果存在,则表示模块name已注册。
        // layui.modules[name],代表模块name的相对路径(不包括后缀.js),默认值为name。
        // 已注册或已设置相对路径的模块集,不允许再设置相对路径。显然,内置模块的相对路径不允许更改。
        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;
};

// 设备信息
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() { //底层操作系统
            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的标识
                ) : false;
        }(),
        weixin : getVersion('micromessenger') //是否微信
    };

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

    //移动设备
    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 ];

    //不再对多次事件监听做支持
    /*
    config.event[modName + '.' + events] 
      ? config.event[modName + '.' + events].push(callback) 
    : config.event[modName + '.' + events] = [callback];
    */

    return this;
};

// 执行自定义模块事件
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); //执行过滤器中的事件
    return result;
};

win.layui = new Lay();

}(window);

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,293评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,604评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,958评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,729评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,719评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,630评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,000评论 3 397
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,665评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,909评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,400评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,986评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,426评论 25 707
  • **2014真题Directions:Read the following text. Choose the be...
    又是夜半惊坐起阅读 9,363评论 0 23
  • 在现实中,经常会有人在痛心,我与她是真心相爱,我喜欢她,她也有表示她喜欢我,可为什么,我们还是感觉不到在一起...
    殇断阅读 264评论 0 2
  • 结婚,终身大事,爹不疼娘不爱,不闻不问。 工作,高不成低不就。 关上门,都是不开心,没有未来,没有安全感,连诉说的...
    浅话阅读 233评论 0 0
  • 以前 我不信佛 不信主 不信天堂 这些荒唐的谬论 不过是 信徒用来自欺欺人以逃避风尘琐碎的借口 我自作聪明地 表示...
    马麓阅读 185评论 0 0