您的位置:奥门新浦京网址 > Wed前段 > 全兼容的多列均匀布局问题,对象属性描述符

全兼容的多列均匀布局问题,对象属性描述符

发布时间:2019-11-06 14:11编辑:Wed前段浏览(108)

    轻松学习 JavaScript(7):对象属性描述符

    2018/01/11 · JavaScript · 对象

    原文出处: Dhananjay Kumar   译文出处:码农网/小峰   

    在JavaScript中,你可以如下所示创建一个对象字面量:

    var cat = { name: 'foo', age: 9 };

    1
    2
    3
    4
    var cat = {
        name: 'foo',
        age: 9
    };

    乍一看,好像对象cat有字符串和数字值这两个属性。然而,这不仅仅是JavaScript解释器。在ES5中,介绍了属性描述符的概念。在我们继续讨论属性描述符之前,让我们试着回答几个问题:

    • 如何创建只读属性?
    • 如何制定不可枚举的属性?
    • 如何使属性不可配置?
    • 如何确定一个属性是否是只读的?

    如果你理解属性描述符,那么你就可以回答所有这些问题。

    请看下面的代码:

    var cat = { name: 'foo', age: 9 }; var a = Object.getOwnPropertyDescriptor(cat, 'name'); console.log(a);

    1
    2
    3
    4
    5
    6
    var cat = {
        name: 'foo',
        age: 9
    };
    var a = Object.getOwnPropertyDescriptor(cat, 'name');
    console.log(a);

    输出将如下所示:

    图片 1

    正如你在这里看到的,这个属性有四个特征:

    value保存属性的数据,而writable,enumerable和configurable则描述属性的其他特征。接下来我们将对这些特征一一阐述。

    有趣的CSS题目(6): 全兼容的多列均匀布局问题

    2016/09/29 · CSS · CSS

    本文作者: 伯乐在线 - chokcoco 。未经作者许可,禁止转载!
    欢迎加入伯乐在线 专栏作者。

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节。

    解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。

    不断更新,不断更新,不断更新,重要的事情说三遍。

    谈谈一些有趣的CSS题目(1): 左边竖条的实现方法

    谈谈一些有趣的CSS题目(2): 从条纹边框的实现谈盒子模型

    谈谈一些有趣的CSS题目(3): 层叠顺序与堆栈上下文知多少

    谈谈一些有趣的CSS题目(4): 从倒影说起,谈谈 CSS 继承 inherit

    谈谈一些有趣的CSS题目(5): 单行居中,两行居左,超过两行省略

    所有题目汇总在我的 Github 。

     

    你不可不知的 HTML 优化技巧

    2016/09/12 · 基础技术 · 2 评论 · HTML

    本文作者: 伯乐在线 - 葡萄城控件 。未经作者许可,禁止转载!
    欢迎加入伯乐在线 专栏作者。

    如何提升Web页面的性能,很多开发人员从多个方面来下手如JavaScript、图像优化、服务器配置,文件压缩或是调整CSS。

    很显然HTML 已经达到了一个瓶颈,尽管它是开发Web 界面必备的核心语言。HTML页面的负载也是越来越重。大多数页面平均需要40K的空间,像一些大型网站会包含数以千计的HTML 元素,页面Size会更大。

    如何有效的降低HTML 代码的复杂度和页面元素的数量,本文主要解决了这个问题,从多个方面介绍了如何编写简练,清晰的HTML 代码,能够使得页面加载更为迅速,且能在多种设备中运行良好。

    writable

    属性的值是否可以更改是由writable特征决定的。如果writable设置为false,那么属性的值不能更改,JavaScript将忽略属性值中的任何更改。请看下面的代码:

    var cat = { name: 'foo', age: 9 }; Object.defineProperty(cat, 'name', { writable: false }); console.log(cat.name); // foo cat.name = "koo"; // JavaScript will ignore it as writable is set to false console.log(cat.name); // foo

    1
    2
    3
    4
    5
    6
    7
    8
    var cat = {
        name: 'foo',
        age: 9
    };
    Object.defineProperty(cat, 'name', { writable: false });
    console.log(cat.name); // foo
    cat.name = "koo"; // JavaScript will ignore it as writable is set to false
    console.log(cat.name); // foo

    你可以使用Object.defineProperty更改writable、enumerable和configurable特征的值。我们稍后会在这篇文章中详细讨论Object.defineProperty,但正如你在上面的代码片段中看到的那样,我们已经将writable属性设置为false,从而改变了name属性的值。JavaScript将忽略重新分配,并且name属性的值将保持为foo。

    如果以严格模式运行代码,那么为了重新分配writable设置为false的属性值,JavaScript将抛出异常。请看下面的代码:

    'use strict'; var cat = { name: 'foo', age: 9 }; Object.defineProperty(cat, 'name', { writable: false }); console.log(cat.name); // foo cat.name = "koo"; // error

    1
    2
    3
    4
    5
    6
    7
    8
    'use strict';
    var cat = {
        name: 'foo',
        age: 9
    };
    Object.defineProperty(cat, 'name', { writable: false });
    console.log(cat.name); // foo
    cat.name = "koo"; // error

    在这里,JavaScript以严格模式运行,因此,当你重新分配name属性的值时,JavaScript将抛出异常,如下所示:

    图片 2

    这里的错误消息说,你不能赋值到只读属性。也就是说,如果属性的writable特征设置为false,那么属性将充当只读属性。

    6、全兼容的多列均匀布局问题

    如何实现下列这种多列均匀布局(图中直线为了展示容器宽度,不算在内):

    图片 3

     

    在设计和开发过程中需要遵循以下原则:

    • 结构分离:使用HTML 增加结构,而不是样式内容;
    • 保持整洁:为工作流添加代码验证工具;使用工具或样式向导维护代码结构和格式
    • 学习新语言:获取元素结构和语义标记。
    • 确保可访问: 使用ARIA 属性和Fallback 属性等
    • 测试: 使网站在多种设备中能够良好运行,可使用emulators和性能工具。

    图片 4

    configurable

    属性的其他特征是否可以配置取决于configurable的值。如果属性configurable设置为false,则不能更改writable和enumerable的值。请看下面的代码:

    var cat = { name: 'foo', age: 9 }; Object.defineProperty(cat, 'name', { configurable: false }); Object.defineProperty(cat, 'name', { enumerable: false });

    1
    2
    3
    4
    5
    6
    var cat = {
        name: 'foo',
        age: 9
    };
    Object.defineProperty(cat, 'name', { configurable: false });
    Object.defineProperty(cat, 'name', { enumerable: false });

    在这里,我们将name属性的configurable设置为false。之后,我们将enumerable设置为false。如前所述,一旦一个属性的configurable设置为false,那么你就不能改变另一个特征。

    对于上面的代码,JavaScript会抛出一个TypeError异常,如下图所示。你会得到无法重新定义属性名称的错误:

    图片 5

    在使用configurable的时候,你需要记住,改变configurable的值只能做一次。如果将属性的configurable设置为false,那么你就不能重新分配它;你无法撤消对configurable的更改。请看下面的代码:

    var cat = { name: 'foo', age: 9 }; Object.defineProperty(cat, 'name', { configurable: false }); Object.defineProperty(cat, 'name', { configurable: true });

    1
    2
    3
    4
    5
    6
    var cat = {
        name: 'foo',
        age: 9
    };
    Object.defineProperty(cat, 'name', { configurable: false });
    Object.defineProperty(cat, 'name', { configurable: true });

    我们在重新分配name属性的configurable,但是,JavaScript会对上述操作抛出一个TypeError,如下图所示。正如你所看到的,一旦configurable被设置为false,就不能撤销那个更改。

    图片 6

    另一个重要的事情是,即使configurable设置为false,writable也可以从true更改为false——但反之则不然。请看下面的代码:

    var cat = { name: 'foo', age: 9 }; Object.defineProperty(cat, 'name', { configurable: false }); Object.defineProperty(cat, 'name', { writable: false }); cat.name = 'koo'; console.log(cat.name); // foo

    1
    2
    3
    4
    5
    6
    7
    8
    var cat = {
        name: 'foo',
        age: 9
    };
    Object.defineProperty(cat, 'name', { configurable: false });
    Object.defineProperty(cat, 'name', { writable: false });
    cat.name = 'koo';
    console.log(cat.name); // foo

    如果不是在严格模式下,上面的代码不会抛出任何异常。正如我们前面所讨论的,即使configurable为false,writable也可以从true变为false,反之则不然。另一个需要牢记的重要事项是,你无法删除configurable设置为false的属性。

    var cat = { name: 'foo', age: 9 }; Object.defineProperty(cat, 'name', { configurable: false }); delete cat.name; // wont delete as configurable is false console.log(cat.name); // foo delete (cat.age); // will be deleted console.log(cat.age); // undefined

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var cat = {
        name: 'foo',
        age: 9
    };
    Object.defineProperty(cat, 'name', { configurable: false });
    delete cat.name; // wont delete as configurable is false
    console.log(cat.name); // foo
    delete (cat.age); // will be deleted
    console.log(cat.age); // undefined

    在上面的代码中,你会发现JavaScript不会删除name属性,因为name属性的configurable设置为false。

    法一:display:flex

    CSS3 弹性盒子(Flexible Box 或 Flexbox),是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它依然能确保元素拥有更恰当的排布行为。

    当然 flex 布局应用于移动端不错,PC 端需要全兼容的话,兼容性不够,此处略过不谈。

    HTML、CSS 和JavaScript三者的关系

    HTML 是用于调整页面结构和内容的标记语言。HTML 不能用于修饰样式内容,也不能在头标签中输入文本内容,使代码变得冗长和复杂,相反使用CSS 来修饰布局元素和外观比较合适。HTML元素默认的外观是由浏览器默认的样式表定义的,如在Chrome中h1标签元素会渲染成32px的Times 粗体。

    三条通用设计规则:

    1. 使用HTML 来构造页面结构,CSS修饰页面呈现,JavaScript实现页面功能。CSS ZenGarden 很好地展示了行为分离。
    2. 如果能用CSS或JavaScript实现就少用HTML代码。
    3. 将CSS和JavaScript文件与HTML 分开存放。这可有助于缓存和调试。

    enumerable

    对于一个属性,如果你设置了enumerable:false,那么这个属性将不会出现在枚举中,因此它不能用在诸如for … in循环这样的语句中。

    请看下面的代码:

    var cat = { name: 'foo', age: 9 }; Object.defineProperty(cat, 'name', { enumerable: false }); for (let f in cat) { console.log(f); // will print only age }

    1
    2
    3
    4
    5
    6
    7
    8
    var cat = {
        name: 'foo',
        age: 9
    };
    Object.defineProperty(cat, 'name', { enumerable: false });
    for (let f in cat) {
        console.log(f); // will print only age
    }

    在这里,你只能得到age,因为name的enumerable被设置为了false。这是另一个需要记住的重要事项:通过设置enumerable:false,唯一的属性将不可用于枚举。我们来看下面的代码:

    var cat = { name: 'foo', age: 9 }; Object.defineProperty(cat, 'name', { enumerable: false }); console.log(cat.name); // foo console.log('name' in cat); // true

    1
    2
    3
    4
    5
    6
    7
    var cat = {
        name: 'foo',
        age: 9
    };
    Object.defineProperty(cat, 'name', { enumerable: false });
    console.log(cat.name); // foo
    console.log('name' in cat); // true

    在这里,name属性enumerable设置为false,但你可以访问它。在检查name是否属于cat的属性时,你也会发现是true。

    有时,你可能需要检查某个特定属性enumerable是否设置为false或true。你可以通过使用propertyIsEnumerable方法来做到这一点:

    var cat = { name: 'foo', age: 9 }; Object.defineProperty(cat, 'name', { enumerable: false }); console.log(cat.propertyIsEnumerable("name")); // false

    1
    2
    3
    4
    5
    6
    var cat = {
        name: 'foo',
        age: 9
    };
    Object.defineProperty(cat, 'name', { enumerable: false });
    console.log(cat.propertyIsEnumerable("name")); // false

    文档结构方面也可以做优化,如下:

    • 使用HTML5 文档类型,以下是空文件:

    <!DOCTYPE html> <html> <head> <title>Recipes: pesto</title> </head> <body> <h1>Pesto</h1> <p>Pesto is good!</p> </body> </html>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <!DOCTYPE html>
    <html>
     
    <head>
    <title>Recipes: pesto</title>
    </head>
     
    <body>
     
      <h1>Pesto</h1>
     
      <p>Pesto is good!</p>
     
    </body>
    </html>
    • 在文档起始位置引用CSS文件,如下:

    <head> <title>My pesto recipe</title> <link rel="stylesheet" href="/css/global.css"> <link rel="stylesheet" href="css/local.css"> </head>

    1
    2
    3
    4
    5
    6
    7
    <head>
      <title>My pesto recipe</title>
     
      <link rel="stylesheet" href="/css/global.css">
      <link rel="stylesheet" href="css/local.css">
     
    </head>

    使用这两种方法,浏览器会在解析HTML代码之前将CSS信息准备好。因此有助于提升页面加载性能。

    在页面底部body结束标签之前输入JavaScript代码,这样有助于提升页面加载的速度,因为浏览器在解析JavaScript代码之前将页面加载完成,使用JavaScript会对页面元素产生积极的影响。

    <body> ... <script src="/js/global.js"> <script src="js/local.js"> </body>

    1
    2
    3
    4
    5
    6
    7
    8
    <body>
     
      ...
     
      <script src="/js/global.js">
      <script src="js/local.js">
     
    </body>

    使用Defer和async属性,脚本元素具有async 属性无法保证会按顺序执行。

    可在JavaScript代码中添加Handlers。千万别加到HTML内联代码中,比如下面的代码则容易导致错误且不易于维护:

    index.html:

    <head> ... <script src="js/local.js"> </head> <body onload="init()"> ... <button onclick="handleFoo()">Foo</button> ... </body>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <head>
      
      ...
     
      <script src="js/local.js">
     
    </head>
     
    <body onload="init()">
     
      ...
     
      <button onclick="handleFoo()">Foo</button>
     
      ...
     
    </body>

    下面的写法比较好:

    index.html:

    <head> ... </head> <body> ... <button id="foo">Foo</button> ... <script src="js/local.js"> </body>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <head>
     
      ...
     
    </head>
     
    <body>
     
      ...
     
      <button id="foo">Foo</button>
     
      ...
     
      <script src="js/local.js">
     
    </body>

    js/local.js:

    init(); var fooButton = document.querySelector('#foo'); fooButton.onclick = handleFoo();

    1
    2
    3
    4
    init();
    var fooButton =
        document.querySelector('#foo');
    fooButton.onclick = handleFoo();

    本文由奥门新浦京网址发布于Wed前段,转载请注明出处:全兼容的多列均匀布局问题,对象属性描述符

    关键词:

上一篇:没有了

下一篇:没有了