发表于 | 分类于

vue响应式原理 vuejs

原理

1
2
3
4
5
6
var vw = new Vue({
  el:'#app',
  data:{
    message:'123'
  }
});
  • 先把data封装 可以getter、setter
  • 通过watch观察数据变化 告诉 renderFun() 改变 dom
  • dom => touch => data => watch => renderFun => dom

声明响应式属性

  • vue不允许动态添加根级响应式属性

  • 可以通过set(this.someObj,key,value) 给根级响应式属性 添加属性

  • 添加一些属性

    1
    this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

异步更新队伍

  • oldvalue => newvalue => 异步(promise.then)(去除重复) => 更新dom
  • nextTick() 数据更新 dom更新完成 调用回调函数

发表于 | 分类于

vue实例 官方文档

vue构造器

1
2
3
var vm = new Vue({
  //选项
});

属性与方法

1
2
3
4
5
6
7
8
9
var vm = new Vue({
  el:'#app',
  data:{
    a:1,
    b:2
  }
});
vm.$watch(); //实例方法
vm.$el //实例属性

生命周期钩子函数

  • beforeCreate 实例新建完调用
  • created 初始化data、方法 调用
  • beforeMount 模板el编译前 调用
  • mounted 模板el编译后调用
  • beforeUpdate 组件数据更新前调用
  • updated 组件数据更新后调用
  • beforeDestroy 组件销毁前调用
  • destroy 组件销毁后调用

用途

  • beforeCreate 可以添加 loading 事件
  • created 在模板编译之前 做一些初始化
  • mounted 向后台请求，获取数据
  • beforeDestroy 删除组件调用函数

模板语法

插值

  • v-text 插入文本 双大括号
  • v-html 插入html
  • v-bind 绑定属性
  • 可以使用JavaScript表达式
1
2
3
<div >{{msg+1}}</div>
<div >{{ok?'yes':'no'}}</div>
<span v-bind:id="'java-'+ id"></span>

指令

  • v-bind: 参数. 修饰符 = “javascript表达式”
  • 缩写 : === v-bind @ === v-on

过滤器 filters

  • 可以在 双括号 和 v-bind 中使用
1
2
<span>{{msg | filtersFun}}</span>
<span v-bind:id="msg | filtersFun"></span>
  • filters 函数第一参数的值为 msg
1
2
3
4
5
6
7
8
var vm = new Vue({
  filters:{
    filtersFun:function (value,arg1,agr2) {
      value = value.toString();
      return value;
    }
  }
});

计算属性

基础例子

1
2
3
4
5
6
7
8
9
10
11
var vm = new Vue({
  el:'app',
  data:{
    msg:'hello world'
  },
  computed:{
    reverseMsg:function () {
      return this.msg.split('').revers().join('');
    }
  }
});
  • reverseMsg 的值是根据msg响应的 msg是它的依赖

计算属性和method

  • 计算属性是根据msg做响应 有缓存的
  • method 是重新渲染 调用函数

