标签搜索
搜索到
137
篇与
的结果
-
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; }
-
选择相机的曝光模式 摄影入门第一步，就是学会使用你手中的相机。现在的数码相机功能越来越强大，别说新手，可能有些经验的老朋友都不一定清楚相机身上每个功能的作用。在所有这些复杂的按钮当中，最重要莫过于曝光模式了――全自动？程序自动？光圈优先？快门优先？全手动？如果你还没弄清楚它们之间的关系，不妨看看这篇文章补补课吧。为了说明各种模式的特性与适用范围，我们需要引入几个基础概念――曝光三要素，即曝光长短、光圈大小、感光度高低，这三个关键因素将决定最终的成像效果。要素一：光圈大小即镜头通光口径的大小，通常用f值来表示，f=镜头的焦距/镜头的有效口径的直径。f值越小，光圈越大，单位通光量越多；f值越大，光圈越小，单位通光量越小。例如：光圈f/1.8要比f/5.6的口径更大，单位时间内通光量更多！同时，光圈也是影响景深的一个重要因素，在保持其它因素不变的情况下，光圈越大，景深越浅（虚化效果越明显）；光圈越小，景深越深（清晰范围越宽广）。大光圈可以制造虚化，小光圈容易产生星芒。由此可见，我们通过控制光圈可以达到两个目的，一是控制光线的进入量，二是可以控制景深的效果。要素二：快门速度快门速度即是曝光时间，通常用分数来表示，速度越快，曝光时间越短，通光量越少；速度越慢，曝光时间越长，通光量越多。例如，1/250s的快门要比1/30s秒更快，也就意味着通光的时间更少，所以获取的光线也更少。同时，快门速度也决定了相机的抓拍效果，想要捕捉飞速运动的物体，我们就应该使用高速快门。要素三：ISO感光度（ISO），这是一个从胶片时期就流传下来的概念，代表感光材料对光线的敏感程度，ISO越高，感光元件对光线越敏感，达到同样效果需要的光线量越少；ISO越低，感光元件对光线越迟钝，达到同样效果需要的光线量越多。不过由于数码相机感光元件的限制，高ISO下，画面容易产生噪点，所以许多摄影爱好者在拍摄时都在尽量压低ISO，以获得更加纯净的画面。ISO的意义，就是在光线条件极其不好的情况下，通过提升感光元件的灵敏性，从而解放光圈和快门的组合。大家可能会疑问，为什么文章主题是“相机的曝光模式”，却还要重复听这些无聊的基础知识？不要不以为然，这正是“教你如何选择相机的曝光模式”这一问题的关键所在。一、P档及自动挡：适合纯新手或不想设置相机的懒同学在我们常识里，往往认为P档就是新手档，这是有那么几分道理的。虽然P档与全自动档稍有不同的，但是它们的原理基本相同。全自动档也就是傻瓜模式，全靠相机环境的测定制定出一套保证曝光足够的模式，他会自动选择白平衡、光圈、快门、ISO、闪光灯等一切手段促使拍摄成功，不会考虑拍摄意图。而P档是由相机根据拍摄环境，再结合内部储存的曝光资料来生成一个相对合适的光圈和快门的曝光组合进行曝光。看起来好像高级辣么一点，其实都是只需按下快门的傻瓜模式。固然，这种模式就是适合一无所知的新手，或是对相机设置毫无兴趣的“懒”同学。不过，使用这种方法并非意味着不思进取，有人认为，相机的程序曝光功能已经这么强大了，何不利用这个优势，把更多的时间花在提升在构图方面呢？手机摄影越来越厉害，也不都是P档的原理吗？似乎也有几分道理。二、光圈优先模式：适合想要学习摄影并想要对光线进行深入了解的同学顾名思义，摄影师根据自身所需先确定拍摄光圈，然后相机根据你的光圈给出一个保证合理曝光的快门速度。使用光圈优先模式，首要考虑的就是景深的变化，对于不同的主题肯定需要通过不同的景深来表现。例如使用大光圈让人像的背景虚化：又如在风光摄影师中，使用小光圈保证足够的景深：需要注意的是，使用小光圈拍摄，相应的快门速度也会变慢，常常需要用到三脚架来固定相机。就算使用光圈优先模式，也应该注意快门的速度。相机只会根据光线的通量来给出一个建议快门速度，它无法细致判定当时的拍摄环境，比如弱光环境，相机可能会根据你的光圈给出一个低于安全快门的速度，导致手抖。之所以说，这是最适合刚学习摄影的同学使用的曝光模式，是因为它涉及到了景深控制、曝光组合等设定，在每一次拍摄时，慢慢摸索这几个因素之间的关系，能够帮助你更好的理解曝光。三、快门优先模式：用于创作特殊的摄影效果与光圈优先模式相反，快门优先模式是先确定快门速度，然后相机给出一个适当的光圈大小。根据我们以往的认识，拍照就是定格某个精彩瞬间，的确,有时候就是这么简单。例如在拍摄运动场景时，面对高速移动的物体，只有通过同样高速的快门才能够捕捉。我们在使用高速快门时，要注意是否有足够大的光圈或是ISO来保证曝光量。通过控制快门，不仅能定格瞬间，还能“拖延”时间，例如在拍摄跑步或赛车，利用较慢的快门，拍摄时跟随画面主体移动，就能形成“主体清晰，背景模糊”的追焦效果。又或者是使用慢速快门，在拍摄时旋转你的相机，把普通的画面变得抽象起来。四、手动模式：适合认真玩摄影并有耐心持之以恒的同学到了这一步，才是真正开始玩摄影。摄影说白了，就是利用光影来和这个世界玩一场游戏，而手动模式则是让你把这场游戏的规则都掌握在自己手中。这里送上大家一句话，大家以后应该会深有体会――没有准确的曝光，只有合适的曝光。前面所说的几种自动模式、半自动模式，其实都有相机参与，相机帮你决定了一些参数设置，使你的画面变的“正确”而标准。既然是数码时代，手动模式也基本没有什么压力了，现在相机自带的测光功能已经非常强大，足以作为拍摄参考。这张剪影就是一个非常好的例子，通过手动曝光，保证背景和前景点亮，主体人物变为剪影。如果交给相机自己来完成，很可能出现的情况就是人物曝光准确了，但是背景却过爆了。手动模式的另一个用法就是B门，也就是常见的长曝光。在长至数分钟的拍摄过程中，它需要摄影师对画面有一个独立的判断与把控，反复尝试、不断调整，直到画面获得合适的曝光为止，这是无法通过相机的自带功能判断的。总结对于新手来说，如何去理解相机不同的曝光模式，以及怎样做出合理的选择，我们可以从这几点入手：（1）如果你怕麻烦，不想在参数设置上花太多时间，请使用P档；（2）如果你要学习摄影，理解相机与光影之间的关系，并控制景深，请使用光圈优先档；（3）如果你需要控制曝光时间，例如拍摄高速运动、慢速特殊效果等情况，请使用快门优先模式。（4）当然，如果你想要认真玩摄影，一定要学会使用手动挡。文章来自
-
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)
