混淆概念集合

在es6模块中怎么引入传统的jQuery和jQuery插件呢?

链接

  1. 安装webpack和loader
  • 使用webpack和expose-loader

    1
    2
    3
    4
    5
    mkdir demo-webpack && cd demo-webpack
    npm init -y
    cnpm install webpack webpack-cli --save-dev
    cnpm install expose-loader -D
    cnpm install --save jquery
  • 注意jquery是–save的,webpack打包的时候会把jquery也打包到bundle.js

  1. 新建webpack.config.js
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    const path = require('path')
    module.exports = {
    mode: 'development',
    entry: './src/main.js',
    output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'build.js'
    },
    module: {
    relues: [{
    test: require.resolve('jquery'),
    use: [{
    loader: 'expose-loader',
    options: '$'
    }, {
    loader: 'expose-loader',
    opition: 'jQuery'
    }]
    }]
    }

    }
  • require.resolve(‘jquery’),意思就是 当检测到 import jquery 或者 require(‘jquery’) 时,就把jquery的返回值(这里用返回值描述可能不正确)暴露给window.$或者window.jQuery。结果jQuery对象就绑定到全局window对象上了。
  1. 新建src文件夹和main.js(webpack配置文件中的入口文件)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    import 'jquery'
    import '../public/plugin/banner/js/velocity'
    import '../public/plugin/banner/js/shutter'

    $(function() {
    $('.shutter').shutter({
    shutterW: 2560, // 容器宽度
    shutterH: 1080, // 容器高度
    isAutoPlay: true, // 是否自动播放
    playInterval: 3000, // 自动播放时间
    curDisplay: 0, // 当前显示页
    fullPage: false // 是否全屏展示
    })
    })
  • 当webpack构建时,遇到import ‘jquery’;,就会告诉expose-loader处理。

  • 既然在这里已经绑定到window上了,那在其他模块里面就不需要再通过import jQuery导入jQuery了。直接使用即可。

webpack如何解析less?
  • 主要通过less-loader、css-loader、style-loader插件作用

  • less-loader:用于加载.less文件,将less转化为css

  • css-loader:用于加载.css文件,将css转化为commonjs

  • style-loader: 将样式通过<style>标签插入到head中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

'use strict'

const path = require('path')

module.exports = {
mode: 'production',
entry: {
index: './src/index.js',
search: './src/search.js'
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
mode: 'production',
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
]
}
  • 他们的解析过程是链式的,所以在use数组中下面的部分会先执行,所以他们的执行顺序其实是less-loader > css-loader > style-loader
把多个异步数据同步化处理
  • 用多个Ajax方法异步获取数据,所有数据都返回后,再执行一项目操作。从多个数据源获取数据,多个数据源的数据返回后,再将这些数据整合,再显示出来。
  • 异步读取数据,用一个回调函数执行整理数据,显示出来
    • 一个函数func,里面有多个ajax异步读取数据的方法(func1,func2..)用func的回掉函数处理返回的数据
  • 多个回调函数顺序执行产生不可靠的回调(第二个异步依赖第一个异步的返回结果,第三个异步依赖第二个异步的结果,以此类推)。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    //以两个异步回调函数为例,三个异步回调函数以此类推

    //第一个异步函数
    var oneStep = function() {
    return new Promise((resolve, reject) => {
    // 执行返回成功的函数,data为返回值
    resolve(data)
    // 执行返回失败的reject,err错误的原因
    reject(err)
    })
    }

    //第二个异步函数,params为第一个异步resolve中传入的data值
    var twoStep = function(params) {
    return new Promise((resolve, reject) => {
    resolve(data)
    reject(err)
    })
    }

    // 将两个异步控制成同步,第二个回调函数的入参,依赖第一个回调函数返回的值。
    oneStep().then(data => {
    //第一个then为第一个回调执行返回的结果
    //将第一个回调函数成功的data值传入twoStep中
    return twoStep(data)
    }, err => {
    //reject时的处理
    }).then(data => {
    //resolve处理方法
    }, err => {
    //reject处理方法
    })
argument变成真正的数组
1
2
3
4
5
6
7
8
//slice方法
var args = [].slice.apply(arguments)
var args = Array.propertype.slice.call(arguments)
// 逐一填入新数组
var args = []
for(var i = 0; i< arguments.length;i++) {
args.push(arguments[i])
}
target与currentTarget的区别
  • target:一个触发事件的对象的引用,当事件处理程序在事件的冒泡或者捕获阶段被调用的。
  • currentTarget:事件遍历DOM时,标识事件的当前目标,总是引用事件处理程序附加到的元素,而不是event.target,它标识事件发生的元素

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <ul>
    <li></li>
    <li></li>
    <li></li>
    </ul>


    let ul = document.querySelectorAll('ul')[0]
    let li = document.querySelectorAll('li')
    ul.addEventListener('click', e => {
    let oLi = e.target
    let oUl = e.currentTarget
    console.log(oLi) //被点击的li
    console.log(oUl) //ul
    console.log(oLi == oUl) //false
    })
  • e.target指向触发事件监听的对象

  • e.currentTarget指向添加监听事件的对象
    es5数组去重
  • filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素,

  • indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

  • 返回每个数组元素的值第一次在页面中出现的位置为其下标的值则就是去重了

    1
    2
    3
    4
    var a = [1, 1, 2, 3, 4, 2]
    a.filter((item, index, arr) => {
    return arr.indexOf(item) === index
    })
vuex刷新页面数据丢失
  • 原因:js代码是运行在内存中的,代码运行时的所有变量,函数也都是保存在内存中。刷新页面,以前申请的内存被释放,重新加载脚本代码,变量重新赋值,所有这些数据要想存储就必须存储在外部。例如:Local Storage、Session Storage、Index DB等。这些都是浏览器提供的API,让你可以将数据存储在硬盘上,做持久化存储。具体选择哪一个就根据你实际需求来选择。

  • 使用sessionStorage,这里需要注意的是vuex中的变量是响应式的,而sessionStorage不是,当你改变vuex中的状态,组件会检测到改变,而sessionStorage就不会了,页面要重新刷新才可以看到改变,所以应让vuex中的状态从sessionStorage中得到,这样组件就可以响应式的变化。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    // mutations
    ADD_LOGIN_USER(state, data) { //登入,保存状态
    sessionStorage.setItem('userName', data) //添加到sessionStorage
    sessionStorage.setItem('isLogin', true)
    state.userName = data //同步的改变store中的状态
    state.isLogin = true

    }
    SIGN_OUT(state) { //退出,删除状态
    sessionStorage.removeItem('userName') //移除sessionStorage
    sessionStorage.removeItem('isLogin')
    state.userName = '' //同步的改变story中的状态
    state.isLogin = false
    }

    //getters
    isLogin(state) {
    if (!state.isLogin) {
    state.isLogin = sessionStorage.getItem('isLoagin') //从sessionStorage中读取状态
    state.userName = sessionStorage.getItem('userName')
    }
    return state.isLogin
    }
    //总体的实现思路是让vuex中store的状态从sessionStorage取值,并和sessionStorage保持一致

    getters: {
    userInfo(state) {
    if (!state.userInfo) {
    state.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    }
    return state.userInfo
    }
    },
    mutations: {
    LOGIN: (state, data) => {
    state.userInfo = data
    sessionStorage.setItem('userInfo', JSON.stringify(data))
    },
    LOGOUT: (state) => {
    state.userInfo = null
    sessionStorage.removeItem('userInfo')
    }
    }