watch

  • 定义 当某个数据变化时引起其他数据一起变化
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var vm = new Vue({
  el:'app',
  data:{
    firstName:'123',
    lastName:'456',
    fullName:'123 456'
  },
  computed:{
    fullName:function () {
      return  this.firstName+' '+this.lastName;
    } //使用计算属性更简洁
  },
  watch:{
    firstName:function (value) {
      this.fullName = value +' '+this.lastName;
    },
    lastName:function (value) {
      this.fullName = this.firstName+' '+value;
    }
  }
});
  • 当数据变化后需要调用异步请求要使用watch
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var vm = new Vue({
  el:'app',
  data:{
    question:'',
    answar:'123'
  },
  watch:{
    question:function () {
      this.answar = 'question is change';
      this.getAnswar(); //异步请求数据
    }
  },
  methods:{
    getAnswar:function () {
      var self = this;
      axios.get('url') //axios一个异步请求插件
        .then(function (response) {
          self.answar = response.data.answar;
        })
        .catch(function (error) {
          self.answar = 'Error '+error;
        })
    }
  }

发表于 | 分类于

<a>标签 基础用法 MDN

href

  • 定义a的超链接
  • 超链接的值可以为 URL
  • url 有 绝对路径和相对路径 支持游览器的任何协议 如http file FTP
  • # 定位到当前路径(url)下指定ID的位置
  • <a href="#top"> HTML5新定义 表示返回顶部

target

  • 定义 超链接在什么地方打开
  • _self 定义 在当前页面加载
  • _blank定义 在新窗口打开

发表于 | 分类于

input元素

定义

  • web的表单控件 用来接受用户的数据

  • 默认display为inline

    属性

    type

  • 常用类型

  • text 单行字段

  • password 密码控件

  • checkbox 复选框

  • radio 单选框

  • file 选择文件控件

  • hidden 隐藏控件

  • image 图片提交按钮

  • e-mail 邮件控件 HTML5

  • search 搜索控件 HTML5

  • tel 电话控件 HTML5

  • number 数字输入控件 HTML5

  • date 日期控件 HTML5

  • color 颜色控件 HTML5

accept

  • 定义接受文件的类型

autocomplete

  • 定义 是否自动填充 on off

autofocus

  • 定义加载时是否获得焦点 值为 autofocus

checked

  • 用于radio 和 checkbox 首次加载是否选中
  • 值为 checked

disabled

  • 定义表示控件不可用 禁用

placeholder

  • 定义用户填写字段提示

发表于 | 分类于

canvas技术需求

canvas动效原理

  • 不断刷新绘制 如 这一秒小球在左边 下一秒清除画布 绘制小球在右边
  • 定时器 requestAnimationFrame
  • 兼容函数
1
2
3
4
5
6
// requestAnimationFrame的向下兼容处理
if (!window.requestAnimationFrame) {
    window.requestAnimationFrame = function(fn) {
        setTimeout(fn, 17);
    };
}
  • Ball() 构造函数 内置属性和方法
  • store 存放对象
  • draw() 绘制函数 根据实例属性和方法 定义下一秒的变化
  • render() 清除画布 draw() 通过定时器不断绘制
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');

// 存储实例
var store = {};

// 实例方法
var Ball = function () {
    // 随机x坐标也就是横坐标，以及变化量moveX，以及半径r
    this.x = Math.random() * canvas.width;
    this.moveX = Math.random();
    this.r = 5 + 5 * Math.random();

    this.draw = function () {
       // 根据此时x位置重新绘制圆圈圈
       // ...
    };
};

// 假设10个圆圈圈
for (var indexBall = 0; indexBall < 10; indexBall += 1) {
    store[indexBall] = new Ball();
}

// 绘制画布上10个圆圈圈
var draw = function () {
    for (var index in store) {
        // 位置变化
        store[index].x += store[index].moveX;
        if (store[index].x > canvas.width) {
            // 移动到画布外部时候从左侧开始继续位移
            store[index].x = -2 * store[index].r;
        }
        // 根据新位置绘制圆圈圈
        store[index].draw();
    }
};

// 画布渲染
var render = function () {
    // 清除画布
    context.clearRect(0, 0, canvas.width, canvas.height);

    // 绘制画布上所有的圆圈圈
    draw();

    // 继续渲染
    requestAnimationFrame(render);
};

render();

JS基本功

  • 遍历、数据存储、多维数组、this等等

动画算法

canvas的api

  • 重点 绘图api

常见的曲线函数

  • 数学功底

发表于 | 分类于

mui框架

概述

  • 工具 HBuilder 内置mui语法提示 打包 真机检测
  • HTML5 plus 是规范 常用的api HTML5+
  • Native.js 通过js映射原生的api
  • mui 一套css的ui框架

窗口管理

页面初始化

  • mui.plusReady() 放置html5+的api
  • mui.init() 初始化参数
  • mui.ready() dom加载完 运行函数

子页面

  • 在主页面下创建一个子页面 webview
1
2
3
4
5
6
7
8
9
10
mui.init({
    subpages:[{
      url:'list.html',
      id:'list.html',
      styles:{
        top:'45px',//mui标题栏默认高度为45px；
        bottom:'0px'//默认为0px，可不定义；
      }
    }]
  });

打开新页面

  • 通过webview加载dom 动画调用原生
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
mui.openWindow({
    url:'new-page-url',
    id:'new-page-id',
    styles:{
      top:
      bottom:
      width:
      height:
    },
    extras:{},
    createNew:false,//是否重复创建同样id的webview，默认为false:不重复创建，直接显示
    show:{
      autoShow:true,//自动显示
      aniShow:animationType,//动画类型
      duration:animationTime,//动画持续时间
    },
    waiting:{
      autoShow:true,//是否显示等待框
      title:'正在加载...',//等待文字
    }
})
plus.nativeUI.closeWaiting(); //关闭等待框
  • 打开带原生导航栏的新页面
    mui.openWindowWithTitle()

关闭页面 mui.back()

  • 若当前webview为预加载页面，则hide当前webview；
    否则，close当前webview；
  • 触发mui.back()情况
  • 点击包含.mui-action-back类的控件
  • 在屏幕内，向右快速滑动
  • Android手机按下back按键

预加载

utils

  • init() 创建子页面、关闭页面、手势事件配置、预加载、下拉刷新、上拉加载、设置系统状态栏背景颜色。
  • mui() 像jquery
  • each()循环 extend()合并对象 later()延迟函数 scrollTo() os 环境属性

页面传值

本地存储

1
2
3
4
5
6
//读取本地存储
var foo = plus.storage.getItem(key);
//存储在本地存储
plus.storage.setItem(key,value);
//删除本地存储
plus.storage.removeItem(key);
  • 原理把数据存储在本地中
  • 在新页面通过key读取出来
  • 适用场景打开新页面

打开新页面

1
2
3
4
5
6
7
8
9
//打开新页面
mui.openWindow({
  url:url,
  id:id,
  //传递的值
  extras:{
    targetId:targetId
  }
})
1
2
3
//新页面读取数据
var self = plus.webview.currentWebview();
var targetId = self.targetId;
  • 适用场景 在列表页跳转到详情页

自定义事件

1
2
3
4
5
6
7
//填写页面
//触发的页面
ws = plus.webview.getWebviewById('back');
//触发事件 目标 自定义事件名称 传递值
mui.fire('ws','updata',{
  id:id
});
1
2
3
4
5
//返回页面
//添加自定义事件监听
window.addEventListener('updata',function(event){
  var id = event.detail.id;
});
  • 适用场景页面已经创建
  • 从填写页面 更新内容到 目标页面 并且页面需要更新内容

页面显示监听

1
2
3
4
var ws=plus.webview.currentWebview();
ws.addEventListener("show", function(e){
    console.log( "Webview Showed" );
}, false );

发表于 | 分类于

es6

let const

let

1
2
3
4
5
6
7
let num = 123;

{
  let num = 456;
  console.log(num); //456
}
console.log(num); //123
  • let声明变量 有板块作用域

const

  • const 声明常量 不能重新赋值

class extends super

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
class People {
  //声明一个类
  constructor(x,y) {
    //实例私有的属性和方法
    this.age = 'yy';
    this.height = y;
  }
  //类共享的方法
  hello(string){
    console.log(this.age+string+this.height);
  }
}
// new 出实例
let boy = new People(50,60);
boy.hello('hello'); //yyhello60

class Son extends People {
  //son 继承 people extends
  constructor() {
    //super() 关键词 子类继承父类的实例的this 属性和方法
    super();
    //子类私有的属性 会覆盖父类的属性或方法
    this.age = '80';
  }
  //类类的方法
}
let son = new Son();
son.hello('123'); //80123undefined

箭头函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class People {
  constructor() {
    this.age = 60;
    this.height = 70;
  }
  hello(){
    //箭头函数 会绑定我外面的this
    setTimeout(() => {
      console.log(this.age+this.height);
    },100);
  }
}

let one = new People();
one.hello(); //130

template 字符拼接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let book = [
  {book:'海贼王'},
  {book:'火影忍者'},
  {book:'死神'},
  {book:'全职猎人'}
];
let html = '';
html = `\
this is ${book[0].book}
this is ${book[1].book}
this is ${book[2].book}
this is ${book[3].book}
`;
// ${ } 声明变量
console.log(html);

变量匹配

1
2
3
4
let cat = '123';
let dog = '456';
let zoo = {cat,dog};
console.log(zoo); //{cat:'123',dog:'456'}

default rest

default 默认值

1
2
3
4
5
function animal(cat = 'cat') {
  //cat 有默认值
  console.log(cat);
}
animal();

rest 剩余参数

1
2
3
4
5
6
7
function animal(dog,go,...cat) {
  console.log(dog);
  //...cat ...表示剩余参数 返回一个数组 cat剩余参数的标识符
  console.log(cat);
  console.log(go);
}
animal('123',50,123,456,789);

发表于 | 分类于

本地存储

  • sessionStorage 关闭游览器数据清空
  • localStorage 长期保存

操控方法

存放

  • localStorage.setItem('key',value);

读取

  • localStorage.getItem('key');

清除

  • localStorage.removeItem('key');

storage事件

  • 当存储的数据发生变化时，会触发storage事件
1
window.addEventListener("storage",onStorageChange);

特别注意

  • 其中存储的value只能是字符串
  • 当存储其他数据时如对象、数组 要转化为字符串

封装本地存储

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
(function (win) {
  var myStorage = {};
  myStorage.getItem = function (key) {
    // 读取json格式字符串并转为对象 返回
    return JSON.parse(win.localStorage.getItem(key));
  }
  myStorage.setItem = function (key,value) {
    //把要存储的value转为json格式的字符串
    value = JSON.stringify(value);
    win.localStorage.setItem(key,value);
  }
  //在win下注册对象
  win.myStorage = myStorage;
})(window);

// 使用demo
var data = 123;
myStorage.setItem('mydata',data);
var foo = myStorage.getItem('mydata');

发表于 | 分类于

select自定义样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.con {
  width: 500px;
  margin: 50px auto;
}

.select-wrap {
  position: relative;
  display: block;
  width: 300px;
  background-color: #fff;
}

.select {
  /*层级*/
  position: relative;
  z-index: 1;
  width: 100%;
  height: 45px;
  padding: 0 30px 0 15px;
  line-height: 45px;
  outline: 0;
  border: 1px solid #000;
  font-size: 17px;
  /*透明显示底层的icon*/
  background-color: transparent;
  /*去除默认样式*/
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
}

select::-ms-expand {
  /*id默认样式 支持ie10*/
  display: none;
}

.select-icon {
  position: absolute;
  top: 50%;
  right: 15px;
  width: 15px;
  height: 15px;
  margin-top: -7.5px;
  background-color: #ccc;
}
1
2
3
4
5
6
7
8
9
10
11
<div class="con">
  <div class="select-wrap">
    <select class="select">
      <option value="">名字</option>
      <option value="">小明</option>
      <option value="">小红</option>
      <option value="">小方</option>
    </select>
    <div class="select-icon"></div>
  </div>
</div>

发表于 | 分类于

line-height 行高

  • 行高影响盒子模型
  • line-height和font-size的计算之差分为两半，添加在字体顶部和底部
  • 行高受font-size和font-family影响
  • 定义是每行的之间最小距离
  • 文字盒子模型是行高撑起的

运用

单条文本垂直居中

图片垂直居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="test1">
  <div class="item">
    <img src="./head-img.jpg" alt="">
  </div>
  <div class="item">
    <img src="./head-img.jpg" alt="">
  </div>
  <div class="item">
    <img src="./head-img.jpg" alt="">
  </div>
  <div class="item">
    <img src="./head-img.jpg" alt="">
  </div>
  <div class="item">
    <img src="./head-img.jpg" alt="">
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
.test1 {
  font-size: 0;
  text-align: center;
}
.item {
  display: inline-block;
  width: 100px;
  line-height: 150px;
}
.item img {
  width: 100%;
  vertical-align: middle;
}

vertical-align 垂直居中

前提

  • 只能在图片、单元格、inline-block元素起作用
  • 只和父标签关系，vertical-align的本质上是个独立的个体
  • middle元素和父元素中心的对齐

运用

小图标居中

1
2
3
4
.icon {
  display: inline-block;
  vertical-align: -5px;
}

多行文本居中

1
2
3
4
<div class="test1">
 <span class="item">我是文字<br>我是文字<br>我是文字<br>我是文字<br></span>
 <i></i>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.test1 {
  text-align: center;
  height: 200px;
  background-color: #eee;
}
.item {
  display: inline-block;
  vertical-align: middle;
}
/*辅助元素 撑开父元素的内联盒子*/
i {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}