Javascript code implements quasi-instantiation class, javascript instance

Javascript code implements quasi-instantiation class, javascript instance

Javascript can do more and more things, and the problem that comes with it is the increase in Javascript code, I chose the method of automatically starting the constructor in the quasi-object class instantiation, and converted all js code into a registered form.

Code

/*** @ Version $ Id $ * @ author xjiujiu <xjiujiu@foxmail.com> * @ description HHJsLib Framework Apps * @ copyright Copyright (c) 2011-2012 http://www.xjiujiu.com.All right reserved */HHJsLib. register ({init: function () {this. bindPreviewBtn (); this. bindUploadEleImageBtn (); this. bindUploadEleAudioBtn ('a. audio-upload-btn '); this. bindUploadEleVideoBtn ('a. video-upload-btn '); this. bindDownloadEleAudioBtn (); This. bindNewConBtn (); this. bindDelConBtn ('a. btn-del-con '); this. bindDelItemBtn ('a. btn-del-item '); this. bindNewItemBoxClose ('div. item-box'); this. bindPlusBtn ('a. btn-plus '); this. bindAppendNewElement ('div. new-item-box ul li A'); this. bindSetPreviewVideo (); this. bindAddAnswerBtn ('a. btn-add-answer '); this. bindDelAnswerBtn ('a. btn-del-answer '); this. bindDelImageBtn ('a. btn-del-image'); this. bindDelAudi OBtn ('a. btn-del-audio '); this. initPlusBtn () ;}, bindUploadEleVideoBtn: function (dom) {var self = this; $ (dom ). click (function () {var $ this = $ (this); var t = HHJsLib. modal. confirm ('upload local video', '<div class = "text-center">' + '<p> browse your computer and select a video file. </P> '+' <div class = "btn-box btn-blue"> '+' <div id = "upload-btn"> upload from computer </div> '+' </div> '); var uploader = HJZUploader. createVideo ('# upload-btn', {formData: {model: 'timeline'},}, function (response) {if (false = response. rs) {self. setDemoBoxInit ($ this); return HHJsLib. warn (response. message);} self. setDemoAudioInfo ($ this, response. data); $ ('# dialog-box-' + t ). modal ('hide '); }); Uploader. on ('uploadprogress', function (file) {self. setDemoBoxLoading ($ this) ;}); return uploader ;}, bindDelAudioBtn: function (dom) {this. bindDelFileBtn (dom, 'do you really want to delete this audio? ') ;}, BindDelImageBtn: function (dom) {this. bindDelFileBtn (dom,' do you really want to delete this image? ') ;}, BindDelFileBtn: function (dom, msg) {var self = this; $ (dom ). click (function () {var $ target = $ (this); var t = HHJsLib. initPopover ($ (this), msg); $ ('# btn-sure-' + t ). click (function () {if (1! = $ Target. attr ('data-new') {$. get (queryUrl + 'timelineele/adel ', {id: $ target. attr ('data-id')}, function (response) {if (false = response. rs) {return HHJsLib. warn (response. message);} self. delDemoFieldInfo ($ target); $ target. popover ('deststroy') ;}); return ;}self. delDemoFieldInfo ($ target); $ target. popover ('deststroy') ;}) ;}, delDemoFieldInfo: function ($ target) {$ ($ target. attr ('data-demo-bo X'{}.html (''); $ ($ target. attr ('data-box ')). removeClass ('uploaded '). addClass ('no-file'); $ ($ target. attr ('data-field ')). attr ('data-id ',''). attr ('data-src', '') ;}, bindAddAnswerBtn: function (dom) {var self = this; $ (dom ). click (function () {var id = $ (this ). attr ('data-id'); var answerHtml = eleTplMap. answerTpl. replace (/{id}/g, id); $ ('# answer-box-' + id ). append (answerHtml); self. bindDelAnswerBtn ('# Answer-box-'+ id + 'a. btn-del-answer ') ;}, bindDelAnswerBtn: function (dom) {var self = this; $ (dom ). click (function () {var $ target = $ (this); if (2> $ target. parent (). parent (). find ('textarea. answer-editor '). length) {return HHJsLib. warn ('requires at least one answer! ');} Var t = HHJsLib. initPopover ($ target,' Are you sure you want to delete this answer? '); $ (' # Btn-sure-'+ t ). click (function () {$ target. parent (). remove () ;}) ;}, bindAppendNewElement: function (dom) {var self = this; $ (dom ). unbind ('click '). click (function () {var type = $ (this ). attr ('data-type'); var heading = $ (this ). parent (). parent (). attr ('data-heading-id'); if ('heading' = type) {self. addNewElePartBox (); $ ("# new-item-box-" + heading ). hide (); return;} self. addNewEleToPartBox (Heading, type) ;}) ;}, addNewElePartBox: function () {var t = this. getTimestamp (); var partBoxHtml = eleTplMap. partBox. replace (/{t}/g, t); var headingHtml = this. initItemTplByType ('heading', t, t); var itemHtml = this. initItemTplByType ('text', t, t); var itemBoxHtml = this. initItemBoxTpl (itemHtml, t, t, 'left', 'text'); partBoxHtml = partBoxHtml. replace (/{heading}/g, headingHtml); partBoxHtml = p ArtBoxHtml. replace (/{item}/g, itemBoxHtml); $ ("# main-box "). append (partBoxHtml); this. bindDelItemBtn ('# item-' + t + 'a. btn-del-item '); this. movePlusBtnBox (t);}, addNewEleToPartBox: function (heading, type) {var total = $ ('# ele-part-box-' + heading + 'div. item-ele-box '). length; var side = total % 2 = 0? 'Left': 'right'; var t = this. getTimestamp (); var itemHtml = this. initItemTplByType (type, t, heading); var itemBoxHtml = this. initItemBoxTpl (itemHtml, heading, t, side, type); // clear the original height DIV $ ('# clearfix-' + heading ). remove (); $ ('# ele-part-box-' + heading ). find ('div. eles-box '). append (itemBoxHtml); // bind the Dom event this. bindDelItemBtn ('# item-' + t + 'a. btn-del-item '); this. movePlusBtnBox (heading); this. bin DNewEleUpload (type) ;}, bindNewEleUpload: function (type) {var self = this; switch (type) {case 'image': case 'Question ': case 'know ': self. bindUploadModal ('a. btn-upload'); break; case 'audio': self. bindUploadEleAudioBtn ('a. audio-upload-btn '); self. bindDelAudioBtn ('a. btn-del-audio '); break ;}}, initItemTplByType: function (type, t, heading) {var itemHtml = eleTplMap [type]. replace (/{t}/g, t); item Html = itemHtml. replace (/{sort_num}/g, this. getNewEleSortNum (heading); return itemHtml. replace (/{headingId}/g, heading) ;}, initItemBoxTpl: function (content, heading, t, side, type) {var itemBoxHtml = eleTplMap. itemBox. replace (/{t}/g, t); itemBoxHtml = itemBoxHtml. replace (/{headingId}/g, heading); itemBoxHtml = itemBoxHtml. replace (/{side}/g, side); itemBoxHtml = itemBoxHtml. replace (/{content}/g, Content); itemBoxHtml = itemBoxHtml. replace (/{hash}/g, hex_md5 (t )); itemBoxHtml + = '<div class = "clearfix" id = "clearfix-' + heading + '"> </div>'; return itemBoxHtml. replace (/{type}/g, type) ;}, movePlusBtnBox: function (heading) {// Delete the original $ ('# new-item-box-' + heading ). remove (); // Add the new var plusBtnHtml = eleTplMap. plusBtn. replace (/{headingId}/g, heading); $ (plusBtnHtml ). insertBefore ('# clearfix-' + head Ing); var $ items = $ ('# ele-part-box-' + heading ). find ('div. item-ele-box'); if ($ items. length <2) {$ ($ items [0]). find ('a. btn-del-item '). hide ();} else {$ ($ items [0]). find ('a. btn-del-item '). show () ;}// bind event this. bindAppendNewElement ('# new-item-box-' + heading + "ul. new-item-list-box li a "); this. bindPlusBtn ('# btn-plus-' + heading);}, bindNewItemBoxClose: function (dom) {$ (dom ). click (function () {$ ('Div. new-item-box '). hide () ;}) ;}, bindPlusBtn: function (dom) {$ (dom ). click (function (event) {$ ('div. new-item-box '). hide (); var id = $ (this ). attr ('data-heading-id'); $ ('# new-item-box-' + id + 'div. new-item-box '). removeClass ('hide '). attr ('data-show ', '1 '). show (); event. preventDefault () ;}) ;}, initPlusBtn: function () {var self = this; $ ('div. ele-part-box '). each (function () {var dataId = $ (this). Attr ('data-heading'); self. movePlusBtnBox (dataId) ;}, bindDelItemBtn: function (dom) {var self = this; $ (dom ). click (function () {var $ target = $ (this); var t = HHJsLib. initPopover ($ target, 'Are you sure you want to delete this item? '); Var id = $ target. attr ('data-id'); var heading = $ ('# item-' + id ). attr ('data-heading-id'); $ ('# btn-sure-' + t ). click (function () {if (1 = $ target. attr ('data-new') {$. get (queryUrl + 'timelineele/adel ', {id: $ target. attr ('data-id')}, function (response) {if (false = response. rs) {return HHJsLib. warn (response. message) ;}$ ('# item-' + id ). fadeOut ('fast ', function () {$ (this ). remove (); self. move PlusBtnBox (heading); self. reArrangeItem (heading) ;}); $ target. popover ('deststroy') ;}); return ;}$ target. popover ('deststroy'); $ ('# item-' + id ). fadeOut ('fast ', function () {$ (this ). remove (); self. movePlusBtnBox (heading); self. reArrangeItem (heading) ;}) ;}, reArrangeItem: function (heading) {var rank = 1; $ ('# ele-part-box-' + heading ). find ('div. item-ele-box '). each (function () {if (rank % 2 = 0) {$ (this ). removeClass ('ull-left item-left '). addClass ('pull-right item-right');} else {$ (this ). removeClass ('pull-right item-right '). addClass ('ull-left item-left');} rank ++;}) ;}, bindNewConBtn: function () {var self = this; $ ('# btn-new-con-item '). click (function () {var t = self. getTimestamp (); var conItemHtml = eleTplMap. conItemTpl. replace (/{t}/g, t); $ ('# conclusion-box '). append (conIte MHtml); self. bindDelConBtn ('# btn-del-con-' + t); self. bindUploadModal ('a. btn-upload') ;}, bindDelConBtn: function (dom) {var self = this; $ (dom ). click (function () {var $ target = $ (this); var t = HHJsLib. initPopover ($ target, 'Are you sure you want to delete this conclusion? '); Var id = $ target. attr ('data-id'); $ ('# btn-sure-' + t ). click (function () {if (1 = $ target. attr ('data-new') {$. get (queryUrl + 'timelineele/adel ', {id: $ target. attr ('data-id')}, function (response) {if (false = response. rs) {return HHJsLib. warn (response. message) ;}$ ('# item-con-' + id ). fadeOut ('fast ', function () {$ (this ). remove () ;}); $ target. popover ('deststroy') ;}); return ;}$ target. popove R ('deststroy'); $ ('# item-con-' + id ). fadeOut ('fast ', function () {$ (this ). remove () ;}) ;};}, getNewEleSortNum: function (heading) {return parseInt (this. getMaxSortNum (heading) + 1 ;}, getMaxSortNum: function (heading) {var sortNums = []; $ ('. ele-sort-'+ heading ). each (function () {sortNums. push ($ (this ). val () ;}); sortNums = sortNums. sort (function (a, B) {if (a = B) {return 0;} if (typeof A === typeof B) {return a> B? -1: 1;} return typeof a> typeof B? -1: 1;}); return sortNums [0] = null? 0: sortNums [0];}, bindUploadEleImageBtn: function () {this. bindUploadModal ('a. btn-upload');}, bindUploadEleAudioBtn: function (dom) {var self = this; $ (dom ). click (function () {var $ this = $ (this); var t = HHJsLib. modal. confirm ('upload audience', '<div class = "text-center">' + '<p> browse your computer and select an audio file. </P> '+' <div class = "btn-box btn-blue"> '+' <div id = "upload-btn"> upload from computer </div> '+' </div> '); var uploader = HJZUploader. createAudio ('# upload-btn', {formData: {model: 'timeline'},}, function (response) {if (false = response. rs) {self. setDemoBoxInit ($ this); return HHJsLib. warn (response. message);} self. setDemoAudioInfo ($ this, response. data); $ ('# dialog-box-' + t ). modal ('hide '); }); Uploader. on ('uploadprogress', function (file) {self. setDemoBoxLoading ($ this) ;}); return uploader ;}, setDemoAudioInfo: function ($ target, data) {var audioHtml = '<audio controls = "controls"> <source src = "' + siteUrl + data. src + '"/> </audio>'; optional (paitarget.attr('data-demo-box'{}.html (audioHtml ). show (); $ ($ target. attr ('data-field ')). attr ('data-id', data. id ). attr ('data-src', data. src);}, bind UploadModal: function (dom) {var self = this; $ (dom ). unbind ('click '). click (function () {var $ this = $ (this); var t = HHJsLib. modal. confirm ('upload image', '<div class = "text-center">' + '<p> browse the picture on your computer and select one. </P> '+' <div class = "btn-box btn-blue"> '+' <div id = "upload-btn"> upload from computer </div> '+' </div> '); var uploader = HJZUploader. createImage ('# upload-btn', {formData: {model: 'timeline'}, function (response) {if (false = response. rs) {self. setDemoBoxInit ($ this); return HHJsLib. warn (response. message);} var imgHtml = ''; optional (%this.attr('data-demo-box'{}.html (imgHtml ). show (); $ ($ this. attr ('data-field ')). val (response. data. id ). attr ('data-src', response. data. src); $ ('# dialog-box-' + t ). modal ('hide ') ;}); uploader. on ('uploadprogress', function (file) {self. setDemoBoxLoading ($ this) ;}); self. bindDelImageBtn ('a. btn-del-image'); return uploader;}) ;}, bindPreviewBtn: function () {var self = this; $ ('# edit- Btn, # preview-btn '). click (function () {try {self. verifyBaseInfo (); self. verifyEleInfo (); self. verifyConclusionInfo (); $ ('# timeline-form '). submit ();} catch (e) {return HHJsLib. warn (e) ;}}) ;}, verifyBaseInfo: function () {HHJsLib. isEmptyByDom ('# image-path', 'timeline dashboard'); HHJsLib. isEmptyByDom ('# cover', 'timeline covers'); HHJsLib. isEmptyByDom ('# name', 'title'); HHJsLib. isEmptyByDom ('# description', 'description');}, verifyE LeInfo: function () {this. verifyHeaderEleInfo (); this. verifyTextEleInfo (); this. verifyImageEleInfo (); this. verifyVideoEleInfo (); this. verifyAudioEleInfo (); this. verifyQuestionEleInfo (); this. verifyKnowEleInfo () ;}, verifyHeaderEleInfo: function () {$ ('div. item-heading-box '). each (function () {HHJsLib. isEmpty ($ (this ). find ('textarea '). val (), 'toutiao content') ;}, verifyTextEleInfo: function () {$ ('div. item -Text-box '). each (function () {HHJsLib. isEmptyByDom ('# ele-text-' + $ (this ). attr ('data-id'), 'text content elemental ') ;}, verifyImageEleInfo: function () {$ ('div. item-image-box '). each (function () {HHJsLib. isEmptyByDom ('# ele-image-hash-' + $ (this ). attr ('data-id'), 'image address'); HHJsLib. isEmptyByDom ('# ele-image-content-' + $ (this ). attr ('data-id'), 'image introduction');}) ;}, verifyVideoEleInfo: function () {$ ('div. item-video-box '). Each (function () {HHJsLib. isEmptyByDom ('# ele-video-hash-' + $ (this ). attr ('data-id'), 'video address'); HHJsLib. isEmptyByDom ('# ele-video-content-' + $ (this ). attr ('data-id'), 'video introduction');}) ;}, verifyAudioEleInfo: function () {$ ('div. item-audio-box '). each (function () {HHJsLib. isEmptyByDom ('# ele-audio-hash-' + $ (this ). attr ('data-id'), 'audio address'); HHJsLib. isEmptyByDom ('# ele-audio-content-' + $ (this ). attr ('data-id '), 'Audio introduction') ;};}, verifyQuestionEleInfo: function () {$ ('div. item-question-box '). each (function () {HHJsLib. isEmptyByDom ('# ele-question-content-' + $ (this ). attr ('data-id'), 'problem content'); HHJsLib. isEmptyByDom ('# ele-question-extend-' + $ (this ). attr ('data-id'), 'problem answer description'); HHJsLib. isEmpty (answerLen, 'answer: '); $ (' # answer-box-'+ $ (this ). attr ('data-id ')). find ('textarea '). each (function () {HHJsLib. isEmpty ($ (t His ). val (), 'answer: ') ;}) ;}, verifyKnowEleInfo: function () {$ ('div. item-know-box '). each (function () {HHJsLib. isEmptyByDom ('# ele-know-hash-' + $ (this ). attr ('data-id'), 'know image address'); HHJsLib. isEmptyByDom ('# ele-know-content-' + $ (this ). attr ('data-id'), 'know introduction');}) ;}, verifyConclusionInfo: function () {var length = $ ('# conclusion-box div. item-con '). length; HHJsLib. isEmpty (length, 'summary'); $ ('# conclusi On-box div. item-con '). each (function () {var dataId = $ (this ). attr ('data-id'); HHJsLib. isEmptyByDom ('# ele-con-hash-' + dataId, 'summary image'); HHJsLib. isEmptyByDom ('# ele-con-content-' + dataId, 'summary details') ;}, bindDownloadEleAudioBtn: function () {var self = this; $ ('a. download-audio-btn '). click (function () {var $ this = $ (this); try {HHJsLib. isEmptyByDom ("# item-audio-upload-hash-" + $ this. attr ('data-id '), ''); Var url = $ (" # item-audio-upload-hash-"+ $ this. attr ('data-id ')). val (); if ('mp3 '! = Url. substring (url. lastIndexOf ('.') + 1). toLowerCase () {return HHJsLib. warn ('format not supported, it must be in Mp3 format! ');} Var t = HHJsLib.modal.info ('Download audience',' <p class = "text-center"> the audio file is being downloaded. Please wait... <p> '); self. setDemoBoxLoading ($ this); $. getJSON (siteUrl + 'index. php/public/resource/adownload ', {url: encodeURIComponent (url)}, function (response) {if (false = response. rs) {self. setDemoBoxInit ($ this); return HHJsLib. warn (response. message) ;}$ ('# dialog-box-' + t ). modal ('hide '); self. setDemoAudioInfo ($ this, respo AUC. data) ;}) ;}catch (e) {return HHJsLib. warn (e) ;}}) ;}, setDemoBoxLoading: function ($ target) {$ ($ target. attr ('data-box ')). removeClass ('no-file '). addClass ('uploaded'); (+target.attr('data-file-box'{}.html ('') ;}, setDemoBoxInit: function ($ target) {$ ($ target. attr ('data-box ')). removeClass ('uploaded '). addClass ('no-file'); values (paitarget.attr('data-file-box'{}.html ('') ;}, bindSetPreviewVideo: func Tion () {$ ('input. ele-video'). change (function () {var url = $ (this). val (); if (url! = '') {If ('swf '! = Url. substring (url. lastIndexOf ('. ') + 1 ). toLowerCase () {return HHJsLib. warn ('invalid video address. Please enter a valid Online Flash Address! ');} Var previewHtml = '<embed src = "' + url + '" quality = "high" width = "495" height = "220" align = "middle" allowScriptAccess = "always" allowFullScreen = "true" mode = "transparent" type = "application/x-shockwave-flash"> </embed> '; certificate (({this}.attr('data-demo-box'{}.html (previewHtml) ;}}, bindDelEleBtnFormEdit: function () {this. bindDelUploadImgBtn () ;}, getTimestamp: function () {return (new Date ()). getTime ();}});

The above is all the content shared in this article. I hope it will help you learn javascript.