碎知識(shí)

forEach妥衣、for in、for歉备、for of循環(huán)的區(qū)別

for循環(huán)---編程式
forEach循環(huán)---聲明式（不關(guān)心如何實(shí)現(xiàn)）谈竿、不支持return
for in循環(huán)---key會(huì)變成字符串，包括私有屬性也能打印出來
for of循環(huán)---（value of arr）支持return沮尿、不能遍歷對(duì)象

JS,Jquery獲取各種屏幕的寬度和高度

Javascript:

網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth
網(wǎng)頁可見區(qū)域高： document.body.clientHeight
網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬)
網(wǎng)頁可見區(qū)域高： document.body.offsetHeight (包括邊線的高)
網(wǎng)頁正文全文寬： document.body.scrollWidth
網(wǎng)頁正文全文高： document.body.scrollHeight
網(wǎng)頁被卷去的高： document.body.scrollTop
網(wǎng)頁被卷去的左： document.body.scrollLeft
網(wǎng)頁正文部分上： window.screenTop
網(wǎng)頁正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的寬： window.screen.width
屏幕可用工作區(qū)高度： window.screen.availHeight
屏幕可用工作區(qū)寬度： window.screen.availWidth

JQuery:

$(document).ready(function(){ alert($ (window).height()); //瀏覽器當(dāng)前窗口可視區(qū)域高度
alert( $(document).height()); //瀏覽器當(dāng)前窗口文檔的高度 alert($ (document.body).height());//瀏覽器當(dāng)前窗口文檔body的高度
alert($(document.body).outerHeight(true));//瀏覽器當(dāng)前窗口文檔body的總高度包括border padding margin

alert( $(window).width()); //瀏覽器當(dāng)前窗口可視區(qū)域?qū)挾?alert($ (document).width());//瀏覽器當(dāng)前窗口文檔對(duì)象寬度
alert( $(document.body).width());//瀏覽器當(dāng)前窗口文檔body的寬度 alert($ (document.body).outerWidth(true));//瀏覽器當(dāng)前窗口文檔body的總寬度包括border padding margin

})

es6編譯成es5

1丛塌、安裝babel核心包
npm install babel-core --save-dev;
2、安裝babel的解析器
npm install babel-loader --save-dev
3畜疾、解析es6的工具
npm install babel-preset-es2015 --save-dev
創(chuàng)建一個(gè).babelrc 文件
{"presets":["es2015","stage-0"]}

解析es7語法的
npm install babel-preset-stage-0 --save-dev

解析樣式
1) - css-loader將css解析成模塊赴邻，將解析的內(nèi)容插入到style標(biāo)簽內(nèi)(style-loader)
npm install css-loader style-loader --save-dev
2) ## less,sass,stylus(預(yù)處理語言)
- less-loader less
- sass-loader
- stylus-loader
npm install less less-loader --save-dev

es6模塊

es6的模塊導(dǎo)入

import * as d from './a.js'

es6的模塊導(dǎo)出

export let a = 100;
export let b = 200;

安裝webpack（common.js）

1、初始化：npm. init -y
2啡捶、安裝：npm.install webpack@3.8.1 --save-dev
3姥敛、起服務(wù)：yarn add webpack webpack-dev-server
4、babel-core 和babel-loader：中心包（什么都不會(huì)）
5瞎暑、編譯es6： babel-preset-es2015
6彤敛、編譯es7：babel-preset-stage-0
7与帆、解析react：babel-preset-react（需要安裝react：yarn add react react-dom）
8、編譯less：less-loader（記得安裝less）
9墨榄、編譯css：css-loader
10玄糟、編譯style：style-loader
11、圖片：file-loader和url-loader
12渠概、html-webpack-plugin --dev

let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    enter:'./src/index.js',//入口
    output:{
        filename:'build.js',//打包后的文件名字
        path:require('path').resoolve('./dist')//給你個(gè)相對(duì)路徑茶凳，還我個(gè)絕對(duì)路徑
    },
    module:{
        rules:[
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},//exclude排除
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.less/,use:['style-loader','css-loader','less-loader']},
            {test:/\.less/,use:['style-loader','css-loader','less-loader']},
            {test:/\.(png|jpg|gif)/,use:['url-loader']}
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./index.html'
        })
    ]
};

有個(gè)index.html的模板，src的文件夾播揪，里面有個(gè)index.js
1贮喧、package.json 修改script中的腳本

 "scripts": {
    "dev":"webpack-dev-server",
    "start":"npm run dev",
    "build":"webpack -p"
  },

2、配置webpack.config.js
3猪狈、npm run build 或者（名字）dev

webpack

webpack-config.js

let path = require('path');//導(dǎo)入path模塊箱沦，解析路徑
let HtmlWebpackPlugins = require("html-webpack-plugin");
//path.resolve('./dist')
module.exports={
   // entry:'./src/main.js', 配置webpack入口的文件
    entry:{main:'./src/main.js',
           main1:'./src/main1.js'},//多入口文件
    output:{//打包之后斍的出口
        //filename:'build.js',生成文件的名字，隨便寫
        filename:'[name].js',//name會(huì)去entry中屬性名就是文件的名字
        path:path.resolve('./dist') //path.resolve 解析出一個(gè)絕對(duì)路徑雇庙；當(dāng)運(yùn)行webpack時(shí)候谓形，自動(dòng)創(chuàng)建一個(gè)dist文件夾，將生成js放在這個(gè)文件夾下;
    }疆前，
       module:{//用什么解析器
        rules:[
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},// node_modules中js不需要進(jìn)行es6到es5編譯寒跳；排除node_modules
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.less/,use:['style-loader','css-loader','less-loader']},
            {test:/\.vue$/i,use:["vue-loader"]}，
            {test:/\.(png|jpg|gif)$/,use:'url-loader'}//file
        ]
    },
     plugins:[
        new HtmlWebpackPlugins({
            // html 的路徑竹椒；
            template:"./index.html"
        })
    ]
};

image.png

管道符（ | filters中的過濾方法(filters參數(shù) 1本項(xiàng) 2傳)）
reduce參數(shù) prev next index item童太、
change事件與click事件的區(qū)別、
input min type v-model 后 checked沒用

四種類數(shù)組轉(zhuǎn)數(shù)組的方法
1胸完、方法一书释、聲明一個(gè)空數(shù)組，通過遍歷偽數(shù)組把它們重新添加到新的數(shù)組中

 var aLi = document.querySelectorAll('li');
    var arr = [];
    for (var i = 0; i < aLi.length; i++) {
     arr[arr.length] = aLi[i]
    }

2赊窥、使用數(shù)組的slice()方法它返回的是數(shù)組爆惧，使用call或者apply指向偽數(shù)組
var arr = Array.prototype.slice.call(aLi);
3、方法三锨能、使用原型繼承
aLi.proto = Array.prototype;
4扯再、ES6中數(shù)組的新方法 from()

 function test(){
     var arg = Array.from(arguments);
     arg.push(5);
     console.log(arg);//1,2,3,4,5
  }
 test(1,2,3,4);