實習筆記整理 js 篇

總結: 主要是前端 JS 的基礎 (╯‵□′)╯︵┻━┻不許吐槽我把總結寫在前面

---

• 特別感謝超級好用的MarkDown編輯器(づ￣ 3￣)づStackEdit

1. 碰到的全部坑都放在前面 (。・・)ノ

• JS的函數定義時有3個參數, 使用時傳入5個實參, 則前3個實參由定義的3個參數得到, 剩下的參數能夠經過arguments獲取, arguments是一個僞數組, 在這個例子裏, 共有5個元素.

2. 小tips

• == != === !==的區別: 關於JS的 undefined null 還有 === 和 ==

• <script>標籤內的JS代碼用<!-- -->wrap起來, 是由於有的瀏覽器若是沒有這個會沒法識別js代碼(固然如今大部分瀏覽器都是沒問題的)

---

下面開始正文

3. JS格式

3.1 行內格式

1. 使用+來鏈接多行字符串

2. 跟css相反, 不要使用省略的小數寫法

3.2 行間格式

1. 不要省略花括號

2. 不要用with語句

3. 不要使用for-in語句來遍歷數組

4. 不推薦使用==和!=, 推薦使用===和!==

3.3 JS代碼樣例

3.3.1 對象定義

// case 1: 
// 對象的定義:
var book = {
    title: "markdown",
    author: "me"
};

3.3.2 數組定義

// case 2:
// 數組的定義:
var color = [ "red", "green" ] ;

3.3.3 註釋格式

// case 3:
// 註釋的推薦格式

// 1. 相似這樣的單行註釋, 用來講明一行代碼的功能, 前面加一個空格, 縮進跟代碼一致
console.log("我是代碼");

/*
 * 2. 使用這樣的格式來做爲
 * 多行註釋
 */

console.log(true); // 3. 像這樣的提醒類註釋跟代碼之間隔一個空格

/**
4. 若是要生成文檔, 就使用這樣的註釋
@method 函數的動做
@param {Object} 說明
@return {Object} 說明
**/

3.3.4 循環

// case 4:
// 若是要使用for-in循環, 最好先使用hasOwnProperty()方法
var p;
for (p in object) {
    if (object.hasOwnProperty(p)) {
    console.log("p name is " + p);
    console.log("p value is " + object[p]);
    }
}

4. JS工具

• JSHint

• JSLint

5. JS編寫規範

5.1 js和css分離

// case 5:
// js和css分離, 這個函數支持全部瀏覽器中給元素添加方法
function addListener(target, type, handler) {
    if (target.addEventListener) {
        target.addEventListener(type, handler, false);
    } else if (target.attachEvent) {
        target.attachEvent("on" + type, handler);
    } else {
        target["on" + type] = handler;
    }
}

// 這個函數作*, 加在onclick上
function doSomething() {
    // do something
}

var btn = document.getElementById("action-btn");
addListener(btn, "click", doSomething);

5.2 js和html分離

1. 不要直接在html裏面引用js

5.3 js的全局變量

1. 儘可能不要使用全局變量

2. 當心不要建立意外的全局變量

5.4 js單一職責

主要是爲了可擴展性

var MyApplication = {
    // 這個方法專門處理鼠標點擊
    handleClick: function(event) {
        this.showPopup(event);
    },

    // 而後這個方法專門處理鼠標點擊產生的動做
    showPopup: function(event) {
        var popup = document.getElementById("popup");
        popup.style.left = event.clickX + "px";
        popup.style.top = event.clickY + "px";
        popup.className = "reveal";
        }
};

// 將popup加到鼠標點擊動做裏去的實際應用
addListener (element, "click", function(event) {
    MyApplication.handleClick(event);
});

5.5 js的判斷

5.5.1 檢測引用值, 使用instanceof, 而不要使用!==和===

5.5.2 數組檢測

// 這個函數的做用是判斷value是否是數組
function isArray(value) {
    if (typeof Array.isArray === "function") {
        return Array.isArray(value);
    } else {
        return Object.prototype.toString.call(value) === "[object Array]";
    }
}

