online阳光-专注于大前端行业领域

前言现在的童鞋估计一上手项目，就不是以前直接用jquery来撸项目，而是使用的vue，react等快速开发框架，虽然jquery已经渐渐地淡出现阶段的项目，但它霸屏了长达好几年的浏览器，很值得我们具体来学习其中的缘由。 框架预览首先我们先看下jquery的总体架构，如下图： 首先它通过类工厂模式，创建了一个jquery对象，通过立即执行函数IIFE包裹，提供requirejs的方式引入jquery，可以在nodejs中包含document对象属性的环境中运行，最终也就是执行的factory(window, noGlobal)方法，来将window作为参数进行传递！ 其次，为兼容amd环境使用jquery，同样地在框架中支持amd方式调用jquery 框架源码问题一一解读这里有一个点，就是为毛我们能够在引入了jquery库的环境中，可以使用window.$呢？原因就是它在全局环境中用$来指向了new出来的jquery对象，具体如下 从👆 我们可以看出这里将定义出来的jquery对象由window中的$来指向，因此，我们使用$()方法其实就是使用的jquery()方法 jquery ...

前言以前开发的时候，一般流程是开发调试，提测的时候，给测试甩安装包或者是安装的二维码，各测试同时自行下载安装验证，但提供安装包的过程又臭又长，如果对于频繁需要修改bug并进行快速回归的话，单单通过android studio开发工具来提供的话，不仅效率低，而且打包时间大大占据了开发者的bug调试时间，因此，需要jenkins等持续集成平台来提供，也就是app的开发者，不再提供apk安装包，由测试同事自行到jenkins上索取安装包进行安装 jenkins环境的安装首先，先安装jenkins环境，访问jenkins网址 https://www.jenkins.io/zh/，选择适合自己的版本进行下载并安装，这边选用的是mac环境下的jenkins 通过brew命令来安装jenkins： 安装最新的jenkins LTS 版本：brew install jenkins-lts 或者安装指定版本的LTS：brew install jenkins-lts@VERSION 启动jenkins服务：brew services start jenkins-lts 重启jenkins服务：brew ...

前言大家在日常的coding生活中，不免需要提交代码，然后每次代码commit的message，是否有认真地描述过呢？ 我想不少童鞋应该是直接随便编写点简单的描述内容就直接提交上去了，但是，要是遇到下图这个情况： 作为项目管理员，在做这个代码的code reviewing的时候，要看每次提交的代码具体都是做了什么事情的时候，估计心里会有一顿F开头的话语。 那么作为一个项目的负责人，有必要对开发人员每次提交的message进行维护，不同的开发人员对每次commit的描述都有不同的格式。 根据业界开发人员整理了关于这个commit的规范，且在相关的IDE开发工具中提供的相关的插件 供我们方便的使用。 防范于未然，我们总不能在每个项目的各个阶段来跟进到代码提交的规范，更应该让每个开发人员在提交代码的时候都有这个意识。 针对👆这个情况，对于web前端项目，我们可以提供一简单的工具，在每个开发人员在提交代码的时候，自动拦截不符合规范的git commit message。 validate-commit-message 插件工具的使用validate-commit-message的安装sc ...

前言 每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的：var vm = new Vue({});一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成 像上述中的Todo根实例中，我们的子孙组件，都是以*.vue文件，包含template、script、style标签组成的，这里的所有的*.vue组件都是Vue实例子，并且接受相同的选项对象(除了一些特有的实例之外) 中的参数选项.png) 一、组件的生命周期这边在原本组件的生命周期上，加入了各个属性以及值的赋值操作，进行了一个补充，如下图： 从👆图我们可以看出，在Vue组件中的这些关于界面、数据等属性操作，都是在什么情况下可以访问的，从而可以帮助我们更好的编写代码 1.1、beforeUpdate与updatedVue实例中定义的data函数所返回的对象中属性，只有在对应的html中使用时，这个property改变时，才会调用beforeUpdate以及updated函数，比如有以下的代码： 对应的执行结 ...

前言 Vue.extend作为一全局api，作为我们去实现编程式组件的重要途径，所以我们通过源码学习的方式，来加深对Vue.extend函数的理解，通过以下几个问题的解读，来对Vue.extend深入学习 Vue.extend在Vue中的用途？ 讲解下Vue.extend的内部实现？ 实现一个编程式组件，具体的思路应该式怎样？ Vue.extend的深入基本用法参数：[Object] options 用法：使用基础Vue构造器，创建一个”子类”，参数式一个包含组件选项的对象，data选项是特例，需要注意⚠️下【Vue.extend()中data必须是函数。】 12345678910111213// 创建构造器 var Profile = Vue.extend({ template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>', data: function () { return { firstName: 'Walter', lastName: 'Wh ...

