- 博客(25)
- 收藏
- 关注
RSS订阅原创 ECMAScript创建对象2 —— 原型模式
原型对象的概念ECMAScript中，用户每创建一个新函数，都会根据一组特定的规则给这个函数创建一个prototype属性，它指向这个函数的原型对象，这个原型对象包含了这个函数所有实例共享的属性和方法。这里就解决了构造函数模式所存在的最大的问题。构造函数、原型对象、实例之间的关系构造函数的prototype属性指向原型对象，原型对象的constructor属性指向构造函数；实例的有一个指针指向原型对象，ECMA-262第五版中叫做[[prototype]]，在Firefox、chorme、..
2020-08-12 22:05:08
186
原创 ECMAScript创建对象1 —— Object()、工厂模式、构造函数模式
使用Object构造函数或对象字面量在JavaScript中，我们可以很轻松的通过如下方式创建一个对象var obj1 = new Object();obj1.proto1 = 'proto1'; // 使用Object构造函数var obj2 = { proto2: 'proto2'} // 使用对象字面量这两种方式都能很直观简单地帮助我们创建一个新的对象，但这两种方法也有很明显的缺点：每一个对象都需要我们不停地给它添加属性，即使是创建两个具有相同属性的对象，这会产生大量的重复代码
2020-07-05 22:04:48
234
原创 ECMAScript中的对象
什么是对象ECMAScript中没有其它面向对象语言中类的概念，所以对象的概念也有所不同。在ECMAScript中，对象可以理解为一组没有特定顺序的键值对，每个对象都是基于一个引用类型创建的，可以是原生的引用类型，也可以是开发者自定义的类型。最简单的创建对象的方式就是创建Object构造函数的实例，再往其中添加属性和方法。属性的类型和它们的特性ECMAScript中对象的属性分为两种： 数据属性和访问器属性；数据属性是一个包含数据值的位置，访问器属性则包含一对setter和getter，直接定义在对象
2020-07-05 22:00:27
248
原创 手写VUE1——实现解析k-text、k-html、插值表达式功能
创建KVue类，保存options和data，需要实现响应式、数据代理、编译模板的功能class KVue { constructor(options) { this.$options = options this.$data = options.data // 响应式处理 observe(this.$data) // 数据代理 Proxy(...
2020-04-08 08:54:08
421
原创 数据响应式基础
Object.defineProperty()Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。它接收三个参数obj：需要被定义新属性或改变属性的对象prop：即将被定义或修改的属性名称descriptor：即将被定义或修改的属性的描述符，分为数据描述符和存取描述符。数据描述符：就是descrip...
2020-04-04 18:28:27
192
原创 模拟Vuex插件
需求Vuex是一个帮助我们集中管理vue组件状态的状态管理插件，我们将模拟它的state、mutation、action、getter。在组件内，我们可以通过vm.store.commit()来更改state，或者使用vm.store.commit()来更改state，或者使用vm.store.commit()来更改state，或者使用vm.store.dispatch()来异步地改变state...
2020-03-31 12:18:28
148
原创 Vue-router插件——嵌套路由
实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：const router1 = [ { path: '/', name: 'home', component: HelloWorld }, { path: '/about', name: 'about', compon...
2020-03-29 12:56:47
214
原创 实现一个Vue-router插件
Vue插件开发我们开发的插件需要实现一个install方法，它接收的第一个参数是Vue的构造器；通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成。hash模式和history模式在html5的history模式出现以前，前段路由的实现基本都是使用hash来实现的，它能兼容到IE8。hash指的是url中’#'号及其后面的字符，也称作锚点，可以使...
2020-03-29 12:33:21
182
原创 算法 —— 斐波那契数列
题目代码：var fib = function(N) { switch (N) { case 0: case 1: return N; default: let num1 = 0; let num2 = 1; let num3; ...
2020-03-01 13:07:01
292
原创 算法 —— 三数之和
题目：代码：/* * [15] 三数之和 * 1、排序 * 2、当前作为第一个数，分别选取右边的第一个和最后一个进行计算，等于0，把值放入result * 3、判断nums[i]是否与左侧的数相等，相等则跳过 * 4、判断nums[i]是否已经大于0，是则结束整个循环 * 5、在循环取numL和numR时，如果numL和他左边的数相等或numR和他右边的数相等，则是重复答...
2020-03-01 12:56:28
2527
原创 算法 —— 两数之和
题目代码：var twoSum = function(nums, target) { let obj = {}; for(let i =0; i < nums.length; i++) { let num = nums[i]; if (num in obj) { return [obj[num], i];...
2020-03-01 12:52:55
135
转载 JavaScript---- nodetype的值
DOM1定义了一个Node接口，该接口将有DOM中所有节点类型实现。除IE外其他浏览器中都可以访问这个类型1 ELEMENT_NODE 元素节点2 ATTRIBUTE_NODE 属性节点3 TEXT_NODE 文本节点4 CDATA_SECTION_NODE CDATA区段5 ENTITY_REFERENCE_NODE 实体引用元素6 ENTITY_NODE 实体7 PR...
2019-12-04 15:01:03
182
原创 es6 var let const
js有个概念叫没有代码块，其实就是说if、for、while大括号里面用var声明的变量在大括号外是能够访问的，而es6提供的let、const关键字则不一样了，‘代码块内如果存在 let 或者 const，代码块会对这些命令声明的变量从块的开始就形成一个封闭作用域’，也就是说在大括号外是不能访问大括号里面有let、const声明的变量的，let、const声明的变量也不会存在变量提升了。le...
2019-09-18 14:20:44
226
原创 前端开发——select的点击事件
近几天，在用select-option实现一个时间选择器的时候遇到了一点问题。最开始使用select的change事件监听用户的选择，发现第一个问题：当用户连续两次点击同一个option时，不能触发change事件。想想挺合理的，value值根本就没变嘛。于是想换一种方法，用点击事件去监听，这里不能直接监听option的点击事件，因为select下的option标签是监听不到点击事件的，只能监...
2019-08-07 09:40:07
29948
2
原创 关于ie下li标签的value属性问题
问题：无序列表做下拉框，借助li标签的value属性来设置默认选项，但是，在ie下却出了问题，查阅资料后发现，ie对li的value属性有奇怪的处理方式，于是写了简单代码做了试验：html代码：在chorme下查看：可以发现未出任何问题，切换到IE浏览器：可以发现： 如果value的值有 ' - ' 这个符号，只有以字母开头的值能正确显示出来，如果value为空（字...
2019-07-02 09:55:03
719
原创 chorme不同版本下window.scrollTo方法的参数问题
今天同事测试项目的时候发现自己的chorme报错用自己的电脑连接各种环境都没能重现，查了一下文档，发现window.scrollTo的参数有两种形式：查看项目的代码，发现项目使用的是第二种，猜测会不会是浏览器版本不支持，查看同事的chorme，版本为59，自己电脑的则是75。装上59版本的chorme后，果然重现了，于是做了兼容处理，成功解决。问题的源头就是chorme59不支持w...
2019-07-01 11:15:01
2814
2
原创 display:inline-block的一点问题
如图：div. sqlContent和它的两个兄弟元素都是利用display：inline-block调整到一行显示，但是每个元素在设置的宽度之外还占据了一点空间，导致一些小问题。解决办法：父级容器设置letter-spacing：-0.5em，然后子元素将letter-spacing设置为0；...
2019-04-10 17:42:26
152
原创 html加css制作一个滑动开关
这样的一个开关还是比较常用的，实现的方法也挺多，记录html+css实现的一种html：<div class="switch-btn"> <input type="checkbox" class="hidden-checkbox" name="" value=""> <span class="switch-area"></span>...
2019-04-10 17:31:11
2970
原创 利用canvas完成移动端裁剪图片功能以及在用drawimage绘制图片的一点问题
最近项目有了一个裁取图片的一部分的需求，效果图如下： 实现思路比较简单，点击上传图片的时候，触发input；input的onchangge事件触发的时候，利用fileReader读取图片信息并显示第二张图的界面；点击完成时，将截取框距离图片顶部的距离保存到图片的文件名里面，上传整张图片到服务器；同时在前端相应位置通过canvas计算需要绘制的区域，将截取的部分...
2019-03-08 14:34:57
2266
原创 前端开发----图片自适应
最近完成了一个关于图片自适应显示的需求，就是比屏幕小的显示原尺寸，比屏幕大的图片不超出屏幕显示。刚看到这条需求，第一反应，js来控制。于是便写下这么一段(以宽度为例)：var img = $(.img);img.load(function(){ var imgW = img.width()； var screenW = $(window).width(); ...
2018-09-19 16:43:07
3218
原创 微信小程序——获取位置（二），百度地图、高德地图篇
在获取位置信息的时候，除了腾讯地图，我们还可以选择更多别的地图，比如百度、高德等。和使用腾讯地图一样，使用这两家地图也需要经过注册账号、申请开发秘钥、下载SDK者三个步骤，具体操作和腾讯地图篇大同小异，不做过多介绍，只提供官网链接：百度地图开发者平台：http://lbsyun.baidu.com/高德地图开发者平台：https://lbs.amap.com/同样，我们需要引入相应的S...
2018-08-29 14:25:58
4496
2
原创 微信小程序——获取地址信息（一），腾讯地图篇
小程序对获取用户地址信息的需求是很常见的，小程序官方也给出了一些关于获取位置的api，但是只支持获取经纬度，大多数时候我们需要获取到用户的具体地址，而不是一堆数字。实现这个功能就需要借助外部力量了。目前国内主流的腾讯地图、百度地图、高德地图都提供了支持小程序开发的JavaScript SDK，我们可以通过使用这些sdk来达到我们的目标。首先介绍腾讯地图吧。进入腾讯地图开发者平台可以直接...
2018-08-29 14:06:48
10797
3
原创 微信小程序——关于wx.makePhoneCall的巨坑
小程序总会有下图这样的一个需求：点击它，会这样显示：关于联系客服，微信提供了wx.makePhoneCall这个api。一开始用的时候，我以为它不会自动弹出窗口，于是我写了这样一段代码：wx.showActionSheet({ itemList: ['400-800-5050','呼叫'], success:function(res){ ...
2018-08-24 17:41:13
16983
原创 小程序开发——wx:for循环添加的元素怎么设置不同的样式
在编写一个页面的时候，总会遇到一组出了文字内容其它都相同的组件，这时候如果使用循环是非常方便的，微信小程序也有自己的解决方案。我们可以通过使用wx:for='{{items}}'进行组件的重复渲染，在js文件中设置items的值就可以实现。但是，在动态地设置每一项的样式的时候，出问题了。我们想要实现如下图所示的效果：点击一项，背景变白，字体为橙色。在web开发中，可以直接改变sty...
2018-08-21 09:47:59
9876
7
原创 小程序button以及滚动条默认样式的清除
实现如下图所示的效果，用四个button实现： 在编写样式的时候，总是清除不了button的圆角和边框，神魔恋！ 其实，我们可以查看button的默认样式来解决它；我们创建一个button，查看style，我们发现了问题 原来小程序的button自带的border-radius和border等属性，不是直接给button设置相关属性，而是用b...
2018-08-21 09:11:31
1107
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人