我的 HTML5/JavaScript 程式設計規範

HTML5/JavaScript 程式設計規範一、文本編輯規則縮進為2個空格，不使用tab 标簽全部采用小寫字母，如<input type="checkbox" checked> 函數和變量名稱小寫開頭，中間采用駱駝命名法，如：getElementById(...) 類似宏的函數名稱全部小寫或大寫，以下劃線分割單詞，如：extend_class__ 類名稱大寫字母開頭，如 function MyObject(...) 類中方法、變量按作用域不同，采用不同的命名規則。釋出的版本一定要注釋掉console.log(...) 單行注釋總是: 。多行注釋總是：。短注釋用：// 以//?開頭的注釋總是屬于未完成的臨時代碼給屬性添加的注釋：//@attributeName 二、類中方法、變量命名規則對外暴露的類名稱以大寫字母開頭，如MapPoint 内部使用的類名稱以雙下劃線__開頭加大寫字母，如__ViewPort 類的公有方法或屬性、變量與函數和變量的命名規則相同，如：mapPoint.getDistance 類的私有方法或屬性、變量，并且允許被其他内部類通路，以單下劃線_加小寫字母開頭類的外部不能直接通路的私有方法、變量，以雙下劃線__加小寫字母開頭，如：__salaryAmount 類的靜态變量以大寫字母開頭，如：MapPoint.MaxRadius 三、一個JavaScript類模闆 // 包含其他js檔案 usingScript("utils.js"); function MyClassBase() { //?TODO: } // extend_class__ 聲明 MyClass 繼承自 MyClassBase extend_class__(MyClass, MyClassBase); function MyClass() { // 另一種繼承類的方法，可以提供不同的構造參數 // 不要與extend_class__同時使用 // MyClassBase.call(this); // 可變參數示例，__args是嚴格私有變量 var __args=Array.prototype.slice.call(arguments); var __salary = 0; // 下面是一個私有方法示例，外部不能通路 function __parseArgs() { self.__salary = 0; if (__args.length>=2) { this._family = __args[0]; this.name = __args[1]; if (__args.length==3) self.__salary = __args[2]; return true; } return false; } // toString 提供類名稱 this.toString = function () { return "MyClassClass"; } this.initialize = function (salary) { if (salary!=null) this.salaryAmount = salary; return __parseArgs(); } // 這是一個外部通路的公有方法，輸出構造參數内容 this.printArgs = function () { var i = 0; for (i=0; i<__args.length; i++) console.log(__args[i]); } this._family = null; this.name = null; //@valid this.__defineGetter__("valid", function () { return (this._family!=null && this.name!=null); } ); //@salaryAmount this.__defineSetter__("salaryAmount", function (v) { __salary=v*100; } ); var self = this; } // 下面是類靜态變量的例子: MyClass.prototype.DaysOfYear = 365;

if(!getElem){ var getElem=(function(){ return function(id){ return document.getElementById(id); }; })(); } if(!includeScript){ var includeScript=(function(){ return function(js){ document.write('<script type="text/javascript" src="'+js+'"></script>'); }; })(); } if(!importScripts){ var importScripts=(function(globalEval){ var xhr=new XMLHttpRequest; return function importScripts(){ var args=Array.prototype.slice.call(arguments) ,len=args.length ,i=0 ,meta ,data ,content ; for(;i<len;i++){ if(args[i].substr(0,5).toLowerCase()==="data:"){ data=args[i]; content=data.indexOf(","); meta=data.substr(5,content).toLowerCase(); data=decodeURIComponent(data.substr(content+1)); if(/;\s*base64\s*[;,]/.test(meta)){ data=atob(data); } if(/;\s*charset=[uU][tT][fF]-?8\s*[;,]/.test(meta)){ data=decodeURIComponent(escape(data)); }}else{ xhr.open("GET",args[i],false); xhr.send(null); data=xhr.responseText; } globalEval(data); } }; }(eval)); } if(!usingScript){ var usingScript=(function(){ return function(js){ try{ includeScript(js); } catch(e){ importScripts(js); } }; })(); } if(!getBrowserAgent){ var getBrowserAgent=(function(){ return function(){ if ((navigator.userAgent.indexOf('MSIE')>=0)&&(navigator.userAgent.indexOf('Opera')<0)) return "$IE"; else if (navigator.userAgent.indexOf('Firefox')>=0) return "$FIREFOX"; else if (navigator.userAgent.indexOf('Opera')>=0) return "$OPERA"; else if (navigator.userAgent.indexOf('Chrome')>=0) return "$CHROME"; else return navigator.userAgent; }; })(); } if(!extend_class__){ var extend_class__=(function(){ return function(deriveClass, baseClass) { var base=new baseClass(); for (var m in base) { deriveClass.prototype[m]=base[m]; }}; })(); } if(!addEvent){ var addEvent=(function(){ if (document.addEventListener){ return function (el,type,fn){ if (el&&el.nodeName||el===window){ el.addEventListener(type,fn,false); }else if(el&&el.length){ for(var i=0;i<el.length;i++){ addEvent(el[i],type,fn); }}}; }else{ return function(el,type,fn){ if (el&&el.nodeName||el===window){ el.attachEvent('on'+type,function(){return fn.call(el,window.event);}); }else if(el&&el.length){ for(var i=0;i<el.length;i++){ addEvent(el[i],type,fn); }}}; }})(); } HTML5模闆：

<!doctype html> <html > <head> <meta charset="utf-8"> <meta name="author" content="cheungmine"> <title>The HTML5 Test Page</title>  <script src="utils.js"></script>  <script type="text/javascript"> console.log("run script in head"); var browser = getBrowserAgent(); addEvent(window, 'load', function () { if (browser=="$IE"||browser=="{1}quot;) { if (window.confirm("IE does not support HTML5 currently.\n"+ "please use lastest FireFox, Chrome or Opera!\n"+ "if you havenot any of them installed,\n"+ "please click OK to enter download page.")) { window.location.replace("selbrowser.html"); } else { window.close(); } } init(); } ); function init () { console.log("init after page load"); } </script> </head> <body> <header> <nav>HTML5/JavaScript 程式設計規範</nav> <p>(open me in Chrome and press F12 to switch debugging)</p> </header> <div id="main"> </div>  <script src="h5.js"></script> <script type="text/javascript"> console.log("run script in body"); var myCls = new MyClass("cheung", "mine"); myCls.printArgs(); myCls.initialize(250); console.log(myCls.DaysOfYear); </script> </body> </html>

我的 HTML5/JavaScript 程式設計規範

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條