- 博客(47)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 对象操作的 14 种方法
定义一个 obj 对象var obj = {a: 1, b: 2}1、获取原型 [[GetPrototypeOf]]// 以下 3 种方式都获取到了 obj 的原型，但是只有第一种是函数式方法，是 js 内置提供的方法，推荐使用第一种console.log(Object.getPrototypeOf(obj))console.log(obj.__proto__)console.log(Object.prototype)2、设置原型 [[SetPrototypeOf]]Ob.
2021-06-25 10:23:47
1776
原创 数据双向绑定（响应式原理）
姓名：{{name}} 年龄：{{age}} 邮箱：{{email}} 电话：{{tel}} class MVVM { constructor(el, data) { this.el = document.querySelector(el) this.data = data this.domPool = {} // dom ...
2021-06-25 09:16:15
202
原创 对象代理（数据劫持）
Vue 2 中的对象代理什么是对象代理const vm = new Vue({ data() { return { a: { b: 'bbb' } } }})console.log(vm.a)上述代码中 vm.a 正确输出了 {b: 'bbb'}，即 vm 代理了 vm.data()。这里的代理只是浅代理，并没有递归代理。实现原理ES5 Object.definePropertyfunction Vu...
2021-06-25 09:14:47
216
原创 ES6 的代理 Proxy
Proxy 代理对象const target = { a: 1}const proxy = new Proxy(target, { get(target, property) { return target[property] }, set(target, property, value) { target[property] = value return true // 严格模式下需要返回 true，否则会报错 }})console.log...
2021-06-25 09:11:26
90
原创 javascript 模块化
模块化的代码实现let module = (function () { const moduleList = {} function define(name, modules, action) { modules.map((module, index) => { modules[index] = moduleList[module] }) moduleList[name] = action.apply(n...
2021-06-22 22:51:48
117
1
原创 javascript 类 class
类的本质是函数class Father {}console.dir(Father)function Parent() {}console.dir(Parent)// Father 和 Parent 不管从结构还是原型，几乎一模一样，所以类的本质是函数（尤其指构造函数），类只是一种语法糖。console.log(typeof Father) // function成员变量（属性）class Father { constructor(a){ t...
2021-06-22 14:47:53
242
原创 javascript 原型（一）
原型的初步理解const arr = [1, 2, 3]console.log(arr) // 打印 arr 数组，发现并没有 concat 函数console.log(arr.concat([4, 5, 6])) // 然而却可以使用 arr.concat()，为什么？// 原因是，arr 下面还有个 __proto__ 属性，__proto__下面存在 concat 方法。// __proto__ 相当于 arr 的爸爸，__proto__ 拥有的方法和属性都可以被 arr 使用。//
2021-06-21 15:41:50
67
原创 javascript this 指向问题（隐式绑定、显示绑定、箭头函数）
四种绑定规则1、默认绑定规则：this 指向 window。2、隐式绑定规则：谁调用就指向谁。3、显式绑定规则：this 指向 call、apply、bind 函数的第一个传参。4、new 绑定规则：this 指向构造函数产生的对象。1、默认绑定规则// 全局中的 this 指向 windowconsole.log(this === window) // true// 函数独立调用，函数内部的 this 指向 windowfunction func() { ...
2021-06-18 15:40:10
252
原创 javascript 严格模式与普通模式的区别
使用严格模式"use strict"区别变量1、变量使用前必须要声明。2、不能直接对变量操作 delete，由静默失败变成报错。对象1、属性描述符（除了 enumerable）出现不当操作的时候，由静默失败变成报错。函数1、参数是唯一的，即参数不能重名。2、取消形参和实参的映射关系。（非严格模式下，如果形参设置了默认值，那么也会取消形参和实参的映射关系）3、不能使用 arguments.callee 和 caller。4、不允许使用 eva.
2021-06-18 10:08:06
148
原创 javascript 值类型判断注意事项
合并数组const arr1 = [1, 2, 3]const arr2 = [4, 5, 6]const arr3 = [...arr1, ...arr2]console.log(arr3) // [1, 2, 3, 4, 5, 6]替代 applyconst arr = [1, 2, 3]function func(arg1, arg2, arg3){ console.log(arg1 + arg2 + arg3) // 6}func(...arr)// 替代...
2021-06-18 09:40:38
55
原创 展开运算符的应用场景
合并数组const arr1 = [1, 2, 3]const arr2 = [4, 5, 6]const arr3 = [...arr1, ...arr2]console.log(arr3) // [1, 2, 3, 4, 5, 6]替代 applyconst arr = [1, 2, 3]function func(arg1, arg2, arg3){ console.log(arg1 + arg2 + arg3) // 6}func(...arr)// 替代...
2021-06-18 09:38:56
119
原创 callee 和 caller
callee定义arguments.callee，指向当前函数的引用。匿名函数和立即执行函数因为没有函数名，需要使用 callee 来返回当前函数名。function inner() { console.log(arguments.callee === inner)}inner() // truecaller定义function.caller，指向调用当前函数的函数的引用。function inner() { console.log(inne...
2021-06-18 09:37:43
106
原创 javascript深浅拷贝的原理和实现
深浅拷贝由来// 正常情况，a 值的改变不影响 blet a = 1let b = aa = 2console.log(b) // 1// 不正常，a 中元素的改变影响了 blet a = [1, 2, 3]let b = a // 引用a[0] = 4console.log(b[0]) // 4// 不正常let a = {name: 'sam'}let b = aa.name = 'jack'console.log(b.name) // 'jack'说明
2021-06-18 09:36:45
158
原创 javascript 中的几种继承方式
原型链继承function Parent(){}const parent = new Parent()Child.prototype = parentfunction Child(){}Child.prototype.name = 'sun'const child = new Child()console.log(child)console.log(parent)特点1、来自原型对象的所有属性被所有实例共享，即，改变 Child.prototype.name，Parent
2021-06-18 09:34:43
103
原创 防抖节流的原理及方案
防抖防抖原理有些事件，比如鼠标移动、滚动条滚动、键盘键弹起、窗口大小改变等，一旦触发，就会在短时间内触发好几次，如果这时候进行计算或者ajax请求，就会浪费计算机资源，甚至导致卡顿、奔溃，因此要给事件触发加一个延迟处理。当事件触发时，如果已有定时器，那么就要清除已有的定时器，重新设置定时器，因此如果事件不停的触发，定时器就不停的被清除、重新设置，因此也就无法执行事件函数，直到事件不再触发，才会让定时器触发，执行定时器中的事件函数。为了改变函数体内的 this 指向，要用 func.apply(t
2021-06-18 09:28:41
293
原创 清云小程序教程二十二：相对路径与绝对路径
原文链接：http://www.0575yun.com/articledetail/id/73.html清云小程序教程在上节课中提到了一个使用组件后出现了路径的错误，那么，本节课我们就来探讨一下这个问题。这个问题的本质原因在于，我们在“classic.json”中使用的是相对路径，那么如果是相对路径的话，它所标识的这个组件的位置是不正确的。“相对路径”表示的是一个相对的位置。如果是“com...
2019-08-02 10:53:00
1383
2
原创 清云小程序教程二十一：定义引用和使用组件
原文链接：http://www.0575yun.com/articledetail/id/72.html清云小程序教程本节课就来教你实现一个一个的组件。之前我们说过，旧岛这个小程序是要用组件来构建的，所以我们所要编写的组件数量是非常多的，所以我们先来为我们所有的小程序组件新建一个文件夹。新建一个盛放所有组件的文件夹叫做“components”，新建在与“Pages”同级目录下，再在“com...
2019-08-01 19:59:25
185
原创 清云小程序教程二十：组件概述
原文链接：http://www.0575yun.com/articledetail/id/71.html清云小程序从本节课开始就要着手实现旧岛这个产品的第一个页面，就是“流行”这个页面。在之前的小程序教程中，当我要实现一个页面的时候，我必然是要给大家去剖析整个页面的结构的，但是我们旧岛这个产品不太一样，因为我之前就说过，我们这个产品是需要用组件的形式来完成整个项目的构建的。所以说，我们有必要首...
2019-07-30 16:34:04
195
原创 清云小程序教程十九：细节决定成败
原文链接：http://www.0575yun.com/articledetail/id/70.html今天我们正式来讲讲小程序的项目开发阶段，必备的基础知识呢，我个人认为也就是flex布局是需要讲解的，剩下的其他更多的知识让我们放到实践开发中来学习。如果我们要开发一个项目，第一件事情就是你要了解这个项目的需求，换句话来说，就是你要知道这个项目或者说我们旧岛这个产品它有哪些个功能，很多情况...
2019-07-28 11:21:56
220
原创 清云小程序教程十八：flex-wrap以及消除间距
原文链接：http://www.0575yun.com/articledetail/id/69.html本节课我们再来讲讲flex里面一个常用的属性。上节课我们学习了baseline和stretch，这节课我们首先把“align-items”还原成“flex-start"，先不要用“baseline”，还是用“flex-start”来学习一下换行。目前在我们各个参数下面，这3个元素是...
2019-07-27 10:32:31
5686
2
原创 清云小程序教程十七：stretch和baseline
原文链接：http://www.0575yun.com/articledetail/id/68.html之前我们讲了“justify-content”和“align-items”2个属性，我们已经知道“justify-content”常用有5种取值：“flex-start”、“flex-end”、“center”、“space-between”和“space-around”；而“ali...
2019-07-26 11:40:16
700
原创 清云小程序教程十六：主轴与交叉轴二
原文链接：http://www.0575yun.com/articledetail/id/67.html上节课我们介绍了主轴和交叉轴，这节课我们再来深入讲解一下主轴和交叉轴。其实对于主轴和交叉轴大家充分理解上节课讲的内容就可以了，但是，出于知识的严谨性和全面性，我还是在这里进一步在来讲解一下主轴和交叉轴。上节课我们讲了，当”flex-direction“取”column“或“row”的时候...
2019-07-25 10:07:28
264
原创 清云小程序教程十五：主轴与交叉轴一
原文链接：http://www.0575yun.com/articledetail/id/66.html今天我们来介绍flex里非常重要的一个新概念——轴。那么在flex里面有2个轴，一个叫”主轴“；一个叫”交叉轴“。等会儿我们来看一下主轴和交叉轴有什么意义和作用，现在我们先来实现一种效果。先改一下我们的”justify-content“：.container{displa...
2019-07-24 16:46:43
1225
原创 清云小程序教程十四：justify-content属性解析二
原文链接：http://www.0575yun.com/articledetail/id/57.html今天我们继续来讲讲justify-content属性的几个取值，上次说了”justify-content“的2个取值：”flex-start“、”flex-end“，那么本节课我们再来看看”justify-content“其他一些取值。上节课我们已经看到了”flex-start“和”f...
2019-07-24 09:25:57
3136
原创 清云小程序教程十三：justify-content属性解析一
原文链接：http://www.0575yun.com/articledetail/id/56.html我们先来给我们的容器一个背景颜色，以便于我们更好地看清楚接下来的操作：.container{display:flex;flex-direction:column-reverse;height:400px;background-color:#...
2019-07-24 09:21:34
3658
原创 清云小程序教程十二：reverse倒序排序
原文链接：http://www.0575yun.com/articledetail/id/55.html上节课给大家留了一个思考题：3个小方块在列方向上的颠倒，以前和现在都是从我们的导航条开始排列的；但是行方向上的排列却是之前是顶在左边的，颠倒之后却是顶在右边了，这是为什么呢？按照我们的之前的思路，竖直排列的色块它在做了倒叙之后应该是顶在最下方的，可是它怎么没有到下面去呢？这是因为整个容器的高...
2019-07-24 09:16:10
887
原创 清云小程序教程十一：flex-direction的应用
原文链接：http://www.0575yun.com/articledetail/id/54.html上节课我们实现了3个小色块的横向排列，那么怎么让它们再重新呈现纵向排列呢？之前我们使这3个小色块呈现纵向排列是在小色块上添加“display”属性，使它为“block”，块级元素，那么我们现在再来设置一下：.chunk{display:block;width:100...
2019-07-24 09:12:03
190
原创 清云小程序教程十：flex容器将消除item的块状特性
原文链接：http://www.0575yun.com/articledetail/id/53.html今天就来好好讲解一下flex。首先大家一定要对flex有一个基本的概念。Flex就是Flexible Box的缩写，顾名思义为“弹性盒子”或者“弹性布局”，用来为盒装模型提供最大的灵活性。“弹性盒子”它有2个基本的概念，大家是一定要知道的。一个是“flex container”，弹性容...
2019-07-23 17:32:22
425
原创 清云小程序教程九：flex布局之block、inline、inline-block
原文链接：http://www.0575yun.com/articledetail/id/52.html首先，我们打开我们的classic.wxml文件，在我们的classic.wxml来写一些代码，来打造一些我们要使用的小色块。这个小色块我们可以通过我们的”view“组件来实现，因为这些小色块中不需要添加其他元素，我们就直接用”<view />“这样单行的形式来写，不需要再...
2019-07-23 17:16:34
3465
原创 清云小程序教程八：flex布局之所谓布局
原文链接：http://www.0575yun.com/articledetail/id/65.html从这节课开始，我们要为大家讲解flex布局。那么，什么是flex布局呢？Flex是Flexible Box的缩写，顾名思义为”弹性盒子“或者“弹性布局”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex 布局。那什么是布局呢？布局也就是我们用代码来控制页面上面的每一个元...
2019-07-23 17:11:31
144
原创 清云小程序教程七： 小程序代码编写规范
原文链接：http://www.0575yun.com/articledetail/id/64.html今天来说说微信小程序的一些代码编写规范，对于规范呢，大家要有一定的清晰和明确的认识。这里的规范不是一成不变的，很多时候的规范其实只是一种约束，它其实并没有对错。什么意思呢？比如说这个“image”组件，它可以成对出现，也可以不成对出现，并没有一个特别的规定。那么到底要成对出现还是不成对出现呢...
2019-07-23 17:08:34
241
原创 清云小程序教程六：wxml与组件
原文链接：http://www.0575yun.com/articledetail/id/63.html之前，我们主要是围绕着app.json来讲解小程序的，从中讲解了一些app.json的配置项的知识，从这次开始，我们要把关注度放到小程序的一种另外的基本文件类型，也就是.wxml上面来。前面我们在新建classic这个文件的时候，小程序已经自动帮我们生成了4个基本的文件，其中的class...
2019-07-23 17:05:50
238
原创 清云小程序教程五：app.json配置之background窗口
原文链接：http://www.0575yun.com/articledetail/id/62.html今天来学习以”background“开头的四个属性，”background“指的是窗口，那么窗口这个概念是对应的小程序的哪个区域呢？这个是小程序的初学者需要去知道和掌握的。现在我们来看看，到底哪个区域是小程序的窗口呢？这个小程序的窗口区域很多初学者掌握不了是因为，窗口区域是在小程序上直接看不...
2019-07-23 17:00:15
362
原创 清云小程序教程四：app.json配置之导航栏
原文链接：http://www.0575yun.com/articledetail/id/61.html首先在这里补充一点，上节课里面有一点忘记说了，就是当你打开调试器的时候，你会发现，有一些报错，那么我们怎么来解决这个问题呢？消除错误提示：在app.js里面加上一段代码：App（{ onlaunch:function(){ }}）这样就可以消除错误提示。具体怎么...
2019-07-23 16:54:09
559
原创 清云小程序教程三：新建一个小程序页面
原文链接：http://www.0575yun.com/articledetail/id/60.html从本节课开始我们就要逐步讲解小程序的编写，小程序的基本知识，我们就在小程序的编写中逐步为大家一一去讲解介绍。我们将在项目中为大家一条一条讲解，在项目中发现问题，在项目中解决问题，在项目中学习小程序的知识。如果我们要自己去开发一个全新的小程序，通常来说有2种方式，第一种是，新建一个官方的示...
2019-07-23 16:36:38
511
原创 清云小程序教程二：小程序的组织结构
原文链接：http://www.0575yun.com/articledetail/id/59.html教程一讲了小程序的4种文件类型，和现在教程二的组织结构是有一定区别的，那么接下来，我们来讲讲小程序的组织结构。首先，每一个小程序都有3个全局文件，一个是全局配置文件（app.json），另一个是全局样式文件（app.wxss），还有一个是全局业务文件（app.js）。基本上所有的小程序都...
2019-07-23 16:34:01
781
原创 清云小程序教程一：小程序的4种文件类型
原文链接：http://www.0575yun.com/articledetail/id/58.html小程序的文件类型大体可以分为：样式文件、骨架文件、业务文件和配置文件。在小程序中，样式文件的文件后缀名为：.wxss（例：app.wxss）；骨架文件的文件后缀名为：.wxml（例：logs.wxml）；业务文件的后缀名为：.js（例：app.js）；配置文件的文件后缀名为：....
2019-07-23 11:15:24
788
转载 小米利用微信API接口构建用户管理系统
API接口，其实就是微信系统留给应用程序的一个调用接口，应用程序通过调用微信系统的API而使微信系统去执行应用程序的一定命令或动作，由于互联网的日益普及，更多的站点就会将自身的资源开放给开发者来调用，API调用就会使得每个站点之间的关联更加紧密，同时这些开放的平台就会为用户、开发者以及中小网站提供更大的利益。 小米利用微信API可谓是给其他企业做了一个成功的典范。自2013年2月...
2018-12-10 10:30:16
735
原创 微信的移动生态闭环是怎么回事
中国电子商务研究中心主任曹磊在接受《法人》记者采访时表示：年红包大战后，预示着微信红包在用户活跃度、发放频率、红包转账金额、市场规模均已达到腾讯内部预期的战略目标，以微信支付为核心的微信移动生活场景生态圈，已初步形成、闭环效应。正如曹磊所说，微信推出微信钱包，并利用移动支付将大众点评、滴滴打车进行穿引，形成线上线下联动的020（onlme To Offhne，即线上到线下）产业闭环，而腾讯的0...
2018-12-04 20:41:47
4171
原创 小程序的目录结构
腾讯非常贴心地提供了一个微信小程序的Demo，展示了微信小程序组件和API调用，比较全面，本文我们利用这个Demo对微信小程序的框架建立起认识。 Demo的源码可以在小程序管理后台的“文档”一“开发”一“简易教程”一“体验小程序”页面下载，也可以加作者微信号索取。 文件下载后我们解压到一个文件夹里，按照上一章介绍的方法，进入微信小程序开发工具的时候选择Demo所在的文件夹...
2018-11-24 10:28:28
2364
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人