【PC网站前端架构探讨系列】结合公司网站首页，谈前端模块化开发与网站性能优化实践

说在前面

上午给大家分享的个人认为比较全，比较官方，比较清晰的grunt使用教程，被挪出首页了，不过没关系，毕竟不是原创，大家想看，我现在贴出地址：

http://www.cnblogs.com/sybboy/p/4877055.html

下面可是我自己的东西，算是这段时间搞前端架构的总结吧:

遇到的问题

问题1----脚本混乱，没有层次和固定代码位置

问题2----脚本和css请求较多，请求未压缩，文件未压缩合并

问题3----代码目录混乱，引用不清晰

问题4----脚本和css没有添加版本号管理

目标

1.整理页面的代码，必要的代码模块化

2.文件合并压缩，外部引用的脚本要加密混淆

3. 网站目录下，所有脚本样式图片统一存放

4. 添加版本号

如何解决

问题1----脚本混乱，没有层次和固定代码位置

使用seajs 将代码模块化，用define关键字定义模块，用require调用外部脚本类库及插件，模块内部使用json形式将文件中的代码按业务以及功能分类梳理

使用说明：

1.页面首先引用seajs库

2.按照固定格式，封装代码模块

 1    define([“jquery”,‘../index-plugin.min’],function(require){       
 2                                                                   //方括号中的为依赖项
 3 
 4                   var $=require(‘jquery’);            //require 调用依赖项
 5 
 6                    require(‘../index-plugin.min’)($);    //插件调用方式
 7 
 8                    var MOD = { 方法A:function(参数){}，方法B…..};
 9 
10                    return MOD;
11 
12    });

View Code