前端入门
文章平均质量分 51
前端入门
立志成为一名前端架构师
我希望我一直是一名学生,一直奔跑在学习的道路上, 天道酬勤
展开
-
使用 nvm 管理不同版本的 node 与 npm
前言在我们的日常开发中经常会遇到这种情况:手上有好几个项目,每个项目的需求不同,进而不同项目必须依赖不同版的 NodeJS 运行环境。如果没有一个合适的工具,这个问题将非常棘手下载和安装首先最重要的是:一定要卸载已安装的 NodeJS,否则会发生冲突。然后下载 nvm-windows 最新安装包,直接安装即可nvm命令安装 node/npm// nvm install + 版本号nvm install 10.0.1列出已安装 node/npmnvm list 或nvm ls切换使原创 2021-06-06 14:58:05 · 247 阅读 · 0 评论 -
vue 过滤器的使用
vue 过滤器使用原创 2021-06-01 09:02:46 · 109 阅读 · 0 评论 -
学习 CSS 世界
本篇文章是学习css世界的心得体会属性值: 属性冒号后面的所有内容统一称为属性值属性名加上属性值就是声明宽度分离width 和 padding margin 等待分开写原创 2021-04-26 23:41:14 · 96 阅读 · 0 评论 -
export 和 export default区别
含义ES6模块主要有两个功能:export 和 importexport用于对外输出本模块(一个文件可以理解为一个模块)变量的接口import用于在一个模块中加载另一个含有export接口的模块区别在一个文件或模块中,export、import可以有多个,export default仅有一个模块中通过export 导出的(属性或者方法)可以修改,但是通过export default导出的不可以修改用法export 导出时,import 要用大括号括起来// a.js中export c原创 2021-04-08 21:31:25 · 563 阅读 · 0 评论 -
公共API 接口
公共API接口木小果聚合数据网易云API原创 2021-03-18 15:05:08 · 1636 阅读 · 3 评论 -
前端布局基础
前端布局种类:传统布局方案(借助浮动、定位等手段)flex布局方案grid布局方案流式布局(百分比布局)传统布局方案需要使用者熟练掌握元素的分类及布局特性、浮动原理和定位原理等众多基础知识,方能在解决各类前端布局问题时游刃有余,这不仅学习成本大,而且实现的复杂度也高,实现的CSS代码也不够精简、优雅。但由于其基础知识来源于CSS2,所以浏览器兼容性最好,对于用户是友好的flex布局方案正是为了解决传统布局方案的种种不便,而提出的一种新型改进方案,它不再需要借助浮动和定位等布局手段,而是通原创 2021-03-24 23:52:45 · 99 阅读 · 0 评论 -
JS 原始值和引用值区别,以及深浅拷贝
含义原始值就是最简单的数据,引用值就是由多个值构成的对象原始值 (复制值)nullundefinedNumberStringBoolean当我们把这些初始值赋给了变量的时候, 我们 复制了值.var a = 5;var b = a;a = 10;console.log(a); // 10console.log(b); // 5 没有变化引用值 (复制引用)ObjectArrayFunctionvar obj1 = {a: 1} //引用值var ob原创 2021-03-24 22:41:44 · 195 阅读 · 0 评论 -
bootstrap3 和 bootstrap4 布局区别
采坑记录2019年3月22日,接到一个bootstrap项目,项目为了兼任IE8、IE9,放弃使用bootstrap4,选用bootstrap3,之前用bootstrap4写的页面都得重写,我先擦干眼泪先布局区别bootstrap4它的源码是采用 Sass 语言编写的,使用flex的布局方式,IE10+才支持Flex,bootstrap3使用float的布局方式,bootstrap3里面使用push和pull向左和向右移动懂得用还得懂原理一定要去看框架代码,看是怎么实现的,这两个UI库的源码应该原创 2021-03-24 00:16:33 · 313 阅读 · 0 评论 -
CSS布局 之 水平居中、垂直居中
CSS水平居中、垂直居中一样都是前端设计师的基本功下面来详细解答一下行内元素、块级元素水平垂直居中的案例1. 水平居中1.1 out 为块级元素,in 不管是行内、行内块、块级,使用flex,都会水平居中.out { display: flex; justify-content: center;}```html<div class="out"> <div class="in"></div></div>1.2 out 为块级,in原创 2021-03-24 00:01:23 · 103 阅读 · 0 评论 -
前端 杂项
前端六个基本概念Library,Toolkit,Framework,Design,Boilerplate,ScaffoldingLibrary (库)Library就是库,而且分为两类1 方法库用来实现特定需求的一组API集合。最常见的就是jQuery,除了jQuery,还有早期的Prototype,Dojo,Mootools2 UI组件库满足特定业务需要的高可复用的常见UI组件集合,例如Ant Design of React/Ant Design of Angular(NG-ZORRO),原创 2021-03-18 11:40:15 · 125 阅读 · 0 评论 -
媒体查询
为什么学习媒体查询?实现页面在不同设备下正常预览 ,实现响应式媒体类型all 用于所有设备screen (电脑屏幕,平板电脑,智能手机)print 用于打印机和打印预览speech 应用于屏幕阅读器等发声设备媒体特性width 网页显示区域完全等于设置的宽度height 网页显示区域完全等于设置的高度max-width / max-height 网页显示区域 小于等于 设置的宽度min-width / min-width 网页显示区域 大于等于 设置的宽度orientatio原创 2021-03-16 20:26:35 · 117 阅读 · 0 评论 -
JS 数组方法
JS 数组方法把数组转换为字符串toString() 把数组转换为数组值(逗号分隔)的字符串let arr = ['lwb' , 20 , 'boy']let str = arr.toString() // "lwb,20,boy"join() 方法也可将所有数组元素结合为一个字符串let arr = ['lwb' , 20 , 'boy']let str = arr.join('--') // "lwb--20--boy"pop() 方法从数组中删除最后一个元素let arr原创 2021-03-15 23:59:31 · 122 阅读 · 0 评论 -
JS 字符串方法
JS 字符串方法1. 字符串长度length 属性返回字符串的长度var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";var sln = txt.length; // 262. 查找字符串中的字符串indexOf() 方法返回字符串中指定文本首次出现的索引var str = "hello lwb";var pos = str.indexOf("lwb"); // 6lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引var原创 2021-03-15 21:28:49 · 125 阅读 · 0 评论 -
CSS 可继承和不可继承属性
可继承性和不可继承CSS 属性是否可以向子孙传递原创 2021-03-14 16:24:21 · 209 阅读 · 0 评论 -
快速掌握Flex布局
Flex布局之前还没学习过flex布局的,建议先去看看 阮一峰老师的Flex布局教程Flex 例子<div class="box"> <span class="item"></span></div>上面代码中,div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目。如果有多个项目,就要添加多个span元素,以此类推1. 单项目Flex布局默认就是首行左对齐.box { display: flex;原创 2021-03-13 13:25:48 · 159 阅读 · 0 评论 -
CSS 命名规范
什么是BEMBEM是一种前端 CSS 命名方法论BEM 是块(block)、元素(element)、修饰符(modifier)的简写为什么需要BEM假如编写项目的 CSS 代码只有你一个人,或者项目的 CSS 代码量很小,你可以用你喜欢,习惯的方式去组织你的 CSS 代码。但是项目更大,更复杂,有多人编写项目的 CSS 代码,代码量大的时候,就需要一种统一形式去组织 CSS 代码,这时候 BEM 就派上用场了BEM 命名规范- 中划线 :仅作为连字符使用,表示某个块或者某个子元素的多单词之间的连原创 2021-03-12 17:06:23 · 156 阅读 · 0 评论 -
JavaScript 规范及命名
1. 变量类型及声明1.1 使用const赋值,避免使用var确保初始值不容易改变,避免重复引用会导致许多bug// badvar num1 = 1var num2 = 2// goodconst num1 = 1const num2 = 21.2 如果需要对参数重新赋值,使用let,不使用var// badvar count = 1if (true) { count += 1}// goodlet count = 1if (true) { count +=原创 2021-03-10 21:52:13 · 196 阅读 · 0 评论 -
Git 规范
1. 分支命名与保护1.1 分支命名1.1.1 master(主分支)主分支,线上环境该分支为只读分支,只能从 test 分支合并,不能直接在此分支上进行修改有在 master 分支的推送应该打标签做记录,方便追溯1.1.2 release(预发布分支)预发布分支,基于 dev 分支克隆基于 dev 分支创建 release 分支进行测试测试中若存在 bug 需要修复,则直接由开发者在 release 分支修复并提交,修复完成之后合并到 dev 分支1.1.3 dev(主开发分支原创 2021-03-09 21:31:05 · 143 阅读 · 0 评论 -
前端 CSS 规范和命名
1. Id 和 class 命名分隔符/* bad "demo" 和 "image" 之间没有分隔符 */.demoimage {} /* bad 使用下划线 */.error_status {} /* good 选择器中使用连字符,以提高可读性 */#video-id {}.ads-sample {}2. 值与单位2.1 单位值为 0 时不用添加单位margin: 0;padding: 0;值在 -1 和 1 之间时,不需要加 0font-size: .8em原创 2021-03-09 21:00:22 · 104 阅读 · 0 评论 -
HTML5语义化标签
什么是语义化?使用语义恰当的标签,可以让页面具有良好的结构,页面具有良好的含义,从而让人和机器都能快速理解以下为摘抄他人的https://blog.csdn.net/qq_38128179/article/details/80811339原创 2021-03-07 11:34:58 · 64 阅读 · 0 评论 -
前端
前端什么是前端开发工程师前端开发的工作内容前端开发的工作流程前端开发的产品展示前端开发的市场需求 以及 薪资待遇什么是前端开发工程师前端开发工程师其实就跟建筑工人一样,因为在行业里,也把开发人员称作为码农,码农其实就是互联网上的农民工,前端开发工程师是一个非常全能的建筑工人,类似在互联网上盖楼,无论电脑运行的各种网页和软件,手机端运行的各种网页和APP,小程序等等都属于前端开发的范围,最终建设成可运行的、美观的网站或APP前端开发的工作内容从形式上分为PC端开发和移动端开发PC端原创 2021-03-07 09:47:55 · 178 阅读 · 2 评论 -
行内元素 、块级元素 、行内块元素
行内元素 、块级元素 、行内块元素区别行内元素无论内容多少,总是独占一行设置宽高无效对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效不会自动进行换行行内元素只能容纳文本或者其他行内元素块级元素能够识别宽高margin和padding的上下左右均对其有效可以自动换行多个块状元素标签写在一起,默认排列方式为从上至下行内块元素不自动换行能够识别宽高默认排列方式为从左到右相互之间转化display:inline : 转换为行内元素dis原创 2021-03-07 08:33:05 · 403 阅读 · 1 评论