详细为你解读tween.js是什么(图文教程)

下面是我给大家整理的有关tweenjs内容，有兴趣的同学可以去看看。

先贴下基础知识,然后在解释如何使用Tweenjs：

1第三方动画 tweenjs

2实现:缓动公式(效果:控制物体在某个时间段内的运动速度)缓动函数:

1linear 匀速

2Quad 二次方缓动效果

3Cubic 三次方缓动效果

4Quart 四次方缓动效果

5Quint 五次方缓动效果

6Sine 正弦缓动效果

7Expo 指数缓动效果

8Circ 圆形缓动函数

9Elastic 指数衰减正弦曲线缓动函数

10Back 超过范围的三次方的缓动函数

11Bounce 指数衰减的反弹曲线缓动函数每种缓动函数都由三种效果:

1easeIn 加速

2easeOut 减速

3easeInOut 先加速后减速注:linear 只有一种效果匀速

每个函数都有四个参数:

1t====> current time:当前时间解释为:开始的步数(一般从0开始),预示着一段动画的开始

2b====>beginning value 初始值解释为:开始量(开始的属性值)

3c====>change in value 变化量解释为属性值的改变量:结束位置的属性值 - 开始位置的属性值

4d====>duration 持续时间解释为:结束的步数(运动的总时间)注意:当开始步数增加到与结束步数相等时,整个运动结束 注注意:只有当t增加到与d相等时才会结束运动;如果不等,运动不会停止

tweenjs的使用 1下载 2引入 3使用tweenjs语法

Tween缓动函数名缓动效果名(t,b,c,d);

如果看到上面的已经理解了,可以跳过下面的部分下面为对Tweenjs的解释 下面就介绍如何使用这个Tween了，首先b、c、d三个参数（即初始值，变化量，持续时间）在缓动开始前，是需要先确定好的。 首先引入一个概念就补间动画 Flash做动画时会用到Tween类，利用它可以做很多动画效果，例如缓动、弹簧等等。 tweenjs在Flash中可以解释为补间动画 那么问题来了,什么是补间动画呢

相信学过Flash的都知道补间动画是flash主要的非常重要的表现手段之一补间动画有动作补间动画与形状补间动画两种,但是在js中却不需要了解这么多 好了,废话不多说,先看看关于补间动画给出的定义: 补间动画：做flash动画时，在两个关键帧中间需要做“补间动画”，才能实现图画的运动； 插入补间动画后两个关键帧之间的插补帧是由计算机自动运算而得到的

那么什么是关键帧呢 举个栗子: 先科普一下,平常所看的**,动画都是24帧的,24帧为一秒在人眼可以捕捉的范围内可以想象两个点之间有有22个点,形成一条直线或者曲线而每一个点就代表一帧,帧——就是动画中最小单位的单幅影像画面,而单幅影像画面就可以看做是一个对象(一切皆对象,除去值类型)了而这条线就代表对象的运动轨迹

重点来了:

t:代表第一个点,也就是第一帧,也就是一个动画开始的地方

b:代表初始值,也就是开始量,我们看**或者动画一般都不会看序幕把,那么跳过开头部分,选择第一帧和最后一帧之间你要开始看位置,而此位置就是初始值

c:代表的就是最后一帧减去初始值就是变化量,

d:代表最后一帧,1s的结束,也是动画的结束 或者这样理解：

t:当前步数

b:初始位置

c:总距离(变化量)

d:总步数上面是我整理给大家的有关tweenjs内容，希望今后会对大家有帮助。

相关文章：

JS实现摩天轮抽奖

js验证出生日期正则表达式

JS原始值与引用值有哪些储存方式

JS代码的执行效率往往直接影响了页面的性能，有的时候，实现同样的功能，不同的JS代码往往在效率上相差很多，有的时候仅仅是由于我们的书写习惯导致的，当然在高级点的浏览器中，它们大多都已经帮我们优化了，但是在中国，万恶的IE6仍然大量的存在，我们不得不去考虑它。对于JS代码的优化，实际上有很多的情况，有些影响是比较小的，而有些是比较严重的，本文中，我把几个我认为影响比较严重的情况列出来，供大家参考。

1、字符串的拼接

字符串的拼接在我们开发中会经常遇到，所以我把其放在首位，我们往往习惯的直接用+=的方式来拼接字符串，其实这种拼接的方式效率非常的低，我们可以用一种巧妙的方法来实现字符串的拼接，那就是利用数组的join方法。

<p class="one" id="one"></p>

