标签搜索
搜索到
152
篇与
的结果
-
JS继承特性 了解JS继承特性我们必须了解原型链:JavaScript 对象有一个指向一个原型对象的链。 当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型， 以及该对象的原型的原型，依此层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾, 这就是原型链.概念JavaScript的所有对象，都有自己的继承链。也就是说，每个对象都继承另一个对象，该对象称为“原型”（prototype）对象。只有null除外，它没有自己的原型对象。原型对象的重要性在于，如果A对象是B对象的原型，那么B对象可以拿到A对象的所有属性和方法。Object.getPrototypof方法用于获取当前对象的原型对象。 通过对象__proto__属性来继承 var obj = {}; var a = {}; obj.__proto__ = a;这里将obj对象原型设为a对象 var a = {x: 99}; var b = {__proto__: a}; b.x // 99上面的示例代码, b对象通过__proto__属性，将自己的原型对象设为a对象，因此b对象可以拿到a对象的所有属性和方法。 b对象本身并没有x属性，但是JavaScript引擎通过__proto__属性，找到它的原型对象a，然后读取a的x属性。 var a = { x: 1 }; var b = { __proto__: a }; var c = { __proto__: b }; c.x // 1这里要注意的是，在原型链寻找某个属性，对性能是有影响的。 寻找的属性在越上层的原型对象，对性能的影响越大。如果寻找某个不存在的属性，将会遍历整个原型链。 原型链继承这里使用了匿名闭包的方式避免全局污染(function(){ function Foo(n,a){ this.name=n; this.age=a; this.action=function(){ console.debug(this.name,this.age); } } function Bua(){ Foo.apply(this,arguments); //Bua继承了Foo的属性和方法 } Bua.prototype=new Foo(); //Bua继承Foo的原型(constructor丢失) Bua.prototype.constructor=Bua; //重新定义Bua函数的constructor })();这里Foo函数的this指针指向了Bua函数,结果就是调用Bua函数相当于调用了Foo(最终实现Bua函数继承了Foo函数的属性和方法), 但是会造成Bua函数的constructor丢失;原因是因为Bua的原型被new Foo()这个实例给重新定义了.而new Foo()这个实例没上没有constructor. 解决办法就是从新定义Bua函数的constructor.ES6的继承Object.create()部分浏览器不支 以上一个为例 Object.create(Foo.prototype,{constructor : {value:Bua}})//会返回一个新对象 Object.create(prototype, descriptors) ：创建一个具有指定原型且可选择性地包含指定属性的对象;这里要说一下prototype和__proto__的概念prototype是函数的一个属性（每个函数都有一个prototype属性），这个属性是一个指针，指向一个对象。它是显示修改对象的原型的属性。 __proto__是一个对象拥有的内置属性（请注意：prototype是函数的内置属性，__proto__是对象的内置属性），是JS内部使用寻找原型链的属性。总结:1.__proto__的继承, 只是改变了原型的指向.2.原型链继承, 缺点会产生垃圾属性和方法.3.ES6的继承(推荐), 缺点部分浏览器不支. -
CSS3新增特性 @Font-face 特性加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。Word-wrap & Text-overflow 样式Word-wrap设置word-wrap: break-word的话，在单词换行的情况下，可保持单词的完整性。Text-overflow它与 word-wrap 是协同工作的，word-wrap 设置或检索当当前行超过指定容器的边界时是否断开转行，而 text-overflow 则设置或检索当当前行超过指定容器的边界时如何显示, 我们在父容器设置overflow: hidden, 然后设置“text-overflow”属性，有“clip”和“ellipsis”两种可供选择。"clip"表示直接切割，"ellipsis"表示用省略号代替。文字渲染（Text-decoration）Text-fill-color: 文字内部填充颜色Text-stroke-color: 文字边界填充颜色Text-stroke-width: 文字边界宽度CSS3 的多列布局（multi-column layout）Column-count：表示布局几列。Column-rule：表示列与列之间的间隔条的样式Column-gap：表示列于列之间的间隔边框和颜色（color, border）支持rgba和hsl表示颜色, 支持圆角，阴影等效果。CSS3 的渐变效果（Gradient）支持线性渐变和径向渐变。CSS3 的阴影（Shadow）和反射（Reflect）效果阴影效果，阴影效果既可用于普通元素，也可用于文字。CSS3 的背景效果“Background Clip”，该属确定背景画区“Background Origin”，用于确定背景的位置，它通常与 background-position 联合使用，您可以从 border、padding、content 来计算 background-position（就像 background-clip）。“Background Size”，常用来调整背景图片的大小，注意别和 clip 弄混，这个主要用于设定图片本身。“Background Break”属性，CSS3 中，元素可以被分成几个独立的盒子（如使内联元素 span 跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示。多背景图片支持CSS3 的盒子模型display: -webkit-box; display: -moz-box; -webkit-box-orient: horizontal; -moz-box-orient: horizontal;“display: -webkit-box; display: -moz-box;”，它针对 webkit 和 gecko 浏览器定义了该元素的盒子模型。注意这里的“-webkit-box-orient: horizontal;”，他表示水平排列的盒子模型。如果配合元素的box-flex属性：.flex { -webkit-box-flex: 1; -moz-box-flex: 1; } .flex2 { -webkit-box-flex: 2; -moz-box-flex: 2; }水平方向设下的宽度，就可以按照1:2的比例关系自动去计算了。CSS3 的 Transitions, Transforms 和 AnimationTransitionstransition-property：用于指定过渡的性质，比如 transition-property:backgrond 就是指 backgound 参与这个过渡transition-duration：用于指定这个过渡的持续时间transition-delay：用于制定延迟过渡的时间transition-timing-function：用于指定过渡类型，有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezierTransforms指拉伸，压缩，旋转，偏移等等一些图形学里面的基本变换。Animation @-webkit-keyframes anim1 { 0% { Opacity: 0; Font-size: 12px; } 100% { Opacity: 1; Font-size: 24px; } } .anim1Div { -webkit-animation-name: anim1 ; -webkit-animation-duration: 1.5s; -webkit-animation-iteration-count: 4; -webkit-animation-direction: alternate; -webkit-animation-timing-function: ease-in-out; }
