标签搜索
搜索到
107
篇与
的结果
-
css笔记一 在编写样式中经常遇见, 尺寸的计算.css3中提供了一个计算函数calc(),它支持(+ - * /).如:top: calc(50% - 30%);注意的是在运算符前后都得添加一个空格,否则无效.(支持IE9及以上)去掉input[type="number"]的默认样式input[type=number] { -moz-appearance:textfield; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } 利用媒体查询分辨横竖屏@media screen and (orientation:portrait) { /* css[竖向定义样式] */ ...... } @media screen and (orientation:landscape) { /* css[横向定义样式] */ ...... }去手机端点击出现的高亮框-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; /* For some Androids,个人感觉是低版本的安卓，4.0以下 */ css居中的方式利用伪类使元素居中div:after{ content:""; display:inline-block; height:100%; vertical-align: middle; } 利用定位//这里要使用到css的子绝父相 div{ position:relative; top:0; left:0; right:0; bottom:0; margin:auto; } -
ES6 const const(常量)定义的变量不可修改.注意javascript的垃圾回收机制不会回收常量.常量的声明必须赋予初值.作用域为块级作用域.那么我们用const定义一个对象呢?const obj = {name : "小米",age : 18}; obj = "小米" //TypeError: Assignment to constant variable.这里obj不可重写.const obj = {name : "小米",age : 18}; obj.age = 20; console.log(obj.age); //20总结:在用const定义应用类型时(对象,数组...)时,不可修改本身,但可以修改对象的属性值以及数组的元素.发现了这个特性, 你可以发现有很多妙用.
-
vue兄弟主件的通讯 情况如下:两个兄弟主件(A,B),在A主件中调用B主件的中的方法实现通讯.在这里我们要借助vue的自定义事件和自定义事件监听机制,vm.$on( event, callback )和vm.emit().我们必须把B主件引用(ref)在父主件上,这样做的目的就是在父主件中可以调用子主件的方法.那么现在只要在主件A调用父主件的方法就可以解决问题.就实现了一个调用链(A->父->B).在父主件监听A主件的自定义事件vm.$on( event, callback ).在A主件内部触发自定义事件vm.emit( event ).在父主件内的监听回调中调用主件B的方法.这样就实现了主件A调用主件B的方法,也就实现了兄弟主件的通讯.
-
XML的解析new DOMParser.parseFromString() 解析 XML 标记来创建一个文档。构造函数new DOMParser()说明DOMParser 对象解析 XML 文本并返回一个 XML Document 对象。要使用 DOMParser，使用不带参数的构造函数来实例化它，然后调用其 parseFromString() 方法：var doc = (new DOMParser()).parseFromString(text)IE 不支持 DOMParser 对象。相反，它支持使用 Document.loadXML() 的 XML 解析。注意，XMLHttpRequest 对象也可以解析 XML 文档。参阅 XMLHttpRequest 的 responseXML 属性。DOMParser.parseFromString()解析 XML 标记语法parseFromString(text, contentType)text 参数是要解析的 XML 标记。contentType 是文本的内容类型。可能是 "text/xml" 、"application/xml" 或 "application/xhtml+xml" 中的一个。注意，不支持 "text/html"。返回值保存 text 解析后表示的一个 Document 对象。参阅 Document.loadXML()，了解这个方法的一个特定于 IE 的替代
-
牛逼的Object.defineProperty var obj = { name: '小米'}; Object.defineProperty(obj, "age", { value:18, //属性值 writable:true,//是否可写 enumerable: true,//该属性是否可以枚举 configurable: true,//属性的总开关(如果是false,下次设置将无效) }); Object.defineProperty(obj,"age",{ //get set 方法不能同时和 value writable 存在 get(){ return 22 //必须返回一个 }, set(val){ console.log(val) } }) obj.age=24
-
javaScript内存生命周期 内存生命周期不管什么程序语言，内存生命周期基本是一致的：分配你所需要的内存使用分配到的内存（读、写）不需要时将其释放\归还在所有语言中第一和第二部分都很清晰。最后一步在低级语言中很清晰，但是在像JavaScript 等高级语言中，这一步是隐藏的、透明的。JavaScript 的内存分配值的初始化为了不让程序员费心分配内存，JavaScript 在定义变量时就完成了内存分配。var n = 123; // 给数值变量分配内存 var s = "azerty"; // 给字符串分配内存 var o = { a: 1, b: null }; // 给对象及其包含的值分配内存 // 给数组及其包含的值分配内存（就像对象一样） var a = [1, null, "abra"]; function f(a){ return a + 2; } // 给函数（可调用的对象）分配内存 // 函数表达式也能分配一个对象 someElement.addEventListener('click', function(){ someElement.style.backgroundColor = 'blue'; }, false);通过函数调用分配内存有些函数调用结果是分配对象内存：var d = new Date(); // 分配一个 Date 对象 var e = document.createElement('div'); // 分配一个 DOM 元素 有些方法分配新变量或者新对象： var s = "azerty"; var s2 = s.substr(0, 3); // s2 是一个新的字符串 // 因为字符串是不变量， // JavaScript 可能决定不分配内存， // 只是存储了 [0-3] 的范围。 var a = ["ouais ouais", "nan nan"]; var a2 = ["generation", "nan nan"]; var a3 = a.concat(a2); // 新数组有四个元素，是 a 连接 a2 的结果使用值使用值的过程实际上是对分配内存进行读取与写入的操作。读取与写入可能是写入一个变量或者一个对象的属性值，甚至传递函数的参数。当内存不再需要使用时释放大多数内存管理的问题都在这个阶段。在这里最艰难的任务是找到“所分配的内存确实已经不再需要了”。它往往要求开发人员来确定在程序中哪一块内存不再需要并且释放它。高级语言解释器嵌入了“垃圾回收器”，它的主要工作是跟踪内存的分配和使用，以便当分配的内存不再使用时，自动释放它。这只能是一个近似的过程，因为要知道是否仍然需要某块内存是无法判定的（无法通过某种算法解决）。垃圾回收如上文所述自动寻找是否一些内存“不再需要”的问题是无法判定的。因此，垃圾回收实现只能有限制的解决一般问题。本节将解释必要的概念，了解主要的垃圾回收算法和它们的局限性。引用垃圾回收算法主要依赖于引用的概念。在内存管理的环境中，一个对象如果有访问另一个对象的权限（隐式或者显式），叫做一个对象引用另一个对象。例如，一个Javascript对象具有对它原型的引用（隐式引用）和对它属性的引用（显式引用）。在这里，“对象”的概念不仅特指 JavaScript 对象，还包括函数作用域（或者全局词法作用域）。引用计数垃圾收集这是最简单的垃圾收集算法。此算法把“对象是否不再需要”简化定义为“对象有没有其他对象引用到它”。如果没有引用指向该对象（零引用），对象将被垃圾回收机制回收。示例var o = { a: { b:2 } }; // 两个对象被创建，一个作为另一个的属性被引用，另一个被分配给变量o // 很显然，没有一个可以被垃圾收集 var o2 = o; // o2变量是第二个对“这个对象”的引用 o = 1; // 现在，“这个对象”的原始引用o被o2替换了 var oa = o2.a; // 引用“这个对象”的a属性 // 现在，“这个对象”有两个引用了，一个是o2，一个是oa o2 = "yo"; // 最初的对象现在已经是零引用了 // 他可以被垃圾回收了 // 然而它的属性a的对象还在被oa引用，所以还不能回收 oa = null; // a属性的那个对象现在也是零引用了 // 它可以被垃圾回收了限制：循环引用该算法有个限制：无法处理循环引用。在下面的例子中，两个对象被创建，并互相引用，形成了一个循环。它们被调用之后不会离开函数作用域，所以它们已经没有用了，可以被回收了。然而，引用计数算法考虑到它们互相都有至少一次引用，所以它们不会被回收function f(){ var o = {}; var o2 = {}; o.a = o2; // o 引用 o2 o2.a = o; // o2 引用 o return "azerty"; } f();实际例子IE 6, 7 使用引用计数方式对 DOM 对象进行垃圾回收。该方式常常造成对象被循环引用时内存发生泄漏：var div; window.onload = function(){ div = document.getElementById("myDivElement"); div.circularReference = div; div.lotsOfData = new Array(10000).join("*"); };在上面的例子里，myDivElement 这个 DOM 元素里的 circularReference 属性引用了 myDivElement，造成了循环引用。如果该属性没有显示移除或者设为 null，引用计数式垃圾收集器将总是且至少有一个引用，并将一直保持在内存里的 DOM 元素，即使其从DOM 树中删去了。如果这个 DOM 元素拥有大量的数据 (如上的 lotsOfData 属性)，而这个数据占用的内存将永远不会被释放。标记-清除算法这个算法把“对象是否不再需要”简化定义为“对象是否可以获得”。这个算法假定设置一个叫做根（root）的对象（在Javascript里，根是全局对象）。定期的，垃圾回收器将从根开始，找所有从根开始引用的对象，然后找这些对象引用的对象……从根开始，垃圾回收器将找到所有可以获得的对象和所有不能获得的对象。这个算法比前一个要好，因为“有零引用的对象”总是不可获得的，但是相反却不一定，参考“循环引用”。从2012年起，所有现代浏览器都使用了标记-清除垃圾回收算法。所有对JavaScript垃圾回收算法的改进都是基于标记-清除算法的改进，并没有改进标记-清除算法本身和它对“对象是否不再需要”的简化定义。循环引用不再是问题了在上面的示例中，函数调用返回之后，两个对象从全局对象出发无法获取。因此，他们将会被垃圾回收器回收。第二个示例同样，一旦 div 和其事件处理无法从根获取到，他们将会被垃圾回收器回收。限制: 那些无法从根对象查询到的对象都将被清除尽管这是一个限制，但实践中我们很少会碰到类似的情况，所以开发者不太会去关心垃圾回收机制。文章来自
-
React无限极菜单生成 //创建无菜单 generateMenu(menuObj) { let vdom = []; if (menuObj instanceof Array) { //判断是否为数组 let list = []; for (var item of menuObj) { //把数组内的数据再次传入(递归点) list.push(this.generateMenu(item)); } //为数组就添加ULul vdom.push( <ul key='single'> {list} </ul> ); } else { if(!menuObj){ return } //为对象时添加li vdom.push( <li key={menuObj.ModuleId} data-id={menuObj.ModuleId}> {menuObj.ModuleName} {this.generateMenu(menuObj.child)} </li> ); } return vdom; }
-
css滚动条样式 /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 16px; height: 16px; background-color: #F5F5F5; } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5; } /*定义滑块 内阴影+圆角*/ ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #555; } 详细设置定义滚动条就是利用伪元素与伪类，那什么是伪元素和伪类呢？伪类大家应该很熟悉:link,:focus,:hover，此外CSS3中又增加了许多伪类选择器，如:nth-child，:last-child，:nth-last-of-type()等。CSS中的伪元素大家以前看过：:first-line,:first-letter,:before,:after。那么在CSS3中，伪元素进行了调整，在以前的基础上增加了一个“：”也就是现在变成了“::first-letter,::first-line,::before,::after”，另外CSS3还增加了一个“::selection”。两个“：：”和一个“：”在css3中主要用来区分伪类和伪元素。webkit的伪类和伪元素的实现很强，可以把滚动条当成一个页面元素来定义，再结合一些高级的CSS3属性，比如渐变、圆角、RGBa等等。然后如果有些地方要用图片，可以把图片也可以转换成Base64，不然每次都得加载那个多个图片，增加请求数。任何对象都可以设置：边框、阴影、背景图片等等，创建的滚动条任然会按照操作系统本身的设置来完成其交互的行为。下面的伪类可以应用到上面的伪元素中。有点小复杂，具体怎么写可以看第一个demo，那里也有注释。[css] view plain copy :horizontal //horizontal伪类适用于任何水平方向上的滚动条 :vertical //vertical伪类适用于任何垂直方向的滚动条 :decrement //decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片，例如可以使区域向上或者向右移动的区域和按钮 :increment //increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮 :start //start伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的前面 :end //end伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的后面 :double-button //double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。 :single-button //single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。 :no-button no-button伪类表示轨道结束的位置没有按钮。 :corner-present //corner-present伪类表示滚动条的角落是否存在。 :window-inactive //适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候。 ::-webkit-scrollbar-track-piece:start { /*滚动条上半边或左半边*/ } ::-webkit-scrollbar-thumb:window-inactive { /*当焦点不在当前区域滑块的状态*/ } ::-webkit-scrollbar-button:horizontal:decrement:hover { /*当鼠标在水平滚动条下面的按钮上的状态*/ }原文地址：http://www.xuanfengge.com/css3-webkit-scrollbar.html
-
for of循环和map()方法 在javascript有时候对数组数据进行操作时,会想的var arr=[1,2,3]; for(var i=0; i<arr.length; i++){ arr[i]+=1; }用ES6的for offor(var value of arr){ value=value+1 //特别注意,这里不会改变原数组的值 } //这是最简洁、最直接的遍历数组元素的语法 //这个方法避开了for-in循环的所有缺陷 //与forEach()不同的是，它可以正确响应break、continue和return语句ES6 map()方法和forEach()方法类是var newarr = arr.map((item,index,arr)=>{ //接收一个方法,接收3个参数 console.log(item,index,arr); //map方法返回一个新数组,这也是与forEach()不同之处 return item+1; }) console.log(newarr)
-