<input type="button" value="效率低" onclick="func1()" />

<input type="button" value="效率高" onclick="func2()" /> //效率低的 function func1(){

var start = new Date()getTime();

var template = "";

for(var i = 0; i < 10000; i++){

template += "<input type='button' value='a'>";

}

var end = new Date()getTime();

documentgetElementById("one")innerHTML = template;

alert("用时:" + (end - start) + "毫秒"); } //效率高的 function func2(){

var start = new Date()getTime();

var array = [];

for(var i = 0; i < 10000; i++){

array[i] = "<input type='button' value='a'>";

}

var end = new Date()getTime();

documentgetElementById("one")innerHTML = arrayjoin("");

alert("用时:" + (end - start) + "毫秒"); }我们看看其在不同浏览器下执行的情况

我们会发现，在IE6下其差别是相当明显的，其实这种情况在IE的高版本中体现的也非常明显，但是在Firefox下却没有多大的区别，相反第二种的相对效率还要低点，不过只是差别2ms左右，而Chrome也和Firefox类似。另外在这里顺便说明一下，在我们给数组添加元素的时候，很多人喜欢用数组的原生的方法push，其实直接用arr[i]或者arr[arrlength]的方式要快一点，大概在10000次循环的情况IE浏览器下会有十几毫秒的差别。

2、for循环

for循环是我们经常会遇到的情况，我们先看看下面例子：

<input type="button" value="效率低" onclick="func1()" />

<input type="button" value="效率高" onclick="func2()" />

var arr = [];

for(var i = 0; i < 10000; i++){

arr[i] = "<p>" + i + "</p>";

}

documentbodyinnerHTML += arrjoin("");

//效率低的 function func1(){

var ps = documentgetElementsByTagName("p");

var start = new Date()getTime();

for(var i = 0; i < pslength; i++){

//"效率低"

}

var end = new Date()getTime();

alert("用时：" + (end - start) + "毫秒");

}

//效率高的 function func2(){

var ps = documentgetElementsByTagName("p");

var start = new Date()getTime();

for(var i = 0, len = pslength; i < len; i++){

//"效率高"

}

var end = new Date()getTime();

alert("用时：" + (end - start) + "毫秒");

}

由上表可以看出，在IE60下，其差别是非常明显，而在Firefox和Chrome下几乎没有差别，之所以在IE60下会有这种情况，主要是因为for循环在执行中，第一种情况会每次都计算一下长度，而第二种情况却是在开始的时候计算长度，并把其保存到一个变量中，所以其执行效率要高点，所以在我们使用for循环的时候，特别是需要计算长度的情况，我们应该开始将其保存到一个变量中。但是并不是只要是取长度都会出现如此明显的差别，如果我们仅仅是操作一个数组，取得的是一个数组的长度，那么其实两种方式的写法都差不多，我们看下面的例子：

<input type="button" value="效率低" onclick="func1()" />

<input type="button" value="效率高" onclick="func2()" />

var arr2 = [];

for(var i = 0; i < 10000; i++){

arr2[i] = "<p>" + i + "</p>";

}

//效率低的 function func1(){

var start = new Date()getTime();

for(var i = 0; i < arr2length; i++){

//"效率低"

}

var end = new Date()getTime();

alert("用时：" + (end - start) + "毫秒");

}

//效率高的 function func2(){

var start = new Date()getTime();

for(var i = 0, len = arr2length; i < len; i++){

//"效率高"

}

var end = new Date()getTime();

alert("用时：" + (end - start) + "毫秒");

}

从上表可以看出，如果仅仅是一个数组的话，我们看到其实两种写法都是差不多的，其实如果我们把循环再上调到100000次的话，也仅仅是差别几毫秒而已，所以在数组的情况下，我认为都是一样的。对于for循环的优化，也有人提出很多点，有人认为用-=1，或者从大到小的方式循环等等，我认为是完全没有必要的，这些优化往往实际情况下根本没有表现出来，换句话说只是计算机级别的微小的变化，但是给我们带来的却是代码的可读性大大的降低，所以实在是得不偿失。

3、减少页面的重绘

减少页面重绘虽然本质不是JS本身的优化，但是其往往是由JS引起的，而重绘的情况往往是严重影响页面性能的，所以完全有必要拿出来，我们看下面例子：

<p id="demo"></p>

<input type="button" value="效率低" onclick="func1()" />

<input type="button" value="效率高" onclick="func2()" />

var str = "<p>这是一个测试字符串</p><p>这是一个测试字符串</p><p>这是一个测试字符串</p><p>这是一个测试字符串</p><p>这是一个测试字符串</p><p>这是一个测试字符串</p><p>这是一个测试字符串</p><p>这是一个测试字符串</p><p>这是一个测试字符串</p><p>这是一个测试字符串</p><p>这是一个测试字符串</p><p>这是一个测试字符串</p><p>这是一个测试字符串</p>";

//效率低的 function func1(){

var obj = documentgetElementById("demo");

var start = new Date()getTime();

for(var i = 0; i < 100; i++){

objinnerHTML += str + i;

}

var end = new Date()getTime();

alert("用时 " + (end - start) + " 毫秒");

}

//效率高的 function func2(){

var obj = documentgetElementById("demo");

var start = new Date()getTime();

var arr = [];

for(var i = 0; i < 100; i++){

arr[i] = str + i;

}

objinnerHTML = arrjoin("");

var end = new Date()getTime();

alert("用时 " + (end - start) + " 毫秒");

可以看到的是，这简直是一个惊人的结果，仅仅100次的循环，不管是在什么浏览器下，都出现了如此之大的差别，另外我们还发现，在这里，IE6的执行效率居然比起Firefox还要好很多，可见Firefox在页面重绘这方面并没有做一些的优化。这里还要注意的是，一般影响页面重绘的不仅仅是innerHTML，如果改变元素的样式，位置等情况都会触发页面重绘，所以在平时一定要注意这点。

4、减少作用域链上的查找次数

我们知道，js代码在执行的时候，如果需要访问一个变量或者一个函数的时候，它需要遍历当前执行环境的作用域链，而遍历是从这个作用域链的前端一级一级的向后遍历，直到全局执行环境，所以这里往往会出现一个情况，那就是如果我们需要经常访问全局环境的变量对象的时候，我们每次都必须在当前作用域链上一级一级的遍历，这显然是比较耗时的，我们看下面的例子：

<p id="demo"></p>

<input id="but1" type="button" onclick="func1()" value="效率低"/>

<input id="but2" type="button" onclick="func2()" value="效率高"/>

function func1(){

var start = new Date()getTime();

for(var i = 0; i < 10000; i++){

var but1 = documentgetElementById("but1");

var but2 = documentgetElementById("but2");

var inputs = documentgetElementsByTagName("input");

var ps = documentgetElementsByTagName("p");

var but1 = documentgetElementById("but1");

var but2 = documentgetElementById("but2");

var inputs = documentgetElementsByTagName("input");

var ps = documentgetElementsByTagName("p");

var but1 = documentgetElementById("but1");

var but2 = documentgetElementById("but2");

var inputs = documentgetElementsByTagName("input");

var ps = documentgetElementsByTagName("p");

var but1 = documentgetElementById("but1");

var but2 = documentgetElementById("but2");

var inputs = documentgetElementsByTagName("input");

var ps = documentgetElementsByTagName("p");

var but1 = documentgetElementById("but1");

var but2 = documentgetElementById("but2");

var inputs = documentgetElementsByTagName("input");

var ps = documentgetElementsByTagName("p");

var but1 = documentgetElementById("but1");

var but2 = documentgetElementById("but2");

var inputs = documentgetElementsByTagName("input");

var ps = documentgetElementsByTagName("p");

}

var end = new Date()getTime();

alert("用时 " + (end - start) + " 毫秒");

}

function func2(){

var start = new Date()getTime();

var doc = document;

for(var i = 0; i < 10000; i++){

var but1 = docgetElementById("but1");

var but2 = docgetElementById("but2");

var inputs = docgetElementsByTagName("input");

var ps = docgetElementsByTagName("p");

var but1 = docgetElementById("but1");

var but2 = docgetElementById("but2");

var inputs = docgetElementsByTagName("input");

var ps = docgetElementsByTagName("p");

var but1 = docgetElementById("but1");

var but2 = docgetElementById("but2");

var inputs = docgetElementsByTagName("input");

var ps = docgetElementsByTagName("p");

var but1 = docgetElementById("but1");

var but2 = docgetElementById("but2");

var inputs = docgetElementsByTagName("input");

var ps = docgetElementsByTagName("p");

var but1 = docgetElementById("but1");

var but2 = docgetElementById("but2");

var inputs = docgetElementsByTagName("input");

var ps = docgetElementsByTagName("p");

var but1 = docgetElementById("but1");

var but2 = docgetElementById("but2");

var inputs = docgetElementsByTagName("input");

var ps = docgetElementsByTagName("p");

}

var end = new Date()getTime();

alert("用时 " + (end - start) + " 毫秒");上面代码中，第二种情况是先把全局对象的变量放到函数里面先保存下来，然后直接访问这个变量，而第一种情况是每次都遍历作用域链，直到全局环境，我们看到第二种情况实际上只遍历了一次，而第一种情况却是每次都遍历了，所以我们看看其执行结果：

从上表中可以看出，其在IE6下差别还是非常明显的，而且这种差别在多级作用域链和多个全局变量的情况下还会表现的非常明显。

5、避免双重解释

双重解释的情况也是我们经常会碰到的，有的时候我们没怎么考虑到这种情况会影响到效率，双重解释一般在我们使用eval、new Function和setTimeout等情况下会遇到，我们看看下面的例子：

<p id="demo"></p>

<input id="but1" type="button" onclick="func1()" value="效率低"/>

<input id="but2" type="button" onclick="func2()" value="效率高"/>

var sum, num

本篇文章主要教给大家如何用JS写一些商城中秒杀等自动点击功能，有这方面需要的朋友赶快学习下思路吧。

我们先来看下秒杀活动页面代码

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>

Micomo

</title>

</head>

<body>

<p>

<p>

活动倒计时<strong id="endtime"></strong>秒！

</p>

<input type="button" id="btn" value="立即购买" disabled="disabled" onClick="func()"/>

</p>

<script src="/js/jquery-211minjs"></script>

<script type="text/javascript">

//倒计时30秒

var i = 30;

function remainTime() {

if (i > 0) {

documentgetElementById("endtime")innerHTML = i--;

setTimeout("remainTime()", 1000);

}

if (i == 0) {

$("p")text("活动开始");

$("p")css("background-color", "yellow");

//倒计时结束，按钮状态改为可用

documentgetElementById("btn")disabled = false;

}

}

remainTime();

//点击按钮触发的方法

function func() {

alert("恭喜你抢到一个月饼");

}

</script>

</body>

</html>页面预览

脚本 js

代码

<script type="text/javascript">

var button = documentgetElementById("btn");

//每秒执行一次，若按钮状态为可用，进行点击

setInterval(function() {

if (buttondisabled == false) {

buttonclick();

}

},

1000);

</script>setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

如何放到浏览器

浏览器打开活动页面，按F12进入调试模式，找到Console控制台，将上面js脚本标签内的代码粘贴进去（不要首尾标签），点击回车即可，一定要在活动结束前放进去。

结果预览

修改setInterval(function(){},millisec)中的millisec（毫秒为单位），可以控制点击频率。

这只是个简单的js代码，没有实现验证码自动验证。

可以参考学习，切勿拿来做有违道德，谋取利益的事。

个人博客，仅用来做些笔记，不保证内容正确性，若发现错误，恳请纠正。

百度浏览器积分兑换

打开如下页面，按F12，将代码放到console下，回车。

代码

//选取data-id为6的<a>标签

var button = $("a[data-id='6']");

//每秒执行一次，若按钮状态为可用，进行点击

var fuc = setInterval(function() {

//如果出现刷新验证码的按钮，则表明已抢到

if($("refresh-btn")length > 0){

windowclearInterval(fuc);

//桌面通知，只有chrome，firefox浏览器支持桌面API

NotificationrequestPermission(function(status) {

var n = new Notification('通知消息', { body: '爱奇艺会员兑换码！' });

});

} else {

buttonclick();

}

},1000);//一秒一次点击上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

vuejs如何构建大型单页应用

javascript中的隐式调用的使用方法？

在webpack中使用devtool详解

这篇文章主要介绍了JS实现多物体运动的方法,结合实例形式较为详细的分析了javascript实现多物体运动的原理与相关操作技巧,需要的朋友可以参考下

本文实例分析了JS实现多物体运动的方法。分享给大家供大家参考，具体如下：

基本步骤

1通过getElementsByTagName获取到要做多物体运动的元素

2然后for循环遍历元素，添加事件

3定义startMove函数，需要两个参数，当前“做运动”的元素，和目标值target

注意问题：在多物体运动中，所有的东西不能公用；

<script>

windowonload = function(){

var liTags = documentgetElementsByTagName('li'); // 第一步

for(var i=0;i<liTagslength;i++){ // 第二步

liTags[i]onmouseover = function () {

startMove(this,400);

}

liTags[i]onmouseout = function () {

startMove(this,200);

}

}

}

var timer = null;

function startMove(obj,iTarget) { // 第三步，2个参数

clearInterval(timer);

timer = setInterval(function () {

var iSpeed = (iTarget - objoffsetWidth)/10;

iSpeed = iSpeed>0 Mathceil(iSpeed):Mathfloor(iSpeed);// 缓冲运动注意取整处理

if(objoffsetWidth == iTarget){

clearInterval(timer);

}else{

objstylewidth = objoffsetWidth+iSpeed+'px';

}

},30);

}

</script>问题：

当移入移出速度比较快的时候，就会出现有的li回不到原来的样子，卡在半路了；这是因为所有的li公用了一个定时器造成的；

当鼠标移入第一个li时，调用startMove开启一个定时器；鼠标移除li时，也需要开启一个定时器让li回到原来的位置，li走到半路上，我们移入第二个li，首先会清除定时器，这时候第一个li就卡到半路了。

解决这个问题：让每个li拥有自己的timer去控制他们的变化，在for循环的时候，给每个里定义自己的一个timer

liTags[i]timer = null;// 给每个li都添加一个timer接着在starMove里面每次用的定时器都是当前li 自己的，就不会互相干扰了。

这里由之前的timer变成了objtimer (当前对象自己的timer)；到这里就没问题了。

完整代码如下：

<body>

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

</body>加点样式：

<style>

ul{list-style: none;}

ul li{

margin: 10px;

width: 200px;height: 50px;

background: lightblue;

}

</style>完整js代码

<script>

windowonload = function(){

var liTags = documentgetElementsByTagName('li');

for(var i=0;i<liTagslength;i++){

liTags[i]timer = null;// 给每个li都添加一个timer

liTags[i]onmouseover = function () {

startMove(this,400);

}

liTags[i]onmouseout = function () {

startMove(this,200);

}

}

}

function startMove(obj,iTarget) {

clearInterval(objtimer);

objtimer = setInterval(function () {

var iSpeed = (iTarget - objoffsetWidth)/10;

iSpeed = iSpeed>0 Mathceil(iSpeed):Mathfloor(iSpeed);

if(objoffsetWidth == iTarget){

clearInterval(objtimer);

}else{

objstylewidth = objoffsetWidth+iSpeed+'px';

}

},30);

}

</script>接着在看一个例子：多物体运动-改变透明度

<script>

windowonload = function () {

var aImgs = documentgetElementsByTagName('img');

for(var i=0;i<aImgslength;i++){

aImgs[i]timer = null;

aImgs[i]alpha = 100; // 把公用的alpha改成每个img对象都有的属性

aImgs[i]onmouseover = function () {

startMove(this,30);

}

aImgs[i]onmouseout = function () {

startMove(this,100);

}

}

}

// var alpha = 100; 这里alpha在多物体运动里 不能公用

function startMove(obj,iTarget) {

clearInterval(objtimer);

var iSpeed = (iTarget - objalpha)/10;

iSpeed = iSpeed>0 Mathceil(iSpeed): Mathfloor(iSpeed);

objtimer = setInterval(function(){

if(objalpha == iTarget){

clearInterval(objtimer);

}else{

objalpha += iSpeed;

objstyleopacity =objalpha/100;

objstylefilter = 'alpha(opacity:'+objalpha+')';

}

},30);

}

</script>上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在vue中将对象新增的属性添加到检测序列的方法有哪些？

在jQuery中实现碰到边缘反弹的动画效果该如何做？

在vue cli webpack中如何使用sass（详细教程）

在jQuery中如何改变P标签文本值

通过在js动态中创建标签,并设置属性方法（详细教程）

在jQuery中实现标签子元素的添加和赋值方法

在JS中常用的消息框如何实现？

安装就不用说了，很简单，在FireFox上插件库里找到FireBug就Ok了。下图是FireBug Debug 窗口。

FireBug美工用的非常普遍，公司美工妹妹用的非常熟练 呵呵，而对于我们开发人员，主要用它来Debug JS。看看官方对Debug功能的介绍。

Firebug includes a powerful JavaScript debugger that lets you pause execution at any time and see what each variable looked like at that moment If your code is a little sluggish, use the JavaScript profiler to measure performance and find bottlenecks fast

简而言之，FireBug 可以让我们在任何时候debugJS 并查看变量，同时可以通过它找出JS中性能瓶颈。

下图是如何找到Web应用的JS，激活Firebug，点Script，然后在All 旁边选择你要Debug的JS。

下图是如何打断点 基本跟Eclipse一样，点击行号就Ok了。

下图是如何在断点上设定条件，如果条件符合，就进入断点，这个功能很不错，特别是Debug很复杂的Function时候。

下图是如何单步调试，跟Eclipse一样 F11单步

下图是查看调用的Stack，对以复杂的JS Debug很有帮助。

下图是查看变量 基本跟EclipseDebug 一样。

下图是在断点处查看变量。

有个很好用的功能，代码行之间快速调转，使得对上千行的JS调试很轻松。

下图就是Performance 测试结果，使用很简单 点Profile

还有一个Log功能比较实用，看下图 如果你不想每次都进入断点，用这个就再好不过了。

基本用法就这些了，希望对大家有帮助。

编码规范就是指导如何编写和组织代码的一系列标准，下面通过本文给大家带来了5 种JavaScript编码规范，需要的朋友参考下

什么是编码规范

编码规范就是指导如何编写和组织代码的一系列标准。通过阅读这些编码规范，你可以知道在各个公司里代码是如何编写的。

我们为什么需要编码规范

一个主要的原因是：每个人写代码的方式都是不同的。我可能喜欢这么写，而你喜欢用另一种方法写。如果我们只处理自己的代码，这样并没有什么问题。但如果有成千上万的程序员同时在一个代码库上面工作呢？如果没有规范，事情很快会变得一团糟。代码规范可以让新人迅速的熟悉相关的代码，并且也能写出让其他程序员简单易懂的代码。

Airbnb JavaScript Style Guide

号称是“最合理的编写 JavaScript 代码的方式”。

Airbnb 的这个代码规范可能是互联网最流行的 JavaScript 代码规范了，它在 Github 上足有 6 万 star，几乎覆盖了 JavaScript 的每一项特性。

地址： https://githubcom/airbnb/javascript

Google JavaScript Style Guide

只有遵守了这里的规则，一个 JavaScript 源文件才能被称为“Google Style”。很霸气，我行我素，同时也被不少公司沿用。

地址： https://googlegithubio/styleguide/jsguidehtml

Idiomatic JavaScript Style Guide

符合语言习惯的 JavaScript 代码规范。

不管有多少人参与，不管是否在同一个代码库，所有的 JavaScript 代码风格都必须像同一个人写的。

另一个很强势的同时也很流行的 JavaScript 编码规范。它的野心也很大，不止想规范 JavaScript，其它语言也都想管起来。

地球上所有的代码都像同一个人写的？想想让人觉得不寒而栗啊

地址： https://githubcom/rwaldron/idiomaticjs

JavaScript Standard Style Guide

一个功能强大的 JavaScript 代码规范，自带 linter 和自动代码纠正，无需配置，自动格式化代码。可以在编码早期就发现代码中的低级错误。这个代码规范被很多知名公司所采用，比如 NPM、GitHub、mongoDB 等。

地址： https://githubcom/standard/standard

（这个 Github 地址霸气到不行。）

jQuery JavaScript Style Guide

jQuery 是多少人入门前端的好帮手啊，可惜如今只剩回忆了。它们的这个规范算是很早期的一个代码规范了，主要是针对它们的代码以及早期 JavaScript 版本进行规定。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

使用Puppeteer图像识别技术如何实现百度指数爬虫

通过jquery技术实现放大镜

在webpack-dev-server中实现自动更新页面

这篇文章给大家讲述了如何遵循12条方法来写出高质量的JS代码的经验，有这方便需要的朋友参考下吧。

书写出高质量的JS代码不仅让程序员看着舒服，更加能够提高程序的运行速度，以下就是我整理方法：

一、如何书写可维护性的代码

当出现bug的时候如果你能立马修复它是最好的，此时解决问题的四路在你脑中还是很清晰的。否则，你转移到其他任务或者bug是经过一定的时间才出现的，你忘了那个特定的代码，一段时间后再去查看这些代码就 需要：

1花时间学习和理解这个问题 2化时间是了解应该解决的问题代码

还有个问题，特别对于大的项目或是公司，修复bug的这位伙计不是写代码的那个人（且发现bug和修复bug的不是同一个人）。因此，必须降低理解代 码花费的时间，无论是一段时间前你自己写的代码还是团队中的其他成员写的代码。这关系到底线（营业收入）和开发人员的幸福，因为我们更应该去开发新的激动 人心的事物而不是花几小时几天的时间去维护遗留代码。所以创建可维护性代码是至关重要的，一般可维护性的代码有以下几个原则：

可读性

一致性

可预测性

看上去就像同一个人写的

已记录

二、全局变量的问题

全局变量的问题在于，你的JavaScript应用程序和web页面上的所有代码都共享了这些全局变量，他们住在同一个全局命名空间，所以当程序的两个不同部分定义同名但不同作用的全局变量的时候，命名冲突在所难免。web页面包含不是该页面开发者所写的代码也是比较常见的，例如：

第三方的JavaScript库

广告方的脚本代码

第三方用户跟踪和分析脚本代码

不同类型的小组件，标志和按钮

例如说，该第三方脚本定义了一个全局变量，叫做A；接着，在你的函数中也定义一个名为A的全局变量。其结果就是后面的变量覆盖前面的，第三方脚本就一下子失效啦！而且很难debug出来。

因此：尽可能少的使用全局变量是很重要的，例如命名空间模式或是函数立即自动执行，但是要想让全局变量少最重要的还是始终使用var来声明变量。

三、忘记var作用的副作用

隐式全局变量和明确定义的全局变量间有些小的差异，就是通过delete操作符让变量未定义的能力。具体如下：

通过var创建的全局变量（任何函数之外的程序中创建）是不能被删除的。

没有通过var创建的隐式全局变量（无视是否在函数中创建）是能被删除的。

所以隐式全局变量并不是真正的全局变量，但它们是全局对象的属性。属性是可以通过delete操作符删除的，而变量是不能的，具体代码我就不写了。

四、访问全局对象

在浏览器中，全局对象可以通过window属性在代码的任何位置访问（除非你做了些比较出格的事情，像是声明了一个名为window的局部变量）。但是在其他环境下，这个方便的属性可能被叫做其他什么东西（甚至在程序中不可用）。如果你需要在没有硬编码的window标识符下访问全局对象，你可以在任何层级的函数作用域中做如下操作：

var global = (function () { return this; }());五、for循环

在for循环中，你可以循环取得数组或是数组类似对象的值，譬如arguments和HTMLCollection对象。通常的循环形式如下：

// 次佳的循环 for (var i = 0; i < myarraylength; i++) { // 使用myarray[i]做点什么 }

这种形式的循环的不足在于每次循环的时候数组的长度都要去获取下。这回降低你的代码，尤其当myarray不是数组，而是一个HTMLCollection对象的时候。

六、不扩展内置原型

扩增构造函数的prototype属性是个很强大的增加功能的方法，但有时候它太强大了。增加内置的构造函数原型（如Object(), Array(), 或Function()）挺诱人的，但是这严重降低了可维护性，因为它让你的代码变得难以预测。使用你代码的其他开发人员很可能更期望使用内置的 JavaScript方法来持续不断地工作，而不是你另加的方法。另外，属性添加到原型中，可能会导致不使用hasOwnProperty属性时在循环中显示出来，这会造成混乱。

七、避免隐式类型转换

JavaScript的变量在比较的时候会隐式类型转换。这就是为什么一些诸如：false == 0 或 “” == 0 返回的结果是true。为避免引起混乱的隐含类型转换，在你比较值和表达式类型的时候始终使用===和!==操作符。

var zero = 0; if (zero === false) { // 不执行，因为zero为0, 而不是false } // 反面示例 if (zero == false) { // 执行了 }

八、避免eval()

如果你现在的代码中使用了eval()，记住该咒语“eval()是魔鬼”。此方法接受任意的字符串，并当作JavaScript代码来处理。当有 问题的代码是事先知道的（不是运行时确定的），没有理由使用eval()。如果代码是在运行时动态生成，有一个更好的方式不使用eval而达到同样的目 标。例如，用方括号表示法来访问动态属性会更好更简单：

// 反面示例 var property = "name"; alert(eval("obj" + property)); // 更好的 var property = "name"; alert(obj[property]);

使用eval()也带来了安全隐患，因为被执行的代码（例如从网络来）可能已被篡改。这是个很常见的反面教材，当处理Ajax请求得到的JSON 相应的时候。在这些情况下，最好使用JavaScript内置方法来解析JSON相应，以确保安全和有效。若浏览器不支持JSONparse()，你可 以使用来自JSONorg的库。

同样重要的是要记住，给setInterval(), setTimeout()和Function()构造函数传递字符串，大部分情况下，与使用eval()是类似的，因此要避免。在幕后，JavaScript仍需要评估和执行你给程序传递的字符串：

// 反面示例 setTimeout("myFunc()", 1000); setTimeout("myFunc(1, 2, 3)", 1000); // 更好的 setTimeout(myFunc, 1000); setTimeout(function () { myFunc(1, 2, 3); }, 1000);

使用新的Function()构造就类似于eval()，应小心接近。这可能是一个强大的构造，但往往被误用。如果你绝对必须使用eval()，你 可以考虑使用new Function()代替。有一个小的潜在好处，因为在新Function()中作代码评估是在局部函数作用域中运行，所以代码中任何被评估的通过var 定义的变量都不会自动变成全局变量。另一种方法来阻止自动全局变量是封装eval()调用到一个即时函数中。

考虑下面这个例子，这里仅un作为全局变量污染了命名空间。

consolelog(typeof un); // "undefined" consolelog(typeof deux); // "undefined" consolelog(typeof trois); // "undefined" var jsstring = "var un = 1; consolelog(un);"; eval(jsstring); // logs "1" jsstring = "var deux = 2; consolelog(deux);"; new Function(jsstring)(); // logs "2" jsstring = "var trois = 3; consolelog(trois);"; (function () { eval(jsstring); }()); // logs "3" consolelog(typeof un); // number consolelog(typeof deux); // "undefined" consolelog(typeof trois); // "undefined"另一间eval()和Function构造不同的是eval()可以干扰作用域链，而Function()更安分守己些。不管你在哪里执行 Function()，它只看到全局作用域。所以其能很好的避免本地变量污染。在下面这个例子中，eval()可以访问和修改它外部作用域中的变量，这是 Function做不来的（注意到使用Function和new Function是相同的）。

(function () { var local = 1; eval("local = 3; consolelog(local)"); // logs "3" consolelog(local); // logs "3" }()); (function () { var local = 1; Function("consolelog(typeof local);")(); // logs undefined九、编码规范

建立和遵循编码规范是很重要的，这让你的代码保持一致性，可预测，更易于阅读和理解。一个新的开发者加入这个团队可以通读规范，理解其它团队成员书写的代码，更快上手干活。

十、缩进

代码没有缩进基本上就不能读了。唯一糟糕的事情就是不一致的缩进，因为它看上去像是遵循了规范，但是可能一路上伴随着混乱和惊奇。重要的是规范地使用缩进。

十一、注释

你必须注释你的代码，即使不会有其他人向你一样接触它。通常，当你深入研究一个问题，你会很清楚的知道这个代码是干嘛用的，但是，当你一周之后再回来看的时候，想必也要耗掉不少脑细胞去搞明白到底怎么工作的。

很显然，注释不能走极端：每个单独变量或是单独一行。但是，你通常应该记录所有的函数，它们的参数和返回值，或是任何不寻常的技术和方法。要想到注 释可以给你代码未来的阅读者以诸多提示；阅读者需要的是（不要读太多的东西）仅注释和函数属性名来理解你的代码。例如，当你有五六行程序执行特定的任务， 如果你提供了一行代码目的以及为什么在这里的描述的话，阅读者就可以直接跳过这段细节。没有硬性规定注释代码比，代码的某些部分（如正则表达式）可能注释 要比代码多。

十二、花括号{}

花括号（亦称大括号，下同）应总被使用，即使在它们为可选的时候。技术上将，在in或是for中如果语句仅一条，花括号是不需要的，但是你还是应该总是使用它们，这会让代码更有持续性和易于更新。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

使用vue如何实现权限管理功能

在webpack-dev-server中如何使用http-proxy（详细教程）

在vuejs中如何实现递归树型菜单组件（详细教程）

在vue中如何使用echarts

本文通过一段实例代码给大家讲解了js索引下标之li集合绑定点击事件的相关知识，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧

下面一段代码给大家介绍li集合绑定点击事件，具体代码如下所示：

//Method-1:

var items = documentgetElementsByTagName('li');

for(var i=0;i<itemslength;i++){

items[i]index = i;

items[i]onclick = function(){

thisinnerHTML = thisindex;

}

}

//Method-2:

var items = documentgetElementsByTagName('li');

for(var i = 0; i<itemslength; i++){

(function(index){

items[i]onclick = function(){

thisinnerHTML = index;

}

})(i)

}

//Method-3:

var items = documentgetElementsByTagName('li');

for(var i = 0; i<itemslength; i++){

items[i]onclick = function(index){

return function(){

thisinnerHTML = index;

}

}(i)

}上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在Nodejs中子进程有哪些应用场景

详细解读在nodeJs中有关文件系统与流

Javascript调试命令有哪些？

在nodejs中如何使用http模块

在微信中如何使用js唤起App？

在vue中使用cli如何实现重构多页面脚手架

在JS中如何实现通过拖拽改变物体大小