标签：
├── statics
├── html //静态文件开发
├── js // 非require引入的js文件
├── Lib // 第三方JS包
├── ve_2_1 //
├── css // 样式目录
├── fonts // bootstrap的图标字体
├── img // 图片目录
├── less // less源码
├── sprite // 雪碧图按目录全称目录名的图片
├── dirName
├── vender // 第三方css包,比如bootstrap
├── js // JS目录
├── dist //生成文件的目录(与开发源码目模块对应)
├── cart.js
├── common.js
├── lib.js
├── region.js
├── sidebar.js
├── tpl.js
├── user.js
├── web.js
├── src // 开发源码的目录
├── cart // 购物车模块
├── common // 公共的函数模块
├── lib // 公共jq插件模块
├── region // 处理联动地址的模块
├── sidebar // 侧边栏模块
├── tpl // 前端mvc模板引擎的压缩源码
├── user // 用户中心模块
├── web // VE前端模块，包括首页、亲子、品牌专题、详情页等
├── tpl //
├── config.dev.js // requirejs 开发配置文件[自动生成]
├── config.js // requirejs开发配置文件[自动生成]
├── config.release.js //
├── config.test.js // requirejs 测试环境配置文件[自动生成]
├── js.map.json // 压缩后的文件位置映射[自动生成]
├── path.json // requirejs 的 config -> path 内容，第三包的路径缩写配置
├── shim.json // requirejs 的 config -> shim 内容，第三包的依赖申明
├── ver_config.json // 开发、测试、预生产到发布，方便部署静态资源，而创建的版本和环境变量
├── tpl //
├── toolbar
├── mian.html
├── dot.gif // lazyloading的占位符
├── evc-VE.js // 在线客服的js
├── favicon.ico // 网站的缩略logo
├── README.md // 文档首页内容 markdown 语法
├── region.js // 地址
每个包单独一个文件夹，目的是：方便一个包多版本存放
如：jQuery 的 1.x 跟 2.x ， 2.x 是针对移动版
path 环境变量中npm install -g cnpm --registry=http://r.cnpmjs.org
cnpmnpm install -g gulp ，安装 gulp 全局支持npm install(使用国外镜像) 或 cnpm install(使用国内镜像)-- enjoy --
npm install(使用国外镜像) 或 cnpm install(使用国内镜像)以下操作，需进入
FeBuilder的解压目录目录下执行
gulp
dist 目录生成对应的压缩 jsdoc 目录，根据 jsdoc 格式，生成文档css/sprite 目录，如果有新 sns 文件，自动生成雪碧图注：如果添加新目录，需重新执行该指令，否则新目录不会监控
gulp sprite 生成雪碧图gulp script 压缩，合并，打包jsgulp less 编译less文件gulp watchHTML 、 CSS和 JS 等。JSON 的格式进行数据交换，那么前端开发完全就可以本地模拟一个 .json 格式的文件来进行开发调试。JSON 的本地模拟数据，在与后端的同事沟通约定后，只需要对方API返回的数据结构和本地模拟的一致即可。
CSS Sprites就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的background-image，background-repeat，background-position的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点。
Javascript
为了项目更容易管理和团队协作，js的开发需要以模块化的方式进行。
在ve_2_1/js/src目录下建立按照功能模块的不同，来建立文件夹及js文件
ve_2_1/js/dist 目录，在页面中需要配合require.js（js依赖管理）和config.js（依赖的配置文件）来加载自动压缩后的js。config.dev.js、config.test.js、config.release.js和config.js 分别对应 开发环境、测试环境、预生产环境和生产环境。{php echo init_js();} (后端php同事要预先封装好init_js 函数)来动态输出即可。
*** 举例：
ve双城首页的js，我们就建立在 js/src/web 目录下，并命名为index.js，它依赖于‘jquery.slide‘, ‘web/common‘, ‘web/timer‘和jquery，而‘jquery.slide‘, ‘web/common‘, ‘web/timer‘也依赖于jqeury，jquery已被全局化，那么index.js应该是这样的：
index.js: define(‘web/index‘, [‘jquery.slide‘, ‘web/common‘, ‘web/timer‘], function(slide, common) {
var doc = document,
win = window;
//首页大图轮播
var _fullSlide = function() {
var $sliderBox = $(‘.slider_box‘);
var $fullSlide = $(‘.fullSlide‘);
var imgs = $fullSlide.find(‘.bd .preload‘);
var now_img = $fullSlide.find(‘.bd img‘).eq(0);
...
又如 common.js应该是这样的：
common.js: define(‘web/common‘, [], function() {
var exports = {};
var doc = document,
win = window;
//网页顶部的关注hover事件
exports.hover_qr = function() {
$(‘.QRcode‘).on(‘mouseover‘, function() {
$(‘.QRcode-box‘).toggle();
$(‘.QRcode i‘).toggleClass(‘selected‘);
}).on(‘mouseout‘, function() {
$(‘.QRcode-box‘).toggle();
$(‘.QRcode i‘).toggleClass(‘selected‘);
});
};
...
index.js 和common.js不需要在引用
jquery.js,在它们内部中可以直接使用全局jquery中定义的$符号。
<script src="http://s1.ve.cn/statics/Lib/require/require.js?_v2.1">
</script><script src="http://s1.ve.cn/statics/Lib/jquery/jquery.min.js?_v2.1"></script>
<script src="http://s1.ve.cn/statics/ve_2_1/js/config.js?_1415852637"></script>
<!-- requireJS -->
必须加上以下3项，提高兼容性
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1">
前 2 项，是指定 360 等国产浏览器，用 webkit 内核渲染页面
后 1 项，是在移动端上，指定页面的缩放比例
开始和结束均需要带有可识别的class或id，结束时则加斜杠 /(表示标签闭合了)。
<!-- 商品标题 -->
<div class="breadcrumb">
<a href="">唯一优品首页</a> > <a href="">名品特卖</a> > <a href="">新安怡夏季大促</a> > <a href="" class="title">新安怡 婴儿保湿润肤乳液(200ml)</a>
</div>
<!-- 商品标题end -->
<head> 内</body> 结束前（尽可能的放底部），尽情避免在 <head> 内插入 jsscript 标签是阻塞式加载的。 如果一个 js 文件 比较大，或者 404 ，这将阻塞后面部分内容的加载
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{title}</title>
<meta name="description" content="{description}" />
<meta name="keywords" content="{keywords}" />
<!-- 样式文件 -->
<link rel="stylesheet" href="./../../ve_2_1/css/ve_wap.css" />
</head>
<body>
<section class=‘‘>
<div class="container">
<div class="row">
a
</div>
</div>
</section>
<!-- 尾部js -->
<script src="./../../ve_2_1/js/vendor/require/require.js"></script>
<script src="./../../ve_2_1/js/config.dev.js"></script>
<!-- 替换结束 -->
<!-- 自定义代码部分 -->
<script>
//js codes here.
require([‘wap/index‘], function() {
require([‘wap/indexJs‘]);
});
</script>
</body>
</html>
/*头注释*/
/*------------------------------------------------
@Filename: ve_goods
@Description: 产品内页
------------------------------------------------*/
//商品属性区块
//产品颜色选择
/*爆款*/
命名风格
|| || 规则 || 列如 ||
|| 类 || 混合式 || fixToTopClass ||
|| 公有方法 || 混合式 || isDate() check_password ||
|| 公有变量 || 混合式 || 列如 ||
|| 常量 || 大写式 || 列如 ||
* 其他建议风格 非必要
|| 结构 || 规则 || 列如 ||
|| 私有方法 || 混合式 || ||
|| 私有变量 || 混合式 || ||
|| 方法参数 || 混合式 || ||
|| 本地(local)变量 || 混合式 || ||
所有语句结束后，必须使用;号结束
基本原则：尽量避免潜在冲突；精简短小, 见名知意。
因为基于gulp架构，jsDoc插件可以自动根据段落注释自动生成可读性很好的文档，因此前端开发必须按照jsDoc的规范来写了js注释。
标签：
原文地址：http://www.cnblogs.com/yesw/p/4812598.html
