网站前端内容太零散,想优化但无从下手

LuDongWei
  • 620

本人在工作的第二年进去一家创业型的公司,我们公司只有我一个前端,在我没来前还没有前端,在项目中的js与css存放非常的乱,页面上的引用也非常的乱。

clipboard.png

clipboard.png

一个网站上使用的css与js被随意的存放在不同的文件夹中,还出现了一个相同的js不同的地方,不同的引用。

导致了我后续的使用不方便,与网站的速度也太快。

我的想法与要求是:

把页面上的css与js进行统一的管理,存放在一个目录下,我使用grunt上传正式或预发,并进行代码的检查与压缩。

遇到的问题

1.发现我根本下不了手,发现乱的我不知道怎么整理,因为公司还没有ftp我需要修改页面上js与css的引用。感觉太繁琐。原本的css与js也不知道怎么进行合适的归类。

新的想法与所要面临的问题!!

1.老的内容还是让它这么着,等下次有大改版的时候,再统一处理
2.新的项目使用新的引用,把原来的内容全部抛弃。

问题

1.页面上的代码引用会更加的杂乱,东一块,西一块
2.如果下次有了ftp或者说需要进行代码的整理,可能会更加麻烦。

上面内容是我对这个问题的想法,但是我自己找不到合适的解决方法。
希望有这方面经验的前端兄弟给我指条明路

ps.发现自己真的是个纠结的人。

在这里谢谢大家给我的方案以下是我现阶段已经处理完成的操作:

clipboard.png

1.在这个文件中我打算建立新的一套前端代码。
2.老的代码全部放入obstinate中,不去理财,毕竟太乱了。
3.在以后的制作中,慢慢完善自己的前端代码内容。把老的内容进行替换。

-obstinate  老的杂乱代码存放
-plug-css   css插件 
-plug-js    js插件
 -jquery
  -版本
   -jquery-seajs
   -jqeery-min
   -jqery...
 -seajs
-assets     自己编写插件
-page       页面
 -demo
 -css
 -js
-doc        文档 

以上是我的思路,如果有不完善的地方,请指出,本人第一次进行这方面的操作。

ps: 答案就暂时不采纳了,毕竟大家的话对我都有帮助。

回复
阅读 5.7k
13 个回答
Youngster
  • 62
✓ 已被采纳

首先这是一个过程,不可以一步完成。办法大概是逐步优化,但是保持项目依旧可以运行。首先是要定义一个规范,新添加的css和js就必须按照规范来。其次就是修改以前的代码。那么就可以先从目录结构开始,把原本的js移动到新目录下,并修改相应的链接地址(这里要细心,可以考虑使用正则搜索替换),目录规范之后,就是代码规范了,这就需要你阅读代码了,这步就不多说了,此处略去一万字...那么接着你可以进行scss改造略去五千字...前端流程工具略去一千字...等这个优化的核心有两个:1、就算没有优化完项目依旧可以运行,只不过代码会比较凌乱(当然,你项目目前已经够挫的了,所以不必担心这个问题)。2、版本可回溯,(既不小心项目搞挂了,可以还原回来,就是版本管理了)。3、好像只有两个核心,那祝你好运!

scss管理css,webpack管理js,jade管理HTML。

好乱。。
建议放弃以前的代码,自己重新定义代码目录, 并要求其他同事,包括非前端同事添加前端代码必须要符合一定的规范。
弄一个git库来统一管理吧。
还可以提出代码重构,然后花时间整理和重写原先的功能, 从而彻底抛弃老代码。

先看下什么类型的站点, 单页面应用的话, 我们在 Teambition 有一套比较成熟的方案.
也是社区的方案拼凑起来的, 按照 MVC 拆分目录, 用 Gulp 或者 Webpack 管理静态资源.

如果是服务端渲染的页面, 我这边经验很少, 要根据具体服务端方案做一个.

从图片能看出的东西很少... 只有, 楼主没有包管理工具, 那么估计模块系统都没做好..
建议看 CommonJS 跟 AMD 的资料考虑一下管理模块.

我也赞成重新写的方案,整理一下原来网站的接口,重新搭架子,善用bower grunt sass 这一类的自动化工具

至于css js的整理,建议将全项目共通的放到一起,每个模块和每个模块之间可以考虑分开存放管理。最后通过自动化工具将它们打包压缩在一起。

你在原来项目的基础上优化还不如重新架构前端,优化的缺点在于逻辑完全混乱,到时候自己都不知道改成生么样子了,重新架构的缺点在于工作量可能稍微较大,但是后续维护很有利,并且完全可以采用自己喜欢或者熟悉的任何技术或者框架。

public/images
/javascripts
/stylesheets
/..

先将路劲分好,将代码放在相应的路劲中。

然后再一个个页面的去调优(将公共的整合在一个文件中,没有用到的去掉,代码、结构等慢慢优化),有点麻烦,但是这个过程会让你学到很多!

你需要:
* 预先想好文件目录结构,比如frontAssets->(stylesheets + javascripts + othersources)
* 前后端如何分离,其实这个解决了,什么都好说。

看不到图片是什么鬼。。?

有点乱,个人感觉在原来的基础上优化,更浪费时间,还不如自己重新搞。

重写吧,然后用UI框架,这样速度快些

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