Online Mind Mapping and Brainstorming

Create your own awesome maps

Online Mind Mapping and Brainstorming

Even on the go

with our free apps for iPhone, iPad and Android

Get Started

Already have an account? Log In

前端JS规范http://JsLover.com by Mind Map: 前端JS规范http://JsLover.com
5.0 stars - 2 reviews range from 0 to 5

前端JS规范http://JsLover.com

前端JS开发规范

基于jquery框架

1个公站公用的js---base.js

全站全局变量, baseurl, uid, vuid, ...

全站全局方法, StringBulder, getHeadSrc, includeFile, ...

前端组件库

弹出层

选择组件

编辑器

FLASH上传组件

评论组件

分页组件

滚动条加载

文本框自动高度

日期控件

省市区控件

滚动条阅读

排序组件

页面对应js文件

每个页面都需要引用 jquery.js和base.js(通过模板页引用)

每个单页面加载1个页面对应的业务.js

页面中如果有需要调用到其它js文件,在业务.js头部通过includeFile方法引用

命名约定

js目录, /js, /js/lib, /js/lib/nd.uapselector, /js/lib/nd.comment, ..., /js/views, js/views/album/photolist.js, js/views/photoupload.js, ..., /js/jquery.latest.js, /js/base.js

js文件名, 组件(每个组件一个单独目录,nd.组件功能), nd.uapselector/nd.uapselector.js, nd.uapselector/nd.uapselector.css, nd.uapselector/demo.htm, 业务(每个模块一个单独目录,与php views对应), album/photolist.js, album/photoupload.js, 文件名全部用小写

js函数、变量命名, 匈牙利命名法, json或数组,逗号写前面, 变量名在js文件头部分组定义

前后端协作规范

AJAX数据传输格式约定

json传输

格式约定

AJAX方式, $.getJSON, $.post, $.get, $.load

组件、base.js完全由前端人员维护

业务.js文件由前端人员根据通用模板.js创建,定义好主要的变量及功能块

业务模板.js

后端人员实现业务.js中的业务功能

注意项: 1、如果需要添加修改公用方法(或组件),请与前端人员联系 2、根据前端人员提供的业务模板.js 完善主体业务功能 3、前后端业务的区分:复杂交互由前端人员完成,内容展示、分页、添加删除内容等操作由后端人员完成 4、完善的业务模块自觉进行极值测试、多浏览器测试等

删除操作模板

html拼接模板

分页方法模板

组件调用模板

前后端业务界定, 图片展示、消息交互、首页动态交互等复杂交互由前后端人员配合完成, 常见列表、表单提交、删除等业务处理由后端人员完成

momo前端js调整计划

目录结构与文件名规范调整

js文件引用方式优化调整

JS全部置于页面底部

模板页引用公用JS, jquery.lastest.js, base.js

每个页面对应一个业务.js, 文件名基本与php页面对应, 在js文件内部控制需要引用其它js

base.js 完善优化

整理和规范全局公用方法、变量, 对现有功能进行整合, 添加includeFile方法,用于在js文件内引用其它文件

原业务js中冗余方法统一与规范

代码评审,检测修复隐含BUG