javascript&圖片書寫規(guī)范

  • 命名規(guī)范:
    常量名 全部大寫并單詞間用下劃線分隔 如:CSS_BTN_CLOSE、TXT_LOADING 對象的屬性或方法名
    小駝峰式(little camel-case) 如:init滴铅、bindEvent、updatePosition 示例:Dialog.prototype = {
    init: function () {},
    bindEvent: function () {},
    updatePosition: function () {}

    };
    類名(構造器) -->小駝峰式但首字母大寫 -->如:Current、DefaultConfig 函數(shù)名 -->小駝峰式 -->如:current()、defaultConfig() 變量名 -->小駝峰式 -->如:current畦攘、defaultConfig 私有變量名 -->小駝峰式但需要用_開頭 -->如:_current集绰、_defaultConfig 變量名的前綴 -->續(xù)
  • 代碼格式:
"()"前后需要跟空格
"="前后需要跟空格
","后面需要跟空格
JSON對象需格式化對象參數(shù)
if、while绿鸣、for疚沐、do語句的執(zhí)行體用"{}"括起來
  • "{}"格式如下:
if (a==1) {
    //代碼
};
  • 避免額外的逗號:
var arr = [1,2,3,];

for-in循環(huán)體中必須用hasOwnProperty方法檢查成員是否為自身成員,避免來自原型鏈上的污染潮模。

  • 長語句可考慮斷行:
TEMPL_SONGLIST.replace('{TABLE}', da['results'])
    .replace('{PREV_NUM}', prev)
    .replace('{NEXT_NUM}', next)
    .replace('{CURRENT_NUM}', current)
    .replace('{TOTAL_NUM}', da.page_total);

為了避免和JSLint的檢驗機制沖突亮蛔,“.”或“+”這類操作符放在行尾。

/*global alert: true, console: true, top: true, setTimeout: true */
  • 使用嚴格的條件判斷符擎厢。用===代替==究流,用!==代替!=辣吃,避免掉入==造成的陷阱在條件判斷時,這樣的一些值表示false芬探。
null
undefined與null相等
字符串''
數(shù)字0
NaN

在==時齿尽,則會有一些讓人難以理解的陷阱。

undefined與null相等
一個是number一個是string時灯节,會嘗試將string轉(zhuǎn)換為number
嘗試將boolean轉(zhuǎn)換為number
0或1
嘗試將Object轉(zhuǎn)換成number或string

而這些取決于另外一個對比量循头,即值的類型,所以對于0炎疆、空字符串的判斷卡骂,建議使用===
。===會先判斷兩邊的值類型形入,類型不匹配時為false全跨。

  • 下面類型的對象不建議用new構造:
new Number
new String
new Boolean
new Object //用{}代替
new Array //用[]代替

引用對象成員用obj.prop代替obj["prop"],除非屬性名是變量亿遂。

  • 從number到string的轉(zhuǎn)換:
/** 推薦寫法*/
var a = 1;
typeof(a); //"number"
console.log(a); //1
var aa=a+'';
typeof(aa); //"string"
console.log(aa); //'1'
/** 不推薦寫法*/
new String(a)或a.toString()

從string到number的轉(zhuǎn)換浓若,使用parseInt,必須顯式指定第二個參數(shù)的進制蛇数。

/** 推薦寫法*/
var a = '1';
var aa = parseInt(a,10);
typeof(a); //"string"
console.log(a); //'1'
typeof(aa); //"number"
console.log(aa); //1

從float到integer的轉(zhuǎn)換挪钓。

/** 推薦寫法*/
Math.floor/Math.round/Math.ceil
/** 不推薦寫法*/
parseInt

字符串拼接應使用數(shù)組保存字符串片段,使用時調(diào)用join方法耳舅。避免使用+或+=的方式拼接較長的字符串碌上,每個字符串都會使用一個小的內(nèi)存片段,過多的內(nèi)存片段會影響性能浦徊。

/**推薦的拼接方式array的push馏予、join*/
var str=[],
    list=['測試A','測試B'];
for (var i=0 , len=list.length; i < len; i++) {
    str.push( '<div>'+ list[i] + '</div>');
};
console.log(str.join('')); //<div>測試A</div><div>測試B</div>
/** 不推薦的拼接方式+=*/
var str = '',
    list=['測試A','測試B'];
for (var i = 0, len = list.length; i< len; i++) {
    str+='<div>' + list[i] + '</div>';
};
console.log(str); //<div>測試A</div><div>測試B</div>
  • 盡量避免使用存在兼容性及消耗資源的方法或?qū)傩?/li>
不要使用with,void盔性,evil霞丧,eval_r,innerText
  • 注重HTML分離, 減小reflow, 注重性能冕香。

圖片規(guī)范:

  • 命名應用小寫英文蛹尝、數(shù)字、_組合暂筝,便于團隊其他成員理解箩言。
