简易CSS加载插件require-css.js for require.js与vuejs
"require-css.js 是一个用于在非专业前端开发场景中,配合require.js加载CSS文件的简单插件。作者koqiui旨在提供一个在浏览器页面端开发时,能够方便地加载和管理CSS模块的解决方案。这个插件特别适合Vue.js等框架的开发者,可以避免require.js原生不支持CSS加载的问题,并且可以在不使用require.js的情况下单独运行。插件还具有防止重复加载CSS文件的功能,并允许指定父元素和回调函数来更灵活地控制加载行为。" 在这个插件中,核心功能是`_loadCssFn`函数,它接受三个参数:`cssSrc`(CSS文件的URL)、`parent`(可选的插入CSS链接的父元素)和`id`(可选的CSS链接的ID)。如果`parent`参数是函数类型,那么它会被视为加载完成后的回调函数。同样,如果`id`参数是函数类型,也会被当作回调处理。如果没有提供`parent`,默认会将CSS链接添加到文档的`head`元素中。`id`若未设置,则会根据`cssSrc`自动生成。 代码首先检查了输入参数的类型,并根据需要进行转换。然后,它寻找URL中的最后出现的斜杠或反斜杠,以此作为文件名的起始位置,查找".css"或问号(可能表示查询字符串)来确定文件名。文件名将被用作生成的CSS链接的ID,以便于管理和避免重复加载。 在创建CSS链接元素并设置其属性后,代码会根据是否存在`loadCallback`来决定是否添加`onload`和`onerror`事件监听器,以便在CSS加载成功或失败时调用回调函数。最后,将新创建的CSS链接元素插入到指定的父元素中。 这个插件的使用方法简单,与require.js的接口保持一致,为开发者提供了在模块化项目中加载CSS文件的便利,尤其在不熟悉或不使用require.js的专业前端工具链的情况下。同时,由于它是针对Vue.js等框架设计的,因此也适用于处理这些框架中的CSS模块需求,例如将Vue组件的模板转换为require.js兼容的模块。
* @description require.js 配合使用的简单的css加载插件
* @author koqiui
* @email : koqiui@163.com
* @date 2017-03-29
*/
// 加载css文件(可以防止重复加载)
var __loadCssFn = function(cssSrc, parent, id) {
//loadCallback(newlyLoaded, cssUrl)
var loadCallback = null;
if(typeof parent == "function") {
loadCallback = parent;
parent = null;
}
//
if(typeof parent == "string") {
var tmpParents = document.getElementsByTagName(parent);
if(tmpParents.length > 0) {
parent = tmpParents[0];
} else {
parent = null;
}
}
if(parent == null) {
parent = document.head;
}
//
if(typeof id == "function") {
loadCallback = id;
id = null;
下载后可阅读完整内容,剩余4页未读,立即下载
- 粉丝: 8
- 资源: 20
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- C++标准程序库:权威指南
- Java解惑:奇数判断误区与改进方法
- C++编程必读:20种设计模式详解与实战
- LM3S8962微控制器数据手册
- 51单片机C语言实战教程:从入门到精通
- Spring3.0权威指南:JavaEE6实战
- Win32多线程程序设计详解
- Lucene2.9.1开发全攻略:从环境配置到索引创建
- 内存虚拟硬盘技术:提升电脑速度的秘密武器
- Java操作数据库:保存与显示图片到数据库及页面
- ISO14001:2004环境管理体系要求详解
- ShopExV4.8二次开发详解
- 企业形象与产品推广一站式网站建设技术方案揭秘
- Shopex二次开发:触发器与控制器重定向技术详解
- FPGA开发实战指南:创新设计与进阶技巧
- ShopExV4.8二次开发入门:解决升级问题与功能扩展