MyBlog
MyBlog copied to clipboard
SimonZhangITer
:wave: My Personal Blog
我想知道 使用ts之后 如何添加全局组件 按照js的方式添加是无效的。 _Originally posted by @kemplaw in https://github.com/SimonZhangITer/MyBlog/issues/13#issuecomment-464997292_
# 数据可视化 > 将数据通过图表的形式展现出来将大大的提升可读性和阅读效率 > 本例包含柱状图、折线图、散点图、热力图、复杂柱状图、预览面板等 后续会有新的版本，欢迎大家关注 # 技术栈 - vue2.x - vuex _存储公共变量，如色值等_ - vue-router _路由_ - element-ui _饿了么基于vue2开发组件库，本例使用了其中的datePicker_ - echarts _一款丰富的图表库_ - webpack、ES6、Babel、Stylus... GitHub地址：[https://github.com/SimonZhangITer/DataVisualization](https://github.com/SimonZhangITer/DataVisualization) # 演示 此项目为PC端数据可视化，请在电脑端查看 在线演示戳我...
## 功能 - [x] 轮播 - [x] 搜索 - [x] 列表 - [x] 懒加载 - [x] 简单动画 - [x] loading - [x] vue-router.ts - [x] vuex.ts - [x] vue-class-component使用 -...
# 运行时优化 ### 1、使用v-if代替v-show 两者的区别是：v-if不渲染DOM，v-show会预渲染DOM `除以下情况使用v-show`，其他情况尽量使用v-if - 有预渲染需求 - 需要频繁切换显示状态 ### 2、v-for必须加上key，并避免同时使用v-if 一般我们在两种常见的情况下会倾向于这样做: - 为了过滤一个列表中的项目 比如 `v-for="user in users" v-if="user.isActive"`。在这种情形下，请将 `users`替换为一个计算属性 (比如` activeUsers`)，让其返回过滤后的列表 - 为了避免渲染本应该被隐藏的列表 比如 `v-for="user in users" v-if="shouldShowUsers"`。这种情形下，请将 ...
> Gulp是一款当前很流行的前端自动化构建工具 # 功能 先说明一下本文所要实现的功能： - gulp本地服务器 - 多个sass文件汇总为一个css并压缩 - 自动监控和编译SASS和HTML文件 - HTML文件修改后保存则自动刷新页面显示。 # 配置 首先在项目目录下面创建package.json和gulpfile.js两个文件。 看一下本地的项目目录结构： ## package.json ```json { "name": "exam", "version": "1.0.0", "description": "examWeb", "main": "gulpfile.js", "dependencies":...
> this的指向问题应该是让每一个前端er都头疼的问题，我也一样，曾经遇到甚至都是一顿乱猜。最近在研读一些书籍如《你不知道的JavaScript》和《JavaScript语言精粹与编程实践》，让我对this的问题豁然开朗。故写下此篇文章，分享一下我的心得。 # 隐式绑定 关于this，一般来说，谁调用了方法，该方法的this就指向谁，如： ```javascript function foo(){ console.log(this.a) } var a = 3; var obj = { a: 2, foo: foo }; obj.foo(); // 输出2,因为是obj调用的foo，所以foo的this指向了obj，而obj.a = 2 ``` 如果存在多次调用，`对象属性引用链只有上一层或者说最后一层在调用位置中起作用`，如：...
> 一直对vue很感兴趣，最近使用vue2.0开发了高仿饿了么点餐系统来练练手，不得不说vue真是一个很不错的框架，但是也遇到过一些坑，在这里和大家分享一下 # 饿了么点餐系统 > vue2.0、vuex、vue-router、axios、webpack、eslint、better-scroll ## 演示 在线演示戳我（请使用chrome开发者手机演示模式预览） ### 移动端演示 扫二维码在手机上查看效果更好 ## 组件 - [x] 购物车 - [x] 购买物品小球飞入动画 - [x] 评价star组件 - [x] 商品添加、删除组件 - [x] 优惠图标组件 -...
> 相信很多微信开发者都会遇到过这样的问题：为了提高用户体验，把多个页面内容放在一个HTML页面进行展示，通过display属性以及transition动画来实现页面的跳转动画，但是点击微信顶部的“返回”按键之后就会直接跳出整个页面。 所以针对以上的情况，一般的应用的解决方案都是在页面的顶部自己画一个导航栏，需要点击自定义的导航栏来实现返回效果。 ## 弊端 但是不觉得和微信的导航栏放在一起，并且微信上面也有返回，两个返回很别扭吗？ 并且对于安卓用户来说，底部的返回键岂不是没用了？万一手抖点到了怎么办？ 没关系，使用history可以解决： ## History 我们知道，浏览器的跳转以及返回都是存在history历史里面的，它是栈，后进先出。 跳转一个新页面就进栈一个，返回一次就出栈一个。所以我们可以控制它的栈来实现返回的效果 ## pushState history提供了一个方法pushState，可以手动的添加页面进栈。 使用语法:history.pushState(state, title, url); - state：Object,与要跳转到的URL对应的状态信息。 - title：页面名字，方便调试。 - url：要跳转到的URL地址，不能跨域，对于单页应用来说没用，传空即可。 如： ```javascript history.pushState({ "page": "productList" },...
> 为了防止误操作，移动端iOS操作系统针对原生click事件做了300ms的延迟，这在一定程度上影响了我们的使用体验。 #FastClick 现在有现成的插件fastclick可以解决这个问题，但是也有弊端： - GitHub上最新版本的插件大小为25.4kb，轻量为趋势，能省则省。 - 它的核心思想是取消默认的click时间，判断当前dom节点的类型进行相应的操作，这个判断过程较为繁琐。 #MyTapEvent 本人最近在做微信项目，由于fastclick插件存在一定弊端，因此开发了一个简单的tap事件，主要思想有以下几点： ##Thinking - 一次tap事件包含touchstart和touchmove(轻微移动)以及touchend三种状态 - callback方法在touchend后执行 - 根据chrome浏览器默认的判断取消点击的移动量，手指偏移量（水平或垂直）超过15px则判定为滚动，取消执行tap事件 - 手指按下时间过长不视为点击，默认时间间隔为500ms - 使用HTMLElement来扩充原型，方便添加Event - 使用单例模式，确保只加载一次 ok，思想定下来，代码写起来就清晰多了： ```javascript if (!HTMLElement.prototype.addTapEvent) { HTMLElement.prototype.addTapEvent =...
在说属性之前，我们先来了解一下ES5的新方法,Object.create()函数。 #新的对象创建方法 在旧的“原型继承”观念中，它的本质上是“复制原型”，即：以原型为模板复制一个新的对象。然而我们应该注意到一点事实：在这个思路上，“构造器函数”本身是无意义的。更确切的说，构造器函数对实例的修饰作用可有可无，例如： ``` javascript //在构造器中修饰对象实例 function MyObject(){ this.yyy = ...; } ``` 当意识到这一点后，ES5实现Object.cerate()这样一种简单的方法，通过这一方法将“构造器函数”从对象创建过程中赶了出去。在新的机制中，对象变成了简单的“原型继承+属性定义”，而不再需要“构造器”这样一层语义，例如： ``` javascript //新的对象创建方法 newObj = Object.create(prototypeObj,PropertyDescriptors); ``` 这里的PropertyDescriptors是一组属性描述符，用于声明基于prototypeObj这个原型之上的一些新的属性添加或修改，它与defineProperties()方法中的props参数是一样的，并在事实上也将调用后者。它的用法如下例所示： ``` javascript var aPrototypeObject = {name1:"value1"}; var aNewInstance...