总结: 主假如前端 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 行内花样
运用
+
来衔接多行字符串跟css相反, 不要运用省略的小数写法
3.2 行间花样
不要省略花括号
不要用
with
语句不要运用
for-in
语句来遍历数组不引荐运用
==
和!=
, 引荐运用===
和!==
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星散
不要直接在html内里援用js
5.3 js的全局变量
只管不要运用全局变量
警惕不要建立不测的全局变量
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设置数据和代码星散
把设置数据零丁放在一个对象的属性值中
把设置数据放在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个条理
Object.preventExtension(object);
Object.seal(object);
Object.freeze(person);
5.9 浏览器嗅探
起首运用特征检测推断某个属性是不是存在
不可再运用用户代办检测检测用户代办字符串
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;}
}