第2章{ 2-7 加载模块css文件 }

来源:互联网 发布:国密算法是否可解密 编辑:程序博客网 时间:2024/05/29 11:47

加载模块css文件

 kissy 除了加载模块js文件,还可以加载模块css文件。

一般我们都是在头部静态引用一个css文件:

<link rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.2.0/css/bootstrap.css.map"/>

在kissy中我们可以在业务js模块 require css样式文件。

配置一个 bee-demo 包:

KISSY.config({    packages: [        {            name: 'bee-demo',            base: 'http://demo.apebook.org/bee-demo/build',            ignorePackageNameInUri: true        }    ]});

业务模块中动态加载css模块文件:

KISSY.add('bee-demo/test',function(S ,require, exports, module){    require('bee-demo/index.css');})

当 KISSY.use('bee-demo/test'); 执行业务模块逻辑时,会去加载http://demo.apebook.org/bee-demo/build/index-min.css 文件。

动态加载css文件有个缺陷:如果结构已经先出来了,由于加载css文件需要时间,会导致这段结构缺失样式,导致页面加载初期会有变化,造成用户体验问题。

importStyle 的使用

importStyle可以帮助你阻塞地加载所有依赖的样式,这样我们就可以在head部分优先加载样式,就不会出现上文提到的样式变化问题。

需要使用 import-style 模块:

<script src="http://g.tbcdn.cn/kissy/k/1.4.8/??seed-min.js,import-style-min.js"></script>

PS:?? 是combo通配符,后面一节会说明

<head>    <!-- 引入seed和import-style -->    <script src="http://g.tbcdn.cn/kissy/k/1.4.8/??seed-min.js,import-style-min.js"></script>    <!-- 配置模块 -->    <script>    KISSY.config({        packages: [            {                name: 'bee-demo',                base: 'http://demo.apebook.org/bee-demo/build',                ignorePackageNameInUri: true            }        ]}    );    </script>    <!--引入样式-->    <script>        KISSY.importStyle('bee-demo/index.css');    </script></head>

KISSY.importStyle() 加载模块css文件。

模块css的模块名最好加上.css后缀,不然如果同时存在index.js和index.css时,KISSY.importStyle('bee-demo/index') 会优先加载js文件。       

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>加载模块css文件</title>
    <script src="//g.alicdn.com/kissy/k/1.4.7/seed-min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.2.0/css/bootstrap.css.map"/>
</head>
<body>
<header></header>
<article></article>
<script>
    KISSY.config({
        packages: [
            {
                name: 'bee-demo',
                base: 'http://apebook.org/bee-demo/build',
                ignorePackageNameInUri: true
            }
        ]}
    );


    KISSY.add('bee-demo/test',function(S ,require, exports, module){
        require('bee-demo/index.css');
    });
    KISSY.use('bee-demo/test');
</script>
</body>
</html>

0 0
原创粉丝点击