国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

javascript code style

objc94 / 1941人閱讀

javascript代碼風格

來源:https://github.com/airbnb/javascript

Objects 對象
javascript// bad
var item = new Object();

// good
var item = {};

//不要使用保留字作為對象屬性,IE8不支持。
// bad
var superman = {
  default: { clark: "kent" },
  private: true
};

// good
var superman = {
  defaults: { clark: "kent" },
  hidden: true
};


Arrays 數組
javascript// bad
var items = new Array();

// good
var items = [];

//使用push添加數組元素
var someStack = [];
// bad
someStack[someStack.length] = "abracadabra";

// good
someStack.push("abracadabra");

//復制數組的最快方法
var len = items.length;
var itemsCopy = [];
var i;
// bad
for (i = 0; i < len; i++) {
  itemsCopy[i] = items[i];
}

// good
itemsCopy = items.slice();

//轉換array-like object(如:{1:"xx",2:"yy",length:2}) 成數組
var args = Array.prototype.slice.call(arguments);
Strings 字符串
javascript//使用單引號
// bad
var name = "Bob Parr";
// good
var name = "Bob Parr";

// bad
var fullName = "Bob " + this.lastName;
// good
var fullName = "Bob " + this.lastName;

// 使用`+`進行換行
var errorMessage = "This is a super long error that was thrown because " +
  "of Batman. When you stop to think about how Batman had anything to do " +
  "with this, you would get nowhere fast.";

