前端
关注
分享
扫一扫
文章平均质量分 63
樱桃小丸犊子吖
“落日弥漫的橘，天边透亮的星”
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
浅谈前端工程化介绍--模块化、组件化、规范化、自动化
首先我们要明白工程化是一种思想而不是某种技术, 其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间等，注重基本的开发效率、运行效率的同时，思考维护效率。 再用一句通俗的话来概括前端工程化：前端工程化就是用做工程的思维看待和开发自己的项目,而不再是直接撸起袖子一个页面一个页面开写，所以，一切以提升前端开发效率，降低前端开发成本，提高前端应用质量为目标的工作都是“前端工程化”。什么是前端工程化所谓工程化即系统化、模块化、规范化的一个过程。传统的软件开发过程是一原创 2021-02-24 17:21:34 · 2550 阅读 · 0 评论 -
ElementUI源码阅读——前言: 准备工作
最近看到一句话 我觉得说的非常正确：“感觉现在的业务开发，如果不是很特殊的需求，基本都能在对应的组件库内找到组件使用，这样编写代码就成了调用组件，但是却隐藏了组件内的思想，因此弱化了编程能力，所以我想写这么个分析系列来鞭策自己深入分析组件的原理，提高代码阅读理解能力，我觉得一定要记下点什么来，如果只是看不动笔感觉很快就忘了，因此准备持续写这么个分析。”所以看了这篇博主超级索尼对Element源码的系列分析【还没有看完，理解了Layout(布局)和Button(按钮)】插入：element-pro原创 2021-02-20 14:27:58 · 761 阅读 · 1 评论 -
Vue中使用TypeScript： vue-property-decorator使用
安装使用@Componentvue-property-decorators仓库GitHub地址：https://github.com/kaorun343/vue-property-decoratorVue中使用TypeScript时，用到了一个非常好用的库：vue-property-decorators ，它使用装饰器来简化书写, 这个组件完全依赖于vue-class-component它具备以下几个属性：@Component (完全继承于vue-class-component)@Emi.原创 2021-02-19 17:12:51 · 637 阅读 · 0 评论 -
Git 提交规范 Git常用命令
commit描述： 代码的提交应该清晰明了，说明本次修改的主要内容commit类型：feat：新功能（feature）fix：修补bugdocs：文档（documentation）style： 格式（不影响代码运行的变动）refactor：重构（即不是新增功能，也不是修改bug的代码变动）test：增加测试perf: 性能优化chore：构建过程或辅助工具的变动commit提交注事项：单个功能开发尽量开发一个完成功能后在进行commit多功能同时开发，切换分支，可以使用git s原创 2021-01-21 17:06:04 · 1114 阅读 · 0 评论 -
JS电话号码中间星号表示
let tellphone = '电话号码';正则表达式/* 方法一： */const regPhone = tellphone.replace(/^(\d{3})\d{4}(\d+)/, "$1****$2");console.log(regPhone); // 183****0256字符串拼接/* 方法二： */const phone = tellphone.substr(0, 3) + "****" + tellphone.substr(7);console.log(p原创 2021-01-05 17:59:14 · 1125 阅读 · 0 评论 -
Element-UI多选框默认禁选
实现表格多选框https://element.eleme.cn/#/zh-CN/component/table#duo-xuan实现多选非常简单: 手动添加一个el-table-column，设type属性为selection即可；默认情况下若内容过多会折行显示，若需要单行显示可以使用show-overflow-tooltip属性，它接受一个Boolean，为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。<el-table v-loading="fetchLoa原创 2020-12-30 13:31:05 · 465 阅读 · 0 评论 -
基于element的表单渲染器 (el-form-renderer)
GitHub地址： @femessage/el-form-renderer基于 element-ui 封装的表单渲染器，完整继承了 element 的属性定义，并进行了简单扩展，从而用户能够通过使用一段预设的数据渲染出一个完整的 element 表单。但它不仅仅是 element-ui ，甚至不仅仅是表单。Element-UI 表单链接地址： https://element.eleme.cn/#/zh-CN/component/formElement-UI 的Form Attributes、Met原创 2020-12-02 17:51:55 · 942 阅读 · 0 评论 -
JS判断字符串长度（区分中英文）
function strlen(str) { let temp = 0; for (let i = 0; i < str.length; i++) { if (str.charCodeAt(i) > 127 || str.charCodeAt(i) == 94) { temp += 2; } else { temp++; } } return temp ; };function strle原创 2020-11-16 13:37:21 · 472 阅读 · 0 评论 -
elementUi【 下拉框】样式修改无效或者无法修改？
先提前做个demo<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>Vue 下拉框</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" /> <script src="https://unpkg原创 2020-11-16 11:10:16 · 1841 阅读 · 0 评论 -
CSS超全总结(超多干货)
CSS三大特性—— 继承、 优先级和层叠继承：即子类元素继承父类的样式;优先级：是指不同类别样式的权重比较;层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。链接：https://segmentfault.com/a/1190000014833437?utm_source=sf-related选择器与优先级###一、元素选择符通配选择符(*):选择所有元素类型选择符(E)：以文档对象类型作为选择符id选择符(E#id):以唯一标识符id属性等于id的E对象作为选择符cla原创 2020-08-15 23:08:12 · 495 阅读 · 0 评论 -
JavaScript原型链以及Object，Function之间的关系 后附两题
JavaScript里任何东西都是对象，任何一个对象内部都有另一个对象叫__proto__，即原型，它可以包含任何东西让对象继承。当然__proto__本身也是一个对象，它自己也有自己的__proto__，这样一级一级向上，就构成了一个__proto__链，即原型链。当然原型链不会无限向上，它有个终点，可以称为原型链的顶端，或者root，它是一个特殊的对象，它的__proto__为null。obj.__proto__.__proto__......__proto__ === null; 但是对象原创 2020-08-15 01:00:11 · 304 阅读 · 0 评论 -
类的封装继承多态
先思考一个问题： 什么是面向对象（OOP）类的继承封装多态封装： 高内聚低耦合 把实现功能的函数写成方法多态： 重载和重写重载：方法名相同，形参个数/类型不一样（JS不存在真正意义上的重载）重写：在类的继承中， 子类可以重写父类中的方法继承： 子类继承父类上的属性和方法（目的是让子类的实例享有父类的属性和方法）为什么要继承？方法一：原型链继承父类中的属性和方法在子类实例的原型链上关键： 子类型的原型为父类型的一个实例对象children.prototype = new pa原创 2020-08-09 13:20:19 · 158 阅读 · 0 评论 -
vue常用的修饰符
1. 事件修饰符.stop 阻止点击事件冒泡 等同于JavaScript中的event.stopPropagation().prevent 防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播），等同于JavaScript中的event.preventDefault()，.prevent 用于取消默认事件 等同于JavaScript的event.preventDefault()。.capture 与事件冒泡的方向相反，事件捕获由外到内,捕获事件.self 只会触发自己范围内原创 2020-08-05 00:26:15 · 249 阅读 · 0 评论 -
vue实现数据双向绑定MVVM原理
vue实现数据双向绑定主要是：采用 数据劫持 结合 发布者-订阅者模式 的方式，数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变核心( Vue2.0 )：通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。为什么Vue3.0不再使用defineProperty实现数据监听Object.defineProperty 真的无法监测数组下标的变化吗？ Object.definePro原创 2020-08-05 00:23:46 · 509 阅读 · 0 评论 -
安全防范知识点 XSS CSRF
1. 能不能说一说XSS攻击？XSS 攻击是指浏览器中执行恶意脚本, 然后拿到用户的信息进行操作。XSS 简单点来说，就是攻击者想尽一切办法将可以执行的代码注入到网页中。窃取Cookie。监听用户行为，比如输入账号密码后直接发送到黑客服务器。修改 DOM 伪造登录表单。在页面中生成浮窗广告主要分为存储型、反射型和文档型。存储型，顾名思义就是将恶意脚本存储了起来，确实，存储型的...原创 2020-04-29 11:49:36 · 286 阅读 · 0 评论 -
get请求和post请求的理解与区别
HTTP协议中常见的两种发送请求的方法是：get 和 postGET: 从指定的资源请求数据，用于获取数据。POST: 向指定的资源提交要被处理的数据，用于将数据发送给服务器。Eg: GET的语义会被用在「看看我的Timeline上最新的20条微博」这样的场景，而POST的语义会被用在「发微博、评论、点赞」这样的场景中HTTP的底层是TCP/IP。所以GET和POST的底层也是TCP/...原创 2020-04-25 23:26:25 · 299 阅读 · 1 评论 -
浅谈CSS重绘和回流（重排）—— 如何减少重绘和回流（重排）
浏览器的渲染过程解析HTML，构建DOM树解析CSS，生成CSS规则树合并DOM树和CSS规则，生成render树布局render树（Layout/reflow），负责各元素尺寸、位置的计算绘制render树（paint），绘制页面像素信息浏览器会将各层的信息发送给GPU，GPU会将各层合成（composite），显示在屏幕上基本概念重绘：当页面...原创 2020-04-10 14:23:31 · 5057 阅读 · 2 评论 -
J关于JS事件冒泡与JS事件委托（事件代理）
什么叫事件委托呢即事件代理：对“事件处理程序过多”问题的解决方案就是事件委托。例如， click 事件会一直冒泡到 document 层次。也就是说，我们可以为整个页面指定一个 onclick 事件处理程序，而不必给每个可单击的元素分别添加事件处理程序。1. 基本概念： JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事...原创 2020-04-09 17:09:37 · 385 阅读 · 0 评论 -
HTTP常见知识点之——最常见的请求头及Http缓存（浏览器缓存）和应用程序缓存
应用程序缓存应用程序缓存是 HTML5 的重要特性之一，提供了离线使用的功能，让应用程序可以获取本地的网站内容，例如 HTML 、 CSS 、图片以及 JavaScript 。这个特性可以提高网站性能，它的实现借助于 manifest 文件，如下：<!doctype html><html manifest=”example.appcache”></htm...原创 2020-03-12 21:23:31 · 1701 阅读 · 0 评论 -
svg与canvas画布的区别
什么是SVG？SVG可缩放矢量图形是基于可扩展标记语言（ XML ），用于描述二维矢量图形的一种图形格式。SVG 是 W3C（即 国际互联网标准组织）制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。SVG 严格遵从 XML 语法，这也就是说 SVG DOM 中的每个元素都是可用的，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。在 SVG ...原创 2020-03-08 13:07:03 · 253 阅读 · 0 评论 -
WEB标准以及W3C的理解与认识
WEB标准 不是某一个标准，而是一系列标准的集合。这些标准大部分由 万维网联盟 （外语缩写： W3C ）起草和发布，也有一些是其他标准组织制订的标准。 W3C：万维网联盟，是一个web开发的国际性联盟网页主要由三部分组成：结构、表现、和行为对应的标准也分三方面结构化标准语言主要包括XHTML和XML表现标准语言主要包括CSS行为标准主要有包括对象模型（如W3C DOM）、EC...原创 2020-03-05 16:35:03 · 852 阅读 · 0 评论 -
对HTML5的认识及优缺点
网络标准 HTML5本身是由W3C推荐出来的多设备跨平台 用HTML5的优点主要在于，这个技术可以进行跨平台的使用自适应网页设计即时更新 游戏客户端每次都要更新，很麻烦。可是更新HTML5游戏就好像更新页面一样，是马上的、即时的更新。总结概括HTML5有以下优点：提高可用性和改进用户的友好体验;有几个新的标签，这将有助于开发人员定义重要的内容;可以给站点带来更多的多...原创 2020-03-05 13:59:54 · 658 阅读 · 0 评论 -
webstorage本地存储及localStorage、sessionStorage用法以及session和cookie简单理解及区别
一、webstorage本地存储webstorage是本地存储，存储在客户端，包括localStorage和sessionStoragelocalStorage生命周期是永久，这意味着除非用户手动在浏览器提清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信sessionStorage仅在当前会话下有...原创 2020-03-03 15:47:47 · 826 阅读 · 0 评论 -
HTML5新增的表单元素
HTML5 新的 Input 类型HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。emailurlnumberrangeDate pickers (date, month, week, time, datetime, datetime-local)searchcolorEg:Input 类型 - email email 类型用于应该包含 e-m...原创 2020-02-29 22:59:28 · 632 阅读 · 0 评论 -
事件的三个阶段：捕获阶段 目标阶段 冒泡阶段及防止冒泡和捕获
最恰当的比喻：可以想象画在一张纸上的一组同心圆，如果你把手指放在圆心上，那么你的手指指向的其实不是一个圆，而是纸上所有的圆。放到实际页面中就是，你点击一个按钮，事实上你还同时点击了按钮所有的父元素。事件流阶段是捕获阶段 (从根节点开始顺着目标节点构建一条事件路径，即事件由页面元素接收，逐级向下，到具体的元素)目标阶段 (到达目标节点，即元素本身)冒泡阶段 (从目标节点顺着捕获阶段构建...原创 2020-02-29 22:29:47 · 6546 阅读 · 2 评论 -
常见HTTP状态码参考
HTTP 状态码（是用以表示网页服务器超文本传输协议响应状态的 3 位数字代码，由 RFC 2616 规范定义的，所有状态码的第一个数字代表了响应的五种状态之一。HTTP状态码总的分为五类：1XX. 信息状态码 服务器收到请求，需要请求者继续执行操作2XX. 成功状态码 操作被服务器成功接收并处理3XX. 重定向状态码 需要进一步的操作以完成请求4XX. 客户端错误状态码...原创 2020-02-25 21:12:36 · 285 阅读 · 0 评论 -
13个需要知道的方法：使用 JavaScript 来操作 DOM
文章目录HTML DOM createElement() 方法HTML DOM querySelector / querySelectorAll() 方法HTML DOM appendChild() 方法HTML DOM removeChild() 方法HTML DOM replaceChild() 方法HTML DOM cloneNode 方法HTML DOM insertBefore() 方法...原创 2019-12-11 21:30:22 · 170 阅读 · 0 评论 -
Webstorm添加新建文件类型 & 创建文件模板
Webstorm添加新建文件类型以创建Vue文件为例： File—Setting—Editor—File and Code Template分支，点击添加，依次输入Name和Extension，OK即可。如图：Webstorm创建文件模板 Webstorm新建文件过程中现在文件头部加入创建时间，作者信息，项目名称，需要用到修改默认的模板，即上一步，如图： Webstorm提供了...原创 2019-09-03 18:05:11 · 3841 阅读 · 1 评论 -
CSS清除浮动的几种方法
清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度塌陷的问题1.额外标签法：使用clear:both清除浮动 在浮动元素后面使用一个空的自身清除浮动的元素，即在最后一个浮动标签后，新加一个标签，给其设置clear：both；<!--清除浮动样式--><div style="clear: both"></div> 其优点是简单，方便兼...原创 2019-12-07 17:07:19 · 234 阅读 · 1 评论 -
CSS选择器及其优先级
文章目录css选择器种类css样式优先级规则css优先级不同级别同一级别css选择器种类通用选择器：*id选择器：#header{}class选择器：.header{}元素选择器：body,div,p,ul,li子选择器：ul > li{}后代选择器：div p{}群组选择器： div,span{color:red} 即具有相同样式的标签分组显示伪类选择器：:hover...原创 2019-12-07 15:21:08 · 314 阅读 · 0 评论 -
元素垂直&水平居中
元素居中是一个老生常谈的问题了，这一次就好好的做一个总结吧：行内元素、块级元素、定宽定高不定宽不定高元素之间等等，其垂直水平居中 先从简单的入手吧~~如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。<style> .txtCenter { text-align: center; }...原创 2019-12-07 11:09:21 · 275 阅读 · 2 评论 -
谈谈你对MVVM 的理解？
MVVM 由 Model,View,ViewModel 三部分构成：Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象，负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作；+在MVVM架构下，View 和 Model 之间...原创 2019-12-04 19:51:56 · 317 阅读 · 0 评论 -
常见的使用 JS 来动态操作 css方法，你应该了解这些
直接在.style对象上设置样式属性将需要使用驼峰式命名作为属性键，而不使用短横线命名；如果需要设置更多的内联样式属性，则可以通过设置.style.cssText属性，以更加高效的方式进行设置 。const el = document.createElement('div')el.style.backgroundColor = 'red'// 或者 el.style.cssText ...原创 2019-12-04 19:45:44 · 168 阅读 · 0 评论 -
webpack 版本过高引起 初试npx create-react-app hello-react报错
创建项目并启动npm install -g create-react-app，create-react-app hello-react，cd hello-react，cnpm start然后成功报错：BYs-MacBook-Pro:hello-react wangbing$ cnpm start> hello-react@0.1.0 start /Users/wangbing...原创 2019-10-30 10:35:37 · 461 阅读 · 0 评论 -
绑定文本框与state中的值（单向数据流）
上文已提到：在 Vue 中，默认提供了v-model指令，可以很方便的实现 数据的双向绑定；但是，在 React 中，默认只是单向数据流，也就是 只能把 state 上的数据绑定到 页面，无法把 页面中数据的变化，自动同步回 state ； 如果需要把 页面上数据的变化，保存到 state，则需要程序员手动监听onChange事件，拿到最新的数据，手动调用this.setState({ })...原创 2019-10-21 11:39:09 · 227 阅读 · 0 评论 -
组件三大属性_state
state是组件对象最重要的属性, 值是对象(可以包含多个数据)在 Vue 中，默认提供了v-model指令，可以很方便的实现 数据的双向绑定；但是，在 React 中，默认只是单向数据流，也就是 只能把 state 上的数据绑定到 页面，无法把 页面中数据的变化，自动同步回 state ； 如果需要把 页面上数据的变化，保存到 state，则需要程序员手动监听onChange事件，拿到最新...原创 2019-10-21 11:02:21 · 245 阅读 · 0 评论 -
两种创建组件方式的对比
注意:使用class关键字创建的组件，有自己的私有数据（ 即 this.state ）和生命周期函数; 注意:使用function创建的组件，只有props, 没有自己的私有数据和生命周期函数;用构造函数创建出来的组件：叫做“无状态组件”【无状态组件今后用的不多】用class关键字创建出来的组件：叫做“有状态组件”【有状态组件用的比较多】什么情况下使用有状态组件?什么情况下使用无状...原创 2019-10-18 18:08:45 · 178 阅读 · 0 评论 -
React中创建组件（二）
React中创建组件第2种 - 创建组件的方式使用 class 关键字来创建组件ES6 中 class 关键字，是实现面向对象编程的新形式了解ES6中 class 关键字的使用class 中 constructor 的基本使用实例属性和实例方法静态属性和静态方法使用 extends 关键字实现继承// 语法: class 子类 extends 父类 {}基于clas...原创 2019-10-18 17:37:32 · 134 阅读 · 0 评论 -
React中创建组件（一）
React中创建组件第1种 - 创建组件的方式 使用构造函数来创建组件，如果要接收外界传递的数据，需要在构造函数的参数列表中使用props来接收；必须要向外return一个合法的JSX创建的虚拟DOM创建组件： function Hello () { // return null return <div>Hello 组件</div> }Rea...原创 2019-10-17 13:54:02 · 182 阅读 · 0 评论 -
JSX简介 ---JSX语法注意事项
import React from 'react'import ReactDom from 'react-dom'JSX简介 ---JSX语法注意事项原创 2019-10-16 20:20:01 · 216 阅读 · 0 评论