layui

Layui.js前端框架工作原理的简要分析

2018-09-30  本文已影响451人  科科分享

Layui.js作为国内较为优秀的前端框架，热门的“程序猿的前端框架”，这里简单解读一下它的核心库是怎么工作的，具体使用方法请移步到官方网站。

希望通过学习优秀代码，能更深入的了解js及成熟的前端框架，技能更上一层吧，也希望能给前端工程师将自己零散的function整合一套高可用的js框架带来帮助。

下面进入正题。

1、首先熟悉js面向对象开发

静态方法是：

View.test1 = function(){
  console.log('test1')
 }

私有方法是：

View.prototype.test = function(){
  console.log('test')
 }
2、目录结构
├─css //css目录
  │  │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
  │  │  ├─laydate
  │  │  ├─layer
  │  │  └─layim
  │  └─layui.css //核心样式文件
  ├─font  //字体图标目录
  ├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
  │─lay //模块核心目录
  │  └─modules //各模块组件
  │─layui.js //基础核心库
  └─layui.all.js //包含layui.js和所有模块的合并文件
3、核心文件解读layui.js

话外音：这里定义全局layui对象可以比作临时的数据库，它可以存储我们需要用到所有的数据（即js中可操作对象及变量等 ），在当前页面我们可以任意去使用其中的方法，这个思路可以用在商城的购物车系统，即使用户频繁操作购物车数据也不会对服务器造成压力；也可以用在一些结构比较复杂的单页面用户使用的系统，如某宝商家后台定义邮费模板，上面提到的购物车系统等

话外音：common.js规范，加载模块是同步的，所以只有加载完成才能执行后面的操作

4、自定义模块及使用模块

有一定js基础的同学，想必也有自己的一套js应用库，对于layui亦或觉得有时候使用的时候会觉得比较臃肿，这个时候就需要考虑整合一套自己的js框架。重复早轮子有时也是很有必要的，起码是自己的经验的累积的一个证明。首先我们从自定义模块做起。
定义你的第一个layui模块，命名为code.js：

layui.define(['jquery'], function(exports){
  "use strict";
  // to do you code
  var $ = layui.$; // 这个就是程序猿常用的jquery库了

  // 这里可以做更多的你熟悉的js事件...

  // 工厂模式，暴露code模块，在其他模块引用的话就可以调用它
  exports('code', function(){
      console.log('test');
  });
});

使用你的模块：

<script src="layui.js"></script>
<script>
        layui.use(['code'], function(){
            // 调用模块
            layui.code();
            // 这里还可以写更多额外的js事件...
            console.log(2222);
        });
</script>
5、核心代码展示

这里贴出精简的layui核心代码，可以拿去研究一下，写个属于自己的js前端框架

/*
 @Title: Layui
 @Descrition: 更多相关信息请移步官方http://www.layui.com/
 @License：MIT
 */
 
