JS
文章平均质量分 82
AsnLee
这个作者很懒,什么都没留下…
展开
-
【JS】如何实现一个极简版Vue (响应篇)
前言Vue.js 一个核心思想是数据驱动。所谓数据驱动,是指视图是由数据驱动生成的,我们对视图的修改,不会直接操作 DOM,而是通过修改数据。DOM 变成了数据的映射,我们所有的逻辑都是对数据的修改,而不用碰触 DOM,这样的代码非常利于维护。往期回顾:【JS】 如何实现一个极简版Vue (初始化)概述Vue.js 是通过数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听.原创 2021-04-16 17:36:00 · 320 阅读 · 1 评论 -
【JS】如何实现一个极简版Vue (初始化)
Vue.js 是通过数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。第一步 - 实现一个指令解析器(Compile)初始化页面模版,包括基本的程序入口和DOM结构<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http原创 2021-04-16 17:32:46 · 262 阅读 · 0 评论 -
【设计模式】当发布订阅遇上Promise
Write Less & Do More发布-订阅模式其实是一种对象间一对多的依赖关系,当一个对象的状态发送改变时,所有依赖于它的对象都将得到状态改变的通知。简单点就是 收集依赖 => 触发通知 => 取出依赖执行而 Promise 是 JS 异步编程中的重要概念,异步抽象处理对象,是目前比较流行 Javascript 异步编程解决方案之一,示例如下new Promise((resolve, reject) => { resolve('fulfilled')})..原创 2021-04-06 09:46:15 · 476 阅读 · 0 评论 -
【Vue】Aliplayer 视音频播放的实践与思考
简介阿里云Web播放器SDK(Aliplayer SDK)是阿里视频云端到云到端服务的重要一环,结合对象存储(Object Storage Service,简称OSS) 实现深度融合视频云业务,支持视音频的点播和直播等基础播放功能本文以 Vue 组件化的角度进行全流程解析、并抽离公共业务逻辑,从而实现可维护、高复用的视音频播放组件引入官方实践直接在页面引入对应的JS、CSS文件,通过暴露全局 window.Aliplayer 属性自定义实例化对象,传送门 => 集成文档_Web播放器_播放器.原创 2020-10-26 15:35:38 · 1586 阅读 · 0 评论 -
【Nuxt】Vue最全代码约束之不完全指北(一)
代码是写出来给人看的,附带能在机器上运行前言为提高团队协作效率,便于开发人员添加功能及后期优化维护,同时输出高质量的文档,我们必须保证每一个 Vue 组件(等同于模块)专注于解决一个单一的问题,独立的、可复用的、微小的和可测试的,因此通过配置进行代码强约束对于一个项目来说是非常必要的目录ESlint (插件化的 JavaScript 代码检测工具)commitlint (规范git提交信息)stylelint (css代码审查工具)prettier(统一前端代码风格)cli con..原创 2020-08-09 12:57:15 · 475 阅读 · 0 评论 -
【Vue】自定义指令(directive)、管道命令(filters)
directive指令以防暴力为例,调用示例 v-preventReClick:wait="a.bind(this)",官方文档: Vue => 自定义指令/** * 防反跳。func函数在最后一次调用时刻的wait毫秒之后执行! * @param func 执行函数 * @param wait 时间间隔 * @returns {Function} */export function debounce(func, wait) { let timer = null retu原创 2020-07-03 17:50:56 · 648 阅读 · 0 评论 -
【JS】你不知道的ES6 (一)
链判断运算符ES5 我们判断一个深层级的对象是否有某一个 key 需要一层一层去判断,现在我们可以通过?.的方式去获取// es5// 错误的写法(当某一个key不存在undefined.key就会代码报错)const firstName = message.body.user.firstName;// 正确的写法const firstName = (message && message.body && message.body.user &am.原创 2020-06-25 09:58:45 · 262 阅读 · 0 评论 -
【JS】前端性能分析之 window.performance
Web Performance 接口允许网页中的 JavaScript 代码可以通过具体的函数(由 window 对象的 performance 属性提供)测量当前网页页面或者 web应用的性能。它能提供高精度的时间戳,可以更加精准的计算脚本运行的时间效果预览⬇️,参考简书的网页源代码实现,控制台切换成 H5 即可APIperformance对象的timing属性指向一个对象,它包含了各种与浏览器性能有关的时间数据,提供浏览器处理网页各个阶段的耗时。我们在chrome中输入performanc..原创 2020-05-17 11:36:27 · 1255 阅读 · 0 评论 -
【Vue】Nuxt最佳实践之常用库封装(三)
完结篇,嘻嘻????~目录全局 Loading自定义分享 (H5)环境变量打包优化、性能分析公用样式其他技巧结语全局 Loading落地页(首屏渲染)加载提示,利用 client-only 组件 placeholder 属性,⚠️Nuxt2.0 以下采用 no-ssr 组件,同时也可规避页面加载瞬间的样式错位(未及时加载 css 文件),官方示例 ⬇️<template> <div> <sidebar /> <clien原创 2020-05-09 17:16:05 · 1298 阅读 · 1 评论 -
【JS】常用数组高阶函数,告别for、while
什么是高阶函数?高阶函数只是将函数作为参数或返回值的函数,可以使代码更简洁、高效。JS内置的数组高阶函数能够满足大部分数组操作,从此和for、while 说再见1. map创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。(映射)const arr = [{ num: 1 }, { num: 2 }]const newArr = arr.map( ite...原创 2019-09-29 18:53:09 · 242 阅读 · 0 评论 -
【JS】手动实现插件内部模块化共享
实现逻辑:1. 外层IIFE,防止全局污染。携带root对象,factory函数,2. 执行factory函数,携带模块库(modules),{key: values}键值对3. 定义内部模块库,公用加载函数__webpack_require__,注册后绑定当前模块、公用加载函数,下次调用直接返回模块4. 初始化全局属性、对外抛出构建对象5. 通用模块注册(挂载到全局)Tips:...原创 2019-09-29 17:54:36 · 429 阅读 · 0 评论 -
【JS】Javascript设计模式初窥(一)
注:部分代码及名词摘自《Javascript设计模式》,《设计模式:可复用面向对象的软件基础》什么是设计模式?设计模式是解决程序设计中的常见问题的可复用方案,是编写出美观、结构化和组织良好代码代码的前提,其三法则为适合性、实用性、适用性,以下代码均采用ES6语法一 、模块模式 对象拥有共有/私有方法和变量,屏蔽全局作用域中特殊的部分,降低冲突const testModule ...原创 2018-12-14 10:49:29 · 127 阅读 · 0 评论