Welcome to blockxia's blog
这里是blockxia的个人技术栈-
vue介绍
vue介绍
-
vuex的一些基本编码
- 1. 使用vuex的一些基本编码
- 2. 模板中显示数据的来源
- 3. 对async和await的理解和使用
- 4. 编码实现: 根据一个一维数组生成一个二维数组(内部数组最大长度是6)
- 5. Vue的MVVM实现结构图
1. 使用vuex的一些基本编码
创建所有相关的模块: store/index|state|mutations|actions|getters|mutation-types 设计state: 从后台获取的数据 实现actions: 定义异步action: async/await 流程: 发ajax获取数据, commit给mutation 实现mutations: 给状态赋值 实现index: 创建store对象 main.js: 配置store 在组件中使用 this.$store.dispatch() mapState()/mapGetters()/mapActions()2. 模板中显示数据的来源
data props computed: 根据data/props/vuex的state或getters计算产生3. 对async和await的理解和使用
简化promise的使用 以同步编码方式实现异步流程 使用await: 调用返回promise的函数, 如果想直接异步结果数据, 在左侧使用 使用async: 在使用await所在的函数定义左侧4. 编码实现: 根据一个一维数组生成一个二维数组(内部数组最大长度是6)
const arr1 = [1, 3, 5, 7, 13, 9, 14, 12, 11, 9, 4, 2] const arr2 = [] let smallArr = [] const max = 6 arr1.forEach(item => { if(smallArr.length===max) { smallArr = [] } if(smallArr.length===0) { arr2.push(smallArr) } smallArr.push(item) }) console.log(arr2)5. Vue的MVVM实现结构图
-
Vuex项目中常用技巧
- 1. 异步显示数据效果的编码的3个部分
- 2. 区别localStorage和sessionStorage, session与cookie
- 3. 区别v-if与v-show
- 4. console.log(a.b)的查找流程
- 5. vuex的结构图
1. 异步显示数据效果的编码的3个部分
ajax ajax请求函数 接口请求函数 vuex state mutation-types actions mutations 组件 dispatch(): 异步获取后台数据到vuex的state mapState(): 从vuex的state中读取对应的数据 模板中显示2. 区别localStorage和sessionStorage, session与cookie
localStorage: 浏览器端持久化存储, 关闭浏览还存在, 最大5MB(基本没限制了) sessionStorage: 浏览器端内存存储, 关闭浏览器不存在 session: 服务器端创建, 服务器端保存, 依赖于cookie cookie: 服务器端创建, 浏览器端保存, 请求携带对应cookie, 长度和数量有限制(4kb)3. 区别v-if与v-show
如果频繁切换使用v-show比较合适 一旦涉及到初始化模板显示3层表达式数据, 使用v-if可以解决问题4. console.log(a.b)的查找流程
先查找a, 沿着作用域链查找, 找不到报错(变量未定义) 找到后查找对象上的b属性, 查找原型链, 如果找不到返回undefined5. vuex的结构图
-
后台相关及对json数据的理解
1. json数据的讲解
什么: json是一种用来存储结构化数据的文本数据结构 优点: 小巧, 可以轻松的与js相互转换 整体类型: json对象: {}, 与js对象对应 json数组: [] 与js数组对应 组成: 结构: 类型与名称 值 模拟json数据: 与真实json数据在结构上要相同, 值可以不同2. mock数据的讲解
对于前后台分离的项目来说, 前后台可以独立开发, 当后台还没有写好时, 前台应用就可以编写了 前台应用需要自己mock数据接口动态为前台提供数据, 当真实接口完成后, 切换到真实接口即可 要求: mock的json数据与真实接口的数据在结构上要相同 工具包: mockjs3. 原型/原型链
作用: 原型链用于查找对象的属性 什么: 实例对象上都会有一个隐式原型属性(__proto__), 它指向的就是原型对象, 而原型对象也有__proto__属性指向它的原型对象 为什么__proto__指向的是原型对象? 构造函数对象上有显式原型属性(prototype), 它指向的就是原型对象 实例对象的__proto__属性被赋值为构造函数的prototype属性值4. 作用域链
作用: 作用链用来查找变量 什么: 多个由内向外作用域形成的链 作用域: 一块代码区域, 分类全局作用域和函数/局部作用域, ES6有了块作用域5. 闭包
如何产生闭包? 2个函数嵌套 内部函数引用了外部函数内的局部变量 执行外部函数 是什么? 包含了那个局部变量的容器 它被内部函数对象引用着 作用? 延长局部变量的生命周期 使函数外部可以多次间接操作到函数内部的数据 应用? 循环遍历加监听 IIFE定义模块 jQuery内部###代码演示:
```js function fn1 () { var a = 2 function fn2 () { a++ console.log(a) } return fn2 } const f = fn1() f() f() ```
-
对象的创建模式
1. 对象的创建模式
1). Object构造函数模式
var obj = {} obj.name = 'Tom' obj.setName = function(name){this.name=name}2). 对象字面量模式
var obj = { name : 'Tom', setName : function(name){this.name = name} }3). 构造函数模式
function Person(name, age) { this.name = name this.age = age this.setName = function(name){this.name=name} } new Person('tom', 12)4). 构造函数+原型的组合模式
function Person(name, age) { this.name = name this.age = age } Person.prototype.setName = function(name){this.name=name} new Person('tom', 12)2. 继承模式
1). 原型链继承 : 得到方法
function Parent(){} Parent.prototype.test = function(){} function Child(){} Child.prototype = new Parent() //子类原型指向父类的实例 Child.prototype.constructor = Child //原型的构造器指向构造函数 var child = new Child() child.test() //调用父类型的方法2). 借用构造函数 : 得到属性
function Parent(xxx){this.xxx = xxx} Parent.prototype.test = function(){} function Child(xxx,yyy){ Parent.call(this, xxx) //借用父类型的构造函数 相当于:this.Parent(xxx) } var child = new Child('a', 'b') //child.xxx为'a', 但child没有test()3). 组合
function Parent(xxx){this.xxx = xxx} Parent.prototype.test = function(){} function Child(xxx,yyy){ Parent.call(this, xxx) //借用构造函数 this.Parent(xxx) } Child.prototype = new Parent() //得到test() Child.proptotype.constructor = Child var child = new Child() //child.xxx为'a', 也有test()
-
函数高级
1. 原型与原型链
1). 所有函数都有一个特别的属性:
`prototype` : 显式原型属性2). 所有实例对象都有一个特别的属性:
`__proto__` : 隐式原型属性3). 显式原型与隐式原型的关系
函数的prototype: 定义函数时被自动赋值, 值默认为{}, 即用为原型对象 实例对象的__proto__: 在创建实例对象时被自动添加, 并赋值为构造函数的prototype值 原型对象即为当前实例对象的父对象
Recent Posts
Categories
Tags