Welcome to blockxia's blog
这里是blockxia的个人技术栈-
项目中使用的better-scroll库
1. 项目中使用的better-scroll库
1). 什么: 用来实现页面滑动相关效果的js库 2). 原理: 当内容的高度超过了容器的高度(固定)时, 才会形成滚动 3). 基本编码: scroll = new BScroll(selector, {}) scroll.on(eventName, cb) scroll.scrollTo() scroll.refresh() 4). 注意: 创建BScroll对象的时机 创建BScroll对象的个数 BScroll禁用的原生dom事件, 自动定义事件分发2. 说说我vue项目开发中碰到的问题吧, 给大家说下原因及解决办法
如果对大家有帮助，可以参考 1). 创建Swiper/BScroll对象后, 轮播/滑动没有效果? 原因: 创建对象太早, 得在数据显示后创建 解决: watch + $nextTick() 或 callback + $nextTick() 2). 初始显示异常 情况1: Cannot read property 'xxx' of undefined" 原因: 初始值是空对象, 内部没有数据, 而模块中直接显示3层表达式 解决: 使用v-if指令 情况2: Cannot read property 'avatar' of null" 原因: 初始值是null, 而模块中直接显示2层表达式 解决: 初始值为{} 3). 问题: 更新状态数据, 对应的界面不变化 原因: 一般方法给一个已有绑定的对象中添加一个新的属性, 这个属性没有数据绑定 解决: Vue.set(obj, 'xxx', value)才有数据绑定 this.$set(obj, 'xxx', value)才有数据绑定 4). 问题: 点击添加购物项, 会1次添加多个 原因: 创建了多个BScroll对象来管理同一个DOM元素 解决: 只创建一个BScroll对象 扩展: 单例对象: 创建前, 先判断是否已经存在, 只有不存在才创建 创建后, 保存创建的对象3. vue组件间5种通信方式并比较
1). props 父子组件间通信的基本方式 属性值的2大类型: 一般: 父组件-->子组件 函数: 子组件-->父组件 隔层组件间传递: 必须逐层传递(麻烦) 兄弟组件间: 必须借助父组件(麻烦) 2). vue自定义事件 子组件与父组件的通信方式 用来取代function props 不适合隔层组件和兄弟组件间的通信 3). 消息订阅和发布 适合于任何关系的组件间通信 缺点: 管理不够集中 4). vuex 多组件共享状态(数据的管理) 组件间的关系也没有限制 功能比pubsub强大, 更适用于vue项目 5). slot 通信是带数据的标签 注意: 标签是在父组件中解析4. Vue的MVVM结构图
-
数据类型的分类和判断
1. 数据类型的分类和判断
1). 基本(值)类型
Number ----- 任意数值 -------- typeof String ----- 任意字符串 ------ typeof Boolean ---- true/false ----- typeof undefined --- undefined ----- typeof/=== null -------- null ---------- ===2). 对象(引用)类型
Object ----- typeof/instanceof Array ------ instanceof Function ---- typeof2. 数据,变量, 内存的理解
1). 什么是数据?
在内存中可读的, 可传递的保存了特定信息的'东东' 一切皆数据, 函数也是数据 在内存中的所有操作的目标: 数据2). 什么是变量?
在程序运行过程中它的值是允许改变的量 一个变量对应一块小内存, 它的值保存在此内存中3). 什么是内存?
内存条通电后产生的存储空间(临时的) 一块内存包含2个方面的数据 内部存储的数据 地址值数据 内存空间的分类 栈空间: 全局变量和局部变量 堆空间: 对象4). 内存,数据, 变量三者之间的关系
内存是容器, 用来存储不同数据 变量是内存的标识, 通过变量我们可以操作(读/写)内存中的数据3. 对象的理解和使用
1). 什么是对象?
多个数据(属性)的集合 用来保存多个数据(属性)的容器2). 属性组成:
属性名 : 字符串(标识) 属性值 : 任意类型3). 属性的分类:
一般 : 属性值不是function 描述对象的状态 方法 : 属性值为function的属性 描述对象的行为
-
详细说明如何判断函数中的this
1).正常情况: 执行函数的方式决定了函数中的this：
直接调用: fn() window new调用: new fn() 新创建的对象 对象调用: obj.fn() obj对象 call/apply调用: fn.call(obj) 第一个参数指定的对象2). 特别情况:
bind()返回的函数: fn.bind(obj)() 第一个参数指定的对象 箭头函数: 使用的外部的this(内部没有自己的this) 回调函数 定时器回调/ajax回调/数组遍历相关方法回调: window2 dom事件监听回调: dom元素 组件生命周期回调: 组件对象什么是接口, 如何对接口
使用Ubuntu终端进行打开： 方法一（使用vim）：
sudo vi /usr/share/applications/pycharm.desktop方法二（使用gedit）：
sudo gedit /usr/share/applications/pycharm.desktop
-
线程与进程
1. 线程与进程
1). 进程:
程序的一次执行, 它占有一片独有的内存空间 可以通过windows任务管理器查看进程 ## 2). 线程: 是进程内的一个独立执行单元 是程序执行的一个完整流程 是CPU的最小的调度单元 ## 3). 关系 一个进程至少有一个线程(主) 程序是在某个进程中的某个线程执行的2. 浏览器内核模块组成
1). 主线程
js引擎模块 : 负责js程序的编译与运行 html,css文档解析模块 : 负责页面文本的解析 DOM/CSS模块 : 负责dom/css在内存中的相关处理 布局和渲染模块 : 负责页面的布局和效果的绘制(内存中的对象) ## 2). 分线程 定时器模块 : 负责定时器的管理 事件响应模块 : 负责事件的管理 网络请求模块 : 负责Ajax请求3). js线程
js是单线程执行的(回调函数也是在主线程) H5提出了实现多线程的方案: Web Workers --->Worker 只能是主线程更新界面3. 定时器问题:
定时器并不真正完全定时 如果在主线程执行了一个长时间的操作, 可能导致延时才处理4. 事件处理机制
1). 代码分类
初始化执行代码: 包含绑定dom事件监听, 设置定时器, 发送ajax请求的代码 回调执行代码: 处理回调逻辑 ## 2). js引擎执行代码的基本流程: 初始化代码===>回调代码 ## 3). 模型的2个重要组成部分: 事件管理模块 回调队列 ## 4). 模型的运转流程 执行初始化代码, 将事件回调函数交给对应模块管理 当事件发生时, 管理模块会将回调函数及其数据添加到回调列队中 只有当初始化代码执行完后(可能要一定时间), 才会遍历读取回调队列中的回调函数执行
-
vuex的一些基本编码
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()
-
这是我自己来测试的md页面
关于写倒计时大家可能都都比较熟悉，使用 setTimeout 或 setInterval 就可以搞定。几秒钟或者几分钟的倒计时这样写没有问题，但是如果是长时间的倒计时，这样写就会不准确。如果用户修改了他的设备时间，这样的倒计时就没有意义了。今天就说说写一个精确的倒计时的方法。
Recent Posts
Categories
Tags