前端框架
文章平均质量分 91
学致前端攻略
学致前端攻略,致力于技术分享,本博客将每日分享互联网相关文章。
展开
-
ES6数组的扩展--Array.from()和Array.of()
目录一、 Array.from() : 将伪数组对象或可遍历对象转换为真数组1.何为伪数组2.有哪些是伪数组3.如何转化为真数组4.Array.from()用法二、Array.of(v1, v2, v3) : 将一系列值转换成数组一、 Array.from() : 将伪数组对象或可遍历对象转换为真数组1.何为伪数组如果一个对象的所有键名都是正整数或零,并且有length属性,那么这个对象就很像数组,语法上称为“类似数组的对象”(array-like object),即为伪数组。var obj = {转载 2021-04-07 15:34:15 · 375 阅读 · 0 评论 -
Webpack4.0各个击破(7)plugin篇
一. plugin概述1.1 Plugin的作用plugin机制是webpack中另一个核心概念,它基于事件流框架tapable,你可以参考浏览器环境中的*【DOM事件模型】,【SPA模型中的生命周期钩子】或是node环境中的【EventEmitter模块】*来理解其作用。plugin系统提供给开发者监听webpack生命周期并在特定事件触发时执行指定操作的能力。当然,要写一个真正能实现一定功能的插件,你还需要了解Compiler和Compilation这两个概念,网上可以找到非常多相关的文章(《we转载 2020-12-31 09:59:21 · 171 阅读 · 0 评论 -
Webpack4.0各个击破(6)loader篇
Webpack4.0各个击破(6)loader篇一. loader综述二. 如何写一个loader三. loader的编译器本质【参考】一. loader综述loader是webpack的核心概念之一,它的基本工作流是将一个文件以字符串的形式读入,对其进行语法分析及转换(或者直接在loader中引入现成的编译工具,例如sass-loader中就引入了node-sass将SCSS代码转换为CSS代码,再交由css-loader处理),然后交由下一环节进行处理,所有载入的模块最终都会经过moduleFact转载 2020-12-30 14:34:33 · 119 阅读 · 0 评论 -
Webpack4.0各个击破(5)module篇
一. 模块化乱炖脚本合并是基于模块化规范的,javascript模块化是一个非常混乱的话题,各种**【MD】**规范乱飞还要外加一堆【.js】的规范实现。现代化前端项目多基于框架进行开发,较为流行的框架内部基本已经统一遵循ES6的模块化标准,尽管支持度不一,但通过构建工具可以解决浏览器支持滞后的问题;基于nodejs的服务端项目原生支持CommonJs标准;而开发中引入的一些工具类的库,热门的工具类库为了能同时兼容浏览器和node环境,通常会使用UMD标准(Universal Module Defini转载 2020-12-29 14:26:36 · 216 阅读 · 0 评论 -
webpack4.0各个击破(4)—— Javascript & splitChunk
一. Js模块化开发javascript之所以需要打包合并,是因为模块化开发的存在。开发阶段我们需要将js文件分开写在很多零碎的文件中,方便调试和修改,但如果就这样上线,那首页的http请求数量将直接爆炸。同一个项目,别人2-3个请求就拿到了需要的文件,而你的可能需要20-30个,结果就不用多说了。但是合并脚本可不是*“把所有的碎片文件都拷贝到一个js文件里”*这样就能解决的,不仅要解决命名空间冲突的问题,还需要兼容不同的模块化方案,更别提根据模块之间复杂的依赖关系来手动确定模块的加载顺序了,所以利用自转载 2020-12-28 14:27:52 · 312 阅读 · 0 评论 -
webpack4.0各个击破(3)—— Assets篇
一. Assets资源的基本处理需求Assets,指项目中被引用的资源,通常为各种格式的图片和字体文件,当然也可能包含各式各样其他扩展名的文件(.json,.xml等),常见的图片和文字资源的处理包括:体积压缩雪碧图合并及引用修正资源的引用路径自动替换二. webpack处理引用资源2.1 资源打包webpack通过file-loader处理资源文件,它会将rules规则命中的资源文件按照配置的信息(路径,名称等)输出到指定目录,并返回其资源定位地址(输出路径,用于生产环境的publicP转载 2020-12-25 14:03:44 · 219 阅读 · 0 评论 -
webpack4.0各个击破(2)—— CSS篇
webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高。本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习webpack工具中相应的处理办法。(本篇中的参数配置及使用方式均基于webpack4.0版本)一. CSS文件基本处理需求假设项目中的CSS文件均采用预编译语言编写,那么在打包中需要处理的基本问题包括:预编译语言转换样式文件挂载方式选择代码优化(合并及压缩)去除或保留指定格式的注释资源定位路.转载 2020-12-24 10:42:45 · 259 阅读 · 0 评论 -
Flash 终将谢幕:微软将于年底( 2020 年 )停止对 Flash 的支持
近日,微软宣布将于今年 12 月终止对 Adobe Flash Player 的支持,届时,微软旗下所有浏览器都将无法使用 Flash,Adobe 也不会在今年 12 月后发布安全更新。早在 2017 年,Adobe、Apple、Facebook、Google 和 Mozilla 就已经宣布将于 2020 年 12 月停止对 Flash 的支持。微软将于年底终止自家浏览器对 Flash 的支持,其中包括 Edge(新版 Edge 和 Edge Legacy)和 IE 11。届时,微软网站上托管的与 A.转载 2020-12-11 15:42:40 · 521 阅读 · 0 评论 -
前端开源实战项目推荐
前言这段时间一直有学员和一些正在从事前端开发工作的朋友询问“有没有推荐的前端开源项目?”,因为一直忙于工作没有时间去整理,今天应各位的请求,我整理了一些开源项目 。推荐顺序与项目的好坏无关,框架的推荐顺序就大家询问的比例来分,跟当前市场框架的占有率无关,所以大家不要先入为主的认为我列在前面的可能就是好的。话不多说,我们进入正题。Vue.jsVue Element Adminvue-element-admin 是一个后台前端解决方案,它是基于 element-ui 实现的。..转载 2020-12-05 15:57:52 · 2210 阅读 · 2 评论 -
这几个小技巧,让你书写不一样的Vue!
前言最近一直在阅读Vue的源码,发现了几个实战中用得上的小技巧,下面跟大家分享一下。同时也可以阅读我之前写的Vue文章vue开发中的"骚操作"挖掘隐藏在源码中的Vue技巧!抽丝剥茧般的阅读源码,将$nextTick()拉下神坛!隐藏在源码中的技巧在实例化Vue时,首先调用的是Vue.prototype._init方法,而在此方法中mergeOptions()方法返回的options将运用在所有的初始化函数中。也就是如下代码:vm.$options = mergeOptions( reso转载 2020-10-24 14:22:03 · 474 阅读 · 0 评论 -
vue开发中的“骚操作“
前言在与同事协作开发的过程中,见识到了不少“骚操作”。因为之前都没用过,所以我愿称之为“高级技巧”!Vue.extend在交互过程中,有个需求就是点击图标弹出相关信息的弹窗,并且能够同时打开多个。这时就可以用Vue.extend方法手动挂载弹窗组件。举例:// 目录结构/registry /videoDialog videoDialog.vue index.js /XXXDialog ··· index.js// vid转载 2020-10-23 11:35:23 · 327 阅读 · 0 评论 -
关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案
原文地址: Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS 原文作者: Anthony Gore 译者: 蜗牛(GivenCui) 校对者: veizz "消除阻塞渲染的CSS和JavaScript"。 这一条Google Page Speed Insights的建议总让我困惑。当一个网页被访问时,Google希望它仅加载对初始视图有用的内容,并使用空闲时间来加载其他内容。这种..转载 2020-09-07 16:26:07 · 236 阅读 · 0 评论 -
我是怎样通过个人项目成长为高级 JavaScript 开发者的
大道理都是能用三两句话说清的 。在我开发人员的职业生涯中,最好的决定之一就是不再满足于只做工具的使用者。我决定创建我自己的工具,并不是为了卖钱,而是要了解这些技术的实际工作方式,并提升我的技术技能。本文是关于这个决定如何改变我生活的小故事。我的个人项目遇到的第一个重大挑战我一直都是玩 CSS 的。在 2015 年,对 CSS 的热情让我很快成为了我们国家(巴西)的专家级人物。那时,在我的朋友 Raphael Amorim 的鼓励下,我接受了“每天编写代码”挑战。挑战的内容基本上就是每天都在开.转载 2020-08-20 10:05:27 · 134 阅读 · 0 评论 -
面包屑导航实现与详解
前言什么是面包屑导航?我们来看看饿了吗和蚂蚁的面包屑组件饿了吗蚂蚁看了如上两个案例,大家对于面包屑导航应该就有概念了。那么在不使用任何前端框架的情况下,自己实现这个面包屑导航难吗?其实不难,今天我就教大家怎么在不使用任何前端框架的情况下,实现面包屑导航效果。正文在实现面包屑效果之前,你需要掌握 HTML + CSS 的基础知识,如果你还不知道什么是 HTML?什么是 CSS ?那么先去了解完这些基础知识。总体代码话不多说直接看代码:<!DOCTYPE html><h原创 2020-08-17 14:03:20 · 6413 阅读 · 1 评论 -
零基础学习前端需要掌握的技术和相关教程
前端基础前言简介正文阶段一一、HTML+CSSHTMLCSS二、HTML5+CSS3HTML5CSS3三、Javascript阶段二一、Jquery二、其他阶段三一、VUE二、React三、Node四、webpack阶段四一、Mysql二、Redis阶段五一、项目管理篇二、扩展部分小程序apicloud(移动app开发)三、常用框架使用篇四、综合项目实战前言学习是一个循序渐进的过程,前端的学习也是如此。不论前端开发还是后端开发的学习都要求我们多动手,既要反复的看书,也把学习到的知识点第一时间去实践。前原创 2020-08-07 16:14:10 · 835 阅读 · 0 评论