音韵者天-waker-CSDN博客

转载前端需要了解的 SSO 与 CAS 知识

不管是什么公司，只要产品数量大于一个，那么单点登录势必是绕不过去的一个问题。作为前端程序员，我们对其虽然接触不多，但适当的了解还是必要的。本文就来谈谈单点登录相关的问题。前置知识了解 SSO，最好具备以下知识。当然，如果不是特别熟，也不影响阅读。cookie及session浏览器同源策略及跨域了解登录系统的构成什么是 SSO 与 CAS?SSO SSO 是英文 Single Sign On

2017-11-21 09:33:27 889

也许你已经学会了CSS的三个简单常用的选择器：#ID，.class，标签选择器，可是这些就足够了吗？随着CSS3的到来，作为前端开发者需要掌握下面三十个基本的选择器，这样才可以在平时开发中得心用手。本文中将综合前端开发中常用的30个CSS3选择器，并且附带了浏览器的支持情况，希望对大家有所帮助。*：通用元素选择器* { margin: 0; padding: 0; }*选择器是选择页面上的全部元素

2017-09-28 17:15:51 2642

转载 jQuery / zepto ajax 全局默认设置

jQuery / zepto 的 $.ajax 方法需要配置很多选项, 有些是很常用的每个 ajax 请求都要用到的, 可以全局设置, 避免每次都写.注意: 此处用的 jQuery 版本是 1.8.3, zepto 版本是 1.1.6 和 1.2.0. 使用别的版本的要自己测试下.#jQuery 的方法是 jQuery.ajaxSetup()$.ajaxSetup({ url: "/xm

2017-09-20 15:57:32 1402

原创 visual studio的安装和使用

由于近期要与服务端C#进行配合，所以对.net的一些东西也提前了解了一些。当然作为前端不会去关注后端语言本身，但是为了更好的配合对一些开发环境包括编码、编译、发布以及版本控制肯定是需要很熟悉的。然后发现微软已经搞定了一切，那就是visual studio。visual studio ？（以下简称vs）VS是一个基本完整的开发工具集，它包括了整个软件生命周期中所需要的大部分工具，如UML工具、代码管控

2017-05-22 02:02:36 3117

翻译唯快不破：提升Web 应用的 13 个优化

时过境迁，Web 应用比以往任何时候都更具交互性。搞定性能可以帮助你极大地改善终端用户的体验。阅读以下的技巧并学以致用，看看哪些可以用来改善延迟，渲染时间以及整体性能吧！更快的 Web 应用优化 Web 应用是一项费劲的工作。Web 应用不仅处于客户端和服务器端的两部分组件当中，通常来说也是由多种多样的技术栈构建而成：数据库，后端组件（一般也是搭建在不同技术架构之上的），以及前端（HTML + Ja

2017-05-02 00:48:42 3760 3

原创 JS 解决跨域汇总

什么是跨域？在了解跨域之前，首先要知道什么是同源策略（same-origin policy）。简单来讲同源策略就是浏览器为了保证用户信息的安全，防止恶意的网站窃取数据，禁止不同域之间的JS进行交互。对于浏览器而言只要域名、协议、端口其中一个不同就会引发同源策略，从而限制他们之间如下的交互行为：Cookie、LocalStorage 和 IndexDB 无法读取。DOM 无法获得。AJAX 请求

2017-04-24 04:34:20 7611

转载 CSS预处理器——Sass、LESS和Stylus区别及联系

一、什么是CSS预处器CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量

2017-04-18 00:34:17 2570

原创 JS 类数组对象——Array-like Objects

什么是类数组对象？类数组对象是JS里面比较常用的一个对象，平时在操作DOM或写function的时候经常会用到，虽然对初学者来说概念比较陌生。类数组对象具有数组对象的一些属性，比如length,可以遍历(for-in不可以)但是却不能使用数组对象的方法。最常见的类数组就是function里面的参数变量arguments，通常传递给function的参数都会被存储在一个名为arguments的类数

2017-03-18 01:29:44 1464

原创 CSShack 布局

