cfcp-CSDN博客

原创 Echarts条形图实战

最近公司项目要做一个统计图用到了echarts里面的条形图，对于以前就接触过一点echarts的我信心满满，没想到动手的时候才发现问题百出，看来实践真的是检验学习成效的标准。这里有两种条形图，一种横向的一种纵向的。不管是哪种都要先初始化echarts:// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementByI

2017-08-03 15:52:15 5244

转载 JavaScript中本地对象、内置对象和宿主对象

首先解释下宿主环境：一般宿主环境由外壳程序创建与维护，只要能提供js引擎执行的环境都可称之为外壳程序。如：web浏览器，一些桌面应用系统等。即由web浏览器或是这些桌面应用系统早就的环境即宿主环境。本地对象ECMA-262 把本地对象（native object）定义为“独立于宿主环境的 ECMAScript 实现提供的对象”。再来看一下，“本地对象”包含哪些内容：

2017-04-25 09:00:58 455

原创初学者眼中的的Angularjs（三）

八、服务服务是一个对象或函数，对外提供特定的功能。 8.1内置服务 1、$location是对原生Javascript中location对象属性和方法的封装。 2、timeout&timeout&interval对原生Javascript中的setTimeout和setInterval进行了封装。 3、$filter在控制器中格式化数据。 4、$log打印调试信息 5、$http用于向服

2017-04-18 11:09:23 346

原创初学者眼中的的Angularjs（二）

四、数据绑定 AngularJS是以数据做为驱动的MVC框架，所有模型（Model）里的数据经由控制器（Controller）展示到视图（View）中。所谓数据绑定指的就是将模型（Model）中的数据与相应的视图（View）进行关联，分为单向绑定和双向绑定两种方式。4.1单向绑定单向数据绑定是指将模型（Model）数据，按着写好的视图（View）模板生成HTML标签，然后追加到D

2017-04-18 10:51:40 301

原创初学者眼中的的Angularjs（一）

一、介绍AngularJS是一款由Google公司开发维护的前端MVC框架，其克服了HTML在构建应用上的诸多不足，从而降低了开发成本提升了开发效率。 1.1 特点 AngularJS与我们之前学习的jQuery是有一定的区别的，jQuery更准确来说只是一个类库（类库指的是一系列函数的集合）以DOM做为驱动（核心），而AngularJS则一个框架（诸多类库的集合）以数据和逻辑做为驱动（核心）

2017-04-18 10:41:18 363

原创常见面试题（未完待续。。）

ie和火狐的事件机制有什么区别？ie只支持事件冒泡火狐采用dom标准（先捕获后冒泡）的机制如何阻止事件冒泡？ie：e.cancleBubble=true火狐：e.stopPropagation()js本地对象、内置对象和宿主对象？本地对象 Array RegExp String Boolean Number Date 等可以被实例化内置对象

2017-04-18 09:35:52 296

原创 vue1.0和vue2.0区别

vue2.0组件模板不支持片段必须在一个根标签中关于组件的定义1.0： Vue.extend 2.0：Vue.component(组件名称，{ data(){}, methods:{} }) 生命

2017-04-15 13:11:18 971

原创常见浏览器兼容性问题与解决方案（下）

Css样式是与DOCTYPE引入的W3C//DTD有关的，不同的dtd对css的解析也不同，我们现在统一使用css兼容问题： 1. 默认的内外边距不同问题：各个浏览器默认的内外边距不同解决：*{margin:0;padding:0;} 2. 水平居中的问题问题：设置 text-align: center ie6-7文本居中，嵌套的块元素也会居中

2017-04-09 12:09:04 616

原创常见浏览器兼容性问题与解决方案（上）

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。　　在学习浏览器兼容性之前，我想把前端开发人员划分为两类：　　第一类是精确按照设计图开发的前端开发人员，可以说是精确

2017-04-09 12:05:26 232

原创 require.js的使用

一、为什么要使用require.js 首先一个页面如果在加载多个js文件的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；其次，由于js文件之间存在依赖关系，因此必须严格保证加载顺序，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。 require.js，就是为了解决这两个问题：（1）实现js文件的异步加载，避免网

2017-04-09 11:30:45 386 2

原创请描述一下cookies，sessionStorage和localStorage的区别？