//拼接帶標簽內容時,標簽頭尾寫一起
// bad
function inbox(messages) {
  items = "

    "; for (i = 0; i < length; i++) { items += "
  • " + messages[i].message + "
  • "; } return items + "
"; } // good function inbox(messages) { items = []; for (i = 0; i < length; i++) { items[i] = "
  • " + messages[i].message + "
  • "; } return "
      " + items.join("") + "
    "; }
    Functions 函數
    javascript// 使用自執行函數
    // immediately-invoked function expression (IIFE)
    (function() {
      console.log("Welcome to the Internet. Please follow me.");
    })();
    
    //型參別用`arguments`
    // bad
    function nope(name, options, arguments) {
      // ...stuff...
    }
    
    // good
    function yup(name, options, args) {
      // ...stuff...
    }
    
    
    Properties屬性
    javascript
    var luke = { jedi: true, age: 28 }; // bad var isJedi = luke["jedi"]; //一般情況使用`.`調用, // good var isJedi = luke.jedi; function getProp(prop) { //屬性是變量,使用`[]`調用 return luke[prop]; } var isJedi = getProp("jedi");
    Variables 變量
    javascript
    //使用var聲明變量 // bad superPower = new SuperPower(); // good var superPower = new SuperPower(); //不用`,`分割變量 // bad // (compare to above, and try to spot the mistake) var items = getItems(), goSportsTeam = true; dragonball = "z"; // good var items = getItems(); var goSportsTeam = true; var dragonball = "z"; //聲明未賦值變量在后面 // bad var i; var items = getItems(); var dragonball; var goSportsTeam = true; var len; // good var items = getItems(); var goSportsTeam = true; var dragonball; var length; var i; //函數內變量聲明定義盡量放最前面,除非有函數開始有判斷`return false`, // bad function() { test(); console.log("doing stuff.."); //..other stuff.. var name = getName(); if (name === "test") { return false; } return name; } // good function() { var name = getName(); test(); console.log("doing stuff.."); //..other stuff.. if (name === "test") { return false; } return name; } // bad function() { var name = getName(); if (!arguments.length) { return false; } return true; } // good function() { if (!arguments.length) { return false; } var name = getName(); return true; }
    Equality 比較操作
    javascript// bad
    if (name !== "") {
      // ...stuff...
    }
    
    // good
    if (name) {
      // ...stuff...
    }
    
    // bad
    if (collection.length > 0) {
      // ...stuff...
    }
    
    // good
    if (collection.length) {
      // ...stuff...
    }
    
    Blocks 塊
    javascript// bad
    if (test)
      return false;
    
    // good
    if (test) return false;
    
    // good
    if (test) {
      return false;
    }
    
    // bad
    function() { return false; }
    
    // good
    function() {
      return false;
    }
    
    Comments 注釋
    javascript// bad
    // make() returns a new element
    // based on the passed in tag name
    //
    // @param {String} tag
    // @return {Element} element
    function make(tag) {
    
      // ...stuff...
    
      return element;
    }
    
    // good
    /**
     * make() returns a new element
     * based on the passed in tag name
     *
     * @param {String} tag
     * @return {Element} element
     */
    function make(tag) {
    
      // ...stuff...
    
      return element;
    }
    
    
    // bad
    var active = true;  // is current tab
    
    //注釋在在代碼上方好
    // good
    // is current tab
    var active = true;
    
    // bad
    function getType() {
      console.log("fetching type...");
      // set the default type to "no type"
      var type = this._type || "no type";
    
      return type;
    }
    
    // good
    function getType() {
      console.log("fetching type...");
    
      //注釋上方要留一行空行
      // set the default type to "no type"
      var type = this._type || "no type";
    
      return type;
    }
    
    Type Casting 格式轉換
    javascript//  => this.reviewScore = 9;
    
    // bad
    var totalScore = this.reviewScore + "";
    
    // good
    var totalScore = "" + this.reviewScore;
    
    // bad
    var totalScore = "" + this.reviewScore + " total score";
    
    // good
    var totalScore = this.reviewScore + " total score";
    
    var inputValue = "4";
    
    // bad
    var val = new Number(inputValue);
    
    // bad
    var val = +inputValue;
    
    // bad
    var val = inputValue >> 0;
    
    // bad
    var val = parseInt(inputValue);
    
    // good
    var val = Number(inputValue);
    
    // good
    var val = parseInt(inputValue, 10);
    
    // good
    /**
     * parseInt was the reason my code was slow.
     * Bitshifting the String to coerce it to a
     * Number made it a lot faster.
     * 通過位移的方式轉換成數字,速度會快些
     */
    var val = inputValue >> 0;
    
    var age = 0;
    
    // bad
    var hasAge = new Boolean(age);
    
    // good
    var hasAge = Boolean(age);
    
    // good
    var hasAge = !!age;
    
    Naming Conventions 命名約定
    javascript// bad
    function q() {
      // ...stuff...
    }
    
    //名字要有語意
    // good
    function query() {
      // ..stuff..
    }
    
    // bad
    var OBJEcttsssss = {};
    var this_is_my_object = {};
    
    //駝峰命名
    // good
    var thisIsMyObject = {};
    function thisIsMyFunction() {}
    
    // bad
    function user(options) {
      this.name = options.name;
    }
    
    //構造函數大寫
    // good
    function User(options) {
      this.name = options.name;
    }
    
    // bad
    this.__firstName__ = "Panda";
    this.firstName_ = "Panda";
    
    //私有屬性用`_`開頭
    // good
    this._firstName = "Panda";
    
    // bad
    function() {
      var self = this;
      return function() {
        console.log(self);
      };
    }
    
    // bad
    function() {
      var that = this;
      return function() {
        console.log(that);
      };
    }
    
    //保存調用者`this`為`_this`
    // good
    function() {
      var _this = this;
      return function() {
        console.log(_this);
      };
    }
    
    Constructors 構造函數
    javascriptfunction Jedi() {
      console.log("new jedi");
    }
    
    // bad
    Jedi.prototype = {
      fight: function fight() {
        console.log("fighting");
      }
    };
    
    // good
    Jedi.prototype.fight = function fight() {
      console.log("fighting");
    };
    
    Events 事件
    javascript// bad
    $(this).trigger("listingUpdated", listing.id);
    
    ...
    
    $(this).on("listingUpdated", function(e, listingId) {
      // do something with listingId
    });
    
    //傳遞id時用對象包裹后再傳
    // good
    $(this).trigger("listingUpdated", { listingId : listing.id });
    
    ...
    
    $(this).on("listingUpdated", function(e, data) {
      // do something with data.listingId
    });
    
    Modules 模塊

    說明文件路徑

    文件名使用駝峰命名

    開頭加上一個 `!

    模塊中使用"use strict"嚴格模式

    使用noConflict()無沖突的輸出

    javascript// fancyInput/fancyInput.js
    
    !function(global) {
      "use strict";
    
      var previousFancyInput = global.FancyInput;
    
      function FancyInput(options) {
        this.options = options || {};
      }
    
      FancyInput.noConflict = function noConflict() {
        global.FancyInput = previousFancyInput;
        return FancyInput;
      };
    
      global.FancyInput = FancyInput;
    }(this);
    

    文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

    轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/85614.html

    相關文章

    • 使用UCloud HPC算力,部署流體力學軟件OpenFOAM

      云極(EPC)是UCloud提供的高性能計算產品,為用戶提供基于公有云技術的超高性能算力以及涵蓋數據傳輸、數據計算、數據可視化等一站式的使用體驗。EPC支持以下功能:-秒級創建計算節點,按需計費,關機不收費-支持開箱即用的應用鏡像-贈送1000GB共享存儲,支持FTP文件上傳和下載功能,帶寬最高可達100Mb-可掛載虛擬的Nvidia Tesla T4 GPU, 為圖形處理功能加速-支持8- 24...

      sherry.jiang 評論0 收藏0
    • JavaScript Style Guide and Coding Conventions

      摘要:點擊查看原文總結一下變量名函數名用駝峰,以小寫字母開頭逗號和操作符之后要有空格縮進為個空格其實現在有很多是個的語句的結尾有分號復合語句左花括號在首行末尾,且之前有空格右花括號另起一行,之前沒有空格結尾沒有括號對象左花括號不換行,之前有空格 點擊查看原文 總結一下: 變量名函數名用駝峰,以小寫字母開頭 逗號和操作符之后要有空格 縮進為4個空格(其實現在有很多是2個的 nodejs ...

      ormsf 評論0 收藏0
    • JavaScript DOM——“DOM操作技術”的注意要點

      摘要:在遍歷的時候很容易犯這樣的錯誤這是一個無限循環,因為是動態的實時更新的。應該把屬性初始化第二個變量應該盡量減少訪問的次數因為每次訪問都會運行依次基于文檔的查詢所以應該考慮將從中提取出的值緩存起來。 動態腳本 插入外部腳本文件 以script元素為例: 使用DOM動態的創建出這個元素: function loadScript(url) { var script = docum...

      ckllj 評論0 收藏0
    • js實用方法記錄-js動態加載css、js腳本文件

      摘要:測試動態加載到標簽并執行回調方法調用加載成功動態加載腳本地址回調函數加載樣式站中下載打開方法測試頁面跳轉到微信中不能打開其他安卓手機嘗試調用未指定需要打開的可參考自定義協議參數轉換參考參數轉對象使用對象轉參數 js實用方法記錄-動態加載css/js 1.動態加載js文件到head標簽并執行回調方法調用:dynamicLoadJs(http://www.yimo.link/static/...

      shusen 評論0 收藏0
    • js實用方法記錄-js動態加載css、js腳本文件

      摘要:測試動態加載到標簽并執行回調方法調用加載成功動態加載腳本地址回調函數加載樣式站中下載打開方法測試頁面跳轉到微信中不能打開其他安卓手機嘗試調用未指定需要打開的可參考自定義協議參數轉換參考參數轉對象使用對象轉參數 js實用方法記錄-動態加載css/js 1.動態加載js文件到head標簽并執行回調方法調用:dynamicLoadJs(http://www.yimo.link/static/...

      Dogee 評論0 收藏0
    • js實用方法記錄-js動態加載css、js腳本文件

      摘要:測試動態加載到標簽并執行回調方法調用加載成功動態加載腳本地址回調函數加載樣式站中下載打開方法測試頁面跳轉到微信中不能打開其他安卓手機嘗試調用未指定需要打開的可參考自定義協議參數轉換參考參數轉對象使用對象轉參數 js實用方法記錄-動態加載css/js 1.動態加載js文件到head標簽并執行回調方法調用:dynamicLoadJs(http://www.yimo.link/static/...

      sanyang 評論0 收藏0

    發表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <