Vue和微信小程序的区别、比较

2018/08/04 · 基础技术 ·
Vue,
小程序

原文出处:
卖女孩的小火柴   

写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别。

JavaScript在浏览器上的调试技巧

2016/11/04 · JavaScript
· 8 评论澳门微尼斯人手机版, ·
调试

本文作者: 伯乐在线 –
TGCode
。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

在网站开发中,我们难免会遇到各种bug,这时,我们就需要去调试我们的JavaScript脚本找出问题,然后去修改代码。那我们如何去调试呢?

最简单的就是alert()方法,不过,alert 弹出窗口会中断程序,
而且如果要在循环中显示信息,就会弹出多个弹窗,你不点击alert框的确定按钮下一个alert就不会出现,另外alert
显示对象永远显示为[object ],所以alert()方法只适合小程序。

第二种是断点调试

1.在源码上使用debugger

例如:

JavaScript

function check(){ var i=0; debugger; alert(1); } check();

1
2
3
4
5
6
function check(){
var i=0;
debugger;
alert(1);
}
check();

澳门微尼斯人手机版 1

可以看到,程序会运行到debugger处就会停住,并没有执行后面,你可以按F8来继续执行。

2.
直接在浏览器上断点,同样是打开控制台的source,找到你要调试的代码,然后点击你要断点的那一行代码的左侧行码处,如下图:

澳门微尼斯人手机版 2

第三种就是我最喜欢的console

最常用的就是console.log(),在控制台中打印信息,它可以接受任何字符串、数字和JavaScript对象,也可以接受换行符n以及制表符t。

JavaScript

var i=0; var name=”我是console”; var json={ “key”:”console” };
console.log(i); console.log(name); console.log(json);

1
2
3
4
5
6
7
8
var i=0;
var name="我是console";
var json={
"key":"console"
};
console.log(i);
console.log(name);
console.log(json);

澳门微尼斯人手机版 3

你可以按红箭头所指的按钮清除控制台,也可以直接用console.clear()清除。

当然console可不止这一个方法,它还有:

console.info 用于输出提示性信息

console.error用于输出错误信息

console.warn用于输出警示信息

console.debug用于输出调试信息

console.info(“提醒”); console.error(“报错了”); console.warn(“警告”);
console.debug(“调试信息”);

澳门微尼斯人手机版 4

console对象的上面5种方法,都可以使用printf风格的占位符。不过,占位符的种类比较少,只支持字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)四种。

JavaScript

console.log(“%s年”,2016); console.log(“%d年%d月”,2016,6);
console.log(“%f”,3.1415); console.log(“%o”,json);

1
2
3
4
console.log("%s年",2016);
console.log("%d年%d月",2016,6);
console.log("%f",3.1415);
console.log("%o",json);

澳门微尼斯人手机版 5

如果你觉得上面的输出信息太单调了,我们还可以这样:

JavaScript

console.log(“%c自定义样式”,”font-size:20px;color:green”);
console.log(“%c我是%c自定义样式”,”font-size:20px;color:green”,”font-weight:bold;color:red”);

1
2
console.log("%c自定义样式","font-size:20px;color:green");
console.log("%c我是%c自定义样式","font-size:20px;color:green","font-weight:bold;color:red");

澳门微尼斯人手机版 6

console.dirxml用来显示网页的某个节点(node)所包含的html/xml代码

<table> <thead> <tr> <th></th>
<th></th> <th></th> <th></th>
<th></th> </tr> </thead> </table>
<script> var table=document.querySelector(“table”);
console.dirxml(table); </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
</table>
<script>
var table=document.querySelector("table");
console.dirxml(table);
</script>

澳门微尼斯人手机版 7

console.group输出一组信息的开头

console.groupEnd结束一组输出信息

JavaScript

console.group(“start”); console.log(“子项”); console.groupEnd(“end”);
console.log(“aa”);

1
2
3
4
console.group("start");
console.log("子项");
console.groupEnd("end");
console.log("aa");

澳门微尼斯人手机版 8

console.assert对输入的表达式进行断言,只有表达式为false时,才输出相应的信息到控制台

JavaScript

var isTrue=true; console.assert(isTrue,”我是错误”); isTrue=false;
console.assert(isTrue,”我是错误2″);

1
2
3
4
var isTrue=true;
console.assert(isTrue,"我是错误");
isTrue=false;
console.assert(isTrue,"我是错误2");

澳门微尼斯人手机版 9

console.count  当你想统计代码被执行的次数,这个方法很有用

JavaScript

function play(){ console.count(“执行次数:”); } play(); play(); play();

1
2
3
4
5
6
function play(){
     console.count("执行次数:");
}
play();
play();
play();

澳门微尼斯人手机版 10

console.dir
 直接将该DOM结点以DOM树的结构进行输出,可以详细查对象的方法发展等等

<table> <thead> <tr> <th></th>
<th></th> <th></th> <th></th>
<th></th> </tr> </thead> </table> var
table=document.querySelector(“table”); console.dir(table);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
</table>
 
var table=document.querySelector("table");
console.dir(table);

console.time 计时开始

console.timeEnd 计时结束

JavaScript

console.time(“array”); var a=0; for(var i=0;i<100000;i++){ a += i; }
console.timeEnd(“array”);

1
2
3
4
5
6
console.time("array");
var a=0;
for(var i=0;i<100000;i++){
a += i;
}
console.timeEnd("array");

澳门微尼斯人手机版 11

console.profile和console.profileEnd配合一起使用来查看CPU使用相关信息

console.timeLine和console.timeLineEnd配合一起记录一段时间轴

打赏支持我写出更多好文章,谢谢!

打赏作者

深入理解CSS3 Animation 帧动画

2015/07/13 · CSS ·
Animation

原文出处: Aaron
的博客   

CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术。

最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动画steps属性的理解

我们知道CSS3的Animation有八个属性

  1. animation-name
  2. animation-duration
  3. animation-delay
  4. animation-iteration-count
  5. animation-direction
  6. animation-play-state
  7. animation-fill-mode
  8. animation-timing-function

其中1-7大多都有介绍,但是animation-timing-function是控制时间的属性

在取值中除了常用到的 三次贝塞尔曲线 以外,还有个让人比较困惑的?steps()
函数

animation默认以ease方式过渡,它会在每个关键帧之间插入补间动画,所以动画效果是连贯性的

除了ease,linear、cubic-bezier之类的过渡函数都会为其插入补间。但有些效果不需要补间,只需要关键帧之间的跳跃,这时应该使用steps过渡方式

animation-timing-function 规定动画的速度曲线

澳门微尼斯人手机版 12

以上w3school网站上给的使用方法,但是漏掉一个很重要的steps

简单的来说,我们一直使用animation基本都是实现线性渐变的动画

  • 位置在固定的时间从起点到终点
  • 尺寸在固定的时间线性变化
  • 颜色的线性改变等等

看效果线性动画

截取CSS如下

CSS

.test1 { width: 90px; height: 60px; -webkit-animation-name: skyset;
-webkit-animation-duration: 2000ms; -webkit-animation-iteration-count:
infinite; /*无限循环*/ -webkit-animation-timing-function: linear; }
@-webkit-keyframes skyset { 0% { background: red;} 50%{ background:
blue} 100% {background: yellow;} }

1
2
3
4
5
6
7
8
9
10
11
12
13
.test1 {
    width: 90px;
    height: 60px;
    -webkit-animation-name: skyset;
    -webkit-animation-duration: 2000ms;
    -webkit-animation-iteration-count: infinite; /*无限循环*/
    -webkit-animation-timing-function: linear;
}
@-webkit-keyframes skyset {
    0% { background: red;}
    50%{ background: blue}
    100% {background: yellow;}
}

timing-function:linear
定义的是一个匀速变化的动画,就是在2秒内,从红色过度到蓝色到黄色,是一个很线性的颜色变化

如果要实现帧动画效果而不是线性的变化就需要引入step这个值了,换句话就是没有过渡的效果,而是一帧帧的变化

同样可以看测试帧动画

 

理解steps

steps 函数指定了一个阶跃函数

第一个参数指定了时间函数中的间隔数量(必须是正整数)

第二个参数可选,接受 start 和 end
两个值,指定在每个间隔的起点或是终点发生阶跃变化,默认为 end。

step-start等同于steps(1,start),动画分成1步,动画执行时为开始左侧端点的部分为开始;

step-end等同于steps(1,end):动画分成一步,动画执行时以结尾端点为开始,默认值为end。

看看W3C的规范transition-timing-function

 

steps第一个参数的错误的理解:

steps(5,start)

steps() 第一个参数 number 为指定的间隔数,即把动画分为 n
步阶段性展示,估计大多数人理解就是keyframes写的变化次数

例如:

CSS

@-webkit-keyframes circle { 0% {} 25%{} 50%{} 75%{} 100%{} }

1
2
3
4
5
6
7
@-webkit-keyframes circle {
        0% {}
        25%{}
        50%{}
        75%{}
        100%{}
}

我之前也一直认为steps(5,start)中的5 就是指的keyframes中的0% 25% 50%
75% 100% 分成5个间隔等分

为什么会出现这种理解错误,我们看一个例子

keyframes的关键帧是只有2个规则的时候,假如我们有一张400px长度的雪碧图

CSS

@-webkit-keyframes circle { 0% {<code>background-position-x:
</code><code>0</code><code>;</code>}
100%{<code>background-position-x: -400px;} }

1
2
3
4
@-webkit-keyframes circle {
        0% {<code>background-position-x: </code><code>0</code><code>;</code>}
        100%{<code>background-position-x: -400px;}
}

此刻设置steps(5,start)那么会发现5张图会出现帧动画的效果,因为steps中的5把
0% – 100%的规则,内部分成5个等分

实际内部会执行这样一个关键帧效果

CSS

@-webkit-keyframes circle { 0% {background-position-x: 0;} 25%
{background-position-x: -100px;} 50% {background-position-x:-200px;}
75%{background-position-x: -300px;} 100%{background-position-x: -400px;}
}

1
2
3
4
5
6
7
@-webkit-keyframes circle {
        0% {background-position-x: 0;}
        25% {background-position-x: -100px;}
        50% {background-position-x:-200px;}
        75%{background-position-x: -300px;}
        100%{background-position-x: -400px;}
}

将这个规则稍微修改下,加入一个50%的状态

CSS

@-webkit-keyframes circle { 0% {background-position-x: 0;} 50%
{background-position-x: -200px;} 100%{background-position-x: -400px;} }

1
2
3
4
5
@-webkit-keyframes circle {
        0% {background-position-x: 0;}
        50% {background-position-x: -200px;}
        100%{background-position-x: -400px;}
}

那么同样用steps(5,start)效果就会乱套

此刻你会很迷惑,所以关键要理解第一个参数的针对点,首先引入一个核心点:

timing-function 作用于每两个关键帧之间,而不是整个动画

那么第一个参数很好理解了,steps的设置都是针对两个关键帧之间的,而非是整个keyframes,所以第一个参数对
– 次数对应了每次steps的变化

换句话说也是 0-25 之间变化5次,? 25-50之间 变化5次 ,50-75
之间变化5次,以此类推

 

第二个参数可选,接受 start 和 end
两个值,指定在每个间隔的起点或是终点发生阶跃变化,默认为 end

通过案例看下step-start,step-end的区别

CSS

@-webkit-keyframes circle { 0% {background: red} 50%{background: yellow}
100% {background: blue} }

1
2
3
4
5
@-webkit-keyframes circle {
        0% {background: red}
        50%{background: yellow}
        100% {background: blue}
    }

step-start: 黄色与蓝色相互切换

step-end : 红色与黄色相互切换

2个参数都会选择性的跳过前后部分,start跳过0%,end跳过100%

step-start在变化过程中,都是以下一帧的显示效果来填充间隔动画,所以0% 到
50%? 直接就显示了黄色yellow

step-end与上面相反,都是以上一帧的显示效果来填充间隔动画,所以0% 到 50%
直接就显示了红色red

引用w3c的一张step的工作机制图

澳门微尼斯人手机版 13

总结:

steps函数,它可以传入两个参数,第一个是一个大于0的整数,他是将间隔动画等分成指定数目的小间隔动画,然后根据第二个参数来决定显示效果。

第二个参数设置后其实和step-start,step-end同义,在分成的小间隔动画中判断显示效果。可以看出:steps(1,
start) 等于step-start,steps(1,end)等于step-end

最核心的一点就是:timing-function
作用于每两个关键帧之间,而不是整个动画

1 赞 3 收藏
评论

澳门微尼斯人手机版 14

一、生命周期

先贴两张图:

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

澳门微尼斯人手机版 15
澳门微尼斯人手机版 16

2 赞 9 收藏 8
评论

vue生命周期

澳门微尼斯人手机版 17

关于作者:TGCode

澳门微尼斯人手机版 18

路途虽远,无所畏
个人主页 ·
我的文章 ·
9 ·
   

澳门微尼斯人手机版 14

小程序生命周期

澳门微尼斯人手机版 20

相比之下,小程序的钩子函数要简单得多。

vue的钩子函数在跳转新页面时,钩子函数都会触发,但是小程序的钩子函数,页面不同的跳转方式,触发的钩子并不一样。

  • onLoad: 页面加载
    一个页面只会调用一次,可以在 onLoad 中获取打开当前页面所调用的
    query 参数。
  • onShow: 页面显示
    每次打开页面都会调用一次。
  • onReady: 页面初次渲染完成
    一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。
    对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期
  • onHide: 页面隐藏
    navigateTo或底部tab切换时调用。
  • onUnload: 页面卸载
    redirectTonavigateBack的时候调用。

数据请求

在页面加载请求数据时,两者钩子的使用有些类似,vue一般会在created或者mounted中请求数据,而在小程序,会在onLoad或者onShow中请求数据。

二、数据绑定

VUE:vue动态绑定一个变量的值为元素的某个属性的时候,会在变量前面加上冒号:,例:

<img :src=”imgSrc”/>

1
<img :src="imgSrc"/>

小程序:绑定某个变量的值为元素属性时,会用两个大括号括起来,如果不加括号,为被认为是字符串。例:

<image src=”{{imgSrc}}”></image>

1
<image src="{{imgSrc}}"></image>

 

三、列表渲染

直接贴代码,两者还是有些相似
vue:

JavaScript

<ul id=”example-1″> <li v-for=”item in items”> {{
item.message }} </li> </ul> var example1 = new Vue({ el:
‘#example-1’, data: { items: [ { message: ‘Foo’ }, { message: ‘Bar’ }
] } })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
 
var example1 = new Vue({
  el: ‘#example-1’,
  data: {
    items: [
      { message: ‘Foo’ },
      { message: ‘Bar’ }
    ]
  }
})

小程序:

JavaScript

Page({ data: { items: [ { message: ‘Foo’ }, { message: ‘Bar’ } ] } })
<text wx:for=”{{items}}”>{{item}}</text>

1
2
3
4
5
6
7
8
9
10
Page({
  data: {
    items: [
      { message: ‘Foo’ },
      { message: ‘Bar’ }
    ]
  }
})
 
<text wx:for="{{items}}">{{item}}</text>

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注