sessionStorage和localStorage统称为web storageweb storage和cookie的区别Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。除此之外，Web

2017-03-27 16:57:20 544

原创关于this的指向问题（通俗易懂）

js中 this的指向问题是一个令很多人都头疼的问题，主要原因在于this在不同的场景下指代的东西都不一样，其实想弄懂this其实很简单，记住下面几种情况就逐个击破了。首先要明白下面这个概念如果在全局中使用this，则指向全局对象window 如果在函数中使用this,就要根据函数是如何被调用的来确定this的指向全局中当你输入 this===window的时候，很显然是会输出tru

2017-03-19 09:25:20 1108

原创 html5应用缓存(离线存储)

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问，这个技术给我们带来的好处真是多多，比如用户可以在离线状态访问到一些内容，在线的情况下已经缓存过得资源加载的会很快，同时可以减少服务器的压力。。。尤其是在移动开发，比如说一款游戏，缓存对于它来说是极其重要的。除了ie以外，所有主流的浏览器都支持应用缓存说了半天也该上干货了，这个应用缓存到底

2017-03-18 14:44:16 567

转载快速学sass(六)--混合宏

声明混合宏如果你的整个网站中有几处小样式类似，比如颜色，字体等，在 Sass 可以使用变量来统一处理，那么这种选择还是不错的。但当你的样式变得越来越复杂，需要重复使用大段的样式时，使用变量就无法达到我们目了。这个时候 Sass 中的混合宏就会变得非常有意义。在这一节中，主要向大家介绍 Sass 的混合宏。1、声明混合宏不带参数混合宏：在 Sass 中，使用“@mixin”来声明一个混合宏。如：@mi

2017-03-13 22:36:56 272

转载快速学sass(五)--嵌套

选择器嵌套Sass 中还提供了选择器嵌套功能，但这也并不意味着你在 Sass 中的嵌套是无节制的，因为你嵌套的层级越深，编译出来的 CSS 代码的选择器层级将越深，这往往是大家不愿意看到的一点。这个特性现在正被众多开发者滥用。选择器嵌套为样式表的作者提供了一个通过局部选择器相互嵌套实现全局选择的方法，Sass 的嵌套分为三种：选择器嵌套属性嵌套伪类嵌套假设我们有一段这样的

2017-03-13 21:39:18 301

转载快速学sass(四)---变量

变量sass的变量我们都知道如何定义了吧，使用$+变量名：变量值普通变量定义之后可以在全局范围内使用。$fontSize: 16px;body{ font-size:$fontSize;}编译后的css代码：body{ font-size:16px;}默认变量 sass 的默认变量仅需要在值后面加上 !default 。$baseLineHeight:2em !def

2017-03-13 21:31:25 354

原创快速学sass(三)--输出方式

众所周知，每个人编写的 CSS 样式风格都不一样，有的喜欢将所有样式代码都写在同一行，而有的喜欢将样式分行书写。在 Sass 中编译出来的样式风格也可以按不同的样式风格显示。其主要包括以下几种样式风格： 1、嵌套输出方式 nested 在编译的时候带上参数“ –style nested”:sass --watch test.scss:test.css --style nested编译前和编译后的

2017-03-13 21:09:13 656

原创快速学sass(二)--编译

sass如何编译？1.命令行编译单文件转换命令sass style.scss style.css 在实际编译过程中，你会发现上面的命令，只能一次性编译。每次个性保存“.scss”文件之后，都得重新执行一次这样的命令。如此操作太麻烦，其实还有一种方法，就是在编译Sass 时，开启“watch”功能，这样只要你的代码进行任保修改，都能自动监测到代码的变化，并且给你直接编译出来：sass --wat

2017-03-13 20:52:00 212

原创快速学sass(一)--简介

sass是什么？ Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。 Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。sass和scss有什么区别？ Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：文件扩展名不同，Sass是以“.

2017-03-13 20:33:17 322

转载【新手入门最精炼总结】AMD/CMD/CommonJs到底是什么？它们有什么区别？

知道JS有模块化开发的说法，也偶尔听过requireJs,AMD,CMD等等名字，甚至使用node的时候，还用过require之类的方法，但是对这些一直没有一个明确的认识和概念。想必这就是许多新手刚接触这方面知识时的一个普遍状态。其实仅仅做一些基础的活儿的时候，并不需要对它们有太多的了解，知道怎么用就行了，管他是什么理念，是什么实现呢。于是人就懒下来了。终于有一天，下定决心，一定要

