03 2019 档案
摘要：AngularJS 模块 模块包含了主要的应用代码。 一个应用可以包含多个模块，每一个模块都包含了定义具体功能的代码。 可以将module理解成一个容器，可以往其中放入controllers、services、filters、directives等应用的组成部分。 创建模块 <div ng-app=
阅读全文
摘要：思路： 让类数组绑定数组的方法<div>1</div><div>2</div>方法一： 方法二： 方法三： 方法四： 方法五： 原文：https://blog.csdn.net/xiaxiaoxian/article/details/83089195
阅读全文
摘要：随着自己写过的页面的增多，也遇到了很多CSS兼容性的问题。这些兼容性问题，都是必然的，因为技术在不断进步，不断革新，所谓，“后浪推前浪，前浪拍死在沙滩上”，当然我们的技术不能是被拍死在沙滩上，我们还要支持，不支持的话，只能是你这个页面，这个产品被淘汰。 那么为了不被淘汰，我们就要做些兼容性处理。 我
阅读全文
摘要：事件流描述的是从页面中接收事件的顺序。提出事件流概念的正是IE和Netscape，但是前者提出的是我们常用的事件冒泡流，而后者提出的是事件捕获流。 第一部分：事件冒泡 即事件开始由最具体的元素接收，然后逐级向上传播到较为不具体的节点（文档）。 下面举一个简单的例子： 这时，我们只点击button元素
阅读全文
摘要：首先本质区别是： event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素 event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素 🙋🌰举个例子： 当我点击哪个元素时，event.target返回的是点击的
阅读全文
摘要：起因： 1、这是前端面试的经典题型，要去找工作的小伙伴看看还是有帮助的； 2、其实我一直都没弄明白，写这个一是为了备忘，二是给其他的知其然不知其所以然的小伙伴们以参考； 概述： 那什么叫事件委托呢？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事
阅读全文
摘要：前言 在使用vue一个多礼拜后，感觉现在还停留在初级阶段，虽然知道怎么和后端做数据交互，但是对于mounted这个挂载还不是很清楚的。放大之，对vue的生命周期不甚了解。只知道简单的使用，而不知道为什么，这对后面的踩坑是相当不利的。 因为我们有时候会在几个钩子函数里做一些事情，什么时候做，在哪个函数
阅读全文
摘要：前言 学习React，生命周期很重要，我们了解完生命周期的各个组件，对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1、getDefaultProps() 设置默认的props，也可以用dufaultProps设置组件的默
阅读全文
摘要：State 与 Props 区别props 是组件对外的接口，state 是组件对内的接口。组件内可以引用其他组件，组件之间的引用形成了一个树状结构（组件树），如果下层组件需要使用上层组件的数据或方法，上层组件就可以通过下层组件的props属性进行传递，因此props是组件对外的接口。组件除了使用上
阅读全文
摘要：Vue的核心思想为数据驱动和组件化。 一、数据驱动——双向绑定 Vue是一种MVVM框架。而DOM是数据的一个种自然映射。传统的模式是通过Ajax请求从model请求数据，然后手动的触发DOM传入数据修改页面。Vue中，Directives对view进行了封装，当model里的数据发生变化是，Vue
阅读全文
摘要：Vue.js是一个提供MVVM数据双向绑定的库，专注于UI层面，核心思想是：数据驱动、组件系统。 1.数据驱动： Vue.js数据观测原理在技术实现上，利用的是ES5Object.defineProperty和存储器属性: getter和setter（所以只兼容IE9及以上版本），可称为基于依赖收集
阅读全文
摘要：React是Facebook推出的面向视图层开发的一个框架，用于解决大型应用，包括如何很好地管理DOM结构，是构建大型，快速Web app的首选方式。 React使用JavaScript来构建用户界面，因此可以说是一个用来构建用户界面的JavaScript库。 1、为什么使用 React？ Reac
阅读全文
摘要：React 发展很快，概念也多，本文目的在于帮助初学者理清 React 核心概念。 React 及 React 生态 React 的核心概念只有 2 点： 声明式渲染(Declarative) 基于组件(Component-Based) 声明式渲染(Declarative) 基于组件(Compone
阅读全文
摘要：React 的核心思想是组件化的思想，应用由组件搭建而成，而组件中最重要的概念是State（状态），State是一个组件的UI数据模型，是组件渲染时的数据依据。 一. 如何定义State 定义一个合适的State，是正确创建组件的第一步。State必须能代表一个组件UI呈现的完整状态集，即组件的任何
阅读全文
摘要：在Web开发中，需要将数据的变化实时反映到UI上，这时就需要对DOM进行操作，但是复杂或频繁的DOM操作通常是性能瓶颈产生的原因，为此，React引入了虚拟DOM（Virtual DOM）的机制。 一、什么是虚拟DOM？ 在React中，render执行的结果得到的并不是真正的DOM节点，结果仅仅是
阅读全文
摘要：一、什么是虚拟DOM 虚拟DOM可以看做一棵模拟了DOM树的JavaScript对象树。比如： 二、为什么使用虚拟DOM 在传统的 Web 应用中，我们往往会把数据的变化实时地更新到用户界面中，于是每次数据的微小变动都会引起 DOM 树的重新渲染。 虚拟DOM的目的是将所有操作累加起来，统计计算出所
阅读全文
摘要：用react进行开发组件时，我们需要关注一下组件内部方法this的指向，react定义组件的方式有两种，一种为函数组件，一种为类组件，类组件内部可以定义一些方法，这些方法的this需要绑定到组件实例上，小编这里总结了一下，一共有四种方案： 第一种方案，在构造函数内部使用bind绑定this，这样做的
阅读全文
摘要：函数定义组件的例子 function Welcome(props) { return <h1>Hello, {props.name}</h1>; } 该函数是一个有效的 React 组件，它接收一个单一的 “props” 对象并返回了一个 React 元素。 函数定义组件 与 类组件的区别 1.函数
阅读全文
摘要：React 中创建 Components 的方式有两种：Function and Class 定义一个组件最简单的方法就是写一个 JavaScript 函数 因为Welcome函数接受单个携带数据的props对象并且返回一个React元素，所以它就是一个组件。这种通过字面表达式函数创建的组建通常叫做
阅读全文
摘要：React推出后，出于不同的原因先后出现三种定义react组件的方式，殊途同归；具体的三种方式： 虽然有三种方式可以定义react的组件，那么这三种定义组件方式有什么不同呢？或者说为什么会出现对应的定义方式呢？下面就简单介绍一下。 无状态函数式组件 创建无状态函数式组件形式是从React 0.14版
阅读全文
摘要：在组件的整个生命周期中，随着该组件的props或者state发生改变，其DOM表现也会有相应的变化。一个组件就是一个状态机，对于特定地输入，它总返回一致的输出。 一个React组件的生命周期分为三个部分：实例化、存在期和销毁时。 实例化 当组件在客户端被实例化，第一次被创建时，以下方法依次被调用：
阅读全文
摘要：1. this.$router： (个人观点：可以用来传递参数) 表示全局路由器对象，项目中通过router路由参数注入路由之后，在任何一个页面都可以通过此方法获取到路由器对象，并调用其push(), go()等方法； this.$router.push({ path: '/monitor', qu
阅读全文
摘要：表单提交中get和post方式的区别有5点 1.get是从服务器上获取数据，post是向服务器传送数据。 2.get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTPpost机制，将表单内各个字段与其内容放置在HTML
阅读全文
摘要：背景介绍 什么是npm？ npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）, NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，它是 Node 获得成功的重要原因之一。常见的使用场景有以
阅读全文
摘要：识别各种浏览器的实现原理是根据navigator.userAgent返回值识别: 实现: 附几种浏览的user_agent..像360的兼容模式用的是IE、极速模式用的是chrom的内核 比如判断360两种模式用下面代码：
阅读全文
摘要：方法1. 添加：document.getElementById("id").classList.add("类名")； 删除：document.getElementById("id").classList.remove("类名")； 方法2 var classVal=document.getEleme
阅读全文
摘要：2009年，W3C提出了一种新的方案--Flex布局，可以简便、完整、响应式地实现各种页面布局。目前已得到所有现在浏览器的支持。 flex浏览器支持 一、Flex布局是什么？ Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定
阅读全文
摘要：自从用习惯flex布局我基本已经不怎么使用float了。 现在又出现了grid布局，就像flex的升级版，布局上十分强大。 主要属性： grid-template-columns：//竖向排列 grid-template-rows：//横向排列 首先比较一下flex和grid实现自适应九宫格，高度8
阅读全文
摘要：为 <div> 元素添加 class: document.getElementById("myDIV").classList.add("mystyle"); document.getElementById("myDIV").className = "mystyle"; document.getEle
阅读全文
摘要：网页布局（layout）是 CSS 的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案 Flex 布局，可以简便、完整、响应式
阅读全文
摘要：这是一个令人激动的革新。 CSS 变量，顾名思义，也就是由网页的作者或用户定义的实体，用来指定文档中的特定变量。 更准确的说法，应该称之为 CSS 自定义属性 ，不过下文为了好理解都称之为 CSS 变量。 一直以来我们都知道，CSS 中是没有变量而言的，要使用 CSS 变量，只能借助 SASS 或者
阅读全文
摘要：在我们使用less或者sass时常常会使用到局部变量和全局变量，其实在我们使用css做开发时也可以定义全局变量和局部 变量来简化我们的开发效率，很简单也很实用；1.设置全局变量只需要在我们的根引用的css文件中声明就行，具体代码如下：：rout{--cssname : value}这样就声明了一个变
阅读全文
摘要：IE中： document.body.clientWidth ==> *DY对象宽度 document.body.clientHeight ==> *DY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentEle
阅读全文
摘要：1.逗号运算符 var num = (1,2); //num = 2,括号必须存在 var f = (function a() {}, function b() {}); //选取的是逗号运算符后面的值 2. function test() { }(1,2,3,4) //此函数这里不会报错，会认为(
阅读全文
摘要：this对象是在运行时基于函数执行环境绑定的，在全局函数中，this=window，在函数被作为某个对象的方法调用时，this等于这个对象。 但是匿名函数的执行环境是全局性的，所以匿名函数的this指向是window 这里sayName方法return了一个匿名函数，这个匿名函数中this指向win
阅读全文
摘要：js中this指向的几种情况一、全局作用域或者普通函数自执行中this指向全局对象window，普通函数的自执行会进行预编译，然后预编译this的指向是window //全局作用域 console.log(this);//Window //普通函数 function fn(){ console.lo
阅读全文
摘要：1.通用对象克隆： 整个clone函数的思路可能有点乱，但是可以这样理顺： 把obj的value当做只有普通值、数组和函数，先按部就班地处理，然后再考虑之前的“普通值”有可能是object，所以这里做个判断，在递归一下clone函数就可以了 //1.遍历对象 for(var prop in obj)
阅读全文
摘要：ES5 方法总结 1.slice 2. 遍历数组 3. concat() ES6 方法总结 1. Object.assign() 浅复制，也可以实现数组的克隆 2. 扩展运算符
阅读全文
摘要：this是Javascript语言的一个关键字。 随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。 1.this指向的形式4种 a.如果是一般函数,this指向全局对象window; b.在严格模式下"use strict",为undef
阅读全文
摘要：使用 JavaScript 开发的时候，很多开发者多多少少会被 this 的指向搞蒙圈，但是实际上，关于 this 的指向，记住最核心的一句话：哪个对象调用函数，函数里面的this指向哪个对象。 下面分几种情况谈论下 1、普通函数调用 这个情况没特殊意外，就是指向全局对象-window。 let u
阅读全文
摘要：首先，来看下具体的问题，下面是用inline-block布局实现的两边固定宽度，中间自适应的html代码： 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 <section class="layout inline-block"> <article class="left-c
阅读全文
摘要：垂直居中是布局中十分常见的效果之一，为实现良好的兼容性，PC端实现垂直居中的方法一般是通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加多样化。 方法1：table-cell html结构： <div class="box box1"> <span>垂直居中<
阅读全文
摘要：vue中和后台交互，首先要引用vue-resource.js vue-resource.js是专门和后台进行交互 <!-- 引入vue-resource插件 ><script src="../js/vueJs/vue-resource.js"></script> vue中ｇｅｔ请求 function
阅读全文
摘要：let url = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=2';let params ={ params: { username: 'zhangSan', pwd: '123456' } } // g
阅读全文
浙公网安备 33010602011771号