1.7 css依赖顺序的解析

入口文件: login.js

// login.js的依赖
    [
        'login.css'
    ]
    // login.css的依赖
    [
        'account.css'
    ]

    // account.css的依赖
    [
        'reset.css',        //重置样式
        'dialog.css',       //弹窗
        'validator.css'     //验证
    ]

    // dialog.css的依赖
    [
        'reset.css'
    ]

    // reset.css & validator.css 没有依赖

加载顺序处理逻辑

// login依赖account
    // 因此第一步的依赖为
    var deps = [
        'login.css'
    ]
    // 然后login.css的依赖
    deps = [
        'account.css',
        'login.css'
    ]

    // account.css依赖 reset.css, dialog.css, validator.css
    // 顺序应该是
    deps = [

        'reset.css.deps',
        'reset.css',

        'dialog.css.deps',
        'dialog.css',

        'validator.css.deps',
        'validator.css',


        'account.css',
        'login.css'
    ]

    // 即依赖顺序为

    deps = [
        // reset.css.deps为null
        'reset.css',

        'reset.css',    // dialog.css.deps
        'dialog.css',

        //validator.css.deps为null
        'validator.css',

        'account.css',
        'login.css'
    ]

    // 去重得到最终依赖顺序
    deps = [
        'reset.css',
        'dialog.css',
        'validator.css',
        'account.css',
        'login.css'
    ]

 

posted @ 2015-07-16 10:57  zxscj  阅读(231)  评论(0编辑  收藏  举报