;!function(win){
    "use strict";

    var doc = document
    ,config = {
        modules: {} //记录模块物理路径
        ,status: {} //记录模块加载状态
        ,timeout: 10 //符合规范的模块请求最长等待秒数
        ,event: {} //记录模块自定义事件
    }

    ,Layui = function(){
        this.v = '1.0.0'; //版本号
    }

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

    //内置模块
    ,modules = {
        code: 'code' // 自定义的模块
        ,jquery: 'jquery'
        ,demomodule: 'demomodule' //弹层
        ,mobile: 'modules/mobile' //移动大模块 | 若当前为开发目录，则为移动模块入口，否则为移动模块集合
    };

    
    //记录基础数据
    Layui.prototype.cache = config;

    //存储模块的回调
    config.callback = {};

    //定义模块
    Layui.prototype.define = function(deps, factory){
        var that = this
        ,type = typeof deps === 'function'
        ,callback = function(){
            
            var setApp = function(app, exports){
                layui[app] = exports;
                config.status[app] = true;
            };

            typeof factory === 'function' && factory(function(app, exports){
            setApp(app, exports);
            config.callback[app] = function(){
                factory(setApp);
            }
            });

            return this;
        };

        // 这里是加载插件的时候，一定会执行的，而且一定会产生apps.length == 0的情况，如code.js中的参数 function(exports){}
        type && (
            factory = deps,
            deps = []
        );
        
        that.use(deps, callback);
        
        return that;
    };

    //使用特定模块
    Layui.prototype.use = function(apps, callback, exports){
        var that = this
        ,head = doc.getElementsByTagName('head')[0];

        apps = typeof apps === 'string' ? [apps] : apps;
        //如果页面已经存在jQuery1.7+库且所定义的模块依赖jQuery，则不加载内部jquery模块
        if(window.jQuery && jQuery.fn.on){
            that.each(apps, function(index, item){
                if(item === 'jquery'){
                apps.splice(index, 1);
                }
            });
            layui.jquery = layui.$ = jQuery;
        }
        var item = apps[0]
        ,timeout = 0;
        exports = exports || [];

        //静态资源host
        config.host = config.host || '';
        
        //加载完毕
        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);
                (function poll() {
                if(++timeout > config.timeout * 1000 / 4){
                    return error(item + ' is not a valid module');
                };
                config.status[item] ? onCallback() : setTimeout(poll, 4);
                }());
            }
        }
        
        //回调
        function onCallback(){
            apps.length > 1 ?
                 that.use(apps.slice(1), callback, exports)
            : ( typeof callback === 'function' && callback.apply(layui, exports)); // 当item是空的是，这里的callback是define中定义的callback；当item不为空的时候 这里是运行页面里的use()里面的逻辑, 即执行外部应用
        }
        
        // 如果使用了
        if(apps.length === 0){
          return onCallback(), that;
        }

        //首次加载模块
        if(!config.modules[item]){
            var node = doc.createElement('script')
            
            //如果是内置模块，则按照 dir 参数拼接模块路径
            //如果是扩展模块，则判断模块路径值是否为 {/} 开头，
            //如果路径值是 {/} 开头，则模块路径即为后面紧跟的字符。
            //否则，则按照 base 参数拼接模块路径
            ,url = ( modules[item] ? ''
                : (/^\{\/\}/.test(config.modules[item]) ? '' : (config.base || ''))
            ) + (config.modules[item] || item) + '.js';
            
            url = url.replace(/^\{\/\}/, '');
            
            node.async = true;
            node.charset = 'utf-8';
            node.src = url + function(){
                var version = config.version === true 
                ? (config.v || (new Date()).getTime())
                : (config.version||'');
                return version ? ('?v=' + version) : '';
            }();
            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);
            }
            
            config.modules[item] = url;
        } else {
            //缓存
            (function poll() {
                if(++timeout > config.timeout * 1000 / 4){
                return error(item + ' is not a valid module1');
                };
                (typeof config.modules[item] === 'string' && config.status[item]) 
                ? onCallback()
                : setTimeout(poll, 4);
            }());
        }
        return that;
    };
    
    //全局配置
    Layui.prototype.config = function(options){
        options = options || {};
        for(var key in options){
            config[key] = options[key];
        }
        return this;
    };

    //记录全部模块
    Layui.prototype.modules = function(){
        var clone = {};
        for(var o in modules){
            clone[o] = modules[o];
        }
        return clone;
    }();

    //存储模块的回调
    config.callback = {};
    
    //重新执行模块的工厂函数
    Layui.prototype.factory = function(modName){
        if(layui[modName]){
        return typeof config.callback[modName] === 'function' 
            ? config.callback[modName]
        : null;
        }
    };

    //提示
    Layui.prototype.hint = function(){
        return {
            error: error
        }
    };

    win.layui = new Layui();
}(window);

跟requireJS的原理差不多。起码使用起来更方便。
鉴于js知识有限，讲解的不够全面，如有讲解不到位的或者不明白的地方欢迎下方评论！~

上一篇 下一篇

猜你喜欢

热点阅读