半颗茜-CSDN博客

原创 input placeholder

placeholder是HTML 5 <input> 的属性,，是表单元素input的一个占位符。兼容性 caniuseie 11+firefox 49+chrome 49+safari 9.1+Opera 41+iOS Safari 9.3+Opera Mini allAndroid Browser 4.4+Chrome for Android 53+通过下面几行代码就可以设置

2016-11-14 11:19:22 638

原创常用正则表达式

官方文档参考1、校验字符是否全由数字组成function isDigit(s) {　　var patrn=/^[0-9]+$/; 　　//其他写法 var patrn =new RegExp("^\\d+$"); return patrn.test(s);　　if (!patrn.exec(s)) return false　　return true;　　}2、校验登录名：只能输入5-2

2016-08-08 16:55:22 534

插件weui – A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.官方网站FrozenUI – FrozenUI的CSS组件库,基于腾讯手Q样式规范官方网站FullPage.js–Create full screen pag

2016-08-04 18:05:37 696

原创移动端css技巧

一、移动端伪类 :active 生效移动端基本没有:active的概念，因为不像鼠标，会有经过状态，但是并不代表移动端的:active是没有的要CSS伪类 :active 生效，只需要给 document 绑定 touchstart 或 touchend 事件。具体代码：style> a { color: #000; } a:active { color: #fff;}

2016-04-05 15:02:21 628

原创 Asynchronous JavaScript and XML（Ajax）

原生JavaScript的写法：来源var xmlReq;if (window.XMLHttpRequest) {// code for all new browsers xmlReq=new XMLHttpRequest();}else if (window.ActiveXObject) {// code for IE5 and IE6 xmlReq=new ActiveXObject

2016-03-30 11:07:25 496

原创 React ajax

来源通过 AJAX 加载初始数据，引入jQuery。在 componentDidMount 时加载数据。当加载成功，将数据存储在 state 中，触发 render 来更新你的 UI。当执行同步请求的响应时，在更新 state 前，一定要先通过 this.isMounted() 来检测组件的状态是否还是 mounted。<head> <meta charset="UTF-8"> <

2016-03-21 10:49:34 1498

原创 React Tips

一、JSX 中的 If-Else 来源没法在JSX中使用 if-else 语句，因为 JSX 只是函数调用和对象创建的语法糖。可以采用三元操作表达式：React.render(<div id={condition ? 'msg' : ''}>Hello World!</div>, mountNode);当三元操作表达式不够健壮，你也可以使用 if 语句来决定应该渲染那个组件。var loginBut

2016-03-21 10:17:39 821

原创 React form

来源表单组件支持几个受用户交互影响的属性： a. value，用于 <input>、<textarea> 组件。 b. checked，用于类型为 checkbox 或者 radio 的 <input> 组件。 c. selected，用于 <option> 组件。在 HTML 中，<textarea> 的值通过子节点设置；在 React 中则应该使用 value 代替。表单组件可

2016-03-18 10:16:03 637

转载 React 复合组件

来源一、动机：关注分离通过复用那些接口定义良好的组件来开发新的模块化组件，我们得到了与使用函数和类相似的好处。具体来说就是能够通过开发简单的组件把程序的不同关注面分离。如果为程序开发一套自定义的组件库，那么就能以最适合业务场景的方式来展示你的用户界面。<div id="example"></div><script type="text/jsx"> //组合实例 var Avatar

2016-03-16 17:37:48 464

转载 React 生命周期

来源 1一、组件的生命周期分成三个状态： Mounting：已插入真实 DOM Updating：正在被重新渲染 Unmounting：已移出真实 DOM二、React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数: componentWillMount() componentDidMoun

2016-03-16 16:15:19 839

转载 React event

来源一、虚拟事件对象事件处理器将会传入虚拟事件对象的实例，一个对浏览器本地事件的跨浏览器封装。它有和浏览器本地事件相同的属性和方法，包括 stopPropagation() 和 preventDefault()，但是没有浏览器兼容问题。如果因为一些因素，需要底层的浏览器事件对象，只要使用 nativeEvent 属性就可以获取到它了。每一个虚拟事件对象都有下列的属性：boolean bubbl

2016-03-07 17:00:04 892

转载 React 标签和属性支持

来源React 尝试支持所用常用的元素。一、HTML 元素下列的 HTML 元素是被支持的：a abbr address area article aside audio b base bdi bdo big blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn

2016-03-04 13:54:06 9751

原创 React refs

来源：七、获取真实的DOM节点组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。但是，有时需要从组件获

2016-03-04 13:18:15 1483

原创 React props

一、props用法来源组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。1、PropTypes组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求。<script type="text/jsx"> var MyTitle = React.createClass({ getDefault

2016-03-03 17:07:32 4433

原创 React state

来源1 来源2组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI//demo1<div id="demo1"></div><script type="text/jsx"> var HelloWorld = React.createClass({ getInitialState

2016-02-23 11:25:09 1105

原创 React.Children

来源React.Children 为处理 this.props.children 这个封闭的数据结构提供了有用的工具。1、React.Children.mapobject React.Children.map(object children, function fn [, object context])在每一个直接子级（包含在 children 参数中的）上调用 fn 函数，此函数中的 this

2016-02-23 10:48:05 13782 1

转载 5-策略模式

参考书籍: Javascript设计模式与开发实践（曾探）在程序设计中，要实现某一个功能有多种方案可以选择。比如一个压缩文件的程序，既可以选择zip 算法，也可以选择gzip 算法。这些算法灵活多样，而且可以随意互相替换。这种解决方案就是本章将要介绍的策略模式。策略模式的定义是：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。一、使用策略模式计算奖金很多公司的年终奖是根据员工的工资

2016-02-23 10:44:40 572

转载 4-单例模式

要实现一个标准的单例模式并不复杂，无非是用一个变量来标志当前是否已经为某个类创建过对象，如果是，则在下一次获取该类的实例时，直接返回之前创建的对象。一、标准单例模式//e.g.method1var Singleton = function(){ this.name = name; this.instance = null;};Singleton.prototype.getName

2016-02-18 15:03:31 366

转载 3.2-高阶函数

参考书籍: Javascript设计模式与开发实践（曾探）高阶函数是指至少满足下列条件之一的函数。函数可以作为参数被传递；函数可以作为返回值输出。一、函数作为参数传递把函数当作参数传递，这代表我们可以抽离出一部分容易变化的业务逻辑，把这部分业务逻辑放在函数参数中，这样一来可以分离业务代码中变化与不变的部分。其中一个重要应用场景就是常见的回调函数。1、回调函

2016-02-17 10:08:05 426

转载 3.1-闭包

一、变量的作用域变量的作用域，就是指变量的有效范围。当在函数中声明一个变量的时候，如果该变量前面没有带上关键字var，这个变量就会成为全局变量，这当然是一种容易造成命名冲突的做法。另外一种情况是用var 关键字在函数中声明变量，这时候的变量即是局部变量，只有在该函数内部才能访问到这个变量，在函数外面是访问不到的。在JavaScript 中，函数可以用来创造函数作用域。此时的函数像一层半透明的

2016-02-16 15:38:53 430

转载 2.2-call与apply

来源：JavaScript设计模式与开发实践Function.prototype.call 和Function.prototype.apply的作用一模一样，区别仅在于传入参数形式的不同。apply 接受两个参数，第一个是函数体内this 对象的指向，第二个参数为一个带下标的集合，这个集合可以为数组，也可以为类数组，apply 方法把这个集合中的元素作为参数传递给被调用的函数：var func =

2016-02-07 14:51:13 388

转载 Javascript中的new

原文new关键字做了什么？在JavaScript中，使用new关键字后，意味着做了如下四件事情：创建一个新的对象，这个对象的类型是object；设置这个新的对象的内部、可访问性和 [[prototype]] (即obj.__proto__)属性为构造函数（指prototype.construtor所指向的构造函数）中设置的；执行构造函数，当this关键字被提及的时候，使用新创建的对象的属性；

2016-02-04 17:58:05 629

原创浅谈position、display、float定位属性

positionposition 属性规定元素的定位类型。fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。固定定位。元素将被设置在浏览器上一个固定位置上，不会随其他元素滚动。是脱离文档流的。absolute 生成绝对定位的元素，相对于 static 定位以外的第

2016-02-04 15:32:04 512

转载 BFC

来源：http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html一、BFC是什么？　　在解释 BFC 是什么之前，需要先介绍 Box(盒子)、Formatting Context(格式化上下文)的概念。　　Box: css布局的基本单位　　 Box 是 css布局的对象和基本单位，直观点来说，就是一个页面是由很

2016-02-03 18:49:31 279

原创 box-sizing属性

box-sizing: content-box/ border-boxcontent-box: 浏览器对盒模型的解释遵W3C 标准，width和height不包括border和padding。border-box: 浏览器对盒模型的解释与 IE6之前的版本相同，border和padding被包含在width和height之内的。内容的宽和高可以通过定义的width和height减去相应方向的pad

2016-02-03 17:01:01 430

原创论坛开发总结

这个论坛做起来真的是一把辛酸泪啊！一、重构对于论坛这样的项目，先要了解它的功能，页面结构很多时候是和后台功能以及他们的实现方式决定的。对于设计师的原稿，不能一模一样的照搬，某些间距、按钮类别····可以根据实际情况进行调整。一个项目css, js应当分文件管理，避免在一个文件内导致文件过大，文件命名一定需规范。使用display: inline-block; 使li水平排列，详见《ul-l

2016-02-03 16:45:37 947

原创横扫天下官网开发总结

1、line-height:1; line-height尽量不带单位， line-height永远是本身font-size乘以“因子”的倍数。2、给flash添加外部链接：第一步：将.swf文件转换成Flv，使用软件"硕思闪客精灵"。第二步：在flash中选择要添加链接的图形，然后写代码 on (release) {getURL("http://www.baidu.com/", "_blan

2016-02-03 16:30:34 356

原创斩魔游戏官网开发总结

1、百度分享： http://share.baidu.com/code2、加网分享：http://www.jiathis.com/3、IE6下面png24图片透明<!--[if IE 6]> <script type="text/javascript" src="../js/fixPNG.js"></script> <script> DD_belatedPNG

2016-02-03 16:28:00 432

转载 SEO规范

SEO（Search Engine optimization）的意思是搜索引擎优化。通俗理解是：通过总结搜索引擎的排名规律，对网站进行合理优化，使你的网站在百度和Google的排名提高，让搜索引擎给你带来客户。深刻理解是：通过SEO这样一套基于搜索引擎的营销思想，为网站提供生态式的自我营销解决方案，让网站在行业内占据更多曝光机会，从而获得品牌影响力扩大和订单机会。下面是主要的一些SEO方法和技巧：一

2016-02-02 14:52:05 1773

原创 jQuery性能提升方法

jQuery性能的方法提升1.用对选择器。最快的选择器：id选择器和元素标签选择器, jQuery内部会自动调用浏览器的原生方法（比如getElementById()），所以它们的执行速度快。较慢的选择器：class选择器; 大部分都有原生方法getElementByClassName()，速度不慢。IE5-IE8都没有部署这个方法，相当慢。最慢的选择器：伪类选择

2016-02-01 22:37:36 719

原创 WebStorm常用快捷键

ctrl+/ 单行注释（在用）ctrl+shift+/ 块注释（在用）ctrl+shift+ +/- 展开/折叠 ctrl+alt+F 查询选中的内容（在用） ctrl+shift+up/down 上下移动句子（在用） Ctrl + I 自动缩进 Alt+回车导入包,自动修正Ctrl+N 查找类

2016-02-01 21:32:51 840

转载 2.1-this

JavaScript 的this总是指向一个对象，而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的，而非函数被声明时的环境。不同情况下this的指向：作为对象的方法调用。作为普通函数调用。构造器调用。Function.prototype.call 或Function.prototype.apply 调用。1、作为对象的方法调用当函数作为对象的方法被调用时，this 指向该对象：

2016-02-01 20:14:33 318

转载 1.4-原型

参考书籍: Javascript设计模式与开发实践（曾探）原型模式不单是一种设计模式，也被称为一种编程泛型。原型模式找到一个对象，然后通过克隆来创建一个一模一样的对象。使用原型模式，我们只需要调用负责克隆的方法，便能完成同样的功能。ECMAScript 5 提供了Object.create方法，可以用来克隆对象。但原型模式的真正目的并非在于需要得到一个一模一样的对象，而是提供了一种便捷的

2016-02-01 17:30:22 370

原创 text-overflow

语法： text-overflow : clip | ellipsis 参数： clip : 　不显示省略标记（…），而是简单的裁切（clip这个参数是不常用的！） ellipsis : 　当对象内文本溢出时显示省略标记（…）说明：设置或检索是否使用一个省略标记（…）标示对象内文本的溢出。注意，text-overflow:ellipsis 属性在FF中是没有效果的。我们可以用它代替我

2016-01-29 19:57:17 426

转载 '加入收藏' 功能

第一种写法：例子<a href="javascript:void(0);" target="_self" onclick="javascript:try{ window.external.AddFavorite('http://www.butao.com','步淘'); } catch(e){ (window.sidebar)?window.sidebar.addPanel('360安全网址','h

2016-01-29 19:36:00 680

原创 Css Hack

.co{ color:#000; //黑 color:#ffff00 \0; //黄 color :#8000ff\9\0; //紫 *color:#f00; //红 _color:#0f0; //绿}在不同浏览器中显示的文字颜色不同结果：ie6–绿色； ie7–红色； ie8–黄色； ie9

2016-01-29 19:18:26 311

转载 Flash播放器常用参数设置_应用技巧

做游戏官网总会遇到在页面中写入flash的时候：<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" WIDTH="550" HEIGHT="

2016-01-29 17:52:26 3481

原创 PNG8和PNG24的区别

页面中切图，因为需要透明，所以存为PNG8格式，图片四周全是锯齿，而且阴影也不见了，后来存为PNG24，这些问题就消失了。去百度搜索了关于PNG8和PNG24的区别，看到下面的文章，原来PNG8要么完全透明，要么完全不透明，不支持半透明，所以才会出现上面的问题，但PNG24支持半透明的。一、PNG8 & PNG24的不同png8和png24的根本区别，不是颜色位的区别，而是存储方式不同。png

2016-01-29 16:25:35 8843 1

原创 IE6中CSS方法实现PNG图片透明

关于ie6中使用png之前知道的方法都是比较复杂的，使用js或者滤镜。最近在同事那里学到了比较简单的方法：1、使用质量较好的图片，比如png24、png32、png8，都可以；然后针对ie6可以单独使用一张没有特别效果的图片，保存成png8或者gif都可以，但最好是png8；注：png8与gif都是索引色透明。（这个是稍微简单的方式了）2、保存格式选为png8，对于边缘有半透明效果的需要特殊处理

2016-01-29 16:02:59 727

原创应用市场CMS总结

开发中遇到的坑：1、ajaxfileupload plugin问题描述：上传apk，在IE11下弹出保存/打开/取消框，返回的是一个json文件, 实际应该执行ajaxfileupload success回调函数。问题解答：经过调试，返回结果并未执行success回调函数，而是执行error回调函数（语法错误），服务端需要修改响应content-Type。response.setContentT

2016-01-29 15:42:32 602

空空如也

空空如也