霜月枫桥-CSDN博客

转载响应式布局总结

响应式布局的开发基础知识本章主要分为以下几个部分正确理解响应式设计响应式设计的步骤响应式设计需要注意的问题响应式网页布局实现原理第一：正确理解响应式布局响应式网页设计就是一个网站能够兼容多个终端-而不是为每个终端做一个特定的版本。打个比方来说：现在社会有很多响应产品，例如折叠沙发，折叠床等等，当我们需要把沙发放到一个角落的时候，此刻沙发就好比div吧，而角落

2017-06-07 17:08:03 776

原创前台开发总结08——20170607

1、最轻量级请求(信号灯)问题描述：我们常用的请求方式有Ajax和form表单提交，但是这些请求的方式都是单线程的，访问速度较慢。问题解决：可以使用媒体对象，如Image、Radio和Video。因为媒体对象在访问时可同时20线程加载。eg.var url="/test.php";var arr=['name=xyong','address=qingdao'];var img=n

2017-06-07 15:40:23 457

原创 height、clientHeight、scrollHeight、offsetHeight区别

我们来实现test中的onclick事件 function justAtest() { var test= document.getElementById("test"); var test2=document.getElementById("test2") var test3=document.getElementB

2017-06-06 15:53:46 1538 1

转载详解js闭包

闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。闭包有三个特性：1.函数嵌套函数2.函数内部可以引用外部的参数和变量3.参数和变量不会被垃圾回收机制回收闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量使用闭包有一个优点

2017-05-31 14:43:34 325

转载 JavaScript立即执行函数

立即执行函数立即执行函数：函数在定义后立即被执行，有特定的书写模式。例如：123(function () { alert('watch out!'); }()); 或：123(functi

2017-05-31 14:41:58 633

转载 jsonp详解

json相信大家都用的多，jsonp我就一直没有机会用到，但也经常看到，只知道是“用来跨域的”，一直不知道具体是个什么东西。今天总算搞明白了。下面一步步来搞清楚jsonp是个什么玩意。同源策略首先基于安全的原因，浏览器是存在同源策略这个机制的，同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。看起来不知道什么意思，实践一下就知道了。1.随便建两个网页

2017-05-31 11:14:44 366

转载 AJAX 跨域请求 - JSONP获取JSON数据

Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点（流行术语为 Web 2.0 站点）的关键技术。Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。使用 XMLHttpRequest 函数获取数据，它是一种 API，允许客户端 JavaScript 通过 HTTP 连接到远程服务器。Ajax 也是许多 mas

2017-05-31 10:31:47 1238

转载去除inline-block元素间间距的N种方法

一、现象描述真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子：间距就来了~~我们使用CSS更改非inline-block水平元素为inline-block水平，也会有该问题：.space a { display: inline-block; padding: .5em 1em;

2017-05-30 16:38:47 436

原创前台开发总结07——20170525

1、KeePass 是专门为了解决人类记不得众多密码的问题所产生的，它包含了一个强大的密码产生引擎与加密储存机能，能够提供一个安全的密码储存空间。2、通过JS修改DOM会造成大量的开销，因为DOM的每次修改，浏览器内核都需要重新计算页面。因此，JS要少碰DOM，把所有的操作都放在ECMAScript里面。比如把操作使用一个变量储存起来。3、对于Object和Array，通过

2017-05-25 22:52:51 414

转载使用CORS：跨域两三事

本文为译文。简介 APIS是可以将富网页应用串连在一起的线程。但是这个应用难以转给浏览器，跨域请求技术的选择被限制了，类似JSONP（由于安全考虑，使用会被限制），或者配置代理（设置和维护都比较头痛）。 Cross-Origin Resource Sharing(CORS)是允许来自浏览器的跨域通信的W3C规范。通过设置XMLHttpRequest的头部，COR

2017-05-25 19:22:00 5339

转载 jQuery的 on() 方法详解

jQuery on()方法是官方推荐的绑定事件的一个方法。$(selector).on(event,childSelector,data,function,map)由此扩展开来的几个以前常见的方法有.bind()　　$("p").bind("click",function(){　　　　alert("The paragraph was clicked.");　　});

2017-05-25 19:21:54 1597

原创浏览器渲染页面的过程，以及重绘和重排

浏览器的渲染过程1，浏览器解析html源码，然后创建一个 DOM树。在DOM树中，每一个HTML标签都有一个对应的节点，并且每一个文本也都会有一个对应的文本节点。DOM树的根节点就是 documentElement。2，浏览器解析CSS代码，计算出最终的样式数据。对CSS代码中非法的语法她会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置，用户

2017-05-23 16:30:19 808

原创 Liferay主题之获取用户角色

问题描述：在Liferay开发中，有时会遇到一种需求————根据用户的角色判断某些内容是否该显示。我这次便遇到了此类问题，Liferay中配置了新的角色————prole，若用户拥有该prole角色，则显示发布平台和登出；若用户不拥有该角色，则只显示登出。如下图所示问题解决：相关代码如下： $user_name #set ( $arr = $permissionChec

2017-05-22 18:43:11 1187

原创前台开发总结06_20170520

1、JS中的 with(); 方法，用于设置代码在特定对象中的作用域。当在with()中调用方法或变量时，首先查询该对象的作用域中有无该方法或变量，若存在则输出，若不存在，则再查询全局作用域中有无该方法或变量。也即，with()会把一个对象插入到访问链的顶端。eg. function animal(name,address){ this.name=name; this.addres

2017-05-20 22:51:50 437

原创 CommonJS及AMD模块化编程

模块化编程规范有 CommonJS、AMD(这两者常用)以及 ES Harmony(理想化规范)目的：1、高度解耦一些代码块，提高代码的复用性2、减少JS全局命名变量的冲突，避免污染全局命名空间。一、CommonJS 同步模块加载API定义很多普通应用程序（主要指非浏览器的应用）使用的API，从而填补了这个空白。它的终极目标是提供一个类似Python，Ruby和Java

2017-05-19 18:44:28 570

转载 JavaScript常见的内存泄漏原因

JavaScript 的垃圾收集机制javascript具有自动垃圾收集机制，也就是说，执行环境会负责管理代码执行过程中的使用的内存。而在C和C++之类的语言中，开发人员的一项基本任务就是手动跟踪内存的使用情况，这是造成许多问题的一个根源。在编写javascript程序时候，开发人员不用再关心内存使用的问题，所需内存的分配以及无用的回收完全实现了自动管理。JavaScri

2017-05-19 18:42:37 673

转载 Javascript中eval()函数的使用方法与示例

JavaScript有许多小窍门来使编程更加容易。其中之一就是eval()函数，这个函数可以把一个字符串当作一个JavaScript表达式一样去执行它。定义和用法 eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。语法 eval(string) 参数描述 string 必需。要计算的字符串，其中含有要计算的 JavaScript 表达式或要执行的

2017-05-19 18:42:16 4458

转载深入理解JavaScript中的立即执行函数(function(){……})()

前言：这篇文章主要介绍了深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是用(function(){…})()包住业务代码,使用jquery时比较常见,需要的朋友可以参考下立即执行函数表达式IIFE作用：IIFE最常用的功能显然是隔离作用域。ES6之前JS原生又不提供块级作用域，所以只能用函数作用域模拟了。还有种常用就

2017-05-18 18:41:40 568

转载 ES6之块级作用域

一、前言在ECMAScript6（以下简称ES6）之前，ECMAScript的作用域只有两种：　　1、全局作用域；　　2、函数作用域。正是因为有这两种作用域，所以在JavaScript中出现一术语--“变量提升（hoisting）”。如下：function func(){ console.log(test); va

2017-05-18 18:41:23 567

转载 DATA URL简介及DATA URL利弊

Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用img标记将服务器上的图片引用到页面中的方式不一样，在Data URL协议中，图片被转换成base64编码的字符串形式，并存储在URL中，冠以mime-type。本文中，我将介绍如何巧妙的使用Data URL优化网站加载速度和执行效率。1. Data URL基本原理图片在网页中的使用方法通常是下面这种利用i

2017-05-18 18:41:04 1940

原创 prototype属性简介

prototype为对象原型的意思，在JS中配置对象的prototype属性，可以减少js内存空间的占用，提高js的性能。使用示例：function Animal(name){ this.name=name;}Animal.prototype.style=['毛色','几条腿'];Animal.prototype.age=1;Animal.prototype.show=funct

2017-05-16 18:54:22 744

原创前台开发总结05_20170516

1、问题描述：在前台开发中，经常需要通过点击按钮，为HTML的某一元素增删class中的值。过去通常通过jQuery的attr()方法设置指定元素的class值。但是，这种方法在循环中缺不方便实现。解决方法：可以使用jQuery的addClass()和removeClass()来具体的增删元素中的class2、HTML中中有属性download，加上它可以实现中href属性

2017-05-16 18:52:09 321

转载 Chrome 控制台console的用法

下面我们来看看console里面具体提供了哪些方法可以供我们平时调试时使用。目前控制台方法和属性有：["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "ge

2017-05-16 18:50:02 402

原创 PHP学习随笔01——20170508

1、PHP对大小写不敏感在 PHP 中，所有用户定义的函数、类和关键词（例如 if、else、echo[ˈekoʊ] 等等）都对大小写不敏感。不过在 PHP 中，所有变量都对大小写敏感。备注：HTML对大小写也不敏感，而js和css则对大小写敏感。2、在PHP中， "."或者"," 为连接符（"."相当于"+"，连接起来后相当于同一个字符串；","则是用来分隔各个字符串）每

2017-05-08 23:06:38 525

转载 PHP环境（apache,PHP,Mysql）详细配置方法

安装前的准备：下载PHP，apache,MySQL安装包，可以到相关官网上下载，下面是安装步骤本人Apache版本为：httpd-2.4.25-x64-vc11-r1 PHP版本为： php-5.6.30-Win32-VC11-x641.安装Apache ,直接运行安装即可，我们将其安装到D:/PHP/Apache/ 目录下2.将PHP压缩包解压内容放到

2017-05-04 20:22:46 336

转载浅谈Web服务器和应用服务器的区别

1Web服务器和应用服务器简介　　通俗的讲，Web服务器传送页面使浏览器可以浏览，然而应用程序服务器提供的是客户端应用程序可以调用(call)的方法(methods)。确切一点，你可以说：Web服务器专门处理HTTP请求(request)，但是应用程序服务器是通过很多协议来为应用程序提供(serves)商业逻辑(business logic)。1。应用服务器处理业务逻辑，w

2017-05-04 11:45:48 540

转载 marquee标签实现跑马灯效果--无缝滚动

今天在做微信端的大转盘抽奖时，想把所有用户的抽奖记录做成无缝滚动的效果，无奈我的js功底太差，一时想不出实现的方法，便百度各种相似效果。但无意中发现了一个html标签——可以实现多种滚动效果，无需js控制。使用marquee标签不仅可以滚动文字，也可以滚动图片，表格等，而且使用起来方便快捷，真的为我节省了不少时间。 marquee标签不是HTML3.2的一部分，并且只支持M

2017-05-02 09:28:54 1705

转载 EL表达式（详解）

EL表达式 1、EL简介1）语法结构 ${expression}2）[]与.运算符 EL 提供.和[]两种运算符来存取数据。当要存取的属性名称中包含一些特殊字符，如.或?等并非字母或数字的符号，就一定要使用 []。例如： ${user.My-Name}应当改为${user["My-

2017-04-20 22:26:10 442

转载 Java中的private、protected、public和default的区别

（1）对于public修饰符，它具有最大的访问权限，可以访问任何一个在CLASSPATH下的类、接口、异常等。它往往用于对外的情况，也就是对象或类对外的一种接口的形式。（2）对于protected修饰符，它主要的作用就是用来保护子类的。它的含义在于子类可以用它修饰的成员，其他的不可以，它相当于传递给子类的一种继承的东西。（3）对于default来说，有点的时候也成为friendly（友员）

2017-04-20 22:25:03 404

转载 java中Map,List与Set的区别

Set,List,Map的区别java集合的主要分为三种类型：Set（集）List（列表）Map（映射）要深入理解集合首先要了解下我们熟悉的数组：数组是大小固定的，并且同一个数组只能存放类型一样的数据（基本类型/引用类型），而JAVA集合可以存储和操作数目不固定的一组数据。所有的JAVA集合都位于 java.util包中！ JAVA集合只能存放引用类型的的数据，不能存

2017-04-20 22:24:10 798

原创前台开发总结04——2017.04.13

1、js闭包经典示例，如下所示：var db = (function() {// 创建一个隐藏的object, 这个object持有一些数据// 从外部是不能访问这个object的var data = {};// 创建一个函数, 这个函数提供一些访问data的数据的方法return function(key, val) { if (val === undefined) { r

2017-04-14 18:45:43 484

转载使用 JSONP 实现跨域通信

简介Asynchronous JavaScript and XML (Ajax) 是驱动新一代 Web 站点（流行术语为 Web 2.0 站点）的关键技术。Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。使用 XMLHttpRequest 函数获取数据，它是一种 API，允许客户端 JavaScript 通过 HTTP 连接到远程服务器。Ajax 也是许

2017-04-07 11:33:20 878

转载 CSS创建三角形（小三角）的几种方法

你可以在很多地方看到三角形（小三角）：tooltips提示框、下拉菜单、甚至在loading载入动画里。不管你喜欢还是不喜欢，这些小元素对各UI元素之间的联系关系式很重要的。有一些不同的方法来设计并制作一个三角形，在本文中，我将介绍：点此查看实例展示编码图片假如你已经有了三角形的图片，并且减少HTTP请求，那么将这个图片转换成一个BASE64字符串

2017-04-06 20:41:08 1415

原创 WEB开发之前后台JSON类型数据传值

准备：下载JSON的jar包，将其导入WEB工程的WEB-INF下的lib文件夹中，需要下载的jar包如下图所示：后台向前台传递json数据：可以只传递一个json对象，代码如下所示： /*如果你要传递的数据中有中文，则需要设置传递的数据类型，否则前台接受时可能会出现乱码*/ response.setContentType("text/html

2017-04-05 20:59:59 3087

转载 HTTP中GET与POST的区别详解

GET和POST是HTTP请求的两种基本方法，要说它们的区别，接触过WEB开发的人都能说出一二。最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数。你可能自己写过无数个GET和POST请求，或者已经看过很多权威网站总结出的他们的区别，你非常清楚知道什么时候该用什么。当你在面试中被问到这个问题，你的内心充满了自信和喜悦。你

2017-04-05 19:53:40 535

转载 DOM, DOCUMENT, BOM, WINDOW 的区别

这几个都是 JS 里面的概念。先说 DOM：DOM 全称是 Document Object Model，也就是文档对象模型。DOM 就是针对 HTML 和 XML 提供的一个API。什么意思？就是说为了能以编程的方法操作这个 HTML 的内容（比如添加某些元素、修改元素的内容、删除某些元素），我们把这个 HTML 看做一个对象树（DOM树），它本身和里面的所有东西比如这些标签都

2017-04-04 18:18:38 590

转载 Spring MVC 入门示例讲解

在本例中，我们将使用Spring MVC框架构建一个入门级web应用程序。Spring MVC 是Spring框架最重要的的模块之一。它以强大的Spring IoC容器为基础，并充分利用容器的特性来简化它的配置。目录MVC框架是什么Dispatcher Servlet(Spring控制器)Spring入门示例运行时依赖库web.xml和spring-servlet.

2017-04-03 15:55:43 460

转载 js断点调试心得（Chrome浏览器）

1.断点调试是啥？难不难？断点调试其实并不是多么复杂的一件事，简单的理解无外呼就是打开浏览器，打开sources找到js文件，在行号上点一下罢了。操作起来似乎很简单，其实很多人纠结的是，是在哪里打断点？（我们先看一个断点截图，以chrome浏览器的断点为例）步骤记住没？用chrome浏览器打开页面 → 按f12打开开发者工具 → 打开Sources → 打开

2017-04-03 14:59:31 1627

转载 Array.prototype.slice.call(arguments)用法详解

我们知道，Array.prototype.slice.call(arguments)能将具有length属性的对象转成数组，除了IE下的节点集合（因为ie下的dom对象是以com对象的形式实现的，js对象与com对象不能进行转换）如：1 var a={length:2,0:'first',1:'second'};2 Array.prototype.slice.call(a);

2017-04-01 15:12:14 1419

转载 js数据类型判断和数组判断

js六大数据类型：number、string、Boolean、null、undefined（以上五个为原始类型）、object（数据类型）string：由单引号或双引号来说明，如"string"number：什么整数啊浮点数啊都叫数字，你懂的~Boolean: 就是true和false啦undefined：未定义。此关键字属于js中的常量，其它五种类型都是对象。

2017-04-01 15:12:09 823