架构型设计模式-同步模式

模块化： 将复杂的系统的分解成高内聚、低耦合的模块，使系统的开发变得可控、可维护。可拓展、提高模块的复用率

同步模块模式-SMD（Synchronous Module Definition）请求发出后，无论模块是否存在，立即执行后续的逻辑，实现模块开发对模块的立即引用

模块的管理器和创建方法

 

 /**
        * @param str模块路由
        * @param fn模块方法
        */
        // 定义模块管理器单体对象
        var F = F || {}
       
       F.define = function(str, fn){
           // 解析模块路由
           var parts =str.split('.'),
           // old当前的模块的的祖父模块， parent 当前模块的父模块
           // 如果在闭包中，为了屏蔽对模块的直接访问，建议将模块添加给闭包内部私有变量
           old = parent = this,
           // i 模块层级，len模块层级长度
           i = len = 0;
        
           // 如果第一个模块是模块管理器单体对象，则移除
           if(parts[0]==='F'){
                parts = parts.slice(1)
           }
           // 屏蔽对define与module模块方法重写
           if(parts[0] === 'define' || parts[0] === 'module'){
               return
           }
           //  遍历路由模块并定义每层模块
            for(len = parts.length; i < len; i++){
               // 当模块不存在当前模块
               if(typeof parent[parts[i]] === 'undefined'){
                   // 声明当前的模块
                    parent[parts[i]] = {};
                }
                //  缓存下一层的祖父模块
                old = parent;
                // 缓存下一层的父模块
                parent = parent[parts[i]]
                
            }
        
           // 如果给定的模块方法则定义该模块方法
           if(fn){
               // 此时i等于parts.length, 顾减一
               old[parts[--i]] = fn();

           }
        
           // 返回模块管理器单体对象
           return this
        }

创建模块 F.string模块

 F.define('string', function(){
           //
           return {
               //
               trim:  function(str){
                    return str.replace(/^\s+|\s+$/g, '');
                    // return str
               }
           }
       })

来测试一下

console.log('=====', '  11测试用例    ', '=====', F.string.trim('  11测试用例    '),'====')

对于模块的回调函数，我们也可以一构造函数的形式返回接口，比如创建DOM模块，其中包括DOm（）获取元素方法等

 F.define('dom', function(){
        // 简化
        var $ = function(id){
            $.dom = document.getElementById(id);
            console.log(document.getElementById(id))
            return $
        }
       
        $.html = function(html){
            if(html){
                this.dom.innerHTML = html;
                return this;
            }else{
                return this.dom.innerHTML;
            }
        }
        
        return $;
    })

测试一下

F.dom('test').html()
console.log('!!!!!', F.dom('test').html())

 F.define('dom.addClass');
   F.dom.addClass = function(type, fn){
       return function(className){
           if(!~this.dom.className.indexOf(className)){
               // 简单添加类
               this.dom.className +=''+className
           }
       }
   }();

// 测试用例
   F.dom('test').addClass('test')

 

 

 

模块的调用

 // 模块的调用
   F.module = function(){
       // 将参数转换为数组
       let args = [].slice.call(arguments),
       
       // 获取回调执行函数
       fn = args.pop(),
       //获取依赖模块， 如果是args[0]是数组，则依赖模块为 args[0]。否依赖模块为args
       parts = args[0] && args[0] instanceof Array ? args[0] : args,
       // 依赖模块列表
       modules =[],
       // 模块路由
       modIDs = '',
       // 依赖模块索引
       i = 0,
       // 依赖模块长度
       ilen = parts.length,
       // 父模块， 模块路由层级索引，模块路由有层级长度
       parent, j, jlen;
       //遍历依赖模块
       while(i < ilen){
            // 如果模块路由
            if(typeof parts[i] === 'string'){
               // 设置当前模块父对象（F）
                parent = this
                // 解析模块路由， 并屏蔽掉模块父对象 
                modIDs = parts[i].replace(/^F\./, '').split('.')
                // 
                for(j = 0, jlen = modIDs.length; j < jlen; j++){
                    // 重置父模块
                    parent = parent[modIDs[j]] || false
                }
                // 将模块添加到依赖模块列表中
                modules.push(parent);
            //如果是模块对象
            } else {
                // 直接加入依赖模块列表中
                modules.push(parts[i])
            }
            // 取下一个依赖模块
            i++;
       }
       
       // 执行回调执行函数
       fn.apply(null, modules)
   }

F.module(['dom', document], function(dom, doc){
    // 通过dom模块设置元素内容
    dom('test').html('new add!');
    // 通过document设置body元素背景色
    doc.body.style.background = 'red'
   });
   F.module('dom', 'string.trim', function(dom, trim){
    // 
    let html = dom('test').html();
    let str = trim(html);
    console.log('*'+html+'*', '*'+str+'*') // 
   })