// 使用函數判斷x是否是數組
isArray(x);

// 通常來講, 還能夠這樣判斷
Array.isArray(x) === "[object Array]"

5.5.3 屬性檢測

// 對象的定義, 下面咱們要檢測這個對象的屬性
var object = {
    count: 0;
    related: null;
};

// 檢測對象的count屬性
if ("count" in object) {
    // code here
}

// 或者能夠這樣
if (object.hasOwnProperty("related")) {
    // code
}

// 或者更詳細一點
if ("hasOwnProperty" in Object && object.hasOwnProperty("related")) {
    // code
}

5.6 js配置數據和代碼分離

1. 把配置數據單獨放在一個對象的屬性值中

2. 把配置數據放在Java屬性文件中

   • 讀取的時候: 使用JSON/JSONP/js

5.7 js拋出自定義錯誤

// 常見的拋出錯誤方法
throw new Error("error description");

// 定義本身的錯誤類型
function MyError(message) {
    this.message = message;
}

MyError.prototype = new Error();

5.8 js阻止修改的3個層次

1. Object.preventExtension(object);

2. Object.seal(object);

3. Object.freeze(person);

5.9 瀏覽器嗅探

1. 首先使用特性檢測判斷某個屬性是否存在

2. 不行再使用用戶代理檢測檢測用戶代理字符串

6. JS樣例

6.1 使用js實現c語言的sprintf

// case 1:
// 這個函數, 達到了跟c語言的sprintf同樣的效果
function sprintf(text) {

    // text能夠獲取傳入sprintf裏面的第一個參數, args獲取包括text在內的全部參數
    var i=1, args=arguments;

    /*
     * 在這裏, 將替換text中的全部replace
     * 匿名函數將被調用2次, 第一次返回args[1], 第二次返回args[2]
     * args[0] 等於 text
     */
    return text.replace(/%s/g, function() {
        return (i < args.length) ? args[i++] : "";
    });
}

// 使用sprintf函數
var result = sprintf("<li><a href=\"%s\">%s</a></li>", "/item/4", "Fourth item");

// 打印出替換的結果
console.log(result);

6.2 前端頁面js封裝樣例

6.2.1 運行效果

6.2.2 前端頁面文件結構示例

6.2.3 js文件的backbone封裝

./js/hello.js

define(function(){
    var moving = function() {
        $("#btn").addClass("btn-move-class");
    };

    return {
        moving: moving
    }
});

6.2.4 js文件的requireJS引用

./hello.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta content="telephone=no" name="format-detection">
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/backbone.js/1.1.2/backbone-min.js"></script>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/backbone.js/1.1.2/backbone.js"></script>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/require.js/2.1.9/require.js"></script>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/require.js/2.1.9/require.min.js"></script>
    <link href="css/hello.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="btn">Click</div>
</body>
<script type="text/javascript">
    <!--
    require(['js/hello'],function(hello){
        hello.moving();
    });
    //-->
</script>
</html>

6.2.5 css動畫

./css/hello.css

@charset "utf-8";
.container {font-family:"Microsoft YaHei","Hiragino Sans GB",Arial,"Lucida Grande",Verdana;}

div {
    height: 60px;
    width: 90%;
    margin: auto;
    font-size: 50px;
    color: #fff;
    font-weight: bolder;
    text-align: center;
    border-radius: 9999px;
    background: #338559;
}

.btn-move-class {
    -webkit-animation:moving 5s linear infinite;
            animation:moving 5s linear infinite;
}

@keyframes moving{
    0%,100% {height:60px;}
    50% {height:200px;}
}

@-moz-keyframes moving /* Firefox */{
    0%,100% {height:0px;}
    50% {height:200px;}
}

@-webkit-keyframes moving /* Safari 和 Chrome */{
    0%,100% {height:0px;}
    50% {height:200px;}
}

@-o-keyframes moving /* Opera */{
    0%,100% {height:0px;}
    50% {height:200px;}
}