实习笔记整理 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;}
}