练习笔记整顿 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东西

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 运转效果

《练习笔记整顿 js 篇》
《练习笔记整顿 js 篇》

6.2.2 前端页面文件构造示例

《练习笔记整顿 js 篇》

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;}
}
    原文作者:2bdenny
    原文地址: https://segmentfault.com/a/1190000003491669
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