前言插件的功能： vue插件通常用来为Vue添加全局功能，插件的功能防伪没有严格的限制，一般有一下几种： 添加全局方法或者property。 添加全局资源：指令/过滤器/过渡等 通过全局混入来添加一些组件选项 添加Vue实例方法，通过把它们添加到Vue.prototype上实现 一个库，提供自己的API，同时提供上面的一个或多个功能 插件的使用通过全局方法Vue.use()使用插件，它需要在调用new Vue()启动应用之前完成： 123// 调用`MyPlugin.install(Vue)`Vue.use(MyPlugin);new Vue({}); 也可以传入一个可选的选项对象： 1Vue.use(MyPlugin, { someOption: true }); ⚠️ Vue.use会自动组织多次注册相同插件 插件的开发 Vue.js的插件应该暴露一个install方法，这个方法的第一个参数是Vue构造器，第二个参数是一个可选的选项对象： 123456789101112 MyPlugin.install = (Vue, options){// 1. 添加全局方法或者pro ...

前言平时在日常开发过程中，总是间歇性的分不清数组的slice和splice方法，几乎每次需要用到的时候，都怀疑自己会记错了，都要去度娘一下。 slice slice() 方法可以从已有的数组中返回选定的元素语法 1arrayObject.slice(start, end) 参数 描述 start 必填，规定从何处开始选取，如果是负数，则从数组尾部开始算起的位置，也就是说，-1指的是最后一个元素，-2是倒数第二个元素，以此类推。 end 可选，规定从何处结束选取，该参数是数组断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从start到数组结束的所有元素。如果这个参数是负数，那么同上。 返回值：返回一个新的数组，包含从start到end(不包含该元素)的arrayObject中的元素。 说明：⚠️，该方法并不会修改数组，二是返回一个子数组。如果想删除数组中的一段元素，应该使用方法Array.splice() splice splice() 方法 向/从 数组中 添加/删除 项目，然后返回被删除的项目。⚠️：该方法会改变到原始数组语法： 1arrayO ...

前言 Vue除了核心功能默认内置的指令(v-model和v-show)之外，Vue也允许注册自定义指令。 ⚠️在Vue2.0中，代码复用和抽象的主要形式是组件，然而，有的情况下，我们仍然需要对普通的DOM元素进行底层操作，这个时候就会用到自定义指令 举个官方的🌰，我们需要在input输入框一创建的时候，然后在任何我们需要的情况下，只要设置了该指令，就在一加载页面的时候，获取到焦点，这种比如是需要连接扫码枪的业务，比较适合。 1234567891011121314// 注册一个全局自定义指令'v-focus'Vue.directive('focus', { inserted: function(el){ el.focus(); }});// 当然我们也可以注册局部指令，组件中接收一个`directive`的选项：directives: { focus: { inserted: function(el){ el.focus(); } }} 钩子函数一个指令定义对象可以提供如下几个钩子函数(均为可选)： bind：只调用一次，指令第一次绑定到元素时调 ...

编写JavaScript的5个小技巧自从知道了这几个JavaScript技巧，下班都变早了！ 1、加号操作符+这里说的不是数字的简单相加，而是将表达式转成数字的操作符。 12345678910console.log(+new Date()); //1620288834588console.log(+true); // 1console.log(+false); // 0const random = { // 重载对象的valueOf方法 valueOf: () => Math.floor(Math.random() * 100)};console.log(+random); // 4console.log(+random); //23console.log(+random); //30 刚接触JavaScript的新手可能觉得这种写法有点即乖，数字类型转换会倾向于用Number()函数。结果是一样的，但是用+就简洁多了。如果某个对象重载了valueOf方法，+操作符会返回这个方法的结果 2、debugger语句在浏览器 DevTools 上打断点调试，基本上人人都会。但是你知 ...

