yihuoZhou-CSDN博客

原创 Linux系统（Centos）下安装nodejs并配置环境

总结Centos下安装nodejs并配置环境，记录成功安装的方法。推荐的安装方法是利用已编译的二进制文件安装，不推荐使用源码的形式安装，一是源码安装比较麻烦，二是需要自行下载编译浪费时间。1.安装nodejs 访问nodejs的官方网站的downdolad，网址：https://nodejs.org/en/download/，可以看到最新的nodejs下载，包括不同的版本，截图如下所示。

2017-03-29 19:59:19 77237 9

转载 fetch与传统的ajax

最近做了一个项目用到了fetch，fetch与传统ajax相比有什么优点和缺点，各种主流浏览器对fetch的支持，推荐一个博客地址，讲的不错， (https://github.com/camsong/blog/issues/2)

2017-10-20 10:46:39 1347

原创页面规范

为了更好的编写可读性高，性能高的前端代码，有一顶的页面规范是很重要的一层，下面是总结出的几种规范类型。一、文件规范文件分类：通用类（base，lib，ui…），业务类（album，artist，toplist…）文件引入：行内样式（不推荐），外联引入，内联引入，避免在css中使用@import，文件本身：文件名（由小写字母、数字、中划线组成），编码（utf-8）。二、注释规范块

2017-08-06 23:45:23 1017

原创页面优化

为什么需要页面优化？ 1. 提升网页的响应速度； 2. 对搜索引擎，屏幕阅读器良好； 3. 提高可读性和可维护性（方便开发人员）。如何优化？ 1. 减少请求（1）图片合并（多个图片合并）；（2）css文件合并（多个css文件合并为一个，如果样式较少可少量css样式内联，避免使用import的方式导入css文件，因为每个import为同步请求）； 2.

2017-08-01 23:53:49 530

原创 DOM实践学习笔记1--组件的实现流程

1.什么是组件？经历前期的模块搭建，开发时期主要是对组件的开发，并将它们有机的组建到一起来完成业务需求。那么什么是组件呢？在用户界面开发领域，它是一种面对用户的、独立的可复用交互元素的封装。针对前端开发，它是html(结构)+js（逻辑）+css（样式）;html用来控制组件的结构，js控制组件的逻辑，css控制组件的样式。常用的组件有Mask（遮罩组件），Datepicker(日期选择

2017-06-01 16:30:17 505

原创利用iframe实现表单的无刷新提交

表单的无刷新提交，除了使用ajax实现，利用iframe也可实现表单的无刷新提交（其关键在于设置iframe的name与表单的target值相同）。下面代码利用iframe实现表单的无刷新提交兼容到主流浏览器（IE6+，Firefox最新，Chrome最新）<!DOCTYPE html><html><head> <meta charset="utf-8"> <titl

2017-05-31 17:06:20 2147

1.input元素设置type为hidden、reset、button时将不做表单验证2.button元素设置type为reset、button时不会做表单验证3.input或textarea设置readonly属性时将不会做表单验证4.datalist的子孙元素的可验证元素将不会做表单验证5.设置了disabled的元素将不会做表单验证6.在标签中添加novalidate属性来禁止验证7.利用in

2017-05-31 15:20:13 447

原创封装一个输入框通用的光标操作接口

封装一个输入框通用的光标操作接口，使得在传入输入框和光标的起始、结束位置后，可以将输入框中从起始位置到结束位置的内容选中(选中位置高亮)，如function selection(input,start,end){ // input为输入框，如input、textarea // start为光标起始位置，如 0 // end为光标结束为止，如 10 // TODO}<

2017-05-31 14:43:24 513

原创如何处理由于浏览器设置导致的autocomplete="off"失效的问题

1.因为谷歌只会自动填充第一个<input type="password">和它之前的<input>,所以可以添加以下代码：<input style="display:none"><input type="password" style="display:none">//添加在form元素的最上边，2.最好的解决是给autocomplete设置其他值（除on或off）<input type="tex

2017-05-31 09:58:39 5705

原创 canvas基本操作画圆

用canvas画一个圆在一个300*300的canvas（id为“myCanvas“）上，以坐标点（150, 150）为圆心，100为半径，画一个边框色为#4d4e53，填充色为#6a83ff的圆。<!DOCTYPE html><html><head> <title>canvas画圆</title> <meta charset="utf-8" description=

2017-05-27 13:55:20 3023

原创 Ajax请求GET/POST方法的封装

Ajax请求GET方法的封装，网易微专业上的一道GET方法封装练习题，下面是我的设计实现。方法:get(url, options, callback) 参数 url {String} 请求资源的url options {Object} 请求的查询参数 callback {Function} 请求的回调函数，接收XMLH

2017-05-26 16:05:49 3968

原创实现浏览器兼容版的element.dataset

element.dataset获取自定义属性时（element.dataset.id)，在一些低版本的IE浏览器下不兼容,兼容解决性代码。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>dataset</title> <style> li{cursor: default;line-heig

2017-05-25 18:27:29 2632

原创实现浏览器兼容版的window.getComputedStyle

为实现浏览器兼容版的获取元素的实际样式，可以封装一个函数，下面是网易微专业上的一道练习题，后面是我写的代码封装函数。 getStyle函数用于获取元素的实际样式，语法如下： var cssPropertyValue = getStyle (element, cssPropertyName)；使用示例如下： getStyle(element, “color”)

2017-05-25 16:56:52 3839

原创如何实现浏览器兼容版的element.children

element.children这个获取节点子节点的方法支持ie9及以上版本，为了能够兼容低版本的ie，可参考一下的代码实现兼容，具体的参考资料是MDN上的实现方法：// Overwrites native 'children' prototype.// Adds Document & DocumentFragment support for IE9 & Safari.// Returns ar

2017-05-23 22:15:15 1809

原创 js实现类型判断，二分查找与日期格式化

1.类型判断函数myType用于根据输入参数返回相应的类型信息。语法如下： var str = myType (param); 使用范例如下： myType (1); 返回值： “number” myType (false); 返回值： “boolean” myType ({}); 返回值：

2017-05-22 10:35:22 557

原创 js原型链的形式实现类继承

js中虽然没有类的概念，但可以通过构造函数加原型链的方式实现类的继承。下面是一道简单的题目请使用Js代码写出一个类继承的模型，需包含以下实现：定义父类和子类，并创建父类和子类的属性和方法子类继承父类的属性和方法在创建子类对象时，调用父类构造函数//父类构造函数function Person(name,cardid){ //父类属性 t

2017-05-20 11:26:52 1204

原创 js实现排序算法（冒泡排序，直接插入排序）

冒泡排序的算法时间复杂度为o(n^2)，稳定性比较高，n个数需要n-1次排序，每次排序选出最大的数冒泡，冒泡排序JS代码：var arr=[2,1,3,4,2,6,3,2,5,4,8,7,3,4,9,32,2,1,1,2,434,5,6,8,2,3,9,10,13,24];var t;for(var i=0;i1;i++){//循环次数 for(var j=0;j1-i;j++)

2017-05-18 18:32:40 583

原创解决JS双击事件dblclick触发时，同时会执行click事件中的语句

双击dblclick事件，同时会执行click事件中的语句，当需要为一个元素同时添加这两个事件时，显然这不是我们想要的结果，举个实例，在最近做的canvas开发中使用鼠标画区域，鼠标单击一下开始画，鼠标双击时结束，并保存当前所画的区域，这时候就碰到了这个问题。解决的方法，，可以参考下面的代码，用延时的方法实现。<!DOCTYPE html><html><head> <title></titl

2017-05-18 10:56:06 18702

原创在变量作用域方面，函数声明和函数表达式有什么区别？

函数声明提升，在函数声明时定义好作用域；函数表达式，只是变量名提升，随着变量的改变，作用域也改变。词法环境with，和try…catch…不会影响函数声明的变量作用域，但会影响函数表达式的变量作用域

2017-05-13 11:45:14 587

原创 js闭包中this的指向问题及三种解决方法

下面是一个问题，对象方法中定义的子函数，子函数执行时this指向哪里？三个问题： (1)以下代码中打印的this是个什么对象？ (2)这段代码能否实现使myNumber.value加1的功能？ (3)在不放弃helper函数的前提下，有哪些修改方法可以实现正确的功能？var myNumber = { value: 1, add: function(i){

2017-05-11 22:37:34 5804

原创 js哪些情况会出现隐式类型转换

1. 数字运算：“＋”：将表达式的值转换为String（仅当有一个是String类型）；“－”：将表达式的值转换为Number;2. “.” 被隐式转换为对象；3. “if语句” 判断的条件表达式会被隐式转换为Boolean类型4. “＝＝”JS的非严格匹配时，会进行隐式类型转换

2017-05-08 22:43:54 4342

原创 js对象的浅拷贝和深拷贝

对象复制分为深拷贝和浅拷贝。浅拷贝只会将对象中的各个属性依次复制，而不会递归复制，因为js存储对象是存地址的，所以会造成复制对象和原对象指向同一内存地址。浅拷贝的代码简单实现：var obj = { a:1, arr: [2,3] };var shadowObj = shadowCopy(obj);function shadowCopy(src) { var dst = {};

2017-05-08 22:29:03 1163

原创 SSH基于密钥认证的原理

SSH的体系结构图如下：传输层协议（The Transport Layer Protocol）提供服务器认证，数据机密性，信息完整性等的支持；用户认证协议（The User Authentication Protocol）则为服务器提供客户端的身份鉴别；连接协议（The Connection Protocol）将加密的信息隧道复用成若干个逻辑通道，提

2017-05-08 09:52:21 4061

原创 JSON.parse()和JSON.stringify()兼容低版本浏览器

json.parse和json.stringify这两个方法在ie8及以上浏览器都能够使用，但关于兼容低版本的浏览器，可以用两种方法解决。 1.可以引入json2.js，下载地址 https://github.com/douglascrockford/JSON-js/blob/master/json2.js，下载下来单独引入，也可以以下面这种方式：<!--[if lt IE 8]> <scrip

2017-05-04 22:31:42 7951

原创常见两种的loading样式（css实现）

第一种圆形loading，效果图如下：实现的原理是利用CSS中的animation属性，无线循环播放动画能够达到旋转效果。具体的html和css实现代码如下<!DOCTYPE html><html><head> <title>loading样式1</title> <style type="text/css"> .loading{

2017-05-04 17:36:51 9147

原创 gulp--自动化构建工具学习笔记

gulp–基于流的自动化构建工具，可以很方便的压缩JS，CSS文件，压缩image图片，从而提高我们的网站访问性能，同时也能够实现js或css文件的合并。下面是它官网给的优势： 1.易于使用通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。 2.构建快速利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。

2017-05-04 13:03:07 354

原创 js逻辑操作符（！，&&，||）与运算符优先级

js中的逻辑操作符包括！（逻辑非），&&（逻辑与），||（逻辑或），！逻辑非：对一个操作数的布尔值取反，可通过！！取得操作数的布尔值类型，如下代码(空数组的布尔值为true，空字符的布尔值为false）console.log(!0);//trueconsole.log(!!0);//falseconsole.log(![]);//falseconsole.log(!![]);//true

2017-04-24 11:05:55 8755 1

原创异步交互基础XMLHttpRequest对象

异步交互基础XMLHttpRequest对象

2017-04-14 10:58:13 363

原创 Bootstrap响应式布局原理

Bootstrap响应式布局是利用其栅格系统，对于不同的屏幕采用不同的类属性。在开发中可以只写一套代码在手机平板，PC端都能使用，而不用考虑使用媒体查询（针对不同的设备分别写不同的代码）。Bootstrap的官方解释：Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为做多12列。栅格系统用于通过一系列的行（row）与列

2017-04-05 11:40:50 22236 1

原创 linux(ubuntu)下安装nodejs并配置环境，（树莓派2代ARM6处理器）

在树莓派上安装nodejs真是被坑的不行,虽然最终成功配置，但仍需要总结一下这次的收获，避免以后配置环境走弯路。1.下载安装nodejs 先说一下按照编译源码的方式安装nodejs，在nodejs官网上下载源码到树莓派，解压缩成功后，进入文件运行命令./config，运行后发现提示gcc版本过低，需要更新gcc版本到4.8.2以上。按照网上的方式下载gcc源码编译，更新gcc，但由于树莓派本身配置

2017-03-31 11:40:05 4609

原创 UDP广播，多播，单播

在说udp广播，多播，单播之前，首先说一下udp这个协议，它是一种无连接，不可靠的网络通信协议，但基于UDP的消息传递更快。在使用它传输数据时，用户无法知道数据是否正确到达主机，也不能确定到达目的地的顺序是否和发送的信息相同，所以有时候会出现丢包现象。看书总结出的对广播的看法，广播的意思是往这个地址发送的信息，在整个网段中的主机都能收到信息。广播分为直接广播地址和受限广播地址，受限广播这个

2017-03-26 00:49:23 1936

原创 Jquery 重写序列化函数提交表单

在使用jquery框架开发项目时，使用ajax提交数据经常会使用Jquery序列化提交函数serialize，然而在遇到选中checkbox会提交checkbox的默认值“on”，不选中则不会提交checkbox 的name字段。如下图所示，我想要提交一些个人信息，如果在爱好这一栏我什么都不选则序列化函数什么都不会提交，这将会影响我们更新数据。而我们想要的效果是我选中时值为“true“，不选中时

2017-03-25 18:17:35 1585

原创 JS如何判断空对象，及typeof和instanceof的区别

ECMAScript中有5种基本数据类型，分别为Undefined,Null,Boolean,Number,String。另外还有一种复杂数据类型Object，Object本质上是由一组无序的名值对组成的。

2017-02-28 21:48:08 3672

原创跨浏览器下确定窗口大小

跨浏览器得到窗口大小，可以让整个页面铺满浏览器可见视图大小，可通过设置CSS中的元素属性width：100%；height：100%来解决，但最近做了一页面，头部的高度已经确定，想要实现除头部以外页面铺满剩下的可见视图大小，通过设置width：100%，可以让宽度铺满整个屏幕

2017-02-27 18:30:22 360

原创 JS中的块级作用域

JS中是没有块级作用域作用域这个概念，为实现块级作用域可通过闭包的形式实现，下面通过一个例子来说一下JS中的块级作用域。function outputName(count){ for (var i = 0; i <count; i++) { console.log(i); } } cons

2017-02-14 17:10:06 1514

原创 CSS中的几种垂直居中方法

在CSS中要实现水平居中很容易实现，给标签设置一个宽度，并设置margin属性，margin 0 auto；即可实现块级元素的水平居中。而要实现垂直居中则要相对复杂一点，以下介绍几种方法实现垂直居中。 1.首先清除祖先元素的样式，通过设置margin：0；padding:0;设置需要居中元素的属性，代码如下：<!DOCTYPE html><html lang="en"><head> <

2017-02-14 14:04:07 388

原创 web语义化

web语义化的一些见解 web语义化，人可以通过视觉去辨别代码的语义，而搜索引擎看到的只是代码，它只能通过标签来判别语义。语义化最重要的一点是HTML的语义化，为了实现编写的代码尽可能对搜索引擎友好，所以要尽可能的使标签语义化。语义化的最终目的是为了实现让人和搜索引擎更容易理解代码。如一些标签的语义： h1~h6：标题； th：表的头

2017-02-13 16:23:45 494

原创基于Jquery的表单验证插件与日历插件

1.Jquery表单验证插件—Validation的学习与使用（1）Validation的验证有几种规则，一是在class属性中定义验证规则，如class=“required”,minlength=”2”。为了实现将验证规则完全编写到class属性中，另外一种是通过引入新的jquery插件-jquery.metadata.js来实现验证规则的定义，此时表单的验证调用的方法改为如下所示的代码：

2017-02-12 16:31:16 881

原创 CVS,SVN,Git

对代码的修改比较频繁，学习使用github版本控制工具。在日常工作中常见的版本控制工具有VSS，CVS，SVN，ClearCase，Git等。 CVS:协作或并发版本系统，是一种版本控制系统，方便软件的开发和使用者协同工作，，比较古老，目前用的人比较少。 SVN:开放源代码的版本控制系统，相对于CVS采用了分支管理系统，它起初的设计目标是为了取代CVS，想要的功能基本上都有，在配置HTTP服务时

2017-02-12 16:25:35 373

原创车牌号，手机号正则表达式

1.利用正则表达式检查车牌输入。在jQgrid中对编码规则设置 {name : ‘carNumber’,index:’carNumber’,width : 90,align : “left”,editable:true,editoptions:{size:10},editrules:{required:true,custom:true,custom_func:carNumCheck}}, //车

2017-02-12 16:22:31 1456 1

空空如也

空空如也