项目中如果管理前端文件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作用允许插入文件内容到另一个文件中。

在大型项目中组织CSS

转自:http://www.zcfy.cc/article/1202 (译者:kayson) 编写CSS容易。  编写可维护的CSS难。 这句话你之前可能听过100次了。  原因是CSS中...

前端页面完成后如何放在IDEA项目工程的目录下能正确加载css样式

1.首先WEB-INF里的文件不能被外界访问,所以CSS,JS等文件不能放在此处,刚开始我把前端做出来的东西全部放在了WEB-INF下所以肯定不对。 2.通过问学长得知在html里面没有引进CSS的...

HTML5的页面资源预加载技术(Link prefetch)加速页面加载

不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉。有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用...

Web前端性能优化之CDN加速

1、什么是CDN?   在介绍CDN加速之前,我们先来简单的了解一下什么是CDN?CDN(Content Delivery Network)即内容分发网络,其基本思路是尽可能的避开互联网上有可能...

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

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

大型web网站前端css\js\图片版本管理解决方案

前端页面加载过程 用户访问前端url链接时,会和本地已经缓存的url链接对比,如果一样,则会取本地前端文件进行渲染;如果不一样,则会向cdn发起请求,如果与cdn缓存的一致,则浏览器加载cdn里的u...

前端静态资源版本更新与缓存之——通过gulp 在原html文件上自动化添加js、css版本号

原理 修改js和css文件 通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件修改则hash号会发生变化) 替换html中的js,css文件名...

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

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

前端静态资源版本更新与缓存之——通过gulp 在原html文件上自动化添加js、css版本号

原理 修改js和css文件 通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件修改则hash号会发生变化) 替换html中的js,css文件名...

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

最近给卫生局做一个表格上传/可视化系统,算是小有成果。今天把项目中的文件拖拽上传模块分离出来,做了一个独立的小demo,并把相关代码打包上传到了我的github中,为了其他学习者和开发者提供拙见。gi...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:项目中如果管理前端文件CSS和JS
举报原因:
原因补充:

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