引言前端设备参差不齐、环境复杂，因此给前端的研发童鞋制造了许多的BUG，为了快速解决BUG，灵活运营调试工具就显得特别的重要了，因此这边整理了关于Chrome浏览器的调试方法，在Mac下，使用F12或者右键”检查”即可打开浏览器的调试工具。 1、动态修改元素样式类名增删类名在条件逻辑中比较常见，通过devtools可以直接动态修改/激活/禁用类名 在DOM树中选中元素 点击激活.cls 可通过选择框动态修改是否使用该类名 可通过Add new class输入框动态添加已定义类名 👆除了给元素修改类名，还可以动态的添加css规则： 2、强制激活伪类网页中的一些动效是基于例如:active、:hover等，当鼠标移动到控制台的时候，这些伪类就不生效，在控制台中也无法调试css样式，此时可以使用强制激活伪类 选中具有伪类效果的元素 点击:hov 根据代码情况，勾选相应伪类 在styles面板可动态调试伪类样式 3、计算样式定位到CSS规则【直接浏览最终生效的样式定义位置】一个工程项目的DOM层级是比较复杂的，如果font-size这一样式属性，就可能存在多层覆盖，我们必须定位 ...

前言相信不少初学者都曾经被JavaScript数组的reduce方法困扰过，一直搞不明白到底应该怎么来用。 reduce方法是按照顺序对数组每个元素执行某个函数，这个函数接收上一次执行结果作为参数，并将结果传递给下一次调用。reduce方法用的好的话可以简化复杂的逻辑，提高代码可读性。通过👇几个例子可以帮助快速理解reduce的用法。 1、数字数组求和这是reduce最常见的入门级例子。 12345678910111213141516 // 传统的for循环写法如下 function sum(arr){let sum = 0;for(const val of arr){ sum += val;}return sum; } // ➡️ 使用了reduce的方式 function sum(arr) { const reducer = (sum, val) => sum + val; const initialValue = 0; return arr.reduce(reducer, initialValue); } sum([1,3,5,7]); //16 re ...

编写JavaScript的10个小技巧 简介的代码不但方便阅读，还能减少复杂逻辑和出错的可能性。本文就介绍一些常用的JavaScript简化技巧，日常开发都用得上。 1、简化条件表达式经常碰到这种情况，要判断某个变脸是否为指定的某些值，用常规的逻辑表达式会很长，我们可以将它们都放到数组中来进行判断 12345678// 太长的逻辑表达式if('abc' === xxx || 'def' === xxx || 'sdf' === xxx || 'oop' === xxx){ //执行其他逻辑}//➡️ 简写后的版本if(['abc', 'def', 'sdf', 'oop'].includes(xxx)){ // 执行其他逻辑} 2、简化if…else…if...else...太常用了，以至于很多人都忘记了其实还有更好的方式来进行的条件判断，比如一些简单的赋值操作，就没有必要进行冗长的语句，一行表达式就可以搞定了： 1234567891011// 冗长的写法let test = true;if(x > 100){ test = true;}else{ test = fa ...

