加载模块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>