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
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Kubernetes 使用 ceph-csi 消费 RBD 作为持久化存储
- 聊聊调试的那些事,超实用!!!
- [不定时一题]LeetCode无重复字符的最长子串
- 整理了小程序云开发实战,你看懂了吗?
- Reactive-MongoDB异步Java Driver解读
- 解密Go协程的栈内存管理
- 深入浅出mongodb之实战
- 想成为可视化高手?这篇合集就够了 | Vue
- 谈谈Vue开发过程中用到的插件
- 快速入门使用tikz绘制深度学习网络图
- why哥被一道基础面试题给干懵了,一气之下写出万字长文。
- 结构与算法(03):单向链表和双向链表
- 有赞crash平台符号化实践
- 什么是时间分片(Time Slicing)?
- 逐行分析鸿蒙系统的 JavaScript 框架