{ // url是用于请求的服务器URL url: '/user', // method是创建请求时使用的方法 method: 'get', // 默认是get方式 // baseURL将自动加在url的前面，除非url是一个绝对URL。 // 它可以通过设置一个baseURL，便于为axios实例的方法传递相对URL。 baseURL: 'https://some-domain.com/api/', // transformRequest允许在将请求数据发送到服务器之前对数据进行修改 // 只能用在'PUT'、'POST'、'PATCH' and 'DELETE'这些请求方法 // 数组中的最后一个函数必须返回字符串或Buffer，ArrayBuffer，FormData或Stream的实例 // You may modify the headers object. transformRequest: [function (data, headers) { // 对data进行任意转换处理 return data; }], // transformResponse在传递给then/catch前，运行修改响应数据 transformResponse: [function (data) { // 对data进行任意转换处理 return data; }], // headers是即将被发送的自定义请求头 headers: { 'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json' }, // params是即将与请求一起发送的URL参数 // 必须是一个无格式对象(plain object)或URLSearchParams对象 params: { ID: 12345 }, // paramsSerializer是用于序列化params的可选功能(e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/) paramsSerializer: function (params) { return Qs.stringify(params, {arrayFormat: 'brackets'}) }, // data是作为请求主体被发送的数据 // 只适用于'PUT'、'POST'、'DELETE'和'PATCH'请求方法 // 在没有设置transformRequest时, 必须是一下类型之一: // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams // - 浏览器专属: FormData, File, Blob // - Node专属: Stream, Buffer data: { firstName: 'Fred' }, // syntax alternative to send data into the body // method post // only the value is sent, not the key data: 'Country=Brasil&City=Belo Horizonte', // timeout指定请求超时的毫秒数(0表示无超时时间) // 如果请求花费超过timeout的时间, 请求将被中断 timeout: 1000, // 默认是`0` (no timeout) // withCredentials表示跨域请求时是否需要凭证 withCredentials: false, // 默认是false // adapter` allows custom handling of requests which makes testing easier. // Return a promise and supply a valid response (see lib/adapters/README.md). adapter: function (config) { /* ... */ }, // `auth` indicates that HTTP Basic auth should be used, and supplies credentials. // This will set an `Authorization` header, overwriting any existing // `Authorization` custom headers you have set using `headers`. // Please note that only HTTP Basic auth is configurable through this parameter. // For Bearer tokens and such, use `Authorization` custom headers instead. auth: { username: 'janedoe', password: 's00pers3cret' }, // responseType表示服务器响应的数据类型，可以是'arraybuffer', 'document', 'json', 'text', 'stream' // 浏览器专属: 'blob' responseType: 'json', // 默认是json // responseEncoding` indicates encoding to use for decoding responses (Node.js only) // Note: Ignored for `responseType` of 'stream' or client-side requests responseEncoding: 'utf8', // default // `xsrfCookieName` is the name of the cookie to use as a value for xsrf token xsrfCookieName: 'XSRF-TOKEN', // default // `xsrfHeaderName` is the name of the http header that carries the xsrf token value xsrfHeaderName: 'X-XSRF-TOKEN', // default // `onUploadProgress` allows handling of progress events for uploads // browser only onUploadProgress: function (progressEvent) { // Do whatever you want with the native progress event }, // `onDownloadProgress` allows handling of progress events for downloads // browser only onDownloadProgress: function (progressEvent) { // Do whatever you want with the native progress event }, // maxContentLength定义运行的响应内容的最大尺寸 maxContentLength: 2000, // `maxBodyLength` (Node only option) defines the max size of the http request content in bytes allowed maxBodyLength: 2000, // validateStatus` defines whether to resolve or reject the promise for a given HTTP response status code. 如果validateStatus返回true(或者设置为null或undefined), promise将被resolved; 否则promise将被rejected. validateStatus: function (status) { return status >= 200 && status < 300; // 默认是200~300 }, // maxRedirects定义在node.js中执行重定向的最大数目 // 如果设置为0，将不执行任何重定向。 maxRedirects: 5, // 默认是5 // `socketPath` defines a UNIX Socket to be used in node.js. // e.g. '/var/run/docker.sock' to send requests to the docker daemon. // Only either `socketPath` or `proxy` can be specified. // If both are specified, `socketPath` is used. socketPath: null, // default // `httpAgent` and `httpsAgent` define a custom agent to be used when performing http // and https requests, respectively, in node.js. This allows options to be added like // `keepAlive` that are not enabled by default. httpAgent: new http.Agent({ keepAlive: true }), httpsAgent: new https.Agent({ keepAlive: true }), // `proxy` defines the hostname and port of the proxy server. // You can also define your proxy using the conventional `http_proxy` and // `https_proxy` environment variables. If you are using environment variables // for your proxy configuration, you can also define a `no_proxy` environment // variable as a comma-separated list of domains that should not be proxied. // Use `false` to disable proxies, ignoring environment variables. // `auth` indicates that HTTP Basic auth should be used to connect to the proxy, and // supplies credentials. // This will set an `Proxy-Authorization` header, overwriting any existing // `Proxy-Authorization` custom headers you have set using `headers`. proxy: { host: '127.0.0.1', port: 9000, auth: { username: 'mikeymike', password: 'rapunz3l' } }, // `cancelToken` specifies a cancel token that can be used to cancel the request // (see Cancellation section below for details) cancelToken: new CancelToken(function (cancel) { }), // `decompress` indicates whether or not the response body should be decompressed // automatically. If set to `true` will also remove the 'content-encoding' header // from the responses objects of all decompressed responses // - Node only (XHR cannot turn off decompression) decompress: true // default}
2、响应结构
{ // data是由服务器提供的响应数据 data: {}, // status是来自服务器响应的HTTP状态码 status: 200, // statusText服务器响应的HTTP状态信息 statusText: 'OK', // headers是服务器响应的头，服务器使用所有标头名称响应的HTTP标头均使用小写字母，并且可以使用方括号表示法进行访问。 // 例如: `response.headers['content-type']` headers: {}, // config是为请求提供给axios的配置 config: {}, // `request` is the request that generated this response // It is the last ClientRequest instance in node.js (in redirects) // and an XMLHttpRequest instance in the browser request: {}}
1、AJAX(Asynchronous JavaScript and XML,异步的JS和XML)，最早出现在2005年的Google Suggest，是在浏览器端进行网络编程(发送请求，接收响应)的技术方案，它使我们可以通过JavaScript直接获取服务端最新的内容而不必重新加载页面，让web更能接近桌面应用的用户体验。
import React, {Component} from 'react'import logo from '../logo.svg'export default class App extends Component { render() { return( <div> <img className='logo' src={logo} alt="logo"/> <p className="title">react组件</p> </div> ) }}
src/index.js
import React from 'react'import ReactDOM from 'react-dom'import App from './components/app'import './index.css'ReactDOM.render(<App />, document.getElementById('root'))
import React from 'react'import ReactDOM from 'react-dom'import App from './components/app/app'ReactDOM.render(<App/>, document.getElementById('root'))
import React from 'react'import { render } from 'react-dom'import App from './components/app'import './index.css'render(<App />, document.getElementById('root'))
import React from 'react';import {render} from 'react-dom'import App from "./components/App"// 引入整体cssimport 'antd-mobile/dist/antd-mobile.css'render(<App />, document.getElementById('root'))
4) index.html
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /> <meta name="theme-color" content="#000000"> <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> <title>React ant design mobile</title> <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script> <script> if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { FastClick.attach(document.body); }, false); } if(!window.Promise) { document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>'); } </script> </head> <body> <noscript> You need to enable JavaScript to run this app. </noscript> <div id="root"></div> </body></html>
export default function counter(state = 0, action) { switch (action.type) { case 'INCREMENT': return state + action.data case 'DECREMENT': return state - action.data default: return state }}
3) 注意
a. 返回一个新的状态
b. 不要修改原来的状态
8.3.3 store
1) 将state,action与reducer联系在一起的对象
2) 如何得到此对象?
import {createStore} from 'redux'import reducer from './reducers'const store = createStore(reducer)
/*action creator模块 */import {INCREMENT, DECREMENT} from './action-types'export const increment = number => ({type: INCREMENT, number})export const decrement = number => ({type: DECREMENT, number})
8.4.5 src/redux/reducers.js
/*包含n个reducer函数的模块根据老的state和指定action, 处理返回一个新的state */import {INCREMENT, DECREMENT} from './action-types'export function counter(state = 0, action) { console.log('counter', state, action) switch (action.type) { case INCREMENT: return state + action.number case DECREMENT: return state - action.number default: return state }}
import React from 'react'import ReactDOM from 'react-dom'import {createStore} from 'redux'import App from './components/app'import {counter} from './redux/reducers'// 根据counter函数创建store对象const store = createStore(counter) // 内部会第一次调用reduer函数，得到初始state// 定义渲染根组件标签的函数const render = () => { ReactDOM.render( <App store={store}/>, document.getElementById('root') )}// 初始化渲染render()// 注册(订阅)监听, 一旦状态发生改变, 自动重新渲染store.subscribe(render)
也可以把index.js中store提取出来
src/redux/store.js
import {createStore} from 'redux'import {counter} from './reducers'// 根据counter函数创建store对象const store = createStore(counter) // // 内部会第一次调用reduer函数，得到初始stateexport default store
src/index.js
import React from 'react'import ReactDOM from 'react-dom'import App from './components/app'import store from './redux/store'// 定义渲染根组件标签的函数const render = () => { ReactDOM.render( <App store={store}/>, document.getElementById('root') )}// 初始化渲染render()// 注册(订阅)监听, 一旦状态发生改变, 自动重新渲染store.subscribe(render)
8.4.8 问题
1) redux与react组件的代码耦合度太高(大多数地方用到store)
2) 编码不够简洁
8.5 react-redux
8.5.1 理解
1) 一个react插件库
2) 专门用来简化react应用中使用redux
8.5.2 React-Redux将所有组件分成两大类
1) UI组件
a. 只负责 UI 的呈现，不带有任何业务逻辑
b. 通过props接收数据(一般数据和函数)
c. 不使用任何 Redux 的 API
d. 一般保存在components文件夹下
2) 容器组件
a. 负责管理数据和业务逻辑，不负责UI的呈现
b. 使用 Redux 的 API
c. 一般保存在containers文件夹下
8.5.3 相关API
1) Provider
让所有组件都可以得到state数据
<Provider store={store}> <App /></Provider>
2) connect()
用于包装 UI 组件生成容器组件
import { connect } from 'react-redux'connect( mapStateToprops, mapDispatchToProps)(Counter)
3) mapStateToprops()
将外部的数据（即state对象）转换为UI组件的标签属性
const mapStateToprops = function (state) { return { value: state }}
/*包含Counter组件的容器组件 */import React from 'react'// 引入连接函数import {connect} from 'react-redux'// 引入action函数import {increment, decrement} from '../redux/actions'import Counter from '../components/counter'// 向外暴露连接App组件的包装组件export default connect( state => ({count: state}), {increment, decrement})(Counter)
7) store.js
不变
8) index.js
import React from 'react'import ReactDOM from 'react-dom'import {Provider} from 'react-redux'import App from './containers/app'import store from './redux/store'// 定义渲染根组件标签的函数ReactDOM.render( ( <Provider store={store}> <App/> </Provider> ), document.getElementById('root'))
8.5.5 问题
1) redux默认是不能进行异步处理的, （前面的都是react实现的）
2) 应用中又需要在redux中执行异步任务(ajax, 定时器)
8.6 redux异步编程
8.6.1 下载redux插件(异步中间件)
npm install --save redux-thunk
8.6.2 redux/store.js
import React from 'react'import {createStore, applyMiddleware} from 'redux'import thunk from 'redux-thunk'import {composeWithDevTools} from 'redux-devtools-extension'import reducers from './reducers'// 根据counter函数创建store对象export default createStore( reducers, applyMiddleware(thunk) // 应用上异步中间件)
8.6.3 index.js
import React from 'react'import ReactDOM from 'react-dom'import {Provider} from 'react-redux'import App from './containers/app'import store from './redux/store'// 定义渲染根组件标签的函数ReactDOM.render( ( <Provider store={store}> <App/> </Provider> ), document.getElementById('root'))
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="theme-color" content="#000000"> <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> <title>React App</title> <link rel="stylesheet" href="/css/bootstrap.css"> </head> <body> <noscript> You need to enable JavaScript to run this app. </noscript> <div id="root"></div> </body></html>
src/index.js
import React from 'react'import ReactDOM from 'react-dom'import {Provider} from 'react-redux'import App from './components/app/app'import store from './redux/store'// 定义渲染根组件标签的函数ReactDOM.render( ( <Provider store={store}> <App/> </Provider> ), document.getElementById('root'))
import {combineReducers} from 'redux'import { ADD_COMMENT, DELETE_COMMENT, RECEIVE_COMMENTS} from './action-types'const initComments = []function comments(state = initComments, action) { switch (action.type) { case ADD_COMMENT: return [...state, action.data] case DELETE_COMMENT: return state.filter((c, index) => index !== action.data) case RECEIVE_COMMENTS: return action.data default: return state }}export default combineReducers({ comments})
redux/store.js
import React from 'react'import {createStore, applyMiddleware} from 'redux'import thunk from 'redux-thunk'import {composeWithDevTools} from 'redux-devtools-extension'import reducers from './reducers'// 根据counter函数创建store对象export default createStore( reducers, composeWithDevTools(applyMiddleware(thunk)) // 应用上异步中间件)
let obj = {username: 'luwang', age: 23}/** 之前的写法：简单拼串* 缺点：可能会拼错，效率低。比如，url携带10个参数，动态拼起来*/let str = 'My name is ' + obj.username + ', age is '+ obj.ageconsole.log(str)/** ES6提供的模板字符串*/str = `My name is ${obj.username} age is ${obj.age}`
function Person(name, age){ this.name = name this.age = age}let person = new Person('kobe', 39)console.log(person)
在类中通过 constructor() 定义构造方法(相当于构造函数)
// 定義一個人物的類class Person{ // 类的构造方法 constructor(name, age){ this.name = name this.age = age } // 类的一般方法 showMe(){ console.log(this.name) }}let person = new Person('kobe', 39)console.log(person)person.showName()
一般方法: xxx () {}
用extends来定义子类（实现累的继承）
用super()来调用父类的构造方法
子类方法自定义: 将从父类中继承来的方法重新实现一遍（重写从父类继承的一般方法）
// 定義一個人物的類class Person{ constructor(name, age){ this.name = name this.age = age } showMe(){ console.log('調用父類的方法') console.log(this.name, this.age) }}let person = new Person('kobe', 39)person.showMe()// 子類class StarPerson extends Person{ constructor(name, age, salary){ super(name, age) // 調用父類的構造方法 this.salary = salary } showMe(){ console.log('子類重寫的方法') console.log(this.name, this.age, this.salary) }}let p1 = new StarPerson('wade', 36, 10000000)console.log(p1)p1.showMe()
js中没有方法重载(方法名相同, 但参数不同)的语法
4、set/Map容器结构
容器: 能保存多个数据的对象, 同时必须具备操作内部数据的方法
任意对象都可以作为容器使用, 但有的对象不太适合作为容器使用(如函数)
Set的特点: 保存多个value, value是不重复 ====>数组元素去重
Map的特点: 保存多个key–value, key是不重复, value是可以重复的
API
Set容器：无序不可重复的多个value的集合体
Set()
Set(arr) //arr是一维数组
add(value)
delete(value)
clear()
has(value)
size
Map容器：无序的key、不重复的多个key-value的集合体
Map()
Map(arr)//arr是二维数组
set(key, value)
get(key)
delete(key)
clear()
has(key)
size
// let set = new Set()let set = new Set([1,2,4,5,2,3,6]) // 重复的会去除console.log(set)set.add(7)console.log(set.size, set)console.log(set.has(8))console.log(set.has(7))set.delete(7)console.log(set.size, set)set.clear()console.log(set.size, set)// let map = new Map()let map = new Map([['username', 'aaa'], ['age', 35], ['sex', 'female']]) // 二维数组，且只能有两值(一个是key，一个是value)map.set('other', 'shuoming')console.log(map.size, map)map.delete('other')console.log(map)console.log(map.has('username'))map.clear()console.log(map)
5、for–of循环
可以遍历任何容器（Set、Map）
let set = new Set([1, 2, 4, 3, 4, 5]) for(let i of set){ console.log(i)}// 可以用Set给数组去重let arr = [1,2,4,5,5,6,2]let arr1 = arrarr = [] // 保留数组类型let set = new Set(arr1)for(let i of set){ arr.push(i)}console.log(arr)
// 定义一个没有依赖的模块(function(win){ // 形参可以和实参的名字相同，这里方便区分 let name = 'dataservice.js' function getName(){ return name } win.dataService = {getName}})(window) // 实参
// 引入其他的模块// 语法： import xxx from '路径'import {foo, bar} from './module1'import {DATA_ARR} from './module1'import {fun1, fun2} from './module2'import module3 from './module3'/* import person from './module3' */// 安装 npm install jquery@1import $ from 'jquery'$('body').css('background', 'red')foo()bar()console.log(DATA_ARR);fun1()fun2()module3()/* person.setName('JACK')console.log(person.name); */
import $ from 'jquery'$('body').css('background', 'red')
五、ES7
1、async函数(源自ES2017)
概念：真正意义上去解决异步回调的问题，同步流程表达异步操作
本质：Generator的语法
语法：
async function foo(){ await 异步操作; await 异步操作;}
特点：
不需要像Generator去调用next方法，遇到await等待，当前的异步操作完成就往下执行
返回的总是Promise对象，可以用then方法进行下一步操作
async取代Generator函数的*，await取代Generator的yield
语义上更为明确，使用简单，暂时没有任何副作用
// async基本使用async function foo(){ return new Promise(resolve => { // setTimeout(function(){ // resolve() // }, 2000) // 可以写成下方这种 setTimeout(resolve, 2000) })}async function test(){ console.log('开始执行', new Date().toTimeString()) await foo() console.log('执行完毕', new Date().toTimeString())}test()
// async里await返回值 function test2(){ return ‘xxx’ } async function asyncPrint(){ /* let result = await test2() console.log(result) // 普通函数没有返回值 / / let result = await Promise.resolve() console.log(result) // Promise对象成功状态返回undefined */ let result = await Promise.resolve(‘promise’) console.log(result) // Promise对象成功状态传参返回参数 promise result = await Promise.reject(‘失败了……’) console.log(result) // 失败状态，返回出错，且能将参数返回 Uncaught (in promise) 失败了……
<body style="height: 2000px;"><div style="border:1px solid black;width:100px;height:150px;overflow:auto"> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. his is some text.</div><br><br><br><button id="btn1">得到scrollTop</button><button id="btn2">设置scrollTop</button><script src="js/jquery-1.10.1.js"></script><script> //1. 得到div或页面滚动条的坐标 $('#btn1').click(function () { console.log($('div').scrollTop()) // console.log($('html').scrollTop()+$('body').scrollTop()) console.log($(document.documentElement).scrollTop()+$(document.body).scrollTop()) // 兼容IE/Chrome }) //2. 让div或页面的滚动条滚动到指定位置 $('#btn2').click(function () { $('div').scrollTop(200) $('html,body').scrollTop(300) })</script></body>
var age = 18console.log(age)var obj = {name: 'Tom'}console.log(obj.name)function fn () { var obj = {name: 'Tom'}}var a = 3var b = a + 2
关于赋值与内存的问题
问题: var a = xxx, a内存中到底保存的是什么?
xxx是基本数据, 保存的就是这个数据
xxx是对象, 保存的是对象的地址值
xxx是一个变量, 保存的xxx的内存内容(可能是基本数据, 也可能是地址值)
var a = 3a = function () {}var b = 'abc'a = bb = {}a = b
关于引用变量赋值问题
2个引用变量指向同一个对象, 通过一个变量修改对象内部数据, 另一个变量看到的是修改之后的数据
2个引用变量指向同一个对象, 让其中一个引用变量指向另一个对象, 另一引用变量依然指向前一个对象
var obj1 = {name: 'Tom'}var obj2 = obj1obj2.age = 12console.log(obj1.age) // 12function fn (obj) { obj.name = 'A'}fn(obj1)console.log(obj2.name) //Avar a = {age: 12}var b = aa = {name: 'BOB', age: 13}b.age = 14console.log(b.age, a.name, a.age) // 14 Bob 13function fn2 (obj) { obj = {age: 15}}fn2(a)console.log(a.age) // 13
关于数据传递问题
问题: 在js调用函数时传递变量参数时, 是值传递还是引用传递
理解1: 都是值(基本/地址值)传递
理解2: 可能是值传递, 也可能是引用传递(地址值)
var a = 3function fn (a) { a = a +1}fn(a)console.log(a) // 3function fn2 (obj) { console.log(obj.name)}var obj = {name: 'Tom'}fn2(obj) // Tom
JS引擎如何管理内存
问题: JS引擎如何管理内存?
内存生命周期
分配小内存空间, 得到它的使用权
存储数据, 可以反复进行操作
释放小内存空间
释放内存
局部变量: 函数执行完自动释放
对象: 成为垃圾对象==>垃圾回收器回收
var a = 3var obj = {}obj = undefinedfunction fn () { var b = {}}fn() // b是自动释放, b所指向的对象是在后面的某个时刻由垃圾回收器回收
3、对象
什么是对象?
多个数据的封装体
用来保存多个数据的容器
一个对象代表现实中的一个事物
为什么要用对象?
统一管理多个数据
对象的组成
属性: 属性名(字符串)和属性值(任意)组成
方法: 一种特别的属性(属性值是函数)
如何访问对象内部数据?
.属性名: 编码简单, 有时不能用
['属性名']: 编码麻烦, 能通用
var p = { name: 'Tom', age: 12, setName: function (name) { this.name = name }, setAge: function (age) { this.age = age }}p.setName('Bob')p['setAge'](23)console.log(p.name, p['age'])
问题: 什么时候必须使用[‘属性名’]的方式?
属性名包含特殊字符: -空格
属性名不确定
var p = {}//1. 给p对象添加一个属性: content type: text/json// p.content-type = 'text/json' //不能用p['content-type'] = 'text/json'console.log(p['content-type'])//2. 属性名不确定var propName = 'myAge'var value = 18// p.propName = value //不能用p[propName] = valueconsole.log(p[propName])
全称: Immediately-Invoked Function Expression（立即执行函数）
作用
隐藏实现
不会污染外部(全局)命名空间
用它来编码js模块
(function () { //匿名函数自调用 var a = 3 console.log(a + 3)})()var a = 4console.log(a);(function () { var a = 1 function test () { console.log(++a) } window.$ = function () { // 向外暴露一个全局函数 return { test: test } }})()$().test() // 1.
7、函数中的this
this是什么?
任何函数本质上都是通过某个对象来调用的,如果没有直接指定就是window
所有函数内部都有一个变量this
它的值是调用函数的当前对象
如何确定this的值?
test(): window
p.test(): p
new test(): 新创建的对象
p.call(obj): obj
function Person(color) { console.log(this) this.color = color; this.getColor = function () { console.log(this) return this.color; }; this.setColor = function (color) { console.log(this) this.color = color; };}Person("red"); //this是谁? windowvar p = new Person("yello"); //this是谁? pp.getColor(); //this是谁? pvar obj = {};p.setColor.call(obj, "black"); //this是谁? objvar test = p.setColor;test(); //this是谁? windowfunction fun1() { function fun2() { console.log(this); } fun2(); //this是谁? window}fun1();
二、函数高级
超级重点，两大神兽：==原型和闭包==
1、原型和原型链
(1) 原型
函数的prototype属性(图)
每个函数都有一个prototype属性, 它默认指向一个Object空对象(即称为: 原型对象)
原型对象中有一个属性constructor, 它指向函数对象
给原型对象添加属性(一般都是方法)
作用: 函数的所有实例对象自动拥有原型中的属性(方法)
// 每个函数都有一个prototype属性, 它默认指向一个Object空对象(即称为: 原型对象)console.log(Date.prototype, typeof Date.prototype)function Fun () {//alt + shift +r(重命名rename)}console.log(Fun.prototype) // 默认指向一个Object空对象(没有我们的属性)// 原型对象中有一个属性constructor, 它指向函数对象console.log(Date.prototype.constructor===Date)console.log(Fun.prototype.constructor===Fun)//给原型对象添加属性(一般是方法) ===>实例对象可以访问Fun.prototype.test = function () { console.log('test()')}var fun = new Fun()fun.test()
/* 测试题1: 先执行变量提升, 再执行函数提升(先找var和function xxx(){}) */function a() {}var aconsole.log(typeof a) // function
/* 测试题2: 先提出去，window中有b，且未赋值 */if (!(b in window)) { var b = 1}console.log(b) // undefined
/* 测试题3: 针对变量名同名或函数名同名的情况：如果声明了同名的函数其定义会被后者覆盖，声明了同名的变量其值也会被后者覆盖 */var c = 1function c(c) { console.log(c) var c = 3}console.log(c) // 1c(2) // 报错 Uncaught TypeError: c is not a function再看一个//声明阶段function x(){//函数声明 //console.log(5)此句会被下句代码覆盖 console.log(3)}var x;//变量声明，因为x已经声明过了，此处不进行声明（忽略）//执行阶段console.log(x) // ƒ x(){//函数声明//console.log(5);此句会被下句代码覆盖console.log(3);}console.log(x()) // 3x=1 x=100 //x的值被覆盖console.log(x) // 100console.log(x()) // Uncaught TypeError: x is not a function
3、作用域与作用域链
(1) 作用域
理解
就是一块”地盘”, 一个代码段所在的区域
它是静态的(相对于上下文对象), 在编写代码时就确定了
分类
全局作用域
函数作用域
没有块作用域(ES6有了)
/* //没块作用域if(true) {var c = 3}console.log(c) // 3 有块作用域则报错*/
作用
隔离变量，不同作用域下同名变量不会有冲突
例如把如下代码分割
var a = 10, b = 20function fn(x) { var a = 100, c = 300; console.log('fn()', a, b, c, x) function bar(x) { var a = 1000, d = 400 console.log('bar()', a, b, c, d, x) } bar(100) // bar() 1000 20 300 400 100 bar(200) // bar() 1000 20 300 400 200}fn(10) // fn() 100 20 300 10
(2) 作用域与执行上下文
区别1
全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时就已经确定了。而不是在函数调用时
全局执行上下文环境是在全局作用域确定之后, js代码马上执行之前创建
函数执行上下文是在调用函数时, 函数体代码执行之前创建
区别2
作用域是静态的, 只要函数定义好了就一直存在, 且不会再变化
执行上下文是动态的, 调用函数时创建, 函数调用结束时就会自动释放
联系
执行上下文(对象)是从属于所在的作用域
全局上下文环境==>全局作用域
函数上下文环境==>对应的函数使用域
还是上面那串代码
(3) 作用域链
理解
多个上下级关系的作用域形成的链, 它的方向是从下向上的(从内到外)
查找变量时就是沿着作用域链来查找的
查找一个变量的查找规则
在当前作用域下的执行上下文中查找对应的属性, 如果有直接返回, 否则进入2
在上一级作用域的执行上下文中查找对应的属性, 如果有直接返回, 否则进入3
再次执行2的相同操作, 直到全局作用域, 如果还找不到就抛出找不到的异常
var a = 1function fn1() { var b = 2 function fn2() { var c = 3 console.log(c) // 3 console.log(b) // 2 console.log(a) // 1 console.log(d) // Uncaught ReferenceError: d is not defined } fn2()}fn1()
(4) 面试题
var x = 10;function fn() { console.log(x);}function show(f) { var x = 20; f();}show(fn); // 10
var fn = function () { console.log(fn)}fn() // f(){console.log(fn)}var obj = { fn2: function () { console.log(fn2) //console.log(this.fn2) // ƒ () {// console.log(fn2) console.log(this.fn2)} }}obj.fn2() // Uncaught ReferenceError: fn2 is not defined
4、闭包
(1) 引入实例
<button>测试1</button><button>测试2</button><button>测试3</button><!--需求: 点击某个按钮, 提示"点击的是第n个按钮"--><script type="text/javascript"> var btns = document.getElementsByTagName('button') //遍历加监听 /*// 无论点哪个都是 第4个 ——点击的时候循环已经执行完了 for (var i = 0,length=btns.length; i < length; i++) { var btn = btns[i] btn.onclick = function () { alert('第'+(i+1)+'个') } }*/ /* for (var i = 0,length=btns.length; i < length; i++) { var btn = btns[i] //将btn所对应的下标保存在btn上，利用这中方式可以实现 btn.index = i btn.onclick = function () { alert('第'+(this.index+1)+'个') } }*/ //利用闭包 for (var i = 0,length=btns.length; i < length; i++) { (function (j) { var btn = btns[j] btn.onclick = function () { alert('第'+(j+1)+'个') } })(i) }</script>
(2) 理解闭包
如何产生闭包?
当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时, 就产生了闭包
闭包到底是什么?
使用chrome调试查看
理解一: 闭包是嵌套的内部函数(绝大部分人)
理解二: 包含被引用变量(函数)的对象(极少数人)
注意: 闭包存在于嵌套的内部函数中
产生闭包的条件?
函数嵌套
内部函数引用了外部函数的数据(变量/函数)
function fn1 () { var a = 2 var b = 'abc' function fn2 () { //执行函数定义就会产生闭包(不用调用内部函数) console.log(a) } // fn2()}fn1()function fun1() { var a = 3 var fun2 = function () { // 声明变量形式定义函数，不会产生闭包 console.log(a) }}fun1()
(3) 常见的闭包
将函数作为另一个函数的返回值
将函数作为实参传递给另一个函数调用
// 1. 将函数作为另一个函数的返回值function fn1() { var a = 2 function fn2() { a++ console.log(a) } return fn2}var f = fn1()f() // 3f() // 4/* f调用的是内部函数，fn1外部函数执行了一次，产生1个闭包 */// 2. 将函数作为实参传递给另一个函数调用function showDelay(msg, time) { setTimeout(function () { alert(msg) }, time)}showDelay('test', 2000)
(4) 闭包的作用
使用函数内部的变量在函数执行完后, 仍然存活在内存中(延长了局部变量的生命周期)
让函数外部可以操作(读写)到函数内部的数据(变量/函数)
问题:
函数执行完后, 函数内部声明的局部变量是否还存在?
一般是不存在, 存在于闭中的变量才可能存在
在函数外部能直接访问函数内部的局部变量吗?
不能, 但我们可以通过闭包让外部操作它
function fn1() { var a = 2 function fn2() { a++ console.log(a) // return a } function fn3() { a-- console.log(a) } return fn3}var f = fn1()f() // 1f() // 0
(5) 闭包的生命周期
产生: 在嵌套内部函数定义执行完时就产生了(不是在调用)
死亡: 在嵌套的内部函数成为垃圾对象时
function fn1() { //此时闭包就已经产生了(函数提升, 内部函数对象已经创建了) var a = 2 function fn2 () { a++ console.log(a) } return fn2}var f = fn1()f() // 3f() // 4f = null //闭包死亡(包含闭包的函数对象成为垃圾对象)
(6) 闭包的应用: 自定义JS模块
模块：
具有特定功能的js文件
将所有的数据和功能都封装在一个函数内部(私有的)
只向外暴露一个包括n个方法的对象或函数
模块的使用者, 只需要通过模块暴露的对象调用方法来实现对应的功能
例如：
文件myModule1.js就是一个模块
function myModule() { //私有数据 var msg = 'Hello This is Module1' //操作数据的函数 function doSomething() { console.log('doSomething() '+msg.toUpperCase()) } function doOtherthing () { console.log('doOtherthing() '+msg.toLowerCase()) } //向外暴露对象(给外部使用的方法) return { doSomething: doSomething, doOtherthing: doOtherthing }}
在其他文件中引入
<script type="text/javascript" src="myModule.js"></script><script type="text/javascript"> var module = myModule() module.doSomething() module.doOtherthing()</script>
下面这种更好用一点，可以不需要先执行那个函数（IIFE）
myModule2.js
(function () { //私有数据 var msg = 'Hello This is Module1' //操作数据的函数 function doSomething() { console.log('doSomething() '+msg.toUpperCase()) } function doOtherthing () { console.log('doOtherthing() '+msg.toLowerCase()) } //向外暴露对象(给外部使用的方法) window.myModule2 = { doSomething: doSomething, doOtherthing: doOtherthing }})()
var a = 30var b = 20var c = 10a > b ? alert('a大') : alert("b大")// 获取a和b中的较大值var max = a > b ? a : b// 获取a、b、c中的最大值max = max > c ? max : c// 也可以放到一起，但是不推荐使用，不方便阅读var max = a > b ? (a > c ? a : c) : (b > c ? b :c)
(9) 逗号运算符
使用,可以分割多个语句，一般可以在声明多个变量时使用
// 使用逗号运算符同时声明多个变量var a, b, c// 可以同时声明多个变量并赋值var a = 1, b = 2, c = 3alert(b)
/*switch(parseInt(score/10)){ case 10: case 9: case 8: console.log("优秀"); break; case 7: case 6: console.log("合格"); break; default: console.log("不合格"); break;}*/switch(true){ case score >= 60: console.log("合格"); break; default: console.log("不合格"); break;}
var c = 10var d = 10console.log(c == d)var obj3 = new Object()var obj4 = new Object()obj3.name = "张三"obj4.name = "张三"console.log(obj3, obj4, obj3==obj4)
对象字面量
/* 创建一个对象 */// var obj = new Object()/* 使用对象字面量来创建一个对象 */var obj = {}console.log(typeof obj)obj.name = "张三"console.log(obj.name)
// 没有var a时console.log(a) // 报错Uncaught ReferenceError: a is not defined--------------------------------------------------------------// 提前声明，相当于在这里 var aconsole.log(a) // undefinedvar a = 1 // 这里a=1console.log(a) // 1
function Person(){}var per = new Person()console.log(per)
构造函数的执行流程：
立刻创建一个新的对象
将新建的对象设置为函数中的this，在构造函数中可以使用this来引用新建的对象
逐行执行函数中的代码
将新建的对象作为返回值返回
function Person(name, age, gender){ this.name = name this.age = age this.gender = gender this.sayName = function(){ alert(this.name) }}var zbj = new Person("猪八戒",1030,"男")var lcg = new Person("李长庚",11030,"男")var ce = new Person("嫦娥",18,"女")console.log(zbj)console.log(lcg)console.log(ce)
function MyClass(){}MyClass.prototype.a = 123var mc = new MyClass()var mc2 = new MyClass()var mc3 = new MyClass()mc.a = "我是mc中的a"console.log(mc.a) // 由于mc中自己有a，因此输出自己的 我是mc中的aconsole.log(mc2.a)console.log(mc3.a) // 这两个自己没有a，因此会到原型中去找，找到了则输出 123
function Person(name, age, gender){ this.name = name this.age = age this.gender = gender}var per = new Person("张三", 21, "男")var result = per.toString()console.log("result="+result) // result=[object Object]console.log(per.__proto__.__proto__.hasOwnProperty("toString")) // true
/*函数参数可选，可以利用arguments来判断 arr：数组 length：长度，可选参数 callback：回调函数*/function(){ var arr = arguments[0] if(arguments.length==2){ var fun = arguments[1] fun() } if(arguments.length==3){ var length = arguments[1] var fun = arguments[2] fun() }}
25、Date()对象
在js中使用Date对象来表示一个时间
// 创建一个Date对象var d = new Date()console.log(d) // Mon Apr 13 2020 09:09:04 GMT+0800 (中国标准时间)
如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间
创建一个指定的时间对象，需要在构造函数中传递一个表示时间的字符串作为参数
日期的格式： 月份/日/年 时:分:秒
var d2 = new Date("4/16/2020 09:09:04") console.log(d2) // Thu Apr 16 2020 09:09:04 GMT+0800 (中国标准时间)
var btn = document.querySelector("#btn")var body = document.bodyvar html = document.documentElementvar all = document.allvar box = document.getElementsByClassName("box")[0]
var allA = document.getElementsByTagName("a")for(var i=0; i<allA.length; i++){ allA[i].onclick = function(){ alert(i) // 一直是3 return false }}
可以用this来解决，添加之后删除，由于绑定删除是之前的，因此需要单独绑定
删除和添加员工
<script> /* 删除员工 */ var allA = document.getElementsByTagName("a") for(var i=0; i<allA.length; i++){ allA[i].onclick = function(){ var tr = this.parentNode.parentNode // var name = tr.getElementsByTagName("td")[0].innerText var name = tr.children[0].innerHTML // alert("确认删除吗？") /* window对象中的方法，找到confirm，这是用于弹出一个带有确认和取消按钮的提示框，字符串(提示文字)作为参数，点击确认返回true，点击取消返回false */ var flag = confirm("确认删除" +name+ "吗？") // firstChild会找第一个节点，空格也是 if(flag){ tr.parentNode.removeChild(tr) } // 取消默认行为 return false } } /* 添加员工 */ addEmpButton.onclick = function(){ var name = document.getElementById("empName").value var email = document.getElementById("email").value var salary = document.getElementById("salary").value // console.log(name,email,salary) /* <tr> <td>Bob</td> <td>bob@tom.com</td> <td>10000</td> <td><a href="deleteEmp?id=003">Delete</a></td> </tr> */ var tr = document.createElement("tr") var nameTd = document.createElement("td") var emailTd = document.createElement("td") var salaryTd = document.createElement("td") var aTd = document.createElement("td") var a = document.createElement("a") // 文本节点 var nameText = document.createTextNode(name) var emailText = document.createTextNode(email) var salaryText = document.createTextNode(salary) var delText = document.createTextNode("Delete") // 将文本插入到td中 nameTd.appendChild(nameText) emailTd.appendChild(emailText) salaryTd.appendChild(salaryText) a.appendChild(delText) a.href = "javascript:;" a.onclick = function(){ var tr = this.parentNode.parentNode var name = tr.children[0].innerHTML var flag = confirm("确认删除" +name+ "吗？") if(flag){ tr.parentNode.removeChild(tr) } return false } aTd.appendChild(a) // 将td添加到tr中 tr.appendChild(nameTd) tr.appendChild(emailTd) tr.appendChild(salaryTd) tr.appendChild(aTd) // 插入到table // employeeTable.appendChild(tr) // 事实上tr在tbody中 employeeTable.getElementsByTagName("tbody")[0].appendChild(tr) }</script>
由于删除的有相同代码，可以提出来
function delA(){ var tr = this.parentNode.parentNode // var name = tr.getElementsByTagName("td")[0].innerText var name = tr.children[0].innerHTML // alert("确认删除吗？") /* window对象中的方法，找到confirm，这是用于弹出一个带有确认和取消按钮的提示框，字符串(提示文字)作为参数，点击确认返回true，点击取消返回false */ var flag = confirm("确认删除" +name+ "吗？") // firstChild会找第一个节点，空格也是 if(flag){ tr.parentNode.removeChild(tr) } // 取消默认行为 return false}删除员工中allA[i].onclick = delA添加员工中a.onclick = delA
增加的使用appendChild和innerHTML配合更简单一点
/* 添加员工 */addEmpButton.onclick = function(){ var name = document.getElementById("empName").value var email = document.getElementById("email").value var salary = document.getElementById("salary").value var tr = document.createElement("tr") tr.innerHTML = "<td>"+name+"</td>"+ "<td>"+email+"</td>"+ "<td>"+salary+"</td>"+ "<td><a href='javascript:;'>Delete</a></td>" var a = tr.getElementsByTagName("a")[0] a.onclick = delA var tbody = employeeTable.getElementsByTagName("tbody")[0] tbody.appendChild(tr) // tbody.innerHTML += tr // 这样就不太合适了，会影响前面已有的}
<style type="text/css"> #info{ width: 300px; height: 500px; background-color: #bfa; overflow: auto; }</style><h3>欢迎亲爱的用户注册</h3><p id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet, doloremque. Ea tempora consequuntur mollitia corrupti. Commodi iusto ducimus deleniti, ratione quam, harum fugit autem omnis nihil dolorem fuga, sequi eligendi excepturi expedita tenetur accusamus! In eaque voluptate inventore commodi a? Unde provident tempore, dolorem deserunt numquam reiciendis eum vero. Aut ipsum, dolorem doloribus nemo molestiae exercitationem deserunt amet quod voluptatibus expedita ex architecto, cum culpa fuga dolore. Ratione perspiciatis soluta, facilis temporibus, error laudantium nostrum facere doloremque natus sint cum esse incidunt officiis eum officia velit ab illo perferendis distinctio enim voluptas tempore? Reiciendis, itaque cupiditate? Totam mollitia tenetur labore neque possimus vero porro modi iure atque reiciendis fugit iste, omnis, magnam rem animi adipisci tempore repellendus iusto fugiat voluptatum consequuntur excepturi. Similique vel praesentium quo quam at. Veniam, neque nostrum, minima ex assumenda perferendis aliquam cum, molestiae culpa repellat explicabo? Sapiente, placeat eligendi voluptas velit beatae accusantium minus culpa reprehenderit similique, corporis eum neque tempore expedita iure, adipisci molestias. Quidem, sapiente temporibus deserunt nobis architecto incidunt ipsam. Provident distinctio accusamus quaerat inventore ex, omnis excepturi temporibus quod alias possimus maxime nesciunt odio aperiam error quia? Neque rem eos a perferendis repellat repudiandae reprehenderit reiciendis molestiae ullam! Nihil, illum odio!</p><!-- 如果为表单项添加disabled="disabled" 则表单项将变成不可用的状态 --><input type="checkbox" disabled="disabled" />我已仔细阅读协议，一定遵守<input type="submit" value="注册" disabled="disabled" /><script type="text/javascript"> window.onload = function(){ /* * 当垂直滚动条滚动到底时使表单项可用 */ //获取id为info的p元素 var info = document.getElementById("info") //获取两个表单项 var inputs = document.getElementsByTagName("input") //为info绑定一个滚动条滚动的事件 info.onscroll = function(){ //检查垂直滚动条是否滚动到底 if(info.scrollHeight - info.scrollTop == info.clientHeight){ //滚动条滚动到底，使表单项可用 /* * disabled属性可以设置一个元素是否禁用， * 如果设置为true，则元素禁用 * 如果设置为false，则元素可用 */ inputs[0].disabled = false inputs[0].onclick = function(){ // 只有到底了才能能点复选框，点了复选框才能点按钮 if(inputs[0].checked){ inputs[1].disabled = false } } } } }</script>
console.log(navigator.userAgent)火狐的userAgent："Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:78.0) Gecko/20100101 Firefox/78.0"Chrome的userAgent："Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36"IE11"Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; Tablet PC 2.0; rv:11.0) like Gecko"IE10"Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; Tablet PC 2.0)"IE9"Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; Tablet PC 2.0)"IE8"Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; Tablet PC 2.0)"
根据UA来判断
var ua = navigator.userAgentconsole.log(ua)if(/firefox/i.test(ua)){ alert("你是火狐")}else if(/chrome/i.test(ua)){ alert("你是Chrome")}else if(/msie/i.test(ua)){ alert("woc，你是IE")}
如果通过userAgent不能判断，还可以通过一些浏览器中特有的对象，来判断浏览器的信息
比如：ActiveXObject
if("ActiveXObject" in window){ alert("你是IE，我已经抓住你了~~~");}else{ alert("你不是IE~~~");}/*alert("ActiveXObject" in window);*/if(/firefox/i.test(ua)){ alert("你是火狐")}else if(/chrome/i.test(ua)){ alert("你是Chrome")}else if(/msie/i.test(ua)){ alert("woc，你是IE")} else if("ActiveXObject" in window){ alert("你是IE11，还好");}
对象A->对象B: 对象B你好吗?（请求）Note right of 对象B: 对象B的描述Note left of 对象A: 对象A的描述(提示)对象B-->对象A: 我很好(响应)对象A->对象B: 你真的好吗？
UML时序图源码复杂样例：
Title: 标题：复杂使用对象A->对象B: 对象B你好吗?（请求）Note right of 对象B: 对象B的描述Note left of 对象A: 对象A的描述(提示)对象B-->对象A: 我很好(响应)对象B->小三: 你好吗小三-->>对象A: 对象B找我了对象A->对象B: 你真的好吗？Note over 小三,对象B: 我们是朋友participant CNote right of C: 没人陪我玩
UML标准时序图样例：
%% 时序图例子,-> 直线，-->虚线，->>实线箭头 sequenceDiagram participant 张三 participant 李四 张三->王五: 王五你好吗？ loop 健康检查 王五->王五: 与疾病战斗 end Note right of 王五: 合理 食物 <br/>看医生... 李四-->>张三: 很好! 王五->李四: 你怎么样? 李四-->王五: 很好!
甘特图样例：
%% 语法示例 gantt dateFormat YYYY-MM-DD title 软件开发甘特图 section 设计 需求 :done, des1, 2014-01-06,2014-01-08 原型 :active, des2, 2014-01-09, 3d UI设计 : des3, after des2, 5d 未来任务 : des4, after des3, 5d section 开发 学习准备理解需求 :crit, done, 2014-01-06,24h 设计框架 :crit, done, after des2, 2d 开发 :crit, active, 3d 未来任务 :crit, 5d 耍 :2d section 测试 功能测试 :active, a1, after des3, 3d 压力测试 :after a1 , 20h 测试报告 : 48h
/* This is the overall wrapper, it should be treated as the `body` section. */.markdown-here-wrapper { font-size: 14px; color: #595959; padding: 16px;}
注释中说这个相当于body标签，而我们的内容基本上都放在这里面，因此可以修改大部分统一的样式
这里将字体修改为14像素
字体颜色设置为#595959，也就是稍微灰一点
向内缩进16像素
预格式文本及代码
pre, code { font-size: 0.85em; font-family: Consolas, Inconsolata, Courier, monospace; color:#fff;}code { margin: 0 0.15em; padding: 0 0.3em; white-space: pre-wrap; border: 1px solid #EAEAEA; background-color: black; border-radius: 3px; display: inline; /* added to fix Yahoo block display of inline code */}pre { font-size: 1em; line-height: 1.2em;}pre code { white-space: pre; overflow: auto; /* fixes issue #70: Firefox/Thunderbird: Code blocks with horizontal scroll would have bad background colour */ border-radius: 3px; border: 1px solid #CCC; padding: 0.5em 0.7em; display: block !important; /* added to counteract the Yahoo-specific `code` rule; without this, code blocks in Blogger are broken */}/* In edit mode, Wordpress uses a `* { font: ...;} rule+style that makes highlightedcode look non-monospace. This rule will override it. */.markdown-here-wrapper[data-md-url*="wordpress."] code span { font: inherit;}/* Wordpress adds a grey background to `pre` elements that doesn't go well withour syntax highlighting. */.markdown-here-wrapper[data-md-url*="wordpress."] pre { background-color: transparent;}
段落
/* This spacing has been tweaked to closely match Gmail+Chrome "paragraph" (two line breaks) spacing.Note that we only use a top margin and not a bottom margin -- this prevents the"blank line" look at the top of the email (issue #243).*/p { /* !important is needed here because Hotmail/Outlook.com uses !important to kill the margin in <p>. We need this to win. */ margin: 0 0 1.2em 0 !important;}
每个段落在下方加外边距1.2个文字大小，即1.2*14px
表格、引用、列表等
table, pre, dl, blockquote, q, ul, ol { margin: 1.2em 0;}ul, ol { padding-left: 2em;}li { margin: 0.5em 0;}/* Space paragraphs in a list the same as the list itself. */li p { /* Needs !important to override rule above. */ margin: 0.5em 0 !important;}/* Smaller spacing for sub-lists */ul ul, ul ol, ol ul, ol ol { margin: 0; padding-left: 1em;}/* Use Roman numerals for sub-ordered-lists. (Like Github.) */ol ol, ul ol { list-style-type: lower-roman;}/* Use letters for sub-sub-ordered lists. (Like Github.) */ul ul ol, ul ol ol, ol ul ol, ol ol ol { list-style-type: lower-alpha;}dl { padding: 0;}dl dt { font-size: 1em; font-weight: bold; font-style: italic;}dl dd { margin: 0 0 1em; padding: 0 1em;}blockquote, q { border-left: 4px solid #42b983; border-right: 4px solid #42b983; padding: 0 1em; background-color: #ecf8f2; color: #888; quotes: none;}/*blockquote::before, q::before { content: none;}blockquote::after, q::after{ position: relative; content: '\f10e' !important; font-size: 1rem; float: right; top: -1rem; margin-right: -10px; color: red; font-family: FontAwesome;} // emmmm，本来想加引号的，但是不支持*/table { padding: 0; border-collapse: collapse; border-spacing: 0; font-size: 1em; font: inherit; border: 0;}tbody { margin: 0; padding: 0; border: 0;}table tr { border: 0; border-top: 1px solid #CCC; background-color: white; margin: 0; padding: 0;}table tr:nth-child(2n) { background-color: #F8F8F8;}table tr th, table tr td { font-size: 1em; border: 1px solid #CCC; margin: 0; padding: 0.5em 1em;}table tr th { font-weight: bold; color: white; background-color: #009688;}
// 定义 data-单词-单词<p data-test-a='AreYouOK'>test</p><script>window.onload = function(){ var p = document.querySelector('p') // 获取自定义属性值 var value = p.dataset['testA'] // 将data-后面的单词使用camel命名法连接 console.log(value);}</script>
