Javascript code implementation: quasi-instantiation class_javascript skills

This article mainly introduces the information about how Javascript code implements the quasi-instantiation class and attaches an example. it is a very good article. if you need it, you can refer to the Javascript to do more and more things, the problem that arises is the increase in the amount of Js code. in the face of code addition, I chose to automatically start the constructor in the quasi-object class instantiation, and put all js code, classes are made in the form of registration.

Code

/*** @ Version $ Id $ * @ author xjiujiu
 
  
* @ 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 ('P. item-box'); this. bindPlusBtn ('A. btn-plus '); this. bindAppendNewElement ('P. 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. bindDelAudioBtn ('A. btn-del-audio '); this. initPlusBtn () ;}, bindUploadEleVideoBtn: function (dom) {var self = this; $ (dom ). click (function () {var $ this = $ (this); var t = HHJsLib. modal. confirm ('upload a local video ','
  
'+'
  
Browse your computer and select a video file.
'+'
  
'+'
  
Upload from computer
'+'
  
'+'
  
'); 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 + 'p. 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 ('P. eles-box '). append (itemBoxHtml); // bind the Dom Event this. bindDelItemBtn ('# item-' + t + 'A. btn-del-item '); this. movePlusBtnBox (heading); this. bindNewEleUpload (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); itemHtml = 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 + ='
  
'; 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-' + heading); var $ items = $ ('# ele-part-box-' + heading ). find ('P. item-ele-box'); if ($ items. length <2) {$ ($ items [0]). find ('A. btn-del-item '). hide ();} e Lse {$ ($ 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 () {$ ('P. new-item-box '). hide () ;}) ;}, bindPlusBtn: function (dom) {$ (dom ). click (function (event) {$ ('P. new-item-box '). hide (); var id = $ (this ). attr ('d Ata-heading-id'); $ ('# new-item-box-' + id + 'p. new-item-box '). removeClass ('hide '). attr ('data-show ', '1 '). show (); event. preventDefault () ;}) ;}, initPlusBtn: function () {var self = this; $ ('P. 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? '); 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 ('P. 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 (conItemH Tml); 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 ','
  
'+'
  
Browse your computer and select an audio file.
'+'
  
'+'
  
Upload from computer
'+'
  
'+'
  
'); 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 ='
  '; Parameters (paitarget.attr('data-demo-box'{}.html (audioHtml ). show (); $ ($ target. attr ('data-field ')). attr ('data-id', data. id ). attr ('data-src', data. src) ;}, bindUploadModal: function (dom) {var self = this; $ (dom ). unbind ('click '). click (function () {var $ this = $ (this); var t = HHJsLib. modal. confirm ('upload image ','
  
'+'
  
Browse the pictures on your computer and select one.
'+'
  
'+'
  
Upload from computer
'+'
  
'+'
  
'); 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 = ''; then (%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 ('Hi De ');}); 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');}, verifyEleInfo: function () {this. verifyHeaderEleInfo (); this. verifyTextEleInfo (); this. verifyImageEleInfo (); this. verifyVideoEleInfo (); this. verifyAudioEleInfo (); this. verifyQuestionEleInfo (); t His. verifyKnowEleInfo () ;}, verifyHeaderEleInfo: function () {$ ('P. item-heading-box '). each (function () {HHJsLib. isEmpty ($ (this ). find ('textarea '). val (), 'toutiao content') ;}, verifyTextEleInfo: function () {$ ('P. item-text-box '). each (function () {HHJsLib. isEmptyByDom ('# ele-text-' + $ (this ). attr ('data-id'), 'text content elemental ') ;}, verifyImageEleInfo: function () {$ ('P. item-image-box '). each (function () {HHJsLib. I SEmptyByDom ('# ele-image-hash-' + $ (this ). attr ('data-id'), 'image address'); HHJsLib. isEmptyByDom ('# ele-image-content-' + $ (this ). attr ('data-idid'), 'image Introduction') ;}, verifyVideoEleInfo: function () {$ ('P. 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');}) ;}, verifyAudioE LeInfo: function () {$ ('P. 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 () {$ ('P. item-question-box '). each (function () {HHJsLib. isEmptyByDom ('# ele-question-content-' + $ (this ). attr ('data-id'), 'problem content'); HHJsLib. isEmptyB YDom ('# 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 ($ (this ). val (), 'Answer: ') ;}) ;}, verifyKnowEleInfo: function () {$ ('P. item-know-box '). each (function () {HHJsLib. isEmptyByDom ('# ele-know-hash-' + $ (this ). attr ('data-id'), 'Know Image address'); HHJsLib. isEmptyByDo M ('# ele-know-content-' + $ (this ). attr ('data-id'), 'Know Introduction');}) ;}, verifyConclusionInfo: function () {var length = $ ('# conclusion-box p. item-con '). length; HHJsLib. isEmpty (length, 'summary'); $ ('# conclusion-box p. 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') ;}, bin DDownloadEleAudioBtn: 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 = hhhhjslib.modal.info ('Download audience ','
  
Downloading the audio file. please wait...
  
'); 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, response. data) ;}) ;}catch (e) {return HHJsLib. warn (e) ;}}) ;}, setDemoBoxLoading: func Tion ($ 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: function () {$ ('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 =''; Functions (({(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.