- 博客(23)
- 收藏
- 关注
RSS订阅原创 简单安装一个自己的脚手架
yo命令官网地址：https://yeoman.io/yoyeoman 制作脚手架命令安装npm install -g yoyo 命令的作用是制作脚手架命令yo --version 查看版本号制作脚手架*generater-generator 可以制作脚手架工具npm install -g generator-generator生成脚手架工具yo gennerator-脚手架名称制作中配置项目解释脚手架创建成功将自己的工程代码放入到脚手架中1更改pack.json文
2020-09-04 23:16:47
355
原创 vue中的钩子函数
钩子函数 定义 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做**生命周期钩子**的函数，这给了用户在不同阶段添加自己的代码的机会。生命周期图示钩子函数一个指令定义对象可以提供如下几个钩子函数 (均为可选)：bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用 (仅保证父节点存在
2020-08-04 23:00:29
5916
2
原创 前端能力中台化之路—Fusion Design 成长史(下)
4.FusionCool的诞生新的问题在完成Fusion Next + 配置平台体系之后,逐渐开始接入实际的项目中使用。前端工程师很开心,因为不用去投入开发组件库和调整还原度。可是业务方的设计师用的不开心了。凭空增加他们的工作量却没有帮他们提效。下图是设计领域很受欢迎的软件 Sketch。左边是默认样式的设计素材,一般由组件开发团队对外提供。右边是修改过样式后的组件。虽然在配置平台可以很方便的调整组件样式。可是在Sketch中,设计师要把左边样式的 Button 调整为橙色圆角 Button ,至少需
2020-07-28 21:42:54
905
原创 前端能力中台化之路—Fusion Design 成长史(中)
3.Fusion Design 成长历程Fusion Next & 样式配置平台为了解决多业务多样式的问题,我们自己独立维护了一套组件库 Fusion Next。然后为这套组件库打造了一个配置平台。二者结合就是一个组件库工厂,可以生产出各种样式的组件库。效果如图所示:实现Fusion Next & 样式配置平台的核心技术点有三个。变量抽取规则实现动态渲染接下来一一讲述。变量抽取变量抽取就是决定一个组件哪些量是可以配置,那些量不可以配置,可以配置的量抽离出
2020-07-17 22:21:12
504
原创 前端能力中台化之路—Fusion Design 成长史(上)
1.浅谈中台在开始正文内容之前,先简单聊聊“中台”这个词。首要要说的是“中台”这个词中台非常火,从去年下半年到现在,互联网届多家知名大公司都公布组织架构调整,纷纷表示要建立各种中台。另一方面,“中台”这个词暂时还没有一个很学术很权威的定义。笔者在知网搜索“中台”,前8页都没有看到任何一家商学院或者经管学院发表和“中台”有关的论文。所以这里只能基于笔者自己的理解简单聊聊“中台”。以战争做一个比喻。上图是《红海行动》中的一张剧照。其中黄景瑜饰演的狙击手和恐怖分子对狙的那场现在还是印象深刻。那么我方狙
2020-07-16 23:05:26
711
转载 微前端
在 toB 的前端开发工作中，我们往往就会遇到如下困境：工程越来越大，打包越来越慢团队人员多，产品功能复杂，代码冲突频繁、影响面大内心想做 SaaS 产品，但客户总是要做定制化不同的团队可能有不同的方法去解决这些问题。在前端开发日新月异、前端工程化蓬勃发展的今天，我想给大家介绍下另一种尝试——微前端。微前端是什么那什么是微前端？微前端主要是借鉴后端微服务的概念。简单地说，就是将一个巨无霸（Monolith）的前端工程拆分成一个一个的小工程。别小看这些小工程，它们也是“麻雀虽小，五脏俱全”，完
2020-07-14 23:12:09
381
原创 js中冒泡和捕获/阻止冒泡和捕获事件
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡 事件流描述的是从页面中接收事件的顺序。提出事件流概念的正是IE和Netscape，但是前者提出的是我们常用的事件冒泡流，而后者提出的是事件捕获流。第一部分：事件冒泡 即事件开始由最具体的元素接收，然后逐级向上传播到较为不具体的节点（文档）。 下面举一个简单的例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
2020-07-13 22:44:54
5631
原创 js轮播图的切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ pad
2020-07-09 22:46:38
127
原创 原生js实现按钮改变颜色其他颜色不变的操作
这个使用预设置类名再添加<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .
2020-07-08 22:02:13
2994
原创 js 闭包与垃圾回收机制的理解
一.垃圾回收机制JavaScript自动回收不再使用的变量,释放其所占的内存,开发人员不需要手动的做垃圾回收的处理.垃圾回收机制只会回收局部变量.全局变量并不会被回收(全局变量在浏览器关闭之后会回收),所有当我们定义了一个全局对象时,使用完毕之后,最好给它重新复制为null,以便释放其所占的内存(这个变量并没有被回收,只是改变了他的志向,减少内存占用)目前浏览器基本都使用标记清除(介绍…)的方式,还有一种不常见的引用计数(介绍…)方式1.标记清除: 当某个变量不再被使用时,该变量就会被回收.
2020-07-03 22:37:33
1039
原创 js常见的错误抛出信息
1. SyntaxError：语法错误// 1.1 变量名不符合规范var 1 // Uncaught SyntaxError: Unexpected numbervar 1a // Uncaught SyntaxError: Invalid or unexpected token// 1.2 给关键字赋值function = 5 // Uncaught Syn
2020-07-03 19:42:16
883
原创 js中的回调函数的简单理解
一、前奏在谈回调函数之前，先看下下面两段代码：不妨猜测一下代码的结果。function say (value) { alert(value);}alert(say);alert(say('hi js.'));如果你测试了，就会发现：1、只写变量名 say 返回的将会是 say方法本身，以字符串的形式表现出来。2、而在变量名后加()如say()返回的就会使say方法调用后的结果，这里是弹出value的值。二、js中函数可以作为参数传递再看下面的两段代码：functi
2020-07-01 19:53:55
143
原创 js的预编译解析
一、js运行三部曲：1.语法分析（通篇扫描看有没有语法错误）2.预编译3.解释执行二、预编译前奏1、imply global 暗示全局变量：任何变量如果未经声明就赋值，此变量为全局对象所有eg: a = 123;var a = b =123;2、一切声明的全局变量，全是window的属性，一切定义在全局上的变量，都归window所有（window等价于全局）eg: console.log(a) 等价于 console.log(window.a);举个例子：<scrip
2020-06-29 21:09:58
201
原创 js的数组排序方法
1. JavaScript的sort()方法var array = [1,4,-8,-3,6,12,9,8];function compare(val1,val2){ return val1-val2;};array.sort(compare);document.write(array);sort()方法按照升序排列数组项，会调用每个数组项的toString()转型方法，然后比较得到的字符串。toString()方法是把布尔值或BooleanObject转换为字符串，并返回结果。
2020-06-29 20:58:18
264
原创 JavaScript字符串常用api
常用的一些字符串操作 API 整理1.str.charAt(index)、str.charCodeAt(index) - 返回指定位置的字符 / 字符编码(0~65535) index - 必须，表示字符串中某个位置的数字，即字符在字符串中的下标，从 0 开始。 charAt(index)，如果参数 index 不在 0 与 string.length 之间，该方法将返回一个空字符串。 charCodeAt(index)，如果 index 是负数，或大于等于字符串的长度，则 charCodeA
2020-06-23 21:57:14
380
1
原创 JavaScript数组常用的api方法
在此对js中数组常用的api进行汇总。1.检测数组：判断value是否为数组类型Array.isArray(arr);2.转换方法：将数组colors转化成以逗号分隔的字符串alert(colors.toString());3.栈、队列方法：分别实现先进先出、后进先出的效果。var a=[1,2,3,4];a.push(5);//[1, 2, 3, 4, 5]a.shift();//[2, 3, 4, 5]a.pop();//[2, 3, 4]a.unshift(0);//[0, 2
2020-06-23 21:40:17
212
原创 css如何实现三角形的方法
在开发页面的时候，遇到很多的列表都需要用到箭头，可以直接用图片作背景铺垫，纯CSS也能实现，并且没有兼容性顾虑，不用CSS3,相比而言，比图片更好用。原理：一个高宽相等的正方形，选取你所需要的某一边，截取之，就是一个梯形，当高宽都为0，且其他边为透明颜色时，一个三角形就出来了梯形代码： div{ width: 50px; height: 50px; border: 50px solid transparent;
2020-06-20 14:41:39
424
1
原创 js中数据类型的判断的方法
1: typeof返回数据类型，包含这7种： number、boolean、symbol、string、object、undefined、function。typeof null 返回类型错误，返回object引用类型，除了function返回function类型外，其他均返回object。其中，null 有属于自己的数据类型 Null ， 引用类型中的 数组、日期、正则 也都有属于自己的具体类型，而 typeof 对于这些类型的处理，只返回了处于其原型链最顶端的 Object 类型，没有错，但
2020-06-19 21:35:16
83
原创 js运算符的使用
一、算术运算符（+、-、*、/、%）1、“+”分为字符相加和数值相加2、“-”、“*”、“/”、“%”都是隐式转换为数值运算，二、赋值运算（+=、-=、*=、/=、%=）赋值运算就是在原数据的基础上进行累加，累减等操作。三、一元运算符a++和++a 的区别：运算以后a 的值没有区别。a++的结果是a的值，++a的结果是a+1以后的值。s=i++是把i给s然后i再+1；s=++i是把i+1以后的值给s;四、关系运算（>、>=、<、<=、==、===）隐式转为
2020-06-18 19:15:17
860
原创 github命令操作
1.创建一个新的repository：先在github上创建并写好相关名字，描述。$cd ~/hello-world //到hello-world目录,本地目录名与repository的名字不一定相同$git init //初始化$git add . //把所有文件加入到索引（不想把所有文件加入，可以用gitignore或add 具体文件)gitcommit//提交到本地仓库，然后会填写更新日志(−m“更新日志”
2020-06-15 19:36:01
135
原创 css中浮动的清除
为什么要清除浮动呢？因为浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。解决浮动引起的问题有多种方法，但有些方法在浏览器兼容性方面还有问题。方式一、父级div定义 height.div1 { background: #000080; border: 1px solid red; height:
2020-06-11 20:04:07
95
原创 CSS hack的方式
什么是CSS hack由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!CSS hack的原理由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览
2020-06-09 19:20:02
82
原创 CSS中苹果X全面屏的适配问题解决方法
前言iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。笔者通过查阅了一些官方文档，以及结合实际项目中的一些处理经验，整理了一套简单的适配方案分享给大家，希望对大家有所帮助，以下是处理前后效果图：适配之前需要了解的几个新知识安全区域安全区域指的是一个可视窗口范围，处于安全区域的内容不
2020-06-08 19:40:58
1382
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人