前言在ES5中，关于this的指向，始终坚持一个原理：** this永远指向最后调用他的那个对象， ** ➡️ 为毛要使用this，这里引入一段话： 12345从前有座山，山里有座庙叫做神庙，神庙里面有好多和尚，和尚们都很喜欢神庙，于是和尚们都经常跳水到神庙。 读上面的一段话，现实中显然比较拗口，我们一般会使用”这”或者其他替代词，调整后如下： 12345从前有座山，山里有座庙叫做神庙，这里面有好多和尚，和尚们都很喜欢这，于是和尚们都经常跳水到这。 首先我们来看一个最简单的例子： 例1：1234567 var name = 'windowsName'; function fun(){console.log(this.name); // --> windowsName console.log('inner: ' + this); // inner: Window } a(); console.log('outer:' + this); // --> outer: Window 👆大家应该都知道为什么log的都是windowsName，因为格局刚刚的那句话th ...

前言：关于this关键词的指向✨* this永远指向最后调用它的那个对象 * 一、call、apply、bind的用途二、手写call、apply、bind

问题引入问题1： 如果要实现dom节点的拖拽功能，但是在绑定拖拽事件的时候发现每当元素稍微移动一点点就会触发大量的回调函数，导致浏览器直接卡死，这个时候，我们应咋整呢？ 问题2： 如果给一个按钮绑定了表单提交的post事件，但用户有时候在网络比较差的情况下多次点击按钮造成表单重复提交，如果防止多次提交事件的发生？ 为了应对上述场景，变出现了函数防抖和函数节流两个概念，总的来说，这两个方法是在时间轴上控制函数的执行次数。 函数防抖(debounce)概念： 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。 生活中的实例： 如果有人进电梯(触发事件)，那电梯在10秒钟后触发(执行事件监听器)，这时如果又有人进电梯了(在10秒钟内再次触发该事件)，则我们又得等待10秒再出发(重新计时) 举个🌰： 123456789 // 模拟一段ajax请求 function ajax(content){console.log('ajax requst ' + content); } let inputA = document.getElementById('unDebounce') ...

写在前面 在讨论回流与重绘之前，我们需要知道浏览器的渲染过程 从上面这个图我们可以看出，浏览器的渲染过程如下： 解析HTML，生成DOM树，解析CSS，生成CSSOM树； 将DOM树与CSSOM树结合，生成渲染树(Render Tree)； Layout(回流)：根据生成的渲染树，进行回流(Layout)，得到节点的几何信息(位置，大小)； Painting(重绘)：根据渲染树以及回流得到的几何信息，得到节点的绝对像素； Display：将像素发送给GPU，展示到页面上(这一步其实还有很多的流程在其中，比如会在GPU将多个层合并为同一个层，并展示在页面中，而css3硬件加速的原理是新建合成层)。 渲染过程看起来很简单，让我们来了解一下每一步都具体做了什么。 生成渲染树 为了构建渲染树，浏览器主要完成了以下工作： 从DOM树的根节点开始便利每个可见节点；【渲染树只包含可见的节点】 对于每个可见的节点，找到CSSOM树中对应的规则，并应用它们； 根据每个可见节点以及其对应的样式，组合生成渲染树。 👆有了渲染树，我们就知道了所有可见节点的样式，然后计算它们在页面上的大小和位置，最 ...

自定义Vue中的v-model双向绑定v-model双向绑定实际上就是通过自组件中的$emit方法转发input事件，父组件监听input事件中传递的value值，并存储在父组件data中，然后父组件通过prop的形式将value传递给子组件的value值，再由子组件绑定input的value属性即可。 v-model的本质就是语法糖，即 1<input type="text" v-model="name"> 相当于 1<input type="text" :value="name" @input="name = $event.target.value"> ➡️ 我们动手实现一波： 子组件传值首先，自组件需要一个input标签，这个input标签需要绑定input事件，$emit触发父组件的input事件，通过这种方法子组件传递值给父组件 12// my-comp.vue<input type="text" :value="name" @input="name = $event.target.value"> 父组件监听input并传递props属性1 ...

前言slot通俗一点的理解就是”占坑”，在组件模版中占好了位置，当使用该组件标签的时候，组件标签里面的内容就会自动填坑(替换组件模版中的slot位置) 在vue2.6.0中，具名插槽和作用域插槽引入了一个新的统一的语法(v-slot的指令)，它取代了slot和slot-scope。官方的文档对插槽的描述已经足够详细，我们这边主要是来深入这个作用域插槽，加深对作用域插槽的理解与使用 一、作用域插槽按照官方的文档，插槽跟模版其他地方一样都可以访问相同的实例属性(也就是相同的作用域)，而不能访问test的作用域 1234567891011121314151617181920212223// container.vue<template> <div> <slot></slot> </div></template><script> export default { data(){ return { userInfo: { name: 'zgl' ...

一、前言针对目前实际开发过程中，企业团队内部经常会使用一些功能一样的组件，不想到处复制粘贴，又不能将组件提交到公共的npm上，毕竟是公司的隐私信息，想像iView/ElementUI这些开发框架一样，使用到公司内部的所有系统中，因此，需要搭建公司内部的npm，npm如何搭建就不再描述了，可以参考另外一篇博客文章，这里主要是讲解下如何搭建自定义的组件库，并提供给到各个业务系统使用 二、组件库的制作2.1 组件库的初始化这里是在vue脚手架的基础上，自定义开发项目的公共组件库，并调整组件库的项目目录结构： 从👆组件库我们可以看出，与标准的vuecli创建出来的项目有所区别的： examples：存放着对每个组件的使用示例 lib：打包后的结果文件，以便于全局引用 packages：组件库所有的目录，每个组件都已单目录文件命名，且对应提供各自的index.js对外引用，且在packages根目录中提供公共的index.js，对每个组件进行安装； public：项目运行所在的html模版 vue.config.js：vue cli3.0对应的配置文件，里面对应配置每个页面的访问链接 pa ...