header_btn.gif
header_btn2.gif
  • 頁面元素類圖片均放入img文件夾,
  • 測試用圖片放于img/testimg文件夾,psd源圖放入img/psdimg文件夾焕襟。
  • 圖片格式僅限于gifpng饭豹、jpg等鸵赖。
  • png圖片做圖片時,要求圖片格式為png-8格式,若png-8實在影響圖片質(zhì)量或其中有半透明效果,請為ie-6單獨定義背景务漩,并盡量避免使用半透明的png圖片。
  • 背景圖片請盡可能使用sprite技術, 減小http請求它褪。

注釋規(guī)范:

  • JAVASCRIPT饵骨、CSS文件注釋需要標明作者、文件版本茫打、創(chuàng)建/修改時間居触、重大版本修改記錄、函數(shù)描述老赤、文件版本轮洋、創(chuàng)建或者修改時間、功能抬旺、作者等信息弊予。
/* * 注釋塊 */
  • 中間可添加如下信息
@file 文件名
@addon 把一個函數(shù)標記為另一個函數(shù)的擴張,另一個函數(shù)的定義不在源文件中
@argument 用大括號中的自變量類型描述一個自變量
@author 函數(shù)/類作者的姓名
@base 如果類是繼承得來开财,定義提供的類名稱
@class 用來給一個類提供描述汉柒,不能用于構造器的文檔中
@constructor 描述一個類的構造器
@deprecated 表示函數(shù)/類已被忽略
@exception 描述函數(shù)/類產(chǎn)生的一個錯誤
@exec @extends 表示派生出當前類的另一個類
@fileoverview 表示文檔塊將用于描述當前文件,這個標簽應該放在其它任何標簽之前
@final 指出函數(shù)/類
@ignore 讓jsdoc忽視隨后的代碼
@link 類似于@link標簽责鳍,用于連接許多其它頁面
@member 定義隨后的函數(shù)為提供的類名稱的一個成員
@param 用大括號中的參數(shù)類型描述一個參數(shù)
@private 表示函數(shù)/類為私有碾褂,不應包含在生成的文檔中
@requires 表示需要另一個函數(shù)/類
@return 描述一個函數(shù)的返回值
@see 連接到另一個函數(shù)/類
@throws 描述函數(shù)/類可能產(chǎn)生的錯誤
@type 指定函數(shù)/成員的返回類型
@version 函數(shù)/類的版本號

開發(fā)及測試工具約定:

  • 編碼格式化,三碼統(tǒng)一历葛。
  • 測試工具: 前期開發(fā)僅測試FireFox & IE6 & IE7 & IE8 & IE9 & Opera & Chrome & Safari
接上上一篇 HTML和CSS的書寫規(guī)范斋扰,為大家分享了JavaScript圖片,注釋等的書寫規(guī)范啃洋,在此感謝大家传货,持續(xù)更新中。
最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末宏娄,一起剝皮案震驚了整個濱河市问裕,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌孵坚,老刑警劉巖粮宛,帶你破解...
    沈念sama閱讀 217,509評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異卖宠,居然都是意外死亡巍杈,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評論 3 394
  • 文/潘曉璐 我一進店門扛伍,熙熙樓的掌柜王于貴愁眉苦臉地迎上來筷畦,“玉大人,你說我怎么就攤上這事”畋觯” “怎么了吼砂?”我有些...
    開封第一講書人閱讀 163,875評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長鼎文。 經(jīng)常有香客問我渔肩,道長,這世上最難降的妖魔是什么拇惋? 我笑而不...
    開封第一講書人閱讀 58,441評論 1 293
  • 正文 為了忘掉前任周偎,我火速辦了婚禮,結果婚禮上撑帖,老公的妹妹穿的比我還像新娘蓉坎。我一直安慰自己,他們只是感情好磷仰,可當我...
    茶點故事閱讀 67,488評論 6 392
  • 文/花漫 我一把揭開白布袍嬉。 她就那樣靜靜地躺著,像睡著了一般灶平。 火紅的嫁衣襯著肌膚如雪伺通。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,365評論 1 302
  • 那天逢享,我揣著相機與錄音罐监,去河邊找鬼。 笑死瞒爬,一個胖子當著我的面吹牛弓柱,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播侧但,決...
    沈念sama閱讀 40,190評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼矢空,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了禀横?” 一聲冷哼從身側響起屁药,我...
    開封第一講書人閱讀 39,062評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎柏锄,沒想到半個月后酿箭,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,500評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡趾娃,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,706評論 3 335
  • 正文 我和宋清朗相戀三年缭嫡,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片抬闷。...
    茶點故事閱讀 39,834評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡妇蛀,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情讥耗,我是刑警寧澤有勾,帶...
    沈念sama閱讀 35,559評論 5 345
  • 正文 年R本政府宣布疹启,位于F島的核電站古程,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏喊崖。R本人自食惡果不足惜挣磨,卻給世界環(huán)境...
    茶點故事閱讀 41,167評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望荤懂。 院中可真熱鬧茁裙,春花似錦、人聲如沸节仿。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽廊宪。三九已至矾瘾,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間箭启,已是汗流浹背壕翩。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留傅寡,地道東北人放妈。 一個月前我還...
    沈念sama閱讀 47,958評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像荐操,于是被迫代替她去往敵國和親芜抒。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,779評論 2 354

推薦閱讀更多精彩內(nèi)容