Bin_Going-CSDN博客

原创欢迎使用CSDN-markdown编辑器

jQuery操作小技巧返回顶部通过使用jQuery中的animate和scrollTop方法，不用插件就可以创建一个滚动到顶部的简单动画。<a id="top" href="www.baidu.com">返回顶部</a> $('#top').click(function(e){ e.preventDefault(); $('html,body').animat

2017-11-17 17:07:59 320

原创 UI设计之logo制作基本方法

1. 重复法通过对单一的基本型复制得到常用的复制形式：移动复制，旋转复制，缩放复制。2.特殊法将众多元素中的某一个要素进行独特，异形的设计。常用的特异形式：将单词某一个字母用图形代替，将众多图形中的某一个元素更改颜色等。3.对称法标识为对称的形式，也有可能为相对的对称包含轴对称和中心对称等。4. 发射法由中心点向四周发散，既可以是均匀的发散，也可

2017-08-21 22:16:48 725

很多人可能这样认为，前端工程化无非就是框架/库、简单的构建、css/js模块化开发而已，其实这些只是前端工程话的一部分，当我们开发一个大型的web应用的时候，将会面临很多工程方面的问题，比如：多人如何协作开发、组件模块如何复用、如何调试部署、版本如何管理控制、性能如何优化。因此，做好前端工程化，需要我们做如下的几件事：1.开发规范制定好开发、部署的目录规范、编码规范、好的目录规范能让项目解构清晰，

2017-08-11 22:44:15 2250

原创学习一门新语言的12种方法

当一个开发人员有一定的开发基础后，想象着如何学习一门新的语言，下面这十二个方法可能会对你的学习有一定的帮助将其与类似的语言进行比较；阅读语言的官方文档；使用互联网今夕搜索；与社区接触；编写玩具程序；使用改语言编写 “生产就绪”的代码；阅读一本关于这门语言的书籍；观看讲座与视频；阅读示例代码；阅读生产代码；寻找好的工具；保持你的激情；

2017-08-09 10:59:14 1150

原创前端技能树

作为一个前端开发者，我认为我们应当具备如下技能树：HTML（整洁代码，语义化标签）CSS（模块化，可伸缩）CSS方法（BEM、SMACSS、OOCSS）CSS预处理器（less、scss、postcss）现代CSS（flexbox、Grid）现代JS（ES6、Typecsript）JS框架（Angular、React、Vue）JS方法（函数式编程、面向对象）JS库（lodash、R

2017-08-05 09:41:26 1655

原创优化术语定义

技术类首屏时间：加载到第一屏的功能点所用的时间白屏时间：从进入页面到head解析的时间可操时间：与模块相关，主要是测试核心模块的使用率及用户的感知程度连通率：多为视频站点，时间为纵轴，主要是对应时间用户看到视频或者听到声音的比例产品类PV：就是访问率，一次访问一个PVUV：同一个人多次访问一个UVDay:日活跃用户MAU：月活跃用户跳出率：跳出的时间留下来的时间/pv

2017-07-30 12:31:10 585

原创技术优化之加载方式

1.同步加载文件都加载完才给用户呈现出他们想看到的可能很少的TCP连接就能够完成页面的加载2.分级加载同步加载和异步加载相结合首先给用户加载重要的资源比如logo或者是核心的功能，然后加载不重要的资源3.按需加载用户不触发该功能我们就不加载

2017-07-30 10:34:14 362

原创兼容性及经验汇总

浮动时父级元素无法撑开解决方法：全局增加样式.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}.clearfix{zoom:1;} 父级元素调用clearfix

2017-07-29 11:37:21 253

原创 AJAX全接触

1.概念AJAX是一种无须重载整个页面的情况下，能够更新部分网页内容的一种技术。2.基本准备运用html和css实现页面，构建网页。运用XMLHttpRequest对象与服务器进行数据的异步交换。运用JavaScript操作DOM，实现页面的动态局部刷新。3.HTTP请求在我们运用AJAX实现与服务器异步请求的时候，我们必须要对http协议有些基本的了解，下面的介绍就是关于HTTP协议的请求

2017-07-28 19:13:16 338

原创 Web前端之HTML规范

1.标签规则很多人觉得HTML太简单，但她恰恰是前端开发中最基础最重要的部分。标签名统一使用小写，不要使用大写；不要在自闭（self-closing）元素的尾部添加斜线；不要省略可选的结束标签（closing tag）不要轻易使用实体字符；<body> <ul> <li> <img src="images/image.jpg">

2017-07-28 14:01:29 619

原创 ECMA-262规范

ECMA-262规范定义的七种错误类型第一种：Error所有错误的基本类型，实际上不会被抛出。第二种：EvalError 执行eval错误时抛出。第三种：ReferenceError对象不存在是抛出。第四种：RangeError数字超出边界时抛出。第五种：SyntaxError出现语法错误时抛出。第六种：TypeError 变量不是期望

2017-07-27 18:22:09 2861

原创前端性能优化之--DNS预处理

DNS Prefetch，即DNS预获取，是前端优化的一部分。一般来说，在前端优化中与 DNS 有关的有两点：一个是减少DNS的请求次数，另一个就是进行DNS预获取。DNS 作为互联网的基础协议，其解析的速度似乎很容易被网站优化人员忽视。现在大多数新浏览器已经针对DNS解析进行了优化，典型的一次DNS解析需要耗费 20-120 毫秒，减少DNS解析时间和次数是个很好的优化方式。DNS

2017-06-04 11:40:38 1887

原创 call和apply的用法和区别

call()与apply()区别一、方法的定义 call方法: 语法：call(thisObj，Object)定义：调用一个对象的一个方法，以另一个对象替换当前对象。说明：call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数，那么

2017-05-17 12:28:34 696

原创 js中的this问题总结

关于this的指向问题算的上是js中的一个十分重要的问题了。今天把这个问题总结下，加深下自己对this的理解。首先，this的指向问题可以用一句话总结就是：this总是指向调用的对象，也就是说this指向谁与函数声明的位置没有关系，只与调用的位置有关。这是判断this的一个大体原则，而具体的小原则按照优先级的不同大致可以分为以下几点：一.优先级：new绑定>显式绑定>隐式绑定>默认绑定

2017-05-16 22:23:29 347

原创 js值类型和引用类型

js 值类型和引用类型JavaScript值类型和引用类型有哪些（1）值类型：数值、布尔值、null、undefined。（2）引用类型：对象、数组、函数。四、如何理解值类型和引用类型及举例我们可以用“连锁店”和“连锁店钥匙”来理解，不知道以下比喻合不合适，^-^。（1）值类型理解：变量的交换等于在一个新的地方按照连锁店的规范标

2017-05-12 11:26:10 464

转载 Emmet语法

使用方法emmet的使用方法也非常简单，以sublime text为例，直接在编辑器中输入HTML或CSS的代码的缩写，然后按tab键就可以拓展为完整的代码片段。（如果与已有的快捷键有冲突的话，可以自行在编辑器中将拓展键设为其他快捷键）语法:后代：>缩写：nav>ul>li 兄弟：+缩写：div+p+bq

2017-05-09 20:21:52 360

原创 20个很有用的css技巧

导语：下面这几个CSS技巧你可能不知道，1.彩色照片变黑白，2.所有元素垂直居中，3.禁用鼠标，4.模糊文字，小编学完能量满满的，觉得对CSS又充满了爱，你也来看看。1. 黑白图像这段代码会让你的彩色照片显示为黑白照片，是不是很酷？ img { filter: grayscale(100%); -webkit-filter: grayscale

2017-05-09 17:24:49 443

原创常见的移动web开发的问题

1.1.1 什么是Retina显示屏，带来了什么问题retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍。那么，前端的应对方案是：设计稿切出来的图片长宽保证为偶数，并使用backgro

2017-05-06 21:24:22 393

转载浅谈前端集成解决方案

浅谈前端集成解决方案什么是前端集成解决方案前端集成解决方案，英文翻译为 Front-end Integrated Solution，缩写fis，发音[fɪs]前端集成解决方案并不是一个新词汇，将这个词拆开来看，我们能得到：前端：指前端领域，即web研发中常用的浏览器客户端相关技术，比如html、js、css等集成：将一些孤立的事物或元素通过某种方式改变原有的

2017-05-04 16:48:21 1019

转载 Gulp自动化构建工具的使用

Gulp开发教程2015-11-25 10:38:384999浏览1评论对网站资源进行优化，并使用不同浏览器测试并不是网站设计过程中最有意思的部分，但是这个过程中的很多重复的任务能够使用正确的工具自动完成，从而使效率大大提高，这是让很多开发者觉得有趣的地方。Gulp是一个构建系统，它能通过自动执行常见任务，比如编译预处理CSS，压缩JavaScript和刷新浏览

2017-05-01 13:38:23 1074

转载常用Git命令

常用 Git 命令清单我每天使用 Git ，但是很多命令记不住。一般来说，日常使用只要记住下图6个命令，就可以了。但是熟练使用，恐怕要记住60～100个命令。下面是我整理的常用 Git 命令清单。几个专用名词的译名如下。Workspace：工作区Index / Stage：暂存区Repository：仓库区

2017-04-29 22:56:56 301

原创 Web自适应

浅谈Web自适应前言随着移动设备的普及，移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁，手机厂商繁多，导致的问题是每一台机器的屏幕宽度和分辨率不一样。这给我们在编写前端界面时增加了困难，适配问题在当下显得越来越突出。记得刚刚开始开发移动端产品的时候向设计MM要了不同屏幕的设计图，结果可想而知。本篇博文分享一些卤煮处理多屏幕自适应的经验，希

2017-04-29 22:52:39 351

原创 JS跨域解决方案

1.什么是跨域我们经常会在页面上使用ajax请求访问其他服务器的数据,此时,客户端会出现跨域问题.跨域问题是由于javascript语言安全限制中的同源策略造成的.简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合.例如:URL说明是否允许通信

2017-04-29 22:47:32 313

转载 CSS透明度opacity与IE中的透明度滤镜filter的最准确的用法

CSS3的透明度属性opacity想必大家都已经用的无处不在了。而对于不支持CSS3的浏览器如何进行透明处理，保持浏览器效果的一致，这个估计谁都会写，但是涉及到filter的具体语法含义和各版本写法的不同区别，很多人都搞不准确，我曾经问过许多群里的大牛，说的都不是很准确，网上的说法就更五花八门了。今天呢，主要是重新温习一下这个属性，并实际测试来说明正确的写法，和IE各版本的支持度和书写区别。首

2017-04-29 09:31:35 549

转载元数据标签的含义和用法

最齐全的网站元数据meta标签的含义和用法随着HTML5的流行和Web技术的不断演变，Meta标签队伍也越来越壮大，从Windows XP的IE6到如今Windows 7、Windows 8的IE9、IE10、IE11，对Html5的支持越来越好，html meta标签的功能作用也越来越强大。首先，先说一下最初产生的一些常用meta标签。从Meta标签的定义说起。

2017-04-29 09:18:10 7327

原创数组常用的方法

js数组操作常用方法这篇文章主要介绍了js数组操作常用方法,包括数组的创建、数组的元素的访问、数组元素的删除、数组的拷贝，需要的朋友可以参考1、数组的创建复制代码代码如下:var arrayObj = new Array();　//创建一个数组var arrayObj = new Array([size]);　//创建一个数组并指

2017-04-28 23:46:03 322

转载如何判断终端打开的设备

判断终端打开的是什么设备代码var browser = { versions: function () { var u = navigator.userAgent, app = navigator.appVersion; return { //移动终端浏览器版本信息 trident: u.ind

2017-04-28 22:47:21 659

原创常用的计算宽高的方法

js和jQuery中常用的计算宽高的方法jquery：获取浏览器显示区域的高度： $(window).height();获取浏览器显示区域的宽度：$(window).width();获取页面的文档高度：$(document).height();获取页面的文档宽度：$(document).width();获取滚动条到顶部的垂

2017-04-28 22:41:18 810

原创 js数组常用的操作方法

JS:对数组常用的操作方法操作数组常用的方法：1.slice() --------arrayObject.slice(start,end)slice() 方法可从已有的数组中返回选定的元素。返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。参数描述

2017-04-28 22:37:02 366

转载 12 个 CSS 高级技巧汇总

下面这些CSS高级技巧，一般人我可不告诉他哦。使用 :not() 在菜单上应用/取消应用边框给body添加行高所有一切都垂直居中逗号分隔的列表使用负的 nth-child 选择项目对图标使用SVG优化显示文本对纯CSS滑块使用 max-height继承 box-sizing表

2017-04-28 19:42:22 401

转载伪元素和伪类的区别

伪元素和伪类的区别首先，阅读 w3c 对两者的定义：CSS 伪类用于向某些选择器添加特殊的效果。CSS 伪元素用于将特殊的效果添加到某些选择器。可以明确两点，第一两者都与选择器相关，第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。伪类种类伪元素种类区别这里用伪类 :first-

2017-04-28 19:30:17 432

转载网页切图div+css命名

网页切图过程中div+css命名规则(一)命名规则内容：content/container 导航：nav 侧栏：sidebar 　　栏目：column 标志：logo 页面主体：main 　　广告：banner 热点：hot 新闻：news 下载：download 子导航：subnav 菜单：menu搜索：search 页脚：footer 滚动：scroll

2017-04-28 19:18:27 562

原创程序员必知道的英文单词

程序员必知的英文单词

2017-04-27 18:38:20 1605

转载常用的html、CSS、JavaScript前端规范

常用的HTML、CSS、JavaScript前端开发规范无意发现自己文件夹里面有这么一个文件，具体从哪里来的不记得了，仔细看下，发现总结的挺好的，贴出来分享一下。无论是从技术角度还是开发视角，对于web前端开发规范文档都有一定规范，本文就css3和html5的发展前景总结了一系列的web开发文档，仅供大家参考。规范目的：为提高团队协作效率, 便于后台人员

2017-04-27 00:13:26 534

原创 PS快捷键

PS快捷键一:文件新建 : Ctrl + N;打开 :Ctrl + O;打开为 :Ctrl + Alt + O;关闭 : Ctrl + W;保存 :Ctrl + S;另存为 :Ctrl + Shift + S;另存为网页所用格式 :Ctrl + Shift + Alt + S;打印设置 :Ctrl + Alt + P;页面设置 :Ctrl + Shift +

2017-04-27 00:04:26 304

转载正则表达式

常用正则表达式总结很多不太懂正则的朋友，在遇到需要用正则校验数据时，往往是在网上去找很久，结果找来的还是不很符合要求。所以我最近把开发中常用的一些正则表达式整理了一下，在这里分享一下。给自己留个底，也给朋友们做个参考。一、校验数字的表达式数字：^[0-9]*$n位的数字：^\d{n}$至少n位的数字：^\d{n,}$

2017-04-26 23:53:16 244

原创 CSS开发规范

前端之CSS开发规范1. tab键用四个空格代替　　因为在不同系统的编辑工具对tab解析不一样，windows下的tab键是占四个空格的位置，而在linux下会变成占八个空格的位置（除非你自己设定了tab键所占的位置长度）。　　一些童鞋可能会有疑问，tab键换成四个空格，多麻烦啊~　　其实不然，我平时用sublime text比较多，在这个工具中可以对tab键进行设置。　　选择

2017-04-26 20:18:02 396

原创对W3C的理解

深刻理解W3C中的Web标准Web标准简而言之就是就是将页面的结构，表现以及行为各自单独的实现，更通俗的讲就是如今招聘流行的“Div+CSS”布局。web标准简单来说可以分为结构、表现和行为。其中结构主要是有HTML标签组成。或许通俗点说，在页面body里面我们写入的标签都是为了页面的结构。表现即指css样式表，通过css可以是页面的结构标签更具美感。行为是指页面和用户具有一定的交

2017-04-26 10:38:30 412

原创 Webstrom快捷键大全

Webstrom快捷键大全各位前端的程序猿和攻城狮们，记住这些快捷键，你们就可以顺利的解放你们的鼠标了。。。Ctrl+/ 或 Ctrl+Shift+/注释（// 或者/*…*/ ）Shift+F6重构-重命名Ctrl+X删除行Ctrl+D复制行Ctrl+G查找行Ctrl+Shift+Up/Down代码向上/下移动。F2 或Shift+F2高亮错误或警告快速定位写代码，按T

2017-04-25 23:24:41 606

原创 JavaScript保留字和关键字

ECMA-262中描述了一组具有特定用途的关键字，关键字属于语言保留，不可以用于标示符，学习js的朋友可以看看ECMA-262中描述了一组具有特定用途的关键字，可用于表示控制语句的开始或结束，或者用于执行特定操作等。规定：关键字属于语言保留，不可以用于标示符。ECMAScript的全部关键字（*为第五版新增）：break　　do　　instanceof　　t

2017-04-24 16:58:09 489

Git权威指南

空空如也