复习//JS部分实战题
文章目录
1、写一个原型链继承的例子
<div id="root"></div>在这里插入代码片
function Elem(id) {
this.elem = document.getElementById(id)
}
Elem.prototype.html = function(val){
var elem = this.elem
if (val) {
elem.innerHTML = '<h1>nihao</h1>'
return this
} else {
return elem.innerHTML
}
}
Elem.prototype.on = function(type, fn){
var elem = this.elem
elem.addEventListener(type, fn)
}
var root = new Elem('root')
root.html('ggg')
root.on('click', function(){
alert('nihao')
})
2、创建10个a标签，点击对应标签时弹出对应序号（作用域问题）
var alertI = function alertTarget(elem) {
var a = document.createElement('a')
a.innerHTML = elem + '<br>'
a.addEventListener('click', function () {
alert(elem)
})
document.body.appendChild(a)
}
var i
for (i = 0; i < 10; i++) {
alertI(i)
}
每个 i 要单独执行一次函数，每个 i 在函数作用域内执行。因为for循环中 i 循环所需时间很少，其循环完而其后续的dom操作还没开始，会导致点击每个a标签内容都将弹出 10 。
3、实际开发中闭包的应用
闭包的应用形式：函数作为参数传递 / 函数作为返回值
isFirstLoad例子——函数作为返回值
<script>
function isFirstLoad() {
var contenList = []
return function (val) {
if (contenList.indexOf(val) >= 0) {
return '不是第一次出现'
} else {
contenList.push(val)
return '是第一次出现'
}
}
}
var firstLoad = isFirstLoad()
firstLoad(10) // 是第一次出现
firstLoad(10) // 不是第一次出现
</script>
把 list 定义在函数内，外部就无法修改了，保证每个传入的数据得到正确判断。
4、写一个能遍历对象和数组的通用 forEach 函数
<script>
function objForEach(obj, fn) {
var key
// 数组
if (obj instanceof Array) {
var arrForEach = obj.forEach(function (item, index) {
fn(item, index)
})
return arrForEach
} else {
// 对象
for (key in obj) {
fn(key, obj[key])
}
}
}
// 对象
var myBook = {
book1: '易经',
book2: '心灵择食',
book3: '遇见未知的自己',
}
objForEach(myBook, function (key, value) {
console.log(key, value)
})
// 数组
var arr1 = [1, 2, 3, 4, 5, 'lllll']
objForEach(arr1, function (index, item) {
console.log(index, item)
})
</script>
5、DOM 操作常用 API 有哪些？
（节点、文本、属性）
1——增：
-
1-1 创建
document.createElement（tagName）
document.createTextNode（data）
document.createAttribute（name） -
1-2 加入
appendChild（aChild）
insertBefore（newElement，referenceElement）
innerHTML
innerText
2——删：
- removeChild（child）
removeAttributeNode（attributeNode）
3——改：
-
3-1 改节点
replaceChild（newChild，oldChild）扫描二维码关注公众号，回复： 12571201 查看本文章
-
3-2 改样式
style.*** = ssss;
setAttribute（name，value） -
3-3 改文本
innerHTML
innerText
nodeValue -
3-4 改属性
setAttribute（name，value）
. 属性 = 值
4——查：
- 4-1 标准DOM API
document.getElementById（id）
document.getElementsByTagName（name）
document.getElementsByName（name）
document.getElementByClassName（names）
document.querySelectorAll（selectors） - 4-2 亲属访问
父关系：parenetNode、parentElement
子关系：childNodes、children、firstChild、lastChild
兄弟关系：previousSibling、nextSibling、previousElementSibling、nextElementSibling - 4-3 属性获取
getAttribute（attributeName）
getAttributeNode（attributeName）
6、编写一个通用的事件监听器
（代理、不代理）
声明表达式的方式
<div id="div1">
<p><a>1</a></p>
<p><a>2</a></p>
<p id="p1">nihaoa</p>
</div>
<script>
function bindEvent(elem, type, selector, fn) {
if (fn == null) {
fn = selector
selector = null
}
elem.addEventListener(type, function(e){
var target
if (selector) {
target = e.target
if (target.matches(selector)) {
fn.call(target, e)
}
} else {
fn(e)
}
})
}
// 有代理
var div1 = document.getElementById("div1")
bindEvent(div1, 'click', 'a', function(e) {
alert(this.innerHTML)
})
// 无代理
var p1 = document.getElementById("p1")
bindEvent(div1,'click', function(e){
console.log(p1.innerHTML)
})
</script>
7、手写一个Ajax，不依赖第三方库
（1）创建“XMLHttpRequest”对象；
（2）创建http请求，带有请求方式、url、验证方式；
（3）设置相应http状态变化的响应函数；
（4）发送http请求。
var xhr = new XMLHttpRequest();
xhr.open('GET', './myfile.txt', true)
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
alert(xhr.responseText)
}
}
}
xhr.send(null)
alert(2)
// 若 xhr.open 中为 false——不为异步事件——先执行xhr的函数，再弹出2
// 若为 true——为异步事件——先弹出2，再执行xhr的函数
8、ADM 与 CommonJS 区别
模块化规范、同步异步
- ADM
1.模块化规范：
依赖 require.js 库
全局 define 定义
全局 require 使用
2.依赖 JS 自动、异步加载 - CommonJS
1.模块化规范：
用 module.export 或 export 暴露模块
用 require使用
2.同步一次性加载