在这里将会收集相关经典的css hack 布局的一些例子。让一个尺寸不定的div距离浏览器上下左右都为10px//cssdiv{ border:1px solid red; position: fixed; left: 50px; right: 50px; top: 50px; bottom: 50px;}//html<div></div>fo

2017-03-17 01:31:42 765

转载使用CSS3开启GPU硬件加速提升网站动画渲染性能

为动画DOM元素添加CSS3样式-webkit-transform:transition3d(0,0,0)或-webkit-transform:translateZ(0);，这两个属性都会开启GPU硬件加速模式，从而让浏览器在渲染动画时从CPU转向GPU，其实说白了这是一个小伎俩，也可以算是一个Hack，-webkit-transform:transition3d和-webkit-transform

2017-03-16 00:20:44 4819

原创使用canvas绘制几何图形

几何图形分两种，一种是由线段构成的，一种是由弧线构成的，下面将利用canvas绘制一个矩形和圆形。canvascanvas是HTML5引入的一个定义图形的标签，相当于一个容器，所以图形的绘制还必须用脚本来完成。绘制矩形html<canvas id="canvas">你的浏览器居然不支持Canvas？</canvas>jsvar canvas = document.getElementById("ca

2017-03-16 00:07:25 1833

原创 JS提取字符串方法：substring、substr、slice的区别

这三个方法都是提取字符串里面子串的方法，虽然平时使用挺多，但是每次都要去看文档以防参数传递错误。下面对这三个方法做一个详细的区别。substringString.substring(x,y)： x:必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。 y:可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置

2017-03-14 23:35:46 4934

原创 css使元素居中的九种办法

一、使用text-align: center;居中对于行内元素或具有inline-block属性的元素居中，比如span、img等可以使用text-align: center;来实现。/*css*/div{ border:1px solid red; text-align: center; width: 200px;}div span{ width: 100px

2017-03-12 01:08:37 4776

转载 JS 函数的几个作用

一、作为一个类构造器使用function Class(){}Class.prototype={};var item=new Class(); 二、作为闭包使用(function(){ //独立作用域})();三、作为构造函数调用所谓构造函数，就是通过这个函数生成一个新对象（object）。function Test(){//大写，以区分普通函数 this.x = 10;}v

2017-02-08 02:30:24 1004

原创 overflow: hidden;

定义overflow 属性规定当内容溢出元素框时发生的事情。visible：默认值。内容不会被修剪，会呈现在元素框之外。hidden：内容会被修剪，并且其余内容是不可见的。scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。inherit：规定应该从父元素继承 ove

2016-12-19 03:45:39 1260

转载 css3布局利器flexbox

本文由大漠根据Chris Mills的《Flexbox — fast track to layout nirvana?》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://dev.opera.com/articles/view/flexbox-basics/，以及作者相关信息 ——作者：Chris Mills ——译者：大

2016-12-07 00:57:11 880

转载 js中的事件委托

知识点温故而知新什么是事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。好处呢：1，提高性能。我们可以看一个例子：需要触发每个li来改变他们的背景颜色。<ul id="ul"> <li>

2016-10-28 16:29:52 510

原创移动端click事件300ms延迟

前因给元素绑定click事件后在移动端下会有一定的延迟，主要是从点击屏幕上的元素到触发元素的 click 事件，移动浏览器会有大约 300 毫秒的等待时间。这是因为浏览器想看看你是不是要进行双击（double tap）操作。解决办法Chrome浏览器在安卓设备上的时候，设置meta头信息中，阻止用户的多点触控操作<meta name="viewport" content="minimum-sca

2016-10-25 17:27:36 1090

原创正则表达式

1.替换字符串中所有指定的字符var str = "1a2a3a";var reg = new RegExp("a","g");var result = str.replace(reg,"0");//"102030"

2016-10-25 16:56:34 548

翻译 JavaScript Scoping and Hoisting

今天谈一谈JS作用域相关的东西。因为文章是一篇译文，所以针对标题没有做翻译。可以简单的理解成JS作用域提升或者JS变量提升。好了，下面开始翻译。。。下面的代码执行完后会输出什么？var foo = 1;function bar() { if (!foo) { var foo = 10; } alert(foo);}bar();很以为，输出答案是10。

2016-10-13 20:03:57 474

转载 javaScript相等运算符==

先来看这个例子，请问下面表达式的值是多少。 0 == null如果你不确定答案，或者想知道语言内部怎么处理，就可以去查看规格，7.2.12小节是对相等运算符（==）的描述。规格对每一种语法行为的描述，都分成两部分：先是总体的行为描述，然后是实现的算法细节。相等运算符的总体描述，只有一句话。"The comparison x == y, where x and y are values, pr

2016-10-13 19:22:42 515

原创 javaScript的！逻辑运算符小技巧整理

下面是返回true的情况!null //true!undefined //true!0 //true!NaN //true!"" //true下面是返回false的情况!Array //false!Function //false!String //false!Object //false!Number //false!" " //f

2016-10-13 19:08:50 380

原创 JavaScript中undefined和null的异同

JavaScript两个表示”无”的值：undefined和null。我在平时只是null用的多一点，undefined只是在报错中经常遇到。下面针对这两个数据类型的异同做一下详细的比较。undefined和null在if语句中，都会被自动转为false，相等运算符直接报告两者相等。!null==!undefined==truenull表示”没有对象”，即该处不应该有值。典型用法是：（

2016-10-13 18:52:49 381

翻译 node.getAttribute('someAttribute')和node.someAttribute的区别

「node.getAttribute(‘someAttribute’)」获取的是「attribute」，而「node.someAttribute」获取的是元素的「property」，二者并不相同。在大多数情况下「property」和「attribute」是同步的，如场景1。场景1：<input id="username" type="text"><script>var userInput = d

2016-10-11 16:23:23 1411

原创手机访问本地项目实现远程调试的几种办法

一、在服务器环境下通过IP访问首先搭建一个服务器环境或者下载现成的程序集成包（比如phpstudy、jspstudy等）。确保服务器和手机连接在同一网段。如果是笔记本的话，手机和笔记本直接连接在同一wifi下，如果是台式机，则需要插入无线网卡或者其他的无线措施确保两个在同一网段下。通过本机IP+端口访问需要测试的项目。二、liveStyleliveStyle是个提供“样式实时预览”插件，在

2016-09-07 15:31:44 6255

原创 JQ的hover方法与mouseenter、mouseleave、mousemove、mouseover、mouseout 之间的关系

这几个都是JQ处理鼠标hover相关的事件。下面对其之间的区别和联系做一下详细分析。mouseenter 当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。mo

2016-08-17 14:17:21 4043

翻译 Sublime Text3 和Atom相关插件的安装和使用

一、Sublime Text3安装preap主题Sublime Text3作为前端开发的神器，一直备受fer的青睐。下面给Sublime Text3安装preap主题来替换默认主题。先上图：安装通过Package Control安装，先安装Package 然后再搜索preap直接安装。或者直接下载安装包https://github.com/equinusocio/preap/releases/

2016-08-11 10:48:27 1769

转载 webpack（四）本地服务器环境配置

配置内置环境启动webpack内置环境以后每次修改都会自动打包，在这一步将配置浏览器的自动刷新，让其更加自动化。修改package.json 的 scripts 部分{ "scripts": { "build": "webpack", "dev": "webpack-dev-server --devtool eval --progress --colors --hot --c

2016-08-04 11:07:14 7922

原创 webpack（三）本地服务器环境配置

webpack配置文件之前是依赖全局环境下的打包过程，下面将 webpack 安装到项目的依赖中，这样就可以使用项目本地版本的 webpack首先创建package.json文件：npm init自动生成后如下：{ "name": "webpack-package.json", "version": "1.0.0", "description": "", "main": "bu

2016-08-04 02:43:03 13407 2

原创 webpack（二）配置

webpack项目配置之前已经安装过webpack全局环境，下面结合项目看一下打包过程。首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js：<html><head> <meta charset="utf-8"></head><body> <script src="bundle.js"></script></

2016-08-04 01:42:28 855

原创 webpack（一）安装

webpack?webpack是一个模块打包器，它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。打包核心原理：分块传输，按需进行懒加载，在实际用到某些模块的时候再增量更新，才是较为合理的模块加载方案。要实现模块的按需加载，就需要一个对整个代码库中的模块进行静态分析、编译打包的过程、分析出各个模块的类型和它们依赖关系，然后将不同类型的模块提交给适配的加载器来处理。比

2016-08-04 01:10:28 6903

原创 jquery对象与DOM对象的相互转换

在写js的时候经常用到JQ对象和DOM对象互相转换的过程，以下对二者之间的转换做了总结记录下来。DOM对象？DOM—Document Object Model,它是W3C国际组织的一套Web标准。它定义了访问HTML文档对象的一套属性、方法和事件。所以DOM对象也就是我们通过js直接获取的HTML节点。element.getElementById('id');element.getElemen

2016-08-02 19:50:08 563

翻译 Css Stacking Context

最近写了一个静态页面的时候，出现了一个不常见bug，布局在safari下会出现错乱，但是在firefox、chrome、甚至低版本的IE下都是正常的。仔细排查之后才发现原来是一个弹窗modal的z-index影响的，该弹窗css设置如下：.dialog{ position: fixed; z-index: -1; top: 50%; left: 50%; ov

2016-08-01 16:36:40 497

原创 Audio

做一个移动端h5页面，需要添加一个背景音乐时我们通常用html5的新标签audio。以下是对改标签在使用上的一点摘记。1.Audio元素HTML5 规定了一种通过 audio 元素来包含音频的标准方法。audio 元素能够播放声音文件或者音频流。该元素支持三种音频格式：Ogg Vorbis、Mp3、Wav。三种格式对浏览器的支持程度不尽相同。具体可查看http://www.w3school.com

2016-07-12 16:51:14 672

原创 QQ IDKey生成--一键加群

今天网站用到一个点击链接调用qq自动加群的弹窗功能。感觉还挺方面，记录下来以备后用。首先打开qq推广首页http://shang.qq.com/v3/index.html，然后登陆需要绑定的QQ号。选择左侧一键加群组件。左侧”请选择你创建的群”来设置你需要绑定的群。复制右侧代码到你需要调用的地方即可。刚进去的界面设置是绑定个人qq直接弹出聊天窗口。

2016-06-30 20:43:19 15167 1

原创 js判断一个对象为数组的方法

数组对象js的数组是无类型的：数组元素可以是任意类型，并且同一个数组中的不同元素也可能有不同的类型。数组的元素可以是对象或其他数组，这样就可以创建复杂的数据结构。通常我们可以用一元运算符typeof来判断js的数据类型，但是对于数组这样一个特殊的对象却只能返回"object"typeof [1,2,3]"object"typeof 100"number"typeof false"boo

2016-06-26 01:25:17 4174

原创解决网站部分用户访问browserconfig.xml文件返回404的问题

问题描述部分用户访问网站时，检测日志出现url（http://www.xxx.cn/browserconfig.xml）这个返回404.网上一搜才知道，这是ie11的磁贴（https://msdn.microsoft.com/library/dn455106(v=vs.85).aspx）配置文件。当用户固定站点时，IE11 会查找名为 browserconfig.xml 的包含独立通知文件（磁贴架

2016-06-22 15:58:22 3355

原创 node.js windows 64位安装

1.下载到nodeJS官方网站下载自己电脑适配的版本：http://www.rs05.com/ 下面以最新版本6.2.0为安装实例修改默认路径C:\Program Files\nodejs\打开命令提示符窗口cmd，输入node -v,出现以下信息则说明安装成功*因为node安装程序在安装过程中会自动改变为全局环境变量，所以整个的安装还是很简单的。接下来可以进入node环境输入js代码看看打印结果

2016-05-25 12:00:28 880

原创 MongoDB windows64及32位安装

一，MongoDB win 64位安装1.MongoDB？MongoDB 是一个跨平台的，面向文档的数据库，提供高性能，高可用性和可扩展性方便。2.windows 下64位的安装过程在mongodb官网下载自己电脑适配的版本 https://www.mongodb.com/download-center?jmp=nav#community在本地创建文件夹mongodb,然后安装到该目录下：

2016-05-24 15:21:15 5235

原创解决IE8下CSS3选择器：nth-child() 不兼容的问题

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl

2016-05-09 17:43:53 26496

空空如也

空空如也