Aug
24
HTML5本地存储-localStorage如何实现定时存储(转) 
tommyhu , 09:20 , 大前端 » HTM5 , Comments(0) , Trackbacks(0) , Reads(2263) , Via HTML5本地存储-localStorage如何实现定时存储
HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
然而，今天我要说的是“localStorage如何实现定时存储”，正常情况下，localStorage存入key-value后，可以永久使用（前提：不清理cookie操作）.
但是，项目中，我们或许需要实现1.需要在间隔某段时间后，刷新所存的值;2.存储一段时间，而非永久；
解决思路，由于localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。所以我们需要在存取方面重新处理，先上代码：
那如何实现数据过期则查询后台的数据，数据未过期，就使用存储的数据呢？
ajax请求数据为例：
最后提醒各位， 1.使用此方式存储(包括localStorage,sessionStoraage)，需注意用户隐私：重要机密信息就不要使用localStorage了，慎重使用，毕竟客户端都可以读取值。 2.localStorage比较适用于存储不经常更新且不太重要的数据。
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
然而，今天我要说的是“localStorage如何实现定时存储”，正常情况下，localStorage存入key-value后，可以永久使用（前提：不清理cookie操作）.
但是，项目中，我们或许需要实现1.需要在间隔某段时间后，刷新所存的值;2.存储一段时间，而非永久；
解决思路，由于localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。所以我们需要在存取方面重新处理，先上代码：
那如何实现数据过期则查询后台的数据，数据未过期，就使用存储的数据呢？
ajax请求数据为例：
最后提醒各位， 1.使用此方式存储(包括localStorage,sessionStoraage)，需注意用户隐私：重要机密信息就不要使用localStorage了，慎重使用，毕竟客户端都可以读取值。 2.localStorage比较适用于存储不经常更新且不太重要的数据。
Aug
21
本文基于 "element-ui": "^2.4.3", tree控件文档：https://element.faas.ele.me/#/zh-CN/component/tree#tree-shu-xing-kong-jian
这是个坑，如果遇到这个问题，先到git上看下人家的bug fix：https://github.com/ElemeFE/element/issues/4944
然并卵，我这没搞定，通过下面方法搞定
具体操作：
1、在tree外包一层div，给class=‘tree’
2、定义tree的样式
3、重写tree样式
代码：
template
style
这是个坑，如果遇到这个问题，先到git上看下人家的bug fix：https://github.com/ElemeFE/element/issues/4944
然并卵，我这没搞定，通过下面方法搞定
具体操作：
1、在tree外包一层div，给class=‘tree’
2、定义tree的样式
3、重写tree样式
代码：
template
style
Aug
21
在VUE单页应用项目开发过程树形中有一个需求，需要选中树形控件（可以是点击选中行或者复选框），但是只能选中一个。控件使用的是Element ui中的el-tree，但是找了一下并没有单选组件的API，慢慢琢磨中。
1.el-tree组件
2.主要是通过两个事件进行联合判断，
node-click节点被点击时的回调，check-change节点选中状态发生变化时的回调.
由于nodeClick被调用时checkChange也会被调用，因此需要一个editCheckId辅助避免出现因为联动导致选中状态错乱
git项目地址：https://github.com/heyoju/vueDemo
1.el-tree组件
2.主要是通过两个事件进行联合判断，
node-click节点被点击时的回调，check-change节点选中状态发生变化时的回调.
由于nodeClick被调用时checkChange也会被调用，因此需要一个editCheckId辅助避免出现因为联动导致选中状态错乱
git项目地址：https://github.com/heyoju/vueDemo
Aug
14
1.for in 循环 并且使用hasOwnProperty 方法
如果不使用 hasOwnProperty，给Object 添加自己的属性时，也会输出出来
如果不使用 hasOwnProperty，给Object 添加自己的属性时，也会输出出来
Aug
9
JavaScript使用一种称为垃圾收集的技术来管理分配给它的内存。这与C这样的底层语言不同，C要求使用多少借多少，用完再释放回去。其他语言，比如 Objective-C，实现了一个引用计数系统来辅助完成这些工作，我们能够了解到有多少个程序块使用了一个特定的内存段，因而可以在不需要时清除这些内存段。
JavaScript是一种高级语言，它一般是通过后台来维护这种计数系统。
当JavaScript代码生成一个新的内存驻留项时（比如一个对象或函数），系统就会为这个项留出一块内存空间。因为这个对象可能会被传递给很多函数，并且会被指定给很多变量，所以很多代码都会指向这个对象的内存空间。JavaScript会跟踪这些指针，当最后一个指针废弃不用时，这个对象占用的内存会被释放。
A ---------> B ------------> C
例如对象A有一个属性指向B，而B也有一个属性指向C。即使当前作用域中只有对象A有效，但由于指针的关系所有3个对象都必须保留在内存中。当离开A的当前作用域时（例如代码执行到声明A的函数的末尾处），垃圾收集器就可以释放A占用的内存。此时，由于没有什么指向B，因此B可以释放，最后，C也可以释放。
然而，当对象间的引用关系变得复杂时，处理起来也会更加困难。
A ---------> B ------------> C
^、_ _ _ _ _ _ _|
这里，我们又为对象C添加了一个引用B的属性。在这种情况下，当A释放时，仍然有来自C的指针指向B。这种引用循环需要由JavaScript进行特殊的处理，但必须考虑到整个循环与作用域中的其他变量已经处于隔离状态。
从这里我们可以看到，闭包问题的本质是作用域的问题，我平时写的闭包大多出现在：
循环引用
闭包可能会导致在不经意间创建循环引用。因为函数是必须保存在内存中的对象，所以位于函数执行上下文中的所有变量也需要保存在内存中：
这里我们修改了innerFn()，不再招惹 outerVar。但是，这样做仍然没有断开循环引用。
即使innerFn()不再勾引 outerVar，outerVar 也仍然位于innerFn()的封闭环境中。由于闭包的原因，位于 outerFn()中的所有变量都隐含地被 innerFn()所引用。我们再想一想，在 java 中的内部类不也是类似当前情况吗，内部类能够‘看’外部的 this。此时此刻，正如彼时彼刻，竟如此相像。因此，闭包会使意外地创建这些引用循环变得易如反掌。
DOM与JavaScript的循环
虽然我很早就知道闭包，也在调试内存问题时在 chrome F12 里的 profile 是里看到 closure reference,但是并不清除这个问题的根源。因为上述情况通常不是什么问题，JavaScript能够检测到这些情况并在它们孤立时将其清除。
最近看到关于这个问题的解释：在旧版本IE中存在一种难以处理的循环引用问题。
当一个循环中同时包含DOM元素和常规JavaScript对象时，IE无法释放任何一个对象——因为这两类对象是由不同的内存管理程序负责管理的。
除非关闭浏览器，否则这种循环在IE中永远得不到释放。为此，随着时间的推移，这可能会导致大量内存被无效地占用。
导致这种循环的一个常见原因是简单的事件处理:
当指定单击事件处理程序时，就创建了一个在其封闭的环境中包含button变量的闭包。而且，现在的button也包含一个指向闭包（onclick属性自身）的引用。这样，就导致了在IE中即使离开当前页面也不会释放这个循环。
为了释放内存，就需要断开循环引用，例如关闭窗口,删除onclick属性。另外，也可以像下面这样重写代码来
避免这种闭包：
因为hello()函数不再包含 button，引用就成了单向的（从button到hello）,不存的循环，所以就不会造成内存泄漏了。
用jQuery化解引用循环
下面，我们通过常规的jQuery结构来编写同样的代码：
即使此时仍然会创建一个闭包，并且也会导致同前面一样的循环，但这里的代码却不会使 IE 发生内存泄漏。由于jQuery考虑到了内存泄漏的潜在危害，所以它会手动释放自己指定的所有事件处理程序。只要坚持使用jQuery的事件绑定方法，就无需为这种特定的常见原因导致的内存泄
漏而担心。
但是，这并不意味着我们完全脱离了险境。当对DOM元素进行其他操作时，仍然要处处留心。只要是将JavaScript对象指定给DOM元素，就可能在旧版本IE中导致内存泄漏。jQuery只是有助于减少发生这种情况的可能性。
有鉴于此，jQuery为我们提供了另一个避免这种泄漏的工具。用.data()方法，将信息附加到DOM元素。由于这里的数据并非直接保存在扩展属性中（jQuery使用一个内部对象并通过它创建的ID来保存这里所说的数
据），因此永远也不会构成引用循环，从而有效回避了内存泄漏问题。
下面附上 jQuery 源码的相关说法：
JavaScript是一种高级语言，它一般是通过后台来维护这种计数系统。
当JavaScript代码生成一个新的内存驻留项时（比如一个对象或函数），系统就会为这个项留出一块内存空间。因为这个对象可能会被传递给很多函数，并且会被指定给很多变量，所以很多代码都会指向这个对象的内存空间。JavaScript会跟踪这些指针，当最后一个指针废弃不用时，这个对象占用的内存会被释放。
A ---------> B ------------> C
例如对象A有一个属性指向B，而B也有一个属性指向C。即使当前作用域中只有对象A有效，但由于指针的关系所有3个对象都必须保留在内存中。当离开A的当前作用域时（例如代码执行到声明A的函数的末尾处），垃圾收集器就可以释放A占用的内存。此时，由于没有什么指向B，因此B可以释放，最后，C也可以释放。
然而，当对象间的引用关系变得复杂时，处理起来也会更加困难。
A ---------> B ------------> C
^、_ _ _ _ _ _ _|
这里，我们又为对象C添加了一个引用B的属性。在这种情况下，当A释放时，仍然有来自C的指针指向B。这种引用循环需要由JavaScript进行特殊的处理，但必须考虑到整个循环与作用域中的其他变量已经处于隔离状态。
从这里我们可以看到，闭包问题的本质是作用域的问题，我平时写的闭包大多出现在：
循环引用
闭包可能会导致在不经意间创建循环引用。因为函数是必须保存在内存中的对象，所以位于函数执行上下文中的所有变量也需要保存在内存中：
这里我们修改了innerFn()，不再招惹 outerVar。但是，这样做仍然没有断开循环引用。
即使innerFn()不再勾引 outerVar，outerVar 也仍然位于innerFn()的封闭环境中。由于闭包的原因，位于 outerFn()中的所有变量都隐含地被 innerFn()所引用。我们再想一想，在 java 中的内部类不也是类似当前情况吗，内部类能够‘看’外部的 this。此时此刻，正如彼时彼刻，竟如此相像。因此，闭包会使意外地创建这些引用循环变得易如反掌。
DOM与JavaScript的循环
虽然我很早就知道闭包，也在调试内存问题时在 chrome F12 里的 profile 是里看到 closure reference,但是并不清除这个问题的根源。因为上述情况通常不是什么问题，JavaScript能够检测到这些情况并在它们孤立时将其清除。
最近看到关于这个问题的解释：在旧版本IE中存在一种难以处理的循环引用问题。
当一个循环中同时包含DOM元素和常规JavaScript对象时，IE无法释放任何一个对象——因为这两类对象是由不同的内存管理程序负责管理的。
除非关闭浏览器，否则这种循环在IE中永远得不到释放。为此，随着时间的推移，这可能会导致大量内存被无效地占用。
导致这种循环的一个常见原因是简单的事件处理:
当指定单击事件处理程序时，就创建了一个在其封闭的环境中包含button变量的闭包。而且，现在的button也包含一个指向闭包（onclick属性自身）的引用。这样，就导致了在IE中即使离开当前页面也不会释放这个循环。
为了释放内存，就需要断开循环引用，例如关闭窗口,删除onclick属性。另外，也可以像下面这样重写代码来
避免这种闭包：
因为hello()函数不再包含 button，引用就成了单向的（从button到hello）,不存的循环，所以就不会造成内存泄漏了。
用jQuery化解引用循环
下面，我们通过常规的jQuery结构来编写同样的代码：
即使此时仍然会创建一个闭包，并且也会导致同前面一样的循环，但这里的代码却不会使 IE 发生内存泄漏。由于jQuery考虑到了内存泄漏的潜在危害，所以它会手动释放自己指定的所有事件处理程序。只要坚持使用jQuery的事件绑定方法，就无需为这种特定的常见原因导致的内存泄
漏而担心。
但是，这并不意味着我们完全脱离了险境。当对DOM元素进行其他操作时，仍然要处处留心。只要是将JavaScript对象指定给DOM元素，就可能在旧版本IE中导致内存泄漏。jQuery只是有助于减少发生这种情况的可能性。
有鉴于此，jQuery为我们提供了另一个避免这种泄漏的工具。用.data()方法，将信息附加到DOM元素。由于这里的数据并非直接保存在扩展属性中（jQuery使用一个内部对象并通过它创建的ID来保存这里所说的数
据），因此永远也不会构成引用循环，从而有效回避了内存泄漏问题。
下面附上 jQuery 源码的相关说法：
Aug
6
情景【Situation】：
编写通用的输入组件时，子组件要绑定到父组件的某个变量上dataA，当父组件要拿到自组件的值时不能通过this.$children.xxx取值然后付给dataA，
而是父组件可以直接this.dataA就可以取到当前子组件最新值。
任务【Task】：
实现在父组件直接this.dataA就可以取到当前子组件最新值。
行动【Action】：
首先要了解v-model这个指令，许多认真阅读过完整vue文档的同学可能已经知道了关于v-model。
v-model官方给出的说发是：这其实是一个简写的形式，v-model实际执行的是下面的绑定：
v-model是动态绑定值到value，然后监听input的inpit事件获取值后赋给dataA的一个过程。
在说一下input的value属性，在组件内部要定义一个value的props属性，以便能够动态绑定上父组件传过来的值；
组件内部还要做一件事情：
动态计算（获取和设置）currentValue的值，用到了vue的对象的get和set函数；
讲到这里，我们就可以解决上面的问题了；
首先定义一个通用输入组件：
在Html里绑定到vue实例的一个字段上；
实例里写一个方法
打印一下我们绑定的值；
是不是以后就不用繁琐冗长的this.$children.xxx取值方式了？
结果【Result】：
提供了有效的解决了关于输入类组件取值方案，并且已经部署实施。
总结：v-model是value和oninput事件的结合，可以动态地对value进行改变，就是如果value被改变了，可以很快地反映到对应的组件当中，改变该组件的value
编写通用的输入组件时，子组件要绑定到父组件的某个变量上dataA，当父组件要拿到自组件的值时不能通过this.$children.xxx取值然后付给dataA，
而是父组件可以直接this.dataA就可以取到当前子组件最新值。
任务【Task】：
实现在父组件直接this.dataA就可以取到当前子组件最新值。
行动【Action】：
首先要了解v-model这个指令，许多认真阅读过完整vue文档的同学可能已经知道了关于v-model。
v-model官方给出的说发是：这其实是一个简写的形式，v-model实际执行的是下面的绑定：
v-model是动态绑定值到value，然后监听input的inpit事件获取值后赋给dataA的一个过程。
在说一下input的value属性，在组件内部要定义一个value的props属性，以便能够动态绑定上父组件传过来的值；
组件内部还要做一件事情：
动态计算（获取和设置）currentValue的值，用到了vue的对象的get和set函数；
讲到这里，我们就可以解决上面的问题了；
首先定义一个通用输入组件：
在Html里绑定到vue实例的一个字段上；
实例里写一个方法
打印一下我们绑定的值；
是不是以后就不用繁琐冗长的this.$children.xxx取值方式了？
结果【Result】：
提供了有效的解决了关于输入类组件取值方案，并且已经部署实施。
总结：v-model是value和oninput事件的结合，可以动态地对value进行改变，就是如果value被改变了，可以很快地反映到对应的组件当中，改变该组件的value
