项目中如果管理前端文件CSS和JS

转载 2015年07月08日 09:32:43


如何管理CSS和JS文件,一直是前端一个热门的话题。下面将简单分享一下使用心得,欢迎大家吐槽、拍砖和提供更好的实现方式。


一、管理CSS文件,本博客将讨论less管理。

iReset.less、iButton.less、iCss3.less、iIcon.less、iTab.less、iMenu.less、iDialog.less、iForm.less、iDatagrid.less等等文件、以上文件都是最小模块文件。
把上面的文件按实际需要合并成一个iBase.less文件。如:打算将iReset.less、iButton.less合并在iBase.less中。

在iBase.less中引入如下文件即可:
@import "iReset.less";
@import "iButton.less";

页面级的管理,把页面中设计到的模块引入进来,和当前页面的样式引入进来。
例如:页面中用到了iCss3.less,iDialog.less、iDemo.less。
在iDemo.less中引入:
@import "iCss3.less";
@import "iDialog.less";
/*  页面中独立的样式  */

最后通过编译生成需要的CSS文件。



2、管理JS文件。
iJquery.js、iString.js、iArray.js、iDate.js、iBrowser.js、iUITab.js、iUIMenu.js、iUIDialog.js、iUIForm.js、iUIDatagrid.js等等。
JS部分大体可以分为两类,一类是常用的操作函数封装、另一类是基本UI的封装。

依赖jquery.js框架。在当前页面移入iJquery.js。

页面级的管理,iDemo.js中用到了 iString.js和iUIDialog.js和页面中对DOM的操作。

JS如何向java、php等后端语言一样引入呢????????????

本博客提供一种方式:
依赖gruntjs构建,将js文件引入到jade文件中,在将jade文件的名称转换成js(即改变后缀名)到一个目录中,在将这个目录的js文件压缩成生成目标文件。
例如:
iDemo.jade中包含 iString.js、iUIDialog.js、iDemoDom.js
在iDemo.jade中引入如下文件:
include iString.js
include iUIDialog.js
include iDemoDom.js

将编译iDemo.jade 生成iDemo.js,iDemo.js文件中所需要的js了,然后在将这个文件压缩成目标文件。

这个管理JS方法,借用了jade的include作用允许插入文件内容到另一个文件中。

相关文章推荐

JS配置文件动态加载CSS,js和定义请求路径

以前加载JS.CSS文件都习惯直接在页面中 直接加载,比如 而请求后台则是写请求路径。后来因为项目要再部署一套,因为后台那边不知道什么情况,VFP写的。所以限制比较

前端框架Vue(13)——vue 中如何对公共css、 js 方法进行单文件统一管理,全局调用

1、前言 最近,为公司开发交付的一个后台管理系统项目,我使用了 Vue 框架进行开发实践。 模块化、组件化、工程化的开发体验非常好。良好的 api,优雅的设计,对于工程师非常友好。 ...

前端页面文件拖拽上传模块html/css/js代码示例

最近给卫生局做一个表格上传/可视化系统,算是小有成果。今天把项目中的文件拖拽上传模块分离出来,做了一个独立的小demo,并把相关代码打包上传到了我的github中,为了其他学习者和开发者提供拙见。gi...

[前端优化]使用Combres合并对js、css文件的请求

在前端优化的各种金律铁规中,“减少客户端对资源的请求”都会在其中出现,刚好最近对网站做一些优化,使用了一下Combres组件,有点心得,遂整理成文。 园子中也有几篇Combres组件的介绍,如:...

8. CSS/JS 文件管理

1.管理 CSS/JS 2. 如何管理 {% block my_js %} {% javascripts '@WwwSecondBundle/Resources/public/...

关于iOS项目中引入Html5文件(html/js/css)的路径问题

iOS项目中使用项目中的html js css 文件时,有时会遇到引用路径出错的问题,导致html js css image文件无法加载的情况。 那么,引入H5相关文件的正确操作方式如下,这样就不会...

引用外部.css或.js文件的路径问题--jsp或html页面或是在web项目中的引用

jsp或html页面引用外部.css或.js文件时,注意路劲问题,如果设置不当,会引用不到这些外部的文件 假设使用下面的目录结构: -webapp  |-MyProject  目录  ...

关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件

关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件 在有Struts部署的Java EE环境中,我们一般把jsp页面写在WebRoot\W...

laravel5中 blade模板引入项目中的css js文件

将js css放在public目录下 相对public的绝对路径

Spring mvc 项目中页面访问不到静态文件,如img , js , css 等

Spring mvc 项目中页面访问不到静态文件,如img , js , css 等 起因:我们通常在springmvc项目中web.xml配置文件中的内容为: springmvc001-...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)