说真的,这篇文章是我辗转反侧很久才写的,乃至于几乎每天晚上我都要做跟这些有关的梦,我也是醉了!

我认为静态资源的模式

ps这里的静态是指js,css,img的开发模式,存放规则,加载方式

1。最原始的加载

其实就是全部写在页面上,页面的静态资源全部同步加载,这样做开发起来是挺快,但也是没有什么技术含量,代码的依赖需要注意,顺序一有打乱全盘皆挂。

见DEMO

2。命名空间方式

1的方式在大量的应用后发现,代码不容易管理,乃至于N月后自己都不知道自己写的啥,这时候就在想是否能把代码进行归类,而这就形成了命名空间,通常会出现ui',tools,'util,'app`之类的空间了,然而也是根据项目的需求分的,但后期却发现是越来越多,耦合性很强,一堆嵌套,比如xxoo在用前要加载ooxx,xxbb在使用前要加载oobb.css,这样的工作是越来越多,导致我最后累的跟X一样,于是我决定代码全部再整理一变,也要应用全新的方式。

见DEMO 使用http-concat for nginx进行请求合并

{list}

3。加载器的时代

加载器? 什么是加载器? 其实就是异步的加载你的静态资源(不包括图片),且有她自己的一套开发模式,你必须遵循这种开发模式。

• AMD方式的加载(requireJs),当然我用的不多。
• CMD方式的加载(seajs),我一直在使用

cmd和amd区别点我

通过使用加载器,我在1,2出现的问题全部解决了,同时也给我带来了很大的效率的提升,作到了想加载哪个就加载哪个的功能。但于此同时给我带来了问题。

代码太多异步加载不友好问题,然后我尝试的写了个php版的合并工具,但是由于cmd规范,我必须去在js里手动的写上依赖和id(我写的php没有生成+提取),但通常多依赖+深路径的文件使我感觉这样不科学。

小试了一把spm,刚开始使用我想对某些文件进行合并+压缩,但发现只能对于文件1生成他的版本,同时会把他依赖的合并到这个文件,当然你可以选择不合并他的依赖,可能我用的不对。

认识了grunt,起初我要合并打包我的项目时得写一堆gruntfile.js,且每次可能不一样,但我在想有没有一种方式可以用配置文件的方式进行打包,经过我几晚上的研究终于写出来了,通过配置一个文件,然后使用grunt ***相关的命名就可以完成相关的操作,当然前期是很痛苦的,必须遵循某些约定,当然现在经过改进大有好转,这里也揭开了下面要说的最神秘的话题!

4。前端自动化?

百度的FIS,去哪网的FIKIT等一些非常快速且高效的前端模式,你只需要遵循他们的模式,基于一些命名就可以完成你想不到的操作。

其实这些也是平时一点点积累的,你也完全可以基于nodejs写一套适合你项目的发布工具,当然也要约定你们的开发模式,就比如我兄弟@rambo公司想push代码到server上,你的js必须经过近50项目检查(jsHint),一经有错,你是push不上去,且必须有自己的测试用例。。。对,你在想为啥这么变态?是的,这就是他们规范,当我问他时,他会说:谷歌办公室写着,我不是牛人,我只是在按规范做事。

话题:我的疑惑

开发模式

由于使用grunt,seajs等一系列开发工具和模式,是让我的开发爽了,但是也会带来别的问题,学习成本,招的新人会不会这些东东?

这一直是我在想的问题,如果使用原始模式1开发,是没有学习成本,但是也会带来诸如1的问题呢,且对于有代码强迫证的我来说这是一种看不见的伤。

那么我该如何选择呢?是我错了还是世界错了呢?

代码耦合

一些页面的操作交互往往需要大量的代码来维持,但代码量越多维护越难,如果我要写多,尽量想好,那么招的新人是否可以维护我的代码?

比如就拿一个点击按钮异步请求并处理的例子吧:

// 现在的
//绑定点击选择照片
$list.on('click', '.select-photo-btn', function() {
 var that = this,
 $li = $(that).closest('li'),
 is_success;
 //如果正在请求
 if($li.hasClass('loading')){
 return false;
 }
 //打上标识
 $li.addClass('loading');
 $.ajax({
 url: '/api.php',
 type: 'POST',
 data: {
 id: $li.data('id')
 }
 }).complete(function() {
 if (is_success) {
 Dialog.success('成功');
 //如果只有一个照片了,则刷新
 if ($list.children().length === 1) {
 location.reload();
 } else { //否则只移除自己
 $li.remove();
 }
 //进度减
 App.fixed.jian();
 } else {
 $li.removeClass('loading');
 }
 }).error(function() {
 Dialog.error(Tips.G500);
 }).success(function(res) {
 //处理错误
 if (res.error) {
 //处理没登录
 if (res.errcode === 1002) {
 Dialog.alert(Tips.G1002, function() {
 location.href = res.url || Config.url.login;
 });
 } else {
 Dialog.error(res.errmsg || Tips.G500);
 }
 } else {
 is_success = true;
 }
 });
 return false;
});

异步请求我必须处理返回值错误,正在请求状态,没登录,超时的状态,但这也就会增加学习成本,那么如果我这样写是不是更好维护?

// 优化的?
//绑定点击选择照片
$list.on('click', '.select-photo-btn', function() {
 var that = this;
 $.post(url, {}, function(data){
 if(!data.errcode){
 $(that).closest('li').remove();
 }
 }, 'json');
});

我这样做真的好吗?

说真的,我一直很向往github网站上的体验,当然我也一直在学习,只是。。。

我的答案

世界和我之间当然是我错了,同事说的一句话:应用场景。让我屯页时明白了,不同的公司应该选择不同的项目,那么对于现公司一个前端即将面临着再招一个新人的项目应该选择哪个模式呢?我无奈的选择的模式1,公司是公司,不是培训机构!但是这样也提升不了任何技术,乍办。。。

我个人还会业余时间研究使用nodejs做被动式打包,比如大搜车的ads,美丽说的前端合并方式,在此感谢 @Alien给的回答!

很久没写文章了,不是忙,是真的很忙。。。虽说忙,但是无所谓,加油,我相信我会有"春天"的!

发表于 2015年04月04日 07:31:00 ,并被添加「 总结 前端架构 学前端 静态资源 」标签 ,最后修改于 2017年03月29日 21:23:39