- 博客(31)
- 收藏
- 关注
RSS订阅
原创 【Vue】Nuxt最佳实践之常用库封装(三)
完结篇，嘻嘻????~目录全局 Loading自定义分享 (H5)环境变量打包优化、性能分析公用样式其他技巧结语全局 Loading落地页(首屏渲染)加载提示，利用 client-only 组件 placeholder 属性，⚠️Nuxt2.0 以下采用 no-ssr 组件，同时也可规避页面加载瞬间的样式错位(未及时加载 css 文件)，官方示例 ⬇️<template> <div> <sidebar /> <clien
2020-05-09 17:16:05
1291
1
原创 【Vue】Nuxt最佳实践之常用库封装(二)
站在巨人的肩膀上，以下代码借鉴于cmn-utils 公共函数&请求封装, 感谢作者LANIF-UI的开源贡献，有兴趣的小伙伴可以参考基于React+Dva的CMS后台管理系统 dva-boot使用CRA(create-react-app v2) 构建的react dva 2 脚手架 支持动态路由、接口数据模拟、按功能分层、并且包含诸多实用的小组件目录结构常用工具类封装1.1...
2020-01-07 18:03:40
1056
原创 【Vue】Nuxt最佳实践之常用库封装(一)
前言有关同构渲染SSR相关的基础知识，不再赘述，小伙伴们可自行补充，传送门: Vue.js 服务器端渲染指南本文主要介绍了基于Vue官方脚手架: create-nuxt-app，如何实现基础的项目搭建过程，相关代码已开源至git，戳这里 cmn-utils 抱走，看都看了，点个star再走呗～概览全文大概3000字，阅读需要15分钟，配合专栏文章食用更佳哦：）服务端框架 - KoaU...
2019-12-29 00:57:17
2407
原创 【JS】如何实现一个极简版Vue （响应篇）
前言Vue.js 一个核心思想是数据驱动。所谓数据驱动，是指视图是由数据驱动生成的，我们对视图的修改，不会直接操作 DOM，而是通过修改数据。DOM 变成了数据的映射，我们所有的逻辑都是对数据的修改，而不用碰触 DOM，这样的代码非常利于维护。往期回顾：【JS】 如何实现一个极简版Vue （初始化）概述Vue.js 是通过数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter,getter，在数据变动时发布消息给订阅者，触发相应的监听.
2021-04-16 17:36:00
318
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
259
原创 【设计模式】当发布订阅遇上Promise
Write Less & Do More发布-订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发送改变时，所有依赖于它的对象都将得到状态改变的通知。简单点就是 收集依赖 => 触发通知 => 取出依赖执行而 Promise 是 JS 异步编程中的重要概念，异步抽象处理对象，是目前比较流行 Javascript 异步编程解决方案之一，示例如下new Promise((resolve, reject) => { resolve('fulfilled')})..
2021-04-06 09:46:15
475
原创 【Vue】Aliplayer 视音频播放的实践与思考
简介阿里云Web播放器SDK（Aliplayer SDK）是阿里视频云端到云到端服务的重要一环，结合对象存储（Object Storage Service，简称OSS) 实现深度融合视频云业务，支持视音频的点播和直播等基础播放功能本文以 Vue 组件化的角度进行全流程解析、并抽离公共业务逻辑，从而实现可维护、高复用的视音频播放组件引入官方实践直接在页面引入对应的JS、CSS文件，通过暴露全局 window.Aliplayer 属性自定义实例化对象，传送门 => 集成文档_Web播放器_播放器.
2020-10-26 15:35:38
1583
原创 【Nuxt】Vue最全代码约束之不完全指北（一）
代码是写出来给人看的，附带能在机器上运行前言为提高团队协作效率，便于开发人员添加功能及后期优化维护，同时输出高质量的文档，我们必须保证每一个 Vue 组件（等同于模块）专注于解决一个单一的问题，独立的、可复用的、微小的和可测试的，因此通过配置进行代码强约束对于一个项目来说是非常必要的目录ESlint (插件化的 JavaScript 代码检测工具)commitlint (规范git提交信息)stylelint (css代码审查工具)prettier(统一前端代码风格)cli con..
2020-08-09 12:57:15
474
原创 【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
647
原创 【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
260
原创 【CSS】css rules guidelines
CSS 规范CSS 规范使 CSS 文件具有一致性。它们有助于扩展和维护项目。推荐的 CSS 规范如下BEMBEM —— Block（块）、Element（元素）、Modifier（修饰符）—— 是最流行的 CSS 规范之一。它是一组命名约定，你可以使用它们轻松地设计可复用组件。命名约定遵循以下模式：.block { ... }.block__element { ... }.block--modifier { ... }.block 块代表一个组件。它们是独立的实体，并且对自身有意义。.
2020-06-09 16:28:18
210
原创 【Git】Git Commit Guidelines
Git Commit GuidelinesGit 提交应当书写 commit message, 开源社区最广泛的则是 Angular Git Commit Guidelines 规范Angular 规范要求的 commit message 格式如下<type>(<scope>): <subject>Header包括三个字段：type(必需)、scope(可选)和subject(必需)Typefeat : 新功能fix : bug 修复.
2020-06-02 10:21:43
234
原创 【React】初探 Taro，多端开发的基础实践（一）
Taro：多端统一开发框架，支持用 React 的开发方式编写一次代码，生成能运行在微信/京东/百度/支付宝/字节跳动/ QQ 小程序/快应用/H5/React Native 等的应用。项目构建采用官方脚手架 @tarojs/cli，帮助文档 => 安装及使用 - Taro⚠️CSS预处理器推荐使用 Sass ，因为 Taro 自带的 Taro UI 用的就是Sass，头铁的小伙伴也可以在 package.json/templateInfo/css 进行自定义配置，有想法的可以考虑加入 T..
2020-05-21 18:33:31
704
原创 【JS】前端性能分析之 window.performance
Web Performance 接口允许网页中的 JavaScript 代码可以通过具体的函数（由 window 对象的 performance 属性提供）测量当前网页页面或者 web应用的性能。它能提供高精度的时间戳，可以更加精准的计算脚本运行的时间效果预览⬇️，参考简书的网页源代码实现，控制台切换成 H5 即可APIperformance对象的timing属性指向一个对象，它包含了各种与浏览器性能有关的时间数据，提供浏览器处理网页各个阶段的耗时。我们在chrome中输入performanc..
2020-05-17 11:36:27
1251
原创 【Vue】纯前端实现微信 H5 鉴权
最近在做微信网页版开发，整理出微信 H5 鉴权常见坑位，流程图分析如下，后附简易代码实现1. 获取code逻辑实现：通过重定向授权从地址栏拿取 code 并缓存，不可重复调用，不然会报 code used官方传送门 => 微信开放文档-网页授权async getAccessToken(redirectUri) { const code = $$.getQueryValue(...
2020-01-14 17:07:02
1455
原创 【Nginx】阿里云ECS服务器部署https
先上官方帮助文档压压惊，传送门:云盾证书服务(包年)-购买-阿里云1. 申请免费的https证书2. 下载nginx专属https证书控制台->SSL 证书（应用安全）->下载->nginx3. 上传到服务器参考地址:/usr/local/nginx/conf/cert4. 配置nginx.conf文件阿里云ESC默认有配置https,放开注释...
2019-10-24 20:54:54
584
原创 【Vue】Vue-cli之Mock.js 模拟数据实现及构建
Mock 数据是前端开发过程中必不可少的一环，是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口，模拟请求数据甚至逻辑，能够让前端开发更加独立自主，不会被服务端的开发所阻塞。以下介绍了Mock使用的基础语法，小伙伴们也可直接拿来主义，配合Vscode live-server插件愉快的 进行调试啦~<pre id="show"></pre><img ...
2019-09-30 11:36:37
4363
2
原创 【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
原创 【JS】手动实现插件内部模块化共享
实现逻辑:1. 外层IIFE，防止全局污染。携带root对象,factory函数，2. 执行factory函数，携带模块库(modules),{key: values}键值对3. 定义内部模块库，公用加载函数__webpack_require__，注册后绑定当前模块、公用加载函数，下次调用直接返回模块4. 初始化全局属性、对外抛出构建对象5. 通用模块注册(挂载到全局)Tips:...
2019-09-29 17:54:36
427
原创 【Python】钉钉E应用Python版QuickStart
代码已开源，戳这里:https://github.com/YzzHa/eapp-corp-quick-start-python，赠人玫瑰手有余香，采纳的小伙伴们点个star再走呗 O.o1. 登录验证流程分析，以Node为例话不多说上代码，以关键代码为例, 部分密匙信息采用***进行占位，请对号入座。代码来自钉钉官方Node版QuickStart// 获取用户信息 app.use...
2019-06-02 14:22:12
1944
原创 【Python】手把手教你撸个桌面应用~~.exe(Tkinte)
走流程先日常跪舔一波Python, 没有你想不到的，只有你做不到的！Pyhton作为年度翘楚，完美的诠释了这句话业务需求给定参数取出压缩文件夹中指定的文件并生成至目录，先上个效果图(原谅UI，以结果为主)，不对号的小伙伴的欢迎绕道开发环境tkinter: python内置标准 Tk GUI 工具包的接口，免安装参考文档: 1. https://www.runoob.co...
2019-05-27 00:24:34
406
原创 【Python】Flask阿里云部署填坑记(Centos 7)
注: 此文，查阅资料时饱受转载、复制之苦，万般无奈于迟到的技术支持与过快版本迭代之间的矛盾。痛定思痛，从无到有、大大小小的坑位、集百家之长(资源的搬运工)，末尾附配置shell命令、参考链接1. 业务需求快速、敏捷的开发RESTful API，满足多终端数据交互的一致性、规范化管理，技术栈: centos7+python3+gunicorn+nginx。人生苦短，必用python, ...
2019-05-07 23:05:46
1006
原创 【JS】三十行代码实现洗牌效果
/** * 创建基本卡组 * * 思路 * 1. Array.from转化基本花色字符串为数组 * 2. 利用map进行初始化花色以及基本数字, 设置level属性为排序数组做准备 * 3. [].concat()平铺数组 * @returns {Array} 返回type长度的二维数组 */const createDeck = (function(){ const t...
2019-01-19 21:41:46
1022
原创 【JS】Javascript设计模式初窥（一）
注：部分代码及名词摘自《Javascript设计模式》，《设计模式：可复用面向对象的软件基础》什么是设计模式？设计模式是解决程序设计中的常见问题的可复用方案，是编写出美观、结构化和组织良好代码代码的前提，其三法则为适合性、实用性、适用性，以下代码均采用ES6语法一 、模块模式 对象拥有共有/私有方法和变量，屏蔽全局作用域中特殊的部分，降低冲突const testModule ...
2018-12-14 10:49:29
127
原创 【JS】兼容AMD,CMD库，实现模块操作的理论与实践
模块：通常是开发人员为了避免和他人冲突把内含JavaScript 代码的独立文件放置在一个闭包中，注册其功能并导出模块的值，以工程化的思维将复杂系统拆分成一个个小的可管理的模块，其目标为减少项目的复杂度，提升项目的可维护度、代码复用。AMD：浏览器中编写模块化Javascript的格式（通过识别号进行查找）,实现了解耦及包括异步的调用和其本身的高扩展性， 简称为异步模块定义，主要实现: Req...
2018-12-12 22:06:34
485
原创 JS实现继承的多种方式（二）
4. 原型式继承 借助原型中已有的对象创建新对象，同时不必因此创建自定义类型 function object(params) { function F() {} F.prototype = params // 初始化实例的值 return new F() // 继承Object}var penson = { name: "y...
2018-12-11 20:41:34
113
原创 【JS】关于for循环中的click回调函数索引值错误的思考
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2018-11-12 14:17:08
417
1
原创 Bootstrap 学习笔记（ 一 ）： 巧用 margin padding
通过 margin 负值消除来自父元素的外边距限制（外边距值与 margin 值相对)；话不多说，直接上代码<div style="padding: 0px 10px; background-color: red;"> <p style="margin-left: -10px;">I'm, here</p></div>哈哈，是不是动态的...
2018-05-19 21:46:04
7483
原创 关于逗号( , )在JS中的使用技巧
在变量声明中使用 var a,b = 3;我所理解的执行顺序为：b = 3 var a = underfind var b = 3 var a = underfind; var b = 3 Dom: 测试B是否为全局变量function test(){ var a,b = 3;}test();b; // b is not defindfun...
2018-05-15 15:02:09
12025
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人