返回顶部

前端css、js、img文件夹管理、团队合作开发代码规范的一些心得

来源:无 发布时间:2016-03-05

前话

随着项目的持续开发,开发时所要管理的文件夹越来越庞大,如果不好好整理一下,真的会让自己找不着头脑。比如网站页面所要用到的图片,前期图片数很少时可能我会建一个文件夹,然后把切出来的图往里面一扔,然后到要用的时候引用对应的路劲就可以了,可是,后面页面越来越多,所切的图片也越来越多,这些图片的名字杂乱无序,难以复用,新切出来的图片取名的时候害怕取名会覆盖前面的的图片,导致前面的页面图片引用被换成现在的命名的图片,然后你又得绞尽脑汁想新的图片文件名字,在这上面浪费太多时间,而且不整理一下,下次切图又会遇到这问题。所以我觉得前端文件管理还是需要开发的时候下意识的去整理一下!当然了,我现在说明的只是前端的管理想法,至于更大的文件夹管理或者后台管理。我想应该又是另外一种思维去处理!

img文件夹管理

我现在想法有三点,如下。

第一,我首先认为这是一个需要团队努力的结果。试想如果在开发过程,如果大家在共同工作的过程中,没有形成一种我们要写的页面是一种类似于“模版”的思想,这本身就是一个很乱的开始。比如美工在做psd图的时候,想当然的以他认为比较比较美的想法随意添加一些图片、图标,没有形成一种“统一”的风格,后期这些图片、图标越来愈多,看上去大同小异,其实是一样的,只不过因为美工童鞋为了标新立异、或者说前端为了完成任务随意扔图片,产生了很多难以复用的图片。所以我想说的是这需要团队共同合作,形成共同的风格,才能更好的把图片做一个很好的整理、归类。这本身对开发效率也是有益的问题!

第二,尽量把小图标整理到一张大的png图片里面,这样做的好处是便于管理,利于后期复用,减少命名冲突所带来的问题。而且在写页面的时候如果页面中需要同时用到几个图都在这张大的png里面,那么这样可以减少对服务器的资源请求。我目前还使用了一种命名风格:项目标志+图片名字,来管理图片,这样可以显著减少命名所带来的覆盖问题!

第三,特殊页面,如果你调试频率比较高,而且只是短期投入市场、使用的图片后期复用率也不会很高,很快就将废弃的页面,我现在通常采用的做法为他新建一个图片文件夹目录,避免切出来的图片命名对常用图片文件夹命名污染、冲突。

css文件夹管理

对css文件的我的主要思路就是把通用的样式、覆盖用户代理默认的样式以及整个项目中使用频率比较高的一些样式单独封装一个样式出来,写在一个文件里面,后期我们的项目文件可以可以共用这个样式,然后在分别按项目、页面的不用有针对的写一个只针对当前页面的主样式。下面进一步说明。

大家在写页面的时候,项目都有一些样式可能开始就要做的,比如覆盖浏览器默认的样式,大家经常会把元素的外边距、内边距都置为零。也比如,为了我们的项目网站形成一种统一的风格,我们还要做一些默认的样式,比如body的背景色,文字颜色,等等,在后期我们要用的这些差不多是一样的,所以我们可以把他合计写在一个页面里面,然后我们所有的页面可以在这个样式的基础在写他的主样式。

保持每个项目页面有一个只针对他的主样式文件,这样可以做到这个文件大小不至于太大,避免项目中很小的页面引用了一个比较大的样式文件,而且便于维护,比如页面显示出了问题,很少会出现干扰另外页面的显示也会出现问题。因为这个样式只针对当前的页面。

在主页面尽量合计、归类重复使用的样式,比如用伪类:after清除float的样式,可能页面很多地方都用到了,我们可以把提炼出来写在同一个地方,这样便于维护,而且不会使文件很大。好好利用后代选择器,这样可以做到很好的命名冲突问题,从此就减轻了你为了想一个新的类名的痛苦。

javascript

我前期写js脚本的时候,由于都是上来就写一个函数,放在全局中,后面写的函数越来越多,而且同样会为变量、函数取名而烦恼,这个问题在javascript尤其明显,因为这是javascript先天的不足,后面写的同名变量会覆盖前面的同名变量,函数亦是如此,而且如果不好好整理这个问题,后期调试越发困难,很难找到出错的地方。所以有必要在写js的时候,减少在全局定义变量、函数的个数,尽量创建私有作用域来定义私有属性和私有方法,或者采用命名空间的机制,这都要求自己有一种很好的编写代码规范、设计模式思想,需要不断学习、提炼自己的能力。那我在写js中第二个出现频率比较高的问题就是:有时候几个页面共用了一个js文件,其中一个页面使用js文件浏览器不会报错,而在另一个页面引用的时候浏览器就会报错了,这说明一个问题,另一个页面引用的时候,js写的一些dom节点根本不存在了他招不到了,与它有关的脚本就会报错,所以这要求我们在编写js文件的时候,要考虑其他页面引用这个文件的时候会出现什么问题,加一些判断或者try catch语句做好出错处理。当然了这些问题讨论起来是一个非常博大精深的话题了,我自感还有很多不会,所以这里只是记录我当前遇到的一些问题,以及我的处理方式!

在我写的页面中可能引用js文件的来向四面八方,如果不避免全面变量的定义,那么冲突势必是一个很严重的问题,一不注意自己写的变量就覆盖了另一个人写的变量了,函数亦是如此。 小型的项目可以适当的采用

(function(){})();

来定定义私有作用域,从而减少全局变量,这得益于js是一种函数级作用域的语言以及函数也是一个对象的概念、可以把它当成一个参数被变得函数引用,了解这个需要了解一下js作用域查找机制。除此之外还可以采用命名空间的做法来减少全局变量的个数,具体的做法就是,定义一个单体对象,把自己的脚本部分的变量、函数用这个对象的属性、方法来呈现,这样就减少了全局变量的污染了,比如:

var myNameSpace = {};

这时候你定义的变量就是如此了:

myNameSpace.variable1

只不过你现在引用它的方式变成了myNameSpace.variable1而非variable1了,函数亦是如此,这样就减少了变量命名的污染了!

前面提到不同的html引用了同一个js文件,有的不报错,有的会报错,我们现在的目标不管是什么html页面引用了我们的js文件,都不会报错,所以我们需要做好出错处理。思路就是在编写代码的时候,预计出错的原因,做好一些相应的判断,避免报错,打个简单的比方,我们在js文件写了下面的句子

var btn = document.getElementById("id");
btn.onclick = function(){
//.....
};

这样写的话,在a页面引用的时候,确实没有报错,因为a页面确实存在btn,而在b页面中引用的时候就会报错了。因为页面中不存在btn的元素,所以我们应该把上面的语句改成如下:

var btn = document.getElementById("id");
if(btn){
btn.onclick = function(){
//.....
};
};

这里只是一个列子,对应的问题需要作对应分析!

现在javascript越来越强大,能做的东西越来越多,而且这门语言很灵活,所以这里面还有很多东西可以去学习。

待续……………………