2017-03-09 09:23:48 367

原创 localstorage、sessionstorage和cookie的区别（面试常问）

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。Storage 存储Window.sessionStorage window.localStorage

2017-03-07 23:41:27 1792

原创 cors跨域（以及和jsonp的区别）

上次我们说到，jsonp只支持get方式跨域，不支持post，是因为底层是使用script标签去接受请求，jsonp通过给script的src中的url设置回调函数，传给服务端后，服务端返回一个回调函数的调用，把数据包在这个回调函数里面，然后我们在全局中定义一下这个回调函数准备解析数据就好了。现在假设我要跨域，同时跨域的时候传递的数据非常多，get对数据大小又有限制，用get就不靠谱，必须使用支持

2017-03-07 21:40:31 3568

原创同源、跨域、jsonp（面试常问）

提到跨域，就不得不说一下同源策略，同源策略是浏览器的一种安全策略，也就说a网站不能随便读取b网站的内容，试想一下，如果网站之间都可以随便读取互相的文件，比如一个黑客程序，他利用IFrame把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。所谓"同源"是指协议、端口

2017-03-07 15:29:09 5387

原创 git常用命令

[plain] view plain copy print?常用git命令整理 [plain] view plain copy print?master：默认开发分支 origin：默认远程版本 #初始化操作 git config --global user.name #设

2017-03-06 19:38:19 228

转载网页loading(加载)效果的实现

说到页面loading效果，现在各种PC端和移动端的应用使用loading都十分的广泛，这是因为页面的加载时需要时间的，如果页面加载很快，loading的作用可能还不是特别能够体现，但是如果当页面加载速度不是很快甚至很慢的时候，页面就会出现白屏的状况，如果没有使用loading来和用户进行交互，用户并不知道应用到底是出现什么问题（卡死、出错或者在加载）那么就会十分的影响用户体验，页面加载所需要时间

2017-03-05 19:47:41 34707 2

原创 ES6中的let

ES6中新增的let关键字之前我们声明一个变量时，都是使用关键字var，那新增加的let和var有什么不同呢？var的不足之处一：var arr=[];for (var i=0;i<10;i++){ arr[i]=function(){ console.log(i); };} arr[8](); // console.log(i); 的结果为

2017-03-04 22:07:02 253 1

转载同步和阻塞

有人觉得堵塞就是同步,非堵塞就是异步,其实以前我也是这么想的,其实同步与堵塞这完全是两码事,所以写篇文章来说说为什么是两码事,也顺便说说各种组合的可以达到的效果,帮助大家了解底层的原理. 首先需要了解这些概念,OS里面有内核态和用户态两种,程序进行IO操作的时候一般是两步,第一步是IO初始化也就是准备好IO操作,第二步就是真正的IO操作.其中第一步决定同步还是异步,第二步决定堵

2017-03-04 00:39:46 286

原创使用gulp压缩合并代码

大家都知道gulp是我们的前端构建神器，那么gulp应该怎么使用呢？首先你的电脑上要装有node环境使用gulp第一步要进行全局安装这里需要使用npm(npm是安装node时附带的包管理工具) 全局安装：打开命令行 npm install -g gulp（在任何文件夹下都可以打开命令行）本地安装：建一个文件夹，也就是你的工作目录，进入该目录，键入命令 npm install

2017-03-03 21:52:54 1248

转载 Angularjs + Bootstrap 制作的一个TODO List

看了一个关于AngularJS的视频，视频内容讲解的是如何制作一款TODO list形式的SPA（Simple Page Application,单页面应用)。为了增强理解，下面写了一篇文章，用以复习巩固。准备Angularjs下载CDN加速npm 方式常规方式Bootstrap下载知识储备MVC 架构ng-appng-c

2017-03-02 21:44:02 202

转载 flex布局

前言传统的基于盒子模型的布局：定位： position布局： Layout (dispaly + float)flex(flexible box)弹性盒布局：为盒模型提供最大的灵活性。flex布局：flex布局的相关属性:flex容器属性：作用于定义为flex容器的元素flex-directionflex-wrapflex-flowjusti

2017-03-02 20:59:26 254

