前端js書寫封裝維護常用方案

前言

本文分享一個常用的js封裝吧，平時書寫非單頁應用的時候，可能會用到，可以把經常用到的封裝在一個自調用函數當中，既能避免全局變量汙染，又易於維護，下面分享一下！

代碼

var haorooms =(function(){//創建一個獨立的對象，注入所有的方法，包括你想拋出去和不想拋出去的var tool = {
 AAAA:function(){},
 BBBB:function(){
 console.log("我只想內部使用，不想給別人用");}};
 /*
 * 該對象承載所有需要拋出去的對象
 * 1.該對象中的方法可以自己寫
 * 2.該對象中的方法可以注入（例子中的tempObj.tool.AA）
 * 3.該對象也可以選擇性拋出給使用者需要的方法，也可以隱藏（tool.BBBB）
 * */var tempObj ={//reader為一些初始化需要的操作，有時候會有註冊事件等，或者一些預操作
 reader:function(){},//注入所有的選擇器，方便選擇器變化，直接修改該對象中的選擇器，而不需要全局去更改
 selector:{
 mySelector:"#mySelector", //原密碼},//注入所有的接口地址，方便接口變化可以進行，快速變更，不需要全局找引用的對象interface:{
 loginUrl:"",},//注入page中所有的事件，統一管理，建議命名規範：事件_命名，例 click_login
 registerEle:{
 click_login:function(){//註冊單擊事件}},//注入所有ajax請求，頁面所有請求，將在這裡統一管理，建議命名規範：ajax_命名，例 ajax_login/*
 * 該請求中有2種方案,看需求使用
 * 1.不公用一個請求方案 

 * 2.公用一個請求，但是回調處理不一樣
 * */
 ajaxRequest:{//不公用一個請求方案
 ajax_login:function(){
 $.post("","",function(data){
 tempObj.callback.call_login(data);});},//會有多個業務公用這個請求
 ajax_login_T:function(callback){//所有接口地址從interface中獲取，callback中tempObj.callback中處理
 $.post("","",callback);},},//處理所有回調函數，針對一個請求，處理一個回調
 callback:{//不共用請求處理回調
 call_login:function(data){//處理回調},//公用請求處理回調
 call_login_T:function(){var temp = function(){
 };
 tempObj.ajaxRequest.ajax_login_T(temp);}},//所有使用的工具類，如果每個項目都單獨的unit.js或者common.js等存放一些公共方法的，這裡可以不使用// PS:這裡存放的只是僅針對於這個頁面處理的一些tool，一般沒必要拋出去，不過看業務而定
 tool:{
 A:function(){
 console.log("我是自己寫的方法");},
 AA:tool.AAAA, //這是我想拋出去給別人用的東西},//臨時緩存存放區域，僅針對本頁面，如果跨頁面請存放cookie或者localstorage等//主要解決有時候會使用頁面控件display來緩存當前頁面的一些數據
 temp:{
 },/*
 * 業務使用區域，針對每個特別的業務去串上面所有的一個個原子
 * 因為上面所有的方法，只是做一件事，這邊可以根據業務進行串服務，很簡單的 

 * */
 firm:{
 }};/*
 * 閉包拋出去的方法
 * */var outputObj =function(){//首先執行reader方法，初始化一些操作，比如註冊事件啥啥啥的
 tempObj.reader();/*
 * 拋出給別人使用的對象
 * 想給別人看和使用的東西，可以注入tempObj對象，就像tool中的AA的方式
 * 不想給別人看和使用的東西，就像內部tool對象中的BBBB方法，你內部可以使用，外部是無法引用的
 * */return tempObj;}
 //拋出你希望拋出去的對象，因為你掌控了所有，哈哈。return new outputObj();})();