- 博客(46)
- 收藏
- 关注
RSS订阅原创 如何搭建一个vue项目
1 nodejs安装及环境变量配置下载地址为：https://nodejs.org/en///查看版本node -v//v12.16.0npm -v//6.13.42 安装vue脚手架npm install -g @vue/cli 3 初始化前端工程vue create sport-iuicd sport-iuinpm run serve //启动工程浏览器访问：http://localhost:8080开发工具vscodevue插件Vetur —— 语法高亮、智
2022-04-09 20:50:30
82
转载 angular基础总结
转自：https://www.jianshu.com/p/c40b3b64b467模板表达式“{{}}”不能引用任何全局命名空间中的成员（如：window、document等等）的原因：我想原因可能是：为了防止名称冲突，angular在解析模板表达式后，会把表达式中的每个变量var替换成模板所属类的实例instance的属性调用instance.var；所以如果引用全局命名空间中的成员...
2019-08-15 10:48:14
271
原创 angular总结-my
angular知识点：1、 @Component 装饰器。这表明它下面的类是一个组件。它提供了有关该组件的元数据，包括它的模板、样式和选择器在 @Component 的元数据中指定的样式只会对该组件的模板生效。2、Angular 只会绑定到组件的公共属性constructor(public messageService: MessageService) {}sr...
2019-08-15 10:37:33
528
原创 vue-study
1、基础知识2、生态系统vue + vue-router + vuex工具DevtoolsVue CLI核心插件： vue router vuex vue 服务端渲染2.1 vue-routerVue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变...
2019-08-09 14:10:07
193
原创 es6学习总结
1、@babel/polyfillBabel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API，比如Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。举例来说，ES6 在Array对象上新增了Array.from方法...
2019-08-06 14:15:16
427
原创 git总结
要随时掌握工作区的状态，使用git status命令。如果git status告诉你有文件被修改过，用git diff可以查看修改内容。git log命令显示从最近到最远的提交日志,如果嫌输出信息太多，看得眼花缭乱的，可以试试加上--pretty=oneline参数$ git log --pretty=oneline1.提交修改和提交新文件是一样的两步第一步是git add：$ ...
2019-07-26 13:43:48
77
转载 instanceOf原理
instanceof 主要的实现原理就是只要右边变量的 prototype 在左边变量的原型链上即可。因此，instanceof 在查找的过程中会遍历左边变量的原型链，直到找到右边变量的 prototype，如果查找失败，则会返回 false，function new_instance_of(leftVaule, rightVaule) { let rightProto = right...
2019-07-08 19:19:14
756
转载 观察者模式 vs 发布-订阅模式
观察者设计模式:观察者模式 在软件设计中是一个对象，维护一个依赖列表，当任何状态发生改变自动通知它们。我们假设你正在找一份软件工程师的工作，对“香蕉公司”很感兴趣。所以你联系了他们的HR，给了他你的联系电话。他保证如果有任何职位空缺都会通知你。这里还有几个候选人也你一样很感兴趣。所以职位空缺大家都会知道，如果你回应了他们的通知，他们就会联系你面试。所以，以上和“观察者模式”有什么关系呢？...
2019-07-04 13:53:01
122
转载 Web前端面试题——HTML/CSS部分理解题
1.盒子模型（1）是什么：每个元素被表示为一个矩形的盒子，由四部分组成：内容（content）、内边距（padding）、边框（border）、外边距（margin）。它在页面中所占的实际大小（宽高）是content+padding+border+margin之和。（2）盒模型有两种：标准盒模型（W3C盒模型）、IE盒模型。（3）两种盒模型的区别：标准盒模型内容大小就是content大小，...
2019-06-15 11:16:58
626
转载 html css 面试题总结
HTML1. 标签上title属性与alt属性的区别是什么？alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户等。title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。参...
2019-06-15 10:55:11
198
转载 css常见面试题总结
1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin2 box-sizing属性？用来控制元素的盒子模型的解析模式，默认为content-boxcontext-box：W...
2019-06-15 10:34:26
259
转载 文章汇总
从输入cnblogs.com到博客园首页完全展示发生了什么https://www.cnblogs.com/iovec/p/7904416.html
2019-06-10 16:46:53
100
转载 angular 首屏优化
https://www.cnblogs.com/AustinAn/p/9587813.html前一段时间把公司的一个angular项目做了一次大的优化，记录一下过程。起因：起因是用户反映网站加载时间过长，从loading画面显示到页面可响应要13s，对于一般的页面恐怕没有用户愿意等待这么久。因为这是一个在线编辑的工具类的项目，有使用需求的用户只能等待页面加载完成，所以才会反馈到客服那边。分...
2019-05-24 17:38:24
206
转载 JS数组遍历的几种方式
JS数组遍历，基本就是for,forin,foreach,forof,map等等一些方法，以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比第一种:普通for循环代码如下:for(j = 0; j < arr.length; j++) { } 简要说明: 最简单的一种，也是使用频率最高的一种，虽然性能不弱，但仍有优化空间第二种:优化版for循环代码如下:for...
2019-05-24 17:07:23
308
原创 react虚拟dom
染方式：第一种方式： 整体替换DOM1、 state数据2、 JSX 模板3、 数据 + 模板 生成真实的DOM 来显示4、 state 发生变化5、 数据 + 模板 生成真实的DOM， 替换原始的DOM缺陷：第一次生成了一个完整的DOM片段第二次生成一个完整的DOM片段第二次的DOM替换第一次DOM, 非常耗性能第二种方式： 替换DOM中的差异部分1、 state数据2...
2019-05-24 09:54:51
158
原创 react-redux及异步插件 redux-thunk&redux-saga使用
react-redux使用1.安装 npm install --save react-redux2.index.js中，通过Provider 设置storeconst App = ( <Provider store={store}> <TodoList/> </Provider>);3.组件中通过 connect 关联store,u获取stor...
2019-05-24 09:49:25
449
原创 react学习实战-简书--常见优化
1.在constructor方法中：做方法的bind(this)<input handleInputChange={this.handleInputChange.bind(this)} …/>优化：constructor(props) {super(props);…this.handleInputChange = this.handleInputChange.bind(th...
2019-05-24 09:47:11
114
转载 JS闭包-三种方法实现fnArr[i]() 输出 i
下面的代码输出多少？修改代码让fnArri 输出 i。使用两种以上的方法var fnArr = []; for (var i = 0; i < 10; i ++) { fnArr[i] = function(){ return i; }; } console.log( fnArr[3]() ); //10...
2019-05-23 16:28:09
502
转载 http协议原理+实践 Web开发工程师必学
最简单的例子输入URL打开网页AJAX获取数据img标签加载图片输入URL到打开网页的过程：网络协议分层：低三层：物理层主要作用是定义物理设备如何传输数据（硬件上）数据链路层在通信的实体间建立数据链路连接（软件上）网络层为数据在结点之间传输创建逻辑链路传输层：向用户提供可靠的端到端(End-to-End)服务传输层向高层屏蔽了下层数据通信的细节...
2019-05-15 20:31:54
241
转载 深入分析 Angular 变更检测
2017-11-07 01:31目录什么是变更检测 (Change Dectetion)?什么引起了变更 (change) ?发生变更后，谁通知Angular?发变更检测发性能发更聪明的变更检测发不变对象 (Immutable Objects)发减少检测次数 (number of checks)发Observables发更多…什么...
2019-05-15 20:31:29
721
1
转载 Angular 4.x ngModel 双向绑定原理揭秘
转自：https://segmentfault.com/a/1190000009126012在 Angular 4.x 中对于使用 Template-Driven 表单场景，如果需要实现表单数据绑定。我们就需要引入 ngModel 指令。该指令用于基于 domain 模型，创建 FormControl 实例，并将创建的实例绑定到表单控件元素上。ngModel 使用示例ngModelapp....
2019-05-15 20:31:07
1145
1
转载 es6-箭头函数
一 为什么要有箭头函数我们在日常开发中，可能会需要写类似下面的代码 const Person = { 'name': 'little bear', 'age': 18, 'sayHello': function () { setInterval(function () { console.log('我叫' + this.name + '我今年...
2019-05-09 15:16:31
85
原创 leetcode
1.两数之和/* 给定一个整数数组 nums 和一个目标值 target，请你在该数组中找出和为目标值的那 两个 整数，并返回他们的数组下标。你可以假设每种输入只会对应一个答案。但是，你不能重复利用这个数组中同样的元素。示例:给定 nums = [2, 7, 11, 15], target = 9因为 nums[0] + nums[1] = 2 + 7 = 9 所以返回 [0, 1]...
2019-05-09 10:58:18
96
转载 es6 笔记
01 简介一、检测es6兼容性http://kangax.github.io/es5-compat-table/es6二、兼容包：traceur转码器<script src="http://google.github.io/traceur-compiler/bin/traceur.js" type="text/script"></script><scrip...
2019-05-08 16:10:48
170
转载 normalize.css介绍和使用，normalize与CSS Reset的区别
Normalize.css只是一个很小的css文件，但它在磨人的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSSreset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。总之，Normalize.css是一种CSSreset的替代方案。我们创造normalize.css有下面这几个目的：保护有用的浏览器样式而不是去掉他们。一般化的样式：为大部...
2019-05-08 09:38:20
411
原创 手工实现深拷贝 deepClone
function deepClone(obj) { var objClone = Array.isArray(obj) ? [] : {}; if (obj && typeof obj === 'object') { //for ... in会把继承的属性一起遍历 for (let key in obj) { //判断是否是自有属性，而不是继承属性 if (...
2019-04-26 11:42:56
200
原创 div垂直居中于浏览器窗口
div垂直居中于浏览器窗口 <style type="text/css"> div { position:absolute; top:50%; left:50%; margin:-150px 0 0 -200px; width:400px; height:300px; border:1px solid #008800; }<...
2019-04-26 10:21:28
521
转载 (译）详解javascript立即执行函数表达式（IIFE）
写在前面 这是一篇译文，原文：Immediately-Invoked Function Expression (IIFE)原文是一篇很经典的讲解IIFE的文章，很适合收藏。本文虽然是译文，但是直译的很少，而且添加了不少自己的理解。ps：下文中提到的“立即执行函数”其实就是“立即执行函数表达式”我们要说的到底是什么？ 在javascript中，每一个函数在被调用的时候都会创建一个执行上...
2019-04-24 14:59:58
281
转载 forkJoin, zip, combineLatest区别
前言forkJoin, zip, combineLatest是rxjs中的合并操作符，用于对多个流进行合并。很多人第一次接触rxjs时往往分不清它们之间的区别，其实这很正常，因为当你准备用来合并的流是那种只会发射一次数据就关闭的流时（比如http请求），就结果而言这三个操作符没有任何区别。const ob1 = Rx.Observable.of(1).delay(1000);const ob...
2019-04-23 18:52:58
778
转载 JS问题
1.AST抽象语法树 (Abstract Syntax Tree)，是将代码逐字母解析成 树状对象 的形式。这是语言之间的转换、代码语法检查，代码风格检查，代码格式化，代码高亮，代码错误提示，代码自动补全等等的基础。例如:function square(n){ return n * n}复制代码通过解析转化成的AST如下图:2 babel编译原理babylon 将 ES6/ES7...
2019-04-23 15:12:16
166
转载 学习Vue实现去哪儿网（上）-----基础知识总结
第一部分基础知识学习：（1）vue挂载渲染基础；（2）生命周期；（3）计算，方法与监听；computed中get与set；（4）vue进行样式渲染：<1>class的对象（true or false）或数组绑定；<2>style的绑定数组数据（data中定义styleobj用于样式绑定改变）（5）vue的条件渲染：v-if(不渲染)；v-show(渲染而不显示)...
2019-04-23 09:32:55
150
转载 Vue去哪网学习笔记(1)
1.Vue中每一个组件就是一个vue实例。2.生命周期函数就是Vue实例在某一个时间点自动执行的函数。注意：Vue的生命周期函数写在Vue实例里，而不是methods里面。**3.模板语法1. 插值表达式： {{ }}2. v-text 等价于 {{name}} 其中name是在data中定义的变量。**3. v-htmlv-html 和 v-text的区别是如果在...
2019-04-23 09:30:27
136
转载 Vue去哪网学习笔记(2)
组件使用的细节点1.注意点1. 根据HTML5的规范，tbody里面必须跟tr，否则不能正常解析。下图中的代码会编译错误，因为tbody后面直接跟了我们定义的模板，而不是tr标签.，那么如何解决这个小"bug"呢？解决方案如下：在tbody标签下面加上tr标签，同时,在tr标签里添加 is 属性来指定我们定义的组件，这样既符合了HTML5规范，又满足了我们的需求，具体做法如下，其中，r...
2019-04-23 09:30:14
96
转载 去哪网学习笔记(3)动画
1.Vue 中的 css 动画（也叫做过渡动画） transation 会依次给 child 添加 css 样式。第一帧 fade-enter fade-enter-active 第二帧fade-enterfade-enter-to 最后一帧fade-enter-active fade-enter-to 里面的关键原理就是使用css transation 来实现的。2.掌握用@keyframes...
2019-04-23 09:29:59
92
转载 vue去哪儿项目总结
1、移动端300ms点击延迟问题在移动端web中会遇到300ms点击延迟的问题，这个时候可以使用fastclick来解决这个问题。引入fastclikcimport FastClick from 'fastclick'使用fastclickFastClick.attach(document.body)2、注意当网速过慢的时候获取资源导致的页面抖动问题如果网速过慢。比如一个dom中...
2019-04-23 09:25:22
196
转载 不支持冒泡的事件
不支持冒泡的事件UI事件loadunloadscrollresize焦点事件blurfocus鼠标事件mouseleavemouseenter
2019-04-15 15:12:39
722
转载 scrollWidth,clientWidth,offsetWidth的区别
web前端学习笔记—scrollWidth,clientWidth,offsetWidth的区别通过一个demo测试这三个属性的差别。说明：scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。offsetWidth：对象整体的实际宽度，包滚动条等边线，...
2019-04-15 12:01:23
108
转载 前端常见跨域解决方案（全）
什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。广义的跨域：1.) 资源跳转： A链接、重定向、表单提交2.) 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链3.) 脚本请求： js发起...
2019-04-15 10:05:16
143
原创 intToString实现
var intToString = function(n) {if (n == 0) {return ‘0’;}var flag = false;if (n < 0) {flag = true;n = 0 - n;}var res = “”;while (n > 0) {res = n % 10 + res;n = Math.floor(n / 10);}i...
2019-04-04 09:16:55
1681
原创 antd form使用demo
antd对表单进行了封装，通过getFieldDecorator可实现表单数据双向绑定使用步骤：1、let { getFieldDecorator } = this.props.form;2、对Form.Item进行了封装，getFieldDecorator(‘xx’,{rules:[],initialValue:’’})()<Form.Item {...props}> ...
2019-03-24 22:42:44
649
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人