FAFA的博客

原创 VUE数据绑定

数据劫持数据劫持: vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。...

原创 自动调节html的font-size配合rem实现等比例缩放

<script type="text/javascript"> var __rootrem; (function () { var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; function setFont() { va...

原创 Bootstrap_navbar

Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes.Navbars and their contents are fluid by default. Use optional containers to...

原创 Bootstrap_Image

In Internet Explorer 10, SVG images with .img-fluid are disproportionately sized.images can be centered using the .mx-auto margin utility class.<img src="..." class="rounded mx-auto d-block" al...

原创 Bootstrap_Content

To merely toggle the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document, use the .invisible class instead.jQuery incompatibility...

转载 CSS_em,rem

点击这里跳转

原创 Bootstrap_Media object

Flexbug #12: Inline elements aren’t treated as flex itemsAdd the .list-unstyled to remove any browser default list stylesAs always, use spacing utilities wherever needed to fine tune. ???

原创 Bootstrap_Grid system

predefined grid classes col- extra small 超小型 col-sm- small 小型 col-md- medium 中型 col-lg- large 大型 col-xl- extra large 超大型 container的padding ，row的margin 和 column的pa...

原创 Bootstrap_overview

Containers are the most basic layout element in Bootstrap and are required when using our default grid system.Use .container-fluid for a full width container, spanning the entire width of the viewpo...

原创 NODE_babel-cli

检测对ES6的支持安装npm install -g es-checker查看命令es-checker添加ES6支持初始化工作目录，生成package.json文件npm init -y安装 babel-cli//全局安装npm install babel-cli -g//本地安装npm install babel-cli --save安装babel-preset...

原创 VUE 生命周期

原创 VUE prop的使用心得

可以为组件的 props 指定验证规格。使用对象的方式设置验证方法Vue.component('example', { props: { // 基础类型检测 (`null` 意思是任何类型都可以) propA: Number, // 多种类型 propB: [String, Number], // 必传且是字符串 propC: { ...

原创 Webpack 工程目录解析

目录结构package.json{ "name": "webpack_environment", "version": "1.0.0", "description": "A webpack environment test", "author": "abzerolee", "scripts": {

原创 VUE CLI脚手架

功能能够使用ES6语法打包和压缩JS为一个文件项目文件在环境中编译，而不是浏览器实现网页自动刷新

原创 VUE 生命周期

钩子函数的触发时机beforeCreate在实例初始化之后，数据观测（data observer）和event/watcher事件配置之前被调用。created实例已经创建完成之后被调用。在这一步，实例已经完成以下配置：数据观测（date observer），属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。beforeMount...

原创 JavaScript 箭头函数

###箭头函数中的this按照词法作用于绑定var obj = { birth: 1990, getAge: function (year) { var b = this.birth; // 1990 var fn = (y) => y - this.birth; // this.birth仍是1990 return fn.c...

原创 JavaScript 翻转字符串

翻转字符串reverseMessage: function () { this.message = this.message.split('').reverse().join('');}

原创 JavaScript JSON的序列化和解析

序列化一个js对象var obj = { name : "cxh", sex : "man"}var str1 = JSON.stringify(obj);var str2 = obj.toJSONString();//json.js包中提供的方法。解析一个JSON字符串var str = '{ "name": "cxh",

原创 CSS 清除浮动

使用clear属性清除浮动在容器尾部添加空元素<style type="text/css"> .clear { clear: both; }</style><div class="news"> <img src="news-pic.jpg" /> <p&amp

原创 JavaScript 小数处理

取整parseInt(7/2);//去掉小数后面的部分parseInt的具体用法向上取整Math.ceil(3.5);//返回大于等于参数的最小整数四舍五入Math.round(7/2)；向下取整Math.floor(4.9)；...

原创 JavaScript 常用算法--克隆对象

使用JSON方法var oldObj = { a : 1}var strJson = JSON.stringify(oldObj);var newObj = JSON.parse(strJson);遍历function clone(obj){ var o; if(typeof obj == "object"){ if...

原创 JavaScript 命名空间namespace

$.namespace = function() { var a=arguments, o=null, i, j, d; for (i=0; i<a.length; i=i+1) { d=a[i].split("."); o=window; for (j=0; j<d.length; j=j+1) { ...

原创 JavaScript 常用算法--去重

var Hash_test=function (arr) { var hash={}; for(var i=0;i<arr.length;i++) { if(hash[JSON.stringify(arr[i])]) { hash[JSON.stringify(arr[i])]++; } ...

原创 JavaScript Object的常用方法

Object.getOwnPropertyNames(obj);var o = { name : "kaifa", sex : "男"}Object.getOwnPropertyNames(o);//["name", "sex"] ,返回属性的数组集Object.prototype.toString.call(obj);var o = { name ...

原创 JavaScript 事件冒泡和事件捕捉

含义事件冒泡事件的触发顺序为，由内而外。直到文档最顶层（document或window）。事件捕捉事件的触发顺序为，由外而内。任何发生在w3c事件模型中的事件，首是进入捕获阶段，直到达到目标元素，再进入冒泡阶段。//使用事件捕捉模式element1.addEventListener('click',doSomething2,true)//使用事件冒泡模式（默认）ele...

原创 JavaScript 绑定多个相同事件

行内绑定//只执行fun1();<button onclick="fun1()" onclick="fun2()">按钮</button>//两个都执行；<button onclick="fun1();fun2()">按钮</button>onclick属性//只执行第二个函数；var button = docum

原创 jQuery 添加jQuery对象的方法

$(function () { jQuery.fn.isChildOf = function (b) { return (this.parents(b).length > 0); }; var flag = $("#child-div").isChildOf("#parent-div");})

原创 JavaScript 内容加载事件

window.onload当一个文档完全下载到浏览器中时，会触发 window.onload 事件。这意味着页面上的全部元素对 javascript 而言都是可以访问的，这种情况对编写功能性的代码非常有利，因为无需考虑加载的次序。 window.onload = function() { alert();}$(document).ready()会在...

转载 文件压缩格式

ZIPZIP应该算是最常见的压缩文件格式了，你甚至不需要单独为它安装一个压缩或者解压缩软件，因为我们使用的Windows系统以及集成了对ZIP压缩格式的支持。 经历过DOS时代的朋友可能还记得ARJ格式，它基本就是DOS时代ZIP，直到ZIP的出现，以更高的压缩效率取代了ARJ，成为了大家的首选。现在的大多数操作系统都会集成对ZIP文件的支持，而所有的压缩软件也都会提供对ZIP文件的支持，...

原创 NODE_fs-extra

使用方法安装npm install --save fs-extra引用（无需在引用原生的fs模块）var fs = require('fs-extra');方法读取文件信息fs.readFile("./test.txt", "utf-8", function(err, data) { console.log(data);})输出信息到文件...

原创 HTML 页面跳转

标签定时跳转<head><!-- 以下方式只是刷新不跳转到其他页面 --><meta http-equiv="refresh" content="10"><!-- 以下方式定时转到其他页面 --><meta http-equiv="refresh" content="5;url=hello.html

原创 CSS 链接方式

链接方式行内式<table bgcolor="black" cellspacing="1px" width="600"><table style="border:0px" />嵌入式<head><title>css样式使用</title><st

原创 CSS 兼容处理

css3兼容各版本浏览器前缀 前缀 浏览器 -moz- 火狐等使用Mozilla浏览器引擎的浏览器 -webkit- Safari, 谷歌浏览器等使用Webkit引擎的浏览器 -o- Opera浏览器(早期) -ms- Internet Explorer (不一定) 把不带前缀的放到最后一行需要添加浏览器引擎前缀...

原创 JavaScript node节点

Node对象属性 属性 标签节点 属性节点 文本节点 nodeName 大写标签名称 属性名称 text nodeValue null 属性的值 文本内容 nodeType 1 2 3...

原创 JavaScript 对dom节点的操作

抓取节点document.getElementById(id); //最多只能返回一个节点document.getElementsByName(name); //返回节点集合document.getElementsByTagName(tagname); //返回节点集合document.getElementsByClassName(classname); //返回节点集合创建节点...

原创 JavaScript String对象

方法stringvar.substr(start [, length ]) 返回一个从指定位置开始的指定长度的子字符串。var arr = "0123456789";console.log(arr.substr(7,3)); //"789"stringObj.slice(start, [end]) 返回字符串的片段。 start :必选项。下标以...

原创 JavaScript call和apply的作用和妙用

Call劫持另外一个对象的方法，继承另外一个对象的属性. Function.call(obj,[param1[,param2[,…[,paramN]]]]) obj：这个对象将代替Function类里this对象 params：这个是一个参数列表function animal(name,age){ this.name = name; this.ag...

原创 Browser 浏览器内核

内核的作用所谓浏览器内核就是指浏览器最重要或者说核心的部分”Rendering Engine”，译为”渲染引擎”。负责对网页语法的解析，比如HTML、JavaScript，并渲染到网页上。所以浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定这浏览器如何显示页面的内容和页面的格式信息。不同的浏览器内核对语法的解释也不相同，因此同一的网页在不同内核的浏览器显示的效果也会有差异。这也就是网页编写...

原创 JavaScript Error类型

错误类型SyntaxError解析错误 SyntaxError是解析代码时发生的语法错误// 变量名错误var 1a;// 缺少括号console.log 'hello');RefenrceError引用错误 ReferenceError是引用一个不存在的变量时发生的错误。将一个值分配给无法分配的对象，比如对函数的运行结果或者this赋值。a // Uncau...

原创 JavaScript 的可爱操作QAQ

1.未赋值的变量可以被访问，但未声明的不可以。未声明的变量只能进行 typeof 操作。2.Object.prototype.toString ( ) 方法