原创 vue初步认识

vue到底是什么？一个mvvm框架（库），和angular类似比较容易上手、小巧 vue和angular的区别？->1.vue简单、易学指令以v-xxx开头一片html代码配合json,再new出来vue实例由个人维护适合移动端项目 vue发展势头很猛 github上star数量已经超越angular->2.angular上手难

2017-03-01 23:40:23 251

原创 Angularjs快速入门

Angularjs快速入门方法在网上看到很多关于angularjs的文档都说的比较官方，所以按照自己的理解，写了这样一篇文章，也许我只是看到了angular的表面，但我觉得够用了，剩下更深层的东西还是等自己技术很牛的时候再深究吧学习angular首先要理解mvvm思想，这个思想的核心就是双向绑定，双向指的是view和viewmodel,至于view很好理解，就是我们在界面上看到的，viewmod

2017-02-28 13:06:32 530

转载前端插件大全

Plugins整理项目文件结构detail/ 一些组件的详细说明，以及使用 Demo目录工具类浏览器增强类表单类图片类图标类UI 框架UI 组件类用户体验增强动画SVG测试其他类Bootstrap相关类JS Plugins仓库工具类方便操作对象，数组等的工具库underscore.jslo-dash 与underscore.js的api基本一

2017-02-27 21:03:00 561

原创初步认识Angular

为什么要有Angular？什么是Angular? 传统的网站开发主要通过拼接字符串来实现，亦或者使用模板引擎，其本质也是处理字符串，但是拼接字符串产生的数据量很大所以在性能上也会有很大的损失，而且整体维护起来比较困难，耦合度较高，很有可能会牵一发而动全身。。。这时，Angular的出现使得构建页面变得非常简单，那么怎么个简单法呢？ angular实际上是将html当做了模板，最大化的减少了do

2017-02-25 19:32:15 368

转载 js闭包的理解

一、变量的作用域要理解闭包，首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种：全局变量和局部变量。Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。Js代码　　var n=999;　　function f1(){ 　　　　alert(n); 　　}　　f1(); // 999另一方面，在

2017-02-24 19:25:13 178

原创 jQuery事件绑定on()、live()、bind()与delegate()

这几个都是jquery中事件绑定的方法，之所以有这么多类型的绑定方法，是因为jQuery的版本更新的原因，如on()方法就是1.7以后出现的。其中live()方法已经过时，不建议使用。所以这里我们主要就看下以下三个方法：bind()、delegate()、on() <button id="btn">添加新的p元素</button> <div> <p>p1</p>

2017-02-21 20:16:55 290

原创 jq中的map函数

Document //在jquery中map方法也可以完成类似于each方法的遍历功能，但是map最大的特点是返回一个新数组，返回的数组中的每一个元素由回调函数的返回值决定，如果回调函数不返回数据，则map方法返回的数组长度为0；如果回调函数返回了数据，则map方法将其加入到数组中返回 function map (array,callback){ var res = [],t

2017-02-18 20:54:08 1911

原创根据数据创建table案例

Document var data = [ {name:'张三',age:19,gender:'男'}, {name:'李四',age:19,gender:'男'}, {name:'张三',age:19,gender:'男'}, {name:'王五',age:12,gender:'男'}, {name:'张三',age:15,gender:'女'}, {na

2017-02-18 20:35:29 238

转载前端切图方法总结

PhotoShop从CS版本演变到现在的CC版本，切图功能发生了比较大的变化，我们可以把PhotoShop CS版本时的切图功能称为传统切图，而从PhotoShop CC版本开始PS提出了精准切图。所谓传统切图就是切图人员基本上都是自己分割图层切图，传统切图又分为全手工切图和参考线切图；现在CC版本提出的精准切图，切图人员可以依赖计算机把图层对象精确的切割出来，这样切割出来的图层肯定比传统切图切出

2017-02-17 11:13:29 611

转载 DOM中元素节点、属性节点、文本节点的理解

节点信息每个节点都拥有包含着关于节点某些信息的属性。这些属性是：nodeName（节点名称）nodeValue（节点值）nodeType（节点类型）nodeTypenodeType 属性可返回节点的类型。最重要的节点类型是：元素类型节点类型元素1属性2文本3

2017-02-16 21:31:10 236

空空如也

空空如也