<a>
標籤,點擊的時候彈出來對應的序號JS變量類型、強制類型轉換、瀏覽器渲染過程、做用域、JS模塊化、JS基礎算法javascript
JS 「三座大山」 —— 原型、做用域和異步php
var a=100
var b=a
a=200
console.log(b) // 100
複製代碼
引用類型:對象、數組、函數css
var a={age:20}
var b=a
b.age=21
console.log(a.age)
複製代碼
typeof undefined // undefined
typeof 'abc' // string
typeof 123 // number
typeof true // boolean
typeof {} // object
typeof [] // object
typeof null // object
typeof console.log // function
複製代碼
var a=100+10 // 110
var b=100+'10' // '10010'
複製代碼
100=='100' // true
0=='' // true
null==undefined // true
複製代碼
var a=true
if (a) {
// ...
}
var b=100
if (b) {
//...
}
var c=''
if (c) {
//...
}
複製代碼
console.log(10&&0); // 0
console.log(''||'abc'); // 'abc'
console.log(!window.abc); //true
// 判斷一個變量會被當作true仍是false
var a=100
console.log(!!a);
複製代碼
JS中使用typeof能獲得的哪些類型html
什麼時候使用===什麼時候使用==前端
// 問題:什麼時候使用=== 什麼時候使用==
if (obj.a==null) {
// 這裏至關於obj.a===null||obj.a===undefined,簡寫形式
// 這是jquery源碼中推薦的寫法
}
複製代碼
JS中有哪些內置函數java
// 問題:JS中有哪些內置函數--數據封裝類對象
Object
Array
Boolean
Number
String
Function
Date
RegExp
Error
複製代碼
JS變量按照存儲方式區分爲哪些類型,並描述其特色node
如何理解JSONjquery
// 問題:如何理解JSON
// JSON只不過是一個JS對象而已
JSON.stringify({a:10,b:20})
JSON.parse('{"a":10,"b":20}')
複製代碼
function Foo(name,age){
this.name=name
this.age=age
this.class='class-1'
// return this 默認有這一行
}
var f=new Foo('zhangsan',20)
// var f1=new Foo('lisi',22) 建立多個對象
複製代碼
var a={}
實際上是var a=new Object()
的語法糖var a=[]
實際上是var a=new Array()
的語法糖function Foo(){...}
實際上是var Foo=new Function(...)
instanceof
判斷一個函數是不是一個變量的構造函數🐖:判斷一個變量是否爲「數組」:變量 instanceof Array
linux
5條原型規則git
原型規則是學習原型鏈的基礎
全部的引用類型(數組、對象、函數),都具備對象特性,便可自由擴展屬性(除了「null」之外)
var obj={}; obj.a=100;
var arr=[]; arr.a=100;
function fn(){}
fn.a=100;
複製代碼
全部的引用類型(數組、對象、函數),都有一個__proto__
屬性,屬性值是一個普通的對象(🐖:即隱式原型)
console.log(obj.__proto__);
console.log(arr.__proto__);
console.log(fn.__proto__);
複製代碼
全部的函數,都有一個prototype
屬性,屬性值也是一個普通的對象(🐖:即顯示原型)
console.log(fn.prototype);
複製代碼
全部的引用類型(數組、對象、函數),__proto__
屬性值指向它的構造函數的「prototype
」屬性值
console.log(obj.__proto__===Object.prototype)
複製代碼
當試圖獲得一個對象的某個屬性時,若是這個對象自己沒有這個屬性,那麼會去它的__proto__
(即它的構造函數的prototype
)中尋找。
// 原型規則和示例
// 構造函數
function Foo(name,age){
this.name=name
}
Foo.prototype.alertName=function(){
alert(this.name)
}
// 建立示例
var f=new Foo('zhangsan')
f.printName=function(){
console.log(this.name)
}
// 測試
f.printName()
f.alertName()
複製代碼
var item
for(item in f){
// 高級瀏覽器已經在for in 中屏蔽了來自原型的屬性
// 可是這裏建議你們仍是加上這個判斷,保證程序的健壯性
if(f.hasOwnProperty(item)){
console.log(item)
}
}
複製代碼
f.toString() // 要去f.__proto__.__proto__中查找
複製代碼
🐖:用於判斷引用類型屬於哪一個構造函數的方法
f instanceof Foo
的判斷邏輯是:__proto__
一層一層往上,可否對應到Foo.prototypef instanceof Object
如何準確判斷一個變量是數組類型
var arr=[]
arr instanceof Array // true
typeof arr // object,typeof是沒法判斷是不是數組的
複製代碼
寫一個原型鏈繼承的例子
// 動物
function Animal(){
this.eat=function(){
console.log('animal eat')
}
}
// 狗
function Dog(){
this.bark=function(){
console.log('dog bark')
}
}
Dog.prototype=new Animal()
// 哈士奇
var hashiqi=new Dog()
// 接下來的代碼演示時,會推薦更加貼近實戰的原型鏈繼承示例!
複製代碼
描述new一個對象的過程
zepto(或其餘框架)源碼中如何使用原型鏈
// 封裝DOM查詢
function Elem(id) {
this.elem=document.getElementById(id)
}
Elem.prototype.html=function (val) {
var elem=this.elem
if (val) {
elem.innerHTML=val
return this; // 爲了鏈式操做
}else{
return elem.innerHTML
}
}
Elem.prototype.on=function (type,fn) {
var elem=this.elem
elem.addEventListener(type,fn)
return this
}
Elem.prototype.getStyle=function(elem,attr){
if (elem.currentStyle) {
return elem.currentStyle[attr]
}else {
return getComputedStyle(elem,false)[attr]
}
}
Elem.prototype.css=function (attr,val) {
var elem=this.elem
if (val) {
elem.style[attr]=val
return this
}else {
return this.getStyle(elem,attr)
}
}
var div1=new Elem('box')
div1.html('123').on('click',function () {
alert('click')
}).css('border','1px solid #f00');
複製代碼
<a>
標籤,點擊的時候彈出來對應的序號<script>
或者一個函數<script>
PS: 注意「函數聲明」和「函數表達式」的區別
var a={
name:'A',
fn:function(){
console.log(this.name);
}
}
a.fn() // this===a
a.fn.call({name:'B'}) // this==={name:'B'}
var fn1=a.fn
fn1() // this===window
複製代碼
// 無塊級做用域
if (true) {
var name='zhangsan'
}
console.log(name);
// 函數和全局做用域
var a=100
function fn(){
var a=200
console.log('fn',a)
}
console.log('global',a);
fn()
複製代碼
var a=100
function fn(){
var b=200
// 當前做用域沒有定義的變量,即「自由變量」
console.log(a);
console.log(b);
}
fn()
var a=100
function F1(){
var b=200
function F2(){
var c=200
console.log(a); // a是自由變量
console.log(b); // b是自由變量
console.log(c);
}
F2()
}
F1()
複製代碼
function F1(){
var a=100
// 返回一個函數(函數做爲返回值)
return function(){
console.log(a)
}
}
// f1獲得一個函數
var f1=F1()
var a=200
f1()
複製代碼
說一下對變量提高的理解
說明this幾種不一樣的使用場景
建立10個<a>
標籤,點擊的時候彈出來對應的序號 🐖:自執行函數,就是不用調用,只要定義完成,當即執行的函數
// 這是一個錯誤的寫法!!!
var i,a
for(i=0;i<10;i++){
a=document.createElement('a')
a.innerHTML=i+'<br>'
a.addEventListener('click',function(e){
e.preventDefault()
alert(i)
})
document.body.appendChild(a)
}
// 這是正確的寫法!!!
var i
for(i=0;i<10;i++){
(function(i){
var a=document.createElement('a')
a.innerHTML=i+'<br>'
a.addEventListener('click',function(e){
e.preventDefault()
alert(i)
})
document.body.appendChild(a)
})(i)
}
複製代碼
如何理解做用域
實際開發中閉包的應用
// 閉包實際開發中主要用於封裝變量,收斂權限
function isFirstLoad(){
var _list=[]
return function (id) {
if (_list.indexOf(id)>=0) {
return false
}else {
_list.push(id)
return true
}
}
}
// 使用
var firstLoad=isFirstLoad()
firstLoad(10) // true
firstLoad(10) // false
firstLoad(20) // true
複製代碼
console.log(100);
setTimeout(function(){
console.log(200);
},1000)
console.log(300);
複製代碼
console.log(100);
alert(200) // 1秒鐘以後點擊確認
console.log(300);
複製代碼
<img>
加載<img>
加載示例console.log('start');
var img=document.createElement('img')
img.onload=function(){
console.log('loaded');
}
img.src='/xxx.png'
console.log('end');
複製代碼
console.log('start');
document.getElementById('btn1').addEventListener('click',function(){
alert('clicked')
})
console.log('end');
複製代碼
// 示例1 定時器
console.log(100);
setTimeout(function(){
console.log(200);
},1000)
console.log(300);
複製代碼
// 示例2 ajax請求
console.log('start');
$.get('./data1.json',function(data1){
console.log(data1);
})
console.log('end');
複製代碼
同步和異步的區別是什麼?分別舉一個同步和異步的例子
一個關於setTimeout的筆試題
console.log(1);
setTimeout(function(){
console.log(2);
},0)
console.log(3);
setTimeout(function(){
console.log(4);
},1000)
console.log(5);
複製代碼
前端使用異步的場景有哪些
Date.now() // 獲取當前時間毫秒數
var dt=new Date()
dt.getTime() // 獲取毫秒數
dt.getFullYear() // 年
dt.getMonth() // 月(0-11)
dt.getDate() // 日(0-31)
dt.getHours() // 小時(0-23)
dt.getMinutes() // 分鐘(0-59)
dt.getSeconds() // 秒(0-59)
複製代碼
Math.random()
var arr=[1,2,3]
arr.forEach(function(item,index){
// 遍歷數組的全部元素
console.log(index,item);
})
複製代碼
var arr=[1,2,3]
var result=arr.every(function(item,index){
// 用來判斷全部的數組元素,都知足一個條件
if(item<4){
return true
}
})
console.log(result);
複製代碼
var arr=[1,2,3]
var result=arr.some(function(item,index){
// 用來判斷全部的數組元素,只要有一個知足條件便可
if(item<2){
return true
}
})
console.log(result);
複製代碼
var arr=[1,4,2,3,5]
var arr2=arr.sort(function(a,b){
// 從小到大排序
return a-b
// 從大到小排序
// return b-a
})
console.log(arr2);
複製代碼
var arr=[1,2,3,4]
var arr2=arr.map(function(item,index){
// 將元素從新組裝,並返回
return '<b>'+item+'</b>'
})
console.log(arr2);
複製代碼
var arr=[1,2,3]
var arr2=arr.filter(function(item,index){
// 經過某一個條件過濾數組
if(item>=2){
return true
}
})
console.log(arr2);
複製代碼
var obj={
x:100,
y:200,
z:300
}
var key
for (key in obj) {
// 注意這裏的hasOwnProperty,再講原型鏈的時候講過了
if (obj.hasOwnProperty(key)) {
console.log(key,obj[key]);
}
}
複製代碼
獲取2017-06-10格式的日期
function formatDate(dt){
if (!dt) {
dt=new Date()
}
var year=dt.getFullYear()
var month=dt.getMonth()+1
var date=dt.getDate()
if (month<10) {
// 強制類型轉換
month='0'+month
}
if (date<10) {
// 強制類型轉換
date='0'+date
}
// 強制類型轉換
return year+'-'+month+'-'+date
}
var dt=new Date()
var formatDate=formatDate(dt)
console.log(formatDate);
複製代碼
獲取隨機數,要求是長度一致的字符串格式
var random=Math.random()
var random=random+'0000000000' // 後面加上10個0
var random=random.slice(0,10)
console.log(random);
複製代碼
寫一個能遍歷對象和數組的通用forEach函數
function forEach(){
var key
if(obj instanceof Array){
// 準確判斷是否是數組
obj.forEach(function(item,index){
fn(index,item)
})
}else{
// 不是數組就是對象
for(key in obj){
fn(key,obj[key])
}
}
}
var arr=[1,2,3]
// 注意,這裏參數的順序換了,爲了和對象的遍歷格式一致
forEach(arr,function(index,item){
console.log(index,item);
})
var obj={x:100,y:200}
forEach(obj,function(key,value){
console.log(key,value);
})
複製代碼
Document Object Model
<!-- xml -->
<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Tove</to>
<from>Jani</form>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
<other>
<a></a>
<b></b>
</other>
</note>
<!-- html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<p>this is p</p>
</div>
</body>
</html>
複製代碼
DOM能夠理解爲:瀏覽器把拿到的html代碼,結構化一個瀏覽器能識別而且js可操做的一個模型而已。
var div1=document.getElementById('div1') // 元素
var divList=document.getElementsByTagName('div') // 集合
console.log(divList.length);
console.log(divList[0]);
var containerList=document.getElementsByClassName('.container') // 集合
var pList=document.querySelectorAll('p') // 集合
複製代碼
var pList=document.querySelectorAll('p') // 集合
var p=pList[0]
console.log(p.style.width); // 獲取樣式
p.style.width='100px' // 修改樣式
console.log(p.className); // 獲取class
p.className='p1' // 修改class
// 獲取nodeName和nodeType
console.log(p.nodeName);
console.log(p.nodeType);
複製代碼
var pList=document.querySelectorAll('p') // 集合
var p=pList[0]
p.getAttribute('data-name')
p.getAttribute('data-name','imooc')
p.getAttribute('style')
p.getAttribute('style','font-size:30px;')
複製代碼
var div1=document.getElementById('div1')
// 添加新節點
var p1=document.createElement('p')
p1.innerHTML='this is p1'
div1.appendChild(p1) // 添加新建立的元素
// 移動已有節點
var p2=document.getElementById('p2')
div1.appendChild(p2)
複製代碼
var div1=document.getElementById('div1')
var parent=div1.parentElement
var child=div1.childNodes
div1.removeChild(child[0])
複製代碼
var div1=document.getElementById('div1')
var child=div1.childNodes
div1.removeChild(child[0])
複製代碼
Browser Object Model
// navigator
var ua=navigator.userAgent
var isChrome=ua.indexOf('Chrome')
console.log(isChrome);
// screen
console.log(screen.width);
console.log(screen.height);
複製代碼
// location
console.log(location.href);
console.log(location.protocol); // 'http:','https:'
console.log(location.pathname); // '/learn/199'
console.log(location.search);
console.log(location.hash);
// history
history.back()
history.forward()
複製代碼
如何檢測瀏覽器的類型
拆解url的各部分
var btn=document.getElementById('btn1')
btn.addEventListener('click',function(event){
console.log('clicked');
})
function bindEvent(elem,type,fn){
elem.addEventListener(type,fn)
}
var a=document.getElementById('link1')
bindEvent(a,'click',function(e){
e.preventDefault() // 阻止默認行爲
alert('clicked')
})
複製代碼
<div id="div1">
<p id="p1">激活</p>
<p id="p2">取消</p>
<p id="p3">取消</p>
<p id="p4">取消</p>
</div>
<div id="div2">
<p id="5">取消</p>
<p id="6">取消</p>
</div>
<script> var p1 = document.getElementById('p1') var body = document.body bindEvent(p1, 'click', function (e) { e.stopPropatation() alert('激活') }) bindEvent(body, 'click', function (e) { alert('取消') }) </script>
複製代碼
<div id="div1">
<a href="#">a1</a>
<a href="#">a2</a>
<a href="#">a3</a>
<a href="#">a4</a>
<!-- 會隨時新增更多a標籤 -->
</div>
<script> var div1=document.getElementById('div1') div1.addEventListener('click',function(e){ var target=e.target if(target.nodeName==='A'){ alert(target.innetHTML) } }) </script>
複製代碼
// 使用代理
var div1=document.getElementById('div1')
bindEvent(div1,'click','a',function(e){
console.log(this.innerHTML);
})
// 不使用代理
var a=document.getElementById('a1')
bindEvent(div1,'click',function(e){
console.log(a.innerHTML);
})
複製代碼
var xhr=new XMLHttpRequest()
xhr.open('get','/api',false)
xhr.onreadystatechange=function () {
// 這裏的函數異步執行,可參考以前JS基礎中的異步模塊
if (xhr.readyState === 4) {
if (xhr.statusCode === 200) {
alert(xhr.responseText)
}
}
}
xhr.send(null)
複製代碼
xhr.readyState==4
什麼是跨域
能夠跨域的三個標籤
<img src=xxx>
<link href=xxxx>
<script src=xxx>
三個標籤的場景
<img>
用於打點統計,統計網站多是其餘域<link><script>
可使用CDN,CDN的也是其餘域<script>
能夠用於JSONP跨域的注意事項
JSONP實現原理
http://coding.m.imooc.com/classindex.html
<script src="http://coding.m.imooc.com/api.js">
http://coding.m.imooc.com/api.js
<script> window.callback=function(data){ // 這是咱們跨域獲得的信息 console.log(data); } </script>
<script src="http://coding.m.imooc.com/api.js"></script>
<!-- 以上將返回callback({x:100,y:200}) -->
複製代碼
服務器端設置http header
document.cookie=...
獲取和修改便可// util.js
function getFormatDate(date,type){
// type===1 返回2017-06-15
// type===2 返回2017年6月15日
// ...
}
// a-util.js
function aGetFormatDate(date){
// 要求返回2017年6月15日 格式
return getFormatDate(date,2)
}
// a.js
var dt=new Date()
console.log(aGetFormatDate(dt));
複製代碼
<script src="/static/js/jquery.js"></script>
<script>
時,會執行並阻塞渲染<script src="abc_1.js"></script>
<script src="abc_2.js"></script>
<script>
<
爲<
<img src=xxx.com/pay?id=100>