js页面规范基本格式

这是我子工作以来总结的前台js的开发模板，利用闭包的特性很好的避免的页面的全局变量污染

/**

* 10千伏执行子模块说明

*/

var createfourltShow= function(name,code,time){

//------------------------变量区---------------------------------------

//ajax请求根路径

//是否已经初始化

var isInit = false;

//用户及权限

var userInfo = {

userName: parent.mGlobal.userName, //账号

compCode: parent.mGlobal.compCode, //单位编码

companyTree: parent.mGlobal.companyTree, //单位列表

realName: parent.mGlobal.realName, //用户名

companyTreeAll: parent.mGlobal.companyTreeAll

};

//定义全局变量，包括图表options,等

var global = {};

var rowData;//也是全局变量

//-----------------------页面jQuery变量-------------------------------------

var $fourLt_Modal;

//-----------------------页面元素初始化方法---------------------------------

var getJqControls = function(){

//模态框id

$fourLt_Modal = $('#fourLt_Modal');

};

//-----------------------清除变量----------------------------------------------

var clearJqControls = function(){

$fourLt_Modal = null;

};

//-----------------------初始化页面主要子控件-------------------------------

var initMain = function(){

};

//-----------------------初始化页面图表子控件-------------------------------

var initShapes = function(){

 

};

//-----------------------初始化数据表格图表子控件-------------------------------

var initTables = function(){

 

};

//-----------------------初始化页面下拉框子控件-----------------------------------

var initSelects = function(){

 

};

//-----------------------调用上边的初始化控件，统一初始化页面控件-------------------------------

var initControls = function(){

initMain();

initSelects ();

initTables ();

initShapes ()

};

/* ++++++++++++++++ 事件处理程序+++++++++++++++++++++++++++++++++++++++ */

//---------------------- 事件绑定----------------------------------------------------------

var bindEvents = function(){

//窗口尺寸事件

$(window).resize(function () {

func_execute.mapAndPieResize();

});

// load页面事件

$('#jumpMainPage_execute').bind("click", function () {

window.location.href='../../html/TenkVManagement/mainPage.html'

});

//按钮点击事件

$FjLv_btn.on('click',function(){

if($HaveFj_btn.hasClass('btn-change')){

$HaveFj_btn.removeClass('btn-change');

}

func_execute.itemRunInfoSearch_Search(1);

});

//图表点击事件

pie_1_tx_echart.on('click',function(params){

console.log(params);

}）

};

//---------------------- 具体事件处理业务逻辑----------------------------------------------------------

var func = {

//---------------各个功能事件------------------------

Write_toSpanData:function(){

}，

};

//------------------------界面展示数据------------------------------------

var loadData = function(){

//加载表格数据

loadtable :function(){}

}

//------------------------公开方法---------------------------------------

var getInitState = function(){

// --对页面下拉框进行赋值--

drawSelect: function (id, list) {

var str = "";

for (var i = 0; i < list.length; i++) {

str += '<option value="' + list[i].id + '">' + list[i].text + '</option>'

}

$('#' + id).html(str);

},

//获取当前年前后五年事件

getYearList: function (){

yearList = [];

var date = new Date;

var yearnow = date.getFullYear();

for(var y = 0 ;y<10;y++){

var map = {};

map.id = (Number(yearnow)+Number(y)-5);

map.text = (Number(yearnow)+Number(y)-5);

yearList.push(map)

}

},

};

/* ==================初始化模块================= */

var initModule_lt = function(){

if (isInit) {

return;

}

//获取页面元素

getJqControls();

//初始化页面元素

initControls();

//初始化数据

loadData();

//为页面元素绑定事件

bindEvents();

isInit = true;

};

//------------------------暴露模块公用方法----------------------------------

return {

initModule_lt: initModule_lt,

loadData: loadData,

}

}