重构

原因

需求变化

架构调整

最佳实践变化

原则

适用

实施

当需要改动的时候再进行优化

CSS样式的优先级:

CSS样式的特指度:(a,b,c,d)

如果用 style 属性应用样式,则 a=1,否则 a=0。

b 为 ID 选择器的数量。

c 为类选择器、属性选择器和伪类的数量。

d 为类型选择器和伪元素的数量。

根据特指度确定样式的优先级

!important为最高优先级

CSS子元素继承父元素的完整列表:  https://www.w3.org/TR/CSS21/propidx.html

CSS伪类

:link 样式应用于具有合法 href 属性的元素。

:visited 样式应用于具有合法 href 属性的超链接元素,并且浏览器的历史记录之中含 有该链接。

:focus 样式应用于获得焦点的超链接元素。当点击、轻触元素,或使用 Tab 键跳转到 当前元素时,元素获得焦点。outline属性有助于键盘访问视角展示

:hover 样式应用于鼠标光标悬浮于超链接之上时。触摸设备,没有光标悬浮状态。因此, 通常当轻触元素时,应用 :hov[……]

阅读全文

目前前端序列化Form表单的数据方式主要有:

Form表单直接转换为查询字符串:

$(selector).serialize()

Form转换为Json数组:

$(selector).serializeArray()

主要供ajax调用发送

Json对象/数组转换为查询字符串:

jQuery.param(object,traditional),主要用于前端构造参数

参数
描述

object
要进行序列化的数组或对象。

traditional
规定是否使用传统的方式浅层进行序列化(参数序列化)。

Form转换为Json对象:

由于serialize方法返回的json对象是类似于map形式的key/value数组(这个key可以重复),有时后台需要真正意义上的json对象,因此需要将form表单序列化成结构良好的json对象,已有相关jquery插件:
https://github.com/marioizquierdo/jquery.serializeJSON

[……]

阅读全文

基于nodejs中express的http静态应用服务器

  1. 检查node版本
    node -v
  2.  切换到你的工作目录
    cmd
  3. 创建一个目录staticserver并切换到该目录
    md staticserver& cd staticserver
  4. 初始化node环境
    npm init
    修改entry point 为server.js
    添加内容:
    var express = require(‘express’);
    var app = express();
    app.listen(80, function () {console.log(‘Example app listening on port 80!’);});
    app.use(express.static(‘webapps’));
  5. 安装为express依赖
    npm install ex[……]

    阅读全文

HTML5提供了一个十分好用的placeholder属性,用于为输入框添加一个提示信息水印,但在输入框是type=passowrd的时候,会出现水印内容全部是黑点的问题。

解决这个问题的方法也很简单:需要显示水印的时候,将输入框的type设置为text,需要显示隐藏的密码信息的时候,将type设置为password
[……]

阅读全文

使用sessionStorage和localStorage不能直接存储json数据,需要转为字符串存储,也不支持过期时间的限制,比较不方便,现封装了一下sessionStorage和localStorage,放出来方便大家使用:

JSONStorage

changePartition(partitionName);分区存储,避免key冲突,可不切换分区
put(key,data,timeout);timeout不设置,就与sessionStorage和localStorage的过期策略一致
get(key);获取数据内容,JSON还原日期数据好像有问题,有需要可以自己改一下

var st = new JSONStorage(sessionStorage);
st.changePartition("test");
var applydata = {
	applyid : "1234",
	amount : 1234
};
st.put("1",applydata ,12);
st.remove("1");
(function(global, fact[......]

阅读全文

<div class=”name”>点我</div> $(document).on(“click”, “.name”, function() { alert(“name”); });

以上代码在电脑浏览器和安卓上都能触发事件,但是在iOS上却完全没有反应
查阅了很多信息后,说是iphone这些元素上没有click事件,它是touch事件,
就是说如果这个name标签是button的可click事件则是可以触发的,因为div本身默认不可点击
1、有一个解决方法是给这个元素添加css
.name{
curser:pointer;
}
这样是可以解决的
2、但是如果你觉得粗暴的话,可以将click改为touchstart事件,或者共存
$(document).on(“click touchstart”, “.name”, function() {
alert(“name”);
});

[……]

阅读全文

最近写了一个倒计时的控件,共享出来方便使用
用法:var stopwatch = new Stopwatch(“倒计时间/秒”,”倒计时完成时的回调函数”,”每个计时事件回调”,”计时步长/秒”)
stopwatch.start();//开始/继续计时
stopwatch.pause();//暂时计时
stopwatch.restart();//重新开始计时
stopwatch.stop();//停止计时

(function(global, factory) {
	// 兼容requirejs和普通引入模式
	if (typeof module === "object" && typeof module.exports === "object") {
		module.exports = global.document ? factory(global, true) : function(w) {
			if (!w.document) {
				throw new Error("requires a window with a document[......]

阅读全文