加载模块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>
468
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
