web前端
文章平均质量分 50
muzimiaomiaopeng
一只学习的猿
展开
-
ECMAScript创建对象2 —— 原型模式
原型对象的概念ECMAScript中,用户每创建一个新函数,都会根据一组特定的规则给这个函数创建一个prototype属性,它指向这个函数的原型对象,这个原型对象包含了这个函数所有实例共享的属性和方法。这里就解决了构造函数模式所存在的最大的问题。构造函数、原型对象、实例之间的关系构造函数的prototype属性指向原型对象,原型对象的constructor属性指向构造函数;实例的有一个指针指向原型对象,ECMA-262第五版中叫做[[prototype]],在Firefox、chorme、..原创 2020-08-12 22:05:08 · 191 阅读 · 0 评论 -
ECMAScript创建对象1 —— Object()、工厂模式、构造函数模式
使用Object构造函数或对象字面量在JavaScript中,我们可以很轻松的通过如下方式创建一个对象var obj1 = new Object();obj1.proto1 = 'proto1'; // 使用Object构造函数var obj2 = { proto2: 'proto2'} // 使用对象字面量这两种方式都能很直观简单地帮助我们创建一个新的对象,但这两种方法也有很明显的缺点:每一个对象都需要我们不停地给它添加属性,即使是创建两个具有相同属性的对象,这会产生大量的重复代码原创 2020-07-05 22:04:48 · 243 阅读 · 0 评论 -
ECMAScript中的对象
什么是对象ECMAScript中没有其它面向对象语言中类的概念,所以对象的概念也有所不同。在ECMAScript中,对象可以理解为一组没有特定顺序的键值对,每个对象都是基于一个引用类型创建的,可以是原生的引用类型,也可以是开发者自定义的类型。最简单的创建对象的方式就是创建Object构造函数的实例,再往其中添加属性和方法。属性的类型和它们的特性ECMAScript中对象的属性分为两种: 数据属性和访问器属性;数据属性是一个包含数据值的位置,访问器属性则包含一对setter和getter,直接定义在对象原创 2020-07-05 22:00:27 · 257 阅读 · 0 评论 -
手写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 · 425 阅读 · 0 评论 -
数据响应式基础
Object.defineProperty()Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。它接收三个参数obj:需要被定义新属性或改变属性的对象prop:即将被定义或修改的属性名称descriptor:即将被定义或修改的属性的描述符,分为数据描述符和存取描述符。数据描述符:就是descrip...原创 2020-04-04 18:28:27 · 199 阅读 · 0 评论 -
模拟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 · 151 阅读 · 0 评论 -
Vue-router插件——嵌套路由
实际生活中的应用界面,通常由多层嵌套的组件组合而成。同样地,URL 中各段动态路径也按某种结构对应嵌套的各层组件,例如:const router1 = [ { path: '/', name: 'home', component: HelloWorld }, { path: '/about', name: 'about', compon...原创 2020-03-29 12:56:47 · 217 阅读 · 0 评论 -
实现一个Vue-router插件
Vue插件开发我们开发的插件需要实现一个install方法,它接收的第一个参数是Vue的构造器;通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成。hash模式和history模式在html5的history模式出现以前,前段路由的实现基本都是使用hash来实现的,它能兼容到IE8。hash指的是url中’#'号及其后面的字符,也称作锚点,可以使...原创 2020-03-29 12:33:21 · 185 阅读 · 0 评论 -
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 · 186 阅读 · 0 评论 -
前端开发——select的点击事件
近几天,在用select-option实现一个时间选择器的时候遇到了一点问题。最开始使用select的change事件监听用户的选择,发现第一个问题:当用户连续两次点击同一个option时,不能触发change事件。想想挺合理的,value值根本就没变嘛。于是想换一种方法,用点击事件去监听,这里不能直接监听option的点击事件,因为select下的option标签是监听不到点击事件的,只能监...原创 2019-08-07 09:40:07 · 30374 阅读 · 2 评论 -
chorme不同版本下window.scrollTo方法的参数问题
今天同事测试项目的时候发现自己的chorme报错用自己的电脑连接各种环境都没能重现,查了一下文档,发现window.scrollTo的参数有两种形式:查看项目的代码,发现项目使用的是第二种,猜测会不会是浏览器版本不支持,查看同事的chorme,版本为59,自己电脑的则是75。装上59版本的chorme后,果然重现了,于是做了兼容处理,成功解决。问题的源头就是chorme59不支持w...原创 2019-07-01 11:15:01 · 2841 阅读 · 2 评论 -
关于ie下li标签的value属性问题
问题:无序列表做下拉框,借助li标签的value属性来设置默认选项,但是,在ie下却出了问题,查阅资料后发现,ie对li的value属性有奇怪的处理方式,于是写了简单代码做了试验:html代码:在chorme下查看:可以发现未出任何问题,切换到IE浏览器:可以发现: 如果value的值有 ' - ' 这个符号,只有以字母开头的值能正确显示出来,如果value为空(字...原创 2019-07-02 09:55:03 · 733 阅读 · 0 评论 -
display:inline-block的一点问题
如图:div. sqlContent和它的两个兄弟元素都是利用display:inline-block调整到一行显示,但是每个元素在设置的宽度之外还占据了一点空间,导致一些小问题。解决办法:父级容器设置letter-spacing:-0.5em,然后子元素将letter-spacing设置为0;...原创 2019-04-10 17:42:26 · 156 阅读 · 0 评论 -
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 · 3015 阅读 · 0 评论 -
利用canvas完成移动端裁剪图片功能以及在用drawimage绘制图片的一点问题
最近项目有了一个裁取图片的一部分的需求,效果图如下: 实现思路比较简单,点击上传图片的时候,触发input;input的onchangge事件触发的时候,利用fileReader读取图片信息并显示第二张图的界面;点击完成时,将截取框距离图片顶部的距离保存到图片的文件名里面,上传整张图片到服务器;同时在前端相应位置通过canvas计算需要绘制的区域,将截取的部分...原创 2019-03-08 14:34:57 · 2272 阅读 · 0 评论 -
前端开发----图片自适应
最近完成了一个关于图片自适应显示的需求,就是比屏幕小的显示原尺寸,比屏幕大的图片不超出屏幕显示。刚看到这条需求,第一反应,js来控制。于是便写下这么一段(以宽度为例):var img = $(.img);img.load(function(){ var imgW = img.width(); var screenW = $(window).width(); ...原创 2018-09-19 16:43:07 · 3241 阅读 · 0 评论