2016.05 第三周 群问题分享

HTML+CSS

一个div里面有个img标签,div的高度由img撑开;img的兄弟级有个div要使内层div的高度等于外层div的高度,除了用JS实现,还能怎么实现?

2016.05.16~2016.06.20

核心概念

flex、position、display

参考答案

结构:

 <div class="wrap">
      <img src="h5_course.jpg" alt="HTML5学堂">
      <div>HTML5</div>
 </div>

设置多栏多列布局display: flex;

<style>
      .wrap {
         display: flex;
      }
      .wrap img,
      .wrap div {
         width: 50%;
      }
      .wrap img {
         display: block;
      }
      .wrap div {
         background-color: #fcc;
      }
</style>

设置绝对定位

 <style>
      .wrap {
         position: relative;
      }
      .wrap img,
      .wrap div {
         width: 50%;
      }
      .wrap img {
         display: block;
      }
      .wrap div {
         position: absolute;
         left: 50%;
         top: 0;
         height: 100%;
         background-color: #fcc;
      }
 </style>

父级设置display: table,子级div设置display: table-cell;

 <style>
   .wrap {
      width: 100%;
      display: table;
      table-layout: fixed;
   }
   .wrap img {
      display: block;
      width: 100%;
   }
   .wrap div {
      display: table-cell;
      width: 50%;
      background-color: #fcc;
   }
 </style>

多行文本垂直居中

2016.05.16~2016.06.20

核心问题

display:table-cell;

参考答案

设置display:table-cell;和vertical-align:middle;

如果想具体了解关于水平垂直居中对齐问题,可以在HTML5学堂官网搜索“水平垂直居中对齐”,进一步深入了解关于水平垂直居中对齐的问题。

怎么让Chrome支持小于12px的文字

2016.05.16~2016.06.20

核心问题

  transform: scale();

参考答案

<style>
  .wrap {
    font-size:10px;
    -webkit-transform:scale(0.8); 
    display:block;
  }
</style>

JavaScript

如下程序结果输出的是什么?

2016.05.16~2016.06.20

核心问题

this指向、匿名函数

参考答案

题目:

 <script type="text/javascript">
      var name = "h5course";
      var object = {
         name: "myobj",
         getFunc: function() {
            return function() {
                return this.name;
      }
         }
      }
      console.log(object.getFunc()());
 </script>

分析:

如上代码2行,var name = "h5course";这个变量是全局变量,属于全局对象window。window.name = "h5course"。

如上代码7行,this永远指向其所在函数的所有者,如果没有所有者时,指向window。上面的函数是匿名函数,并没有指明对象所有者,所以函数所有者还是window,this指向window。

如代码11行,object.getFunc()()第一次调用函数返回的是内部的匿名函数(调用第一个括号),第二次执行的是返回过来的匿名函数(调用第二个括号)。

如果想具体了解关于this指向的问题,可以在HTML5学堂官网搜索“this详解”,进一步深入了解关于this指向的问题。

如何优化JS性能?

2016.05.16~2016.06.20

核心问题

JavaScript性能优化

参考答案

小编罗列几条建议:

1 变量

1.1 合理命名,遵循基本的命名规范,并遵循命名推荐:属性/变量以名词开头,方法/函数以动词开头,遵循小驼峰,构造函数使用大驼峰,常量所有字母均大写。

1.2 所有变量声明都放在函数的头部。

1.3 所有函数都在使用之前定义。

1.4 尽量避免使用全局变量,防止全局作用域被污染。

1.5 合理书写大括号位置、空行位置、注释等内容,对于声明变量,可以如下声明:

var box = document.getElementById('box'),
     con = document.getElementById('con');

1.6 利用对象命名空间、匿名函数、协同命名等方法,尽量避免团队合作时产生的命名冲突。

1.7 文件加载完毕之后再进行代码的执行,合理利用window.onload与jQuery中的$(document).ready。

1.8 对于DOM操作,尽可能减少在页面中查找元素的次数,即用变量存储查找的元素,之后再需使用,只需要使用变量即可(for循环中常见的长度控制,同理)。

2 数据类型

2.1 比较数据时,不要使用"相等"(==)运算符,只使用"严格相等"(===)运算符。

2.2 不要使用隐式的数据类型转换。

2.3 追加字符串时,采用 str += "独行冰海"; 而不是str = str + "独行冰海";

3 页面基本数据交互

3.1 获取标签使用最为快捷的方法,在PC端原生方法当中,速度比较如下:通过id > 通过类名 > 通过标签名。如果能够在小范围中进行查找时则缩小范围。

3.2 对于样式的修改与调整,根据具体情况采用style或者类名操作(className),防止style的滥用造成的css文件hover失效。

3.3 原生当中,一个元素一种事件只能绑定一次。

3.4 可以通过事件委托,减少页面中类似事件的数量。

3.5 在删除dom节点之前,需要先移除掉该节点上的事件。

4 性能

4.1 对于功能类似的代码,进行函数的封装,可以使用面向对象的书写方法,提升代码的复用性和扩展性。

4.2 尽可能少使用with语句、闭包、eval语句。

4.3 在DOM节点相关操作上进行优化,如利用变量存储查找到的元素,从而防止每次查找时进行页面重绘、利用文档碎片等。

4.4 尽可能减少页面中dom元素样式的修改,防止页面回流与重绘。

4.5 合理使用计时器,防止setInterval造成的内存泄露。

4.6 在设置计时器之后需要考虑计时器的清除,以防止计时器的叠加造成的影响。

5 AJAX

5.1 对于AJAX的异步加载,提供加载的相关提醒。

5.2 防止AJAX造成的重复请求。

5.3 利用时间戳进行缓存的处理。

5.4 对AJAX进行缓存处理。

5.5 合理使用AJAX中发送数据的方法,当文档中允许使用post或get发送时,优选选用get方法。

6 框架

6.1 jQuery等插件的合理引用,处理常见的浏览器兼容问题。

6.2 根进jQuery的发展,及时更新文件库,舍弃已经淘汰的方法(如:.toggle(),.live()等)。

HTML5学堂小编 - 陈林 耗时4h

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-05-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

React高阶组件(译)

本文作者:IMWeb zzbozheng 原文出处:IMWeb社区 未经同意,禁止转载 原文:https://daveceddia.com/extra...

1906
来自专栏分布式系统和大数据处理

Go语言Tips

转型到Go以后,因为语言的不熟悉,以往很常见的一些操作有时候也需要去Google一下。这里将一些结果记录下来,方便日后查阅。

1312
来自专栏Micro_awake web

HTML&CSS书写规范

第一部分:HTML书写规范: 1.1 HTML整体结构: 1.1.1:HTML基础设施: 文档以"<!DOCTYPE...>"首行顶格开始,推荐使用"<!DOC...

20910
来自专栏Golang语言社区

golang(Go语言) byte/[]byte 与 二进制形式字符串 互转

效果 把某个字节或字节数组转换成字符串01的形式,一个字节用8个”0”或”1”字符表示。比如: byte(3) –> “00000011” []byte{1...

4247
来自专栏数据结构与算法

2833 奇怪的梦境

题目描述 Description Aiden陷入了一个奇怪的梦境:他被困在一个小房子中,墙上有很多按钮,还有一个屏幕,上面显示了一些信息。屏幕上说,要将所有按钮...

3525
来自专栏WindCoder

mybatis在xml文件中处理大于号小于号的方法(mybatis大于小于的转义)

SELECT * FROM test WHERE 1 = 1 AND start_date  &lt;= CURRENT_DATE AND end_date &...

901
来自专栏HTML5学堂

JS简单页面交互实战 - 点击按钮实现求和功能

上一期堡堡给大家讲解了简单的页面交互效果 - 点击块,让块动起来,让我们更清晰的了解JS逻辑和DOM的结合。如果想具体了解点击块,让块动起来,可以回复“交互”到...

4238
来自专栏纯洁的微笑

springboot(四):thymeleaf使用详解

在上篇文章springboot(二):web综合开发中简单介绍了一下thymeleaf,这篇文章将更加全面详细的介绍thymeleaf的使用。thymeleaf...

68410
来自专栏互联网杂技

h5新功能data-*,好好利用,还能做数据双向绑定

标题是data-,但是这里主要讲伪元素,看明白就知道了 1、jQuery Selectors 获取伪元素的属性值 虽然JS里没有可以直接操作伪元素的选择符,然而...

2904
来自专栏Java3y

Juqery就是这么简单

什么是Jquery? Jquey就是一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作 就是封装了JavaScript,能够简化我...

3305

扫码关注云+社区