Wang Wei's Blog
0%

发表于 更新于 分类于 ，
本文字数： 3.6k 阅读时长 ≈ 6 分钟

Vuex官网：https://vuex.vuejs.org/zh/

基础

vuex是什么

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

阅读全文 »

发表于 更新于 分类于 ，
本文字数： 571 阅读时长 ≈ 1 分钟

PWA应用是指那些使用指定技术和标准模式来开发的web应用，这将同时赋予它们web应用和原生应用的特性。

特点

  • Discoverable, 内容可以通过搜索引擎发现。
  • Installable, 可以出现在设备的主屏幕。
  • Linkable, 你可以简单地通过一个URL来分享它。
  • Network independent, 它可以在离线状态或者是在网速很差的情况下运行。
  • Progressive, 它在老版本的浏览器仍旧可以使用，在新版本的浏览器上可以使用全部功能。（渐进式）
  • Re-engageable, 无论何时有新的内容它都可以发送通知。
  • Responsive, 它在任何具有屏幕和浏览器的设备上可以正常使用——包括手机，平板电脑，笔记本，电视，冰箱，等。
  • Safe, 在你和应用之间的连接是安全的，可以阻止第三方访问你的敏感数据。

解决问题

  • 可以添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏；
  • 实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能；
  • 实现了消息推送；
  • 等累死与 Native App相关的功能；
阅读全文 »

发表于 更新于 分类于 ，
本文字数： 4.4k 阅读时长 ≈ 7 分钟

有时候为了提高网页初始加载的性能，我们会选择延迟一部分资源的加载和执行。

另一种情况是我们想要尽早加载资源，但是要等到合适的时机再执行。时机的影响因素包括依赖关系、执行条件、执行顺序等。

通常的做法是：

  • 通过插入一个页面元素来声明一个资源（比如img、script、link）。这种方式会将资源的加载和执行耦合。
  • 用AJAX来加载资源。这种方式只有在时机成熟时才会加载资源，解决了执行时机问题。但是浏览器无法预解析，也就无法提前加载。另外如果页面有大量的阻塞脚本，就会造成延迟。

Resource Hints

阅读全文 »

发表于 更新于 分类于 ，
本文字数： 3.2k 阅读时长 ≈ 5 分钟

基础

单个文件开发

只适用于快速原型开发。

需要安装全局扩展 @vue/cli-service-global，开发环境得不到一致性的保证：

npm install -g @vue/cli-service-global
阅读全文 »

发表于 更新于 分类于 ，
本文字数： 632 阅读时长 ≈ 1 分钟

获取 url 中的参数

  1. 指定参数名称，返回该参数的值 或者 空字符串
  2. 不指定参数名称，返回全部的参数对象 或者 {}
  3. 如果存在多个同名参数，则返回数组
function getUrlParam(sUrl, sKey) {
    const params = (sUrl.split('#')[0].split('?')[1] || '').split('&')
    let res = {}
    if (params.length > 0) {
        params.forEach(item => {
            const [key, value] = item.split('=')
            if (typeof res[key] === 'undefined') { // 如果res中不存在key
                res[key] = value
            } else if (Array.isArray(res[key])) {
                res[key].push(value)
            } else if (typeof res[key] === 'string') { // 如果已存在且同名
                res[key] = [res[key], value]
            }
        })
        return sKey ? (res[sKey] || '') : res
    }
    return res
}

getUrlParam('http://www.nowcoder.com?key=1&key=2&key=3&test=4#hehe', 'key')

测试：

1

阅读全文 »