1.7 css依赖顺序的解析

最新推荐文章于 2023-04-22 18:29:42 发布

a754535754

最新推荐文章于 2023-04-22 18:29:42 发布

阅读量163

点赞数

原文链接：http://www.cnblogs.com/ipliu/p/4650587.html

版权

入口文件： 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'
    ]

转载于:https://www.cnblogs.com/ipliu/p/4650587.html