2017.12.11 CSS编码规范、APPCan常用、Ado.net、Cookie/Session机制详解、jquery中prop()和attr()方法

第一组:杨昊 CSS编码规范

好久没出现,今天来分享一些平常不会注意的小细节—CSS编码规范(基础):

编码规范可以使自己的代码更具有可读性,方便管理和重构。基本上每个语言都有自己的“潜规则”,虽然不遵循这些规则也不会影响代码的质量,但是作为自己亲手写出来的代码,不打扮的“漂亮点”说不过去啊,也能尽量避免“祖传代码”的出现。今天只讲述几个CSS中大方向的规范。

1. 声明顺序

这是一个选择器内书写CSS属性顺序的大致轮廓。这是为了保证更好的可读性和可扫描重要。

作为最佳实践,我们应该遵循以下顺序(应该按照下表的顺序):

  • 结构性属性:
    display
    position, left, top, right etc.
    overflow, float, clear etc.
    margin, padding

  • 表现性属性:
    background, border etc.
    font, text

2. 选择器和声明分离

每个选择器和属性声明总是使用新的一行。(即回车)

3. 合理的避免使用ID

一般情况下ID不应该被应用于样式。

ID的样式不能被复用并且每个页面中你只能使用一次ID。

使用ID唯一有效的是确定网页或整个站点中的位置。

尽管如此,你应该始终考虑使用class,而不是id,除非只使用一次。

PS:使用ID选择的样式比使用class选择的样式的“权重高”,一个只包含一个ID选择器权重高于包含1000个class(类)名的选择器。

4. ID 和 Class(类) 名的分隔符

使用连字符(中划线)分隔ID和Class(类)名中的单词。为了增强课理解性,在选择器中不要使用除了连字符(中划线)以为的任何字符(包括没有)来连接单词和缩写。

另外,作为该标准,预设属性选择器能识别连字符(中划线)作为单词[attribute|=value]的分隔符,

所以最好的坚持使用连字符作为分隔符。

不推荐
css 代码:

1.  .demoimage {}
2.  .error_status {}

推荐
css 代码:

1.  #video-id {}
2.  .ads-sample {}

第二组:赵彩凤 APPCan常用

//回到顶部

   appcan.button("#dtop", "btn-act", function() {
     document.body.scrollTop = document.documentElement.scrollTop = 0;
});

//离线缓存icache

appcan.icache(opts) //文件离线缓存

option.maxtask:同时下载的最大任务数
option.url:图片地址,多个图片以数组形式传入
option.success(path,session):下载成功后的回调 path:文件的路径,session:当前下载文件相关信息
option.dom:如果设置的dom元素为img标签,设置其对应的src,否则设置dom的background-image,如果不设置opts.dom不做任何操作
option.progress(data,session):文件下载进度 data:文件下载进度,session:当前下载文件相关信息
option.fail(session):文件下载失败的回调,session:当前下载文件相关信息

E.g.

 Var downloadpath = ['http://pic.pp3.cn/uploads//20121001j/bz/210.jpg','http://pic.pp3.cn/uploads//20121001j/bz/211.jpg'];
var option = {
        maxtask: 3,
        url:downloadpath,
        progress: function(data, session){
            var sdata = JSON.parse(JSON.stringify(data));
            var statu = sdata['status'];
            var percent = sdata['percent'];                             
            switch (statu) {
                  case 0:
                        alert("下载中");
                        break;
                  case 1:
                        alert("下载完成");
                        break;
                  case 2:
                        alert("下载失败");
                        break;
                  default:
                        break;
            }
        },
        success: function(path, session){
            alert("path:"+path+", \\nsession:"+JSON.stringify(session));
            alert("Download Success");
        },
        fail: function(session){
            alert("session:"+JSON.stringify(session));
            alert("Download Fail");
        }                                                            
    }; 
var cache = appcan.icache(option);
cache.run(option);

转载自Appcan官网http://newdocx.appcan.cn/JSSDK/icache


第三组:蔡永坚 Ado.net

简单的查询语句:

   static void Main(string[] args)
       {
           string constr = "Data Source=172.11.11.11;Initial Catalog=数据库名;UID=sq;PWD=123456";
           using (SqlConnection con = new SqlConnection(constr))
           {
               string sql = "select * from EmgPartRelation";
               using (SqlCommand cmd = new SqlCommand(sql, con))
               {
                   con.Open();
                   using (SqlDataReader read = cmd.ExecuteReader())
                   {
                       if (read.HasRows)
                       {
                           while (read.Read())
                           {
                               Console.Write(read["Tid"]);
                               Console.Write(read[15]);
                               Console.WriteLine();
                           }
                       }
                   }
               }
               Console.ReadKey();
           }

步骤:
① 创建连接字符:string constr = "Data Source=172.11.111.11;Initial Catalog =数据名; UID= sa; PWD=123456";
② 创建连接对象:using (SqlConnection con = new SqlConnection(constr))
③ 打开连接:con.Open();
④ 编写Sql语句:string sql = "select * from EmgPartRelation";
⑤ 创建一个执行sql语句的对象(命令对象)SqlCommand:using (SqlCommand cmd = new SqlCommand(sql, con))
⑥ 执行sql语句:cmd.ExecuteNonQuery();cmd.ExecuteReader();cmd.ExecuteScalar();

1. ExecuteNonQuery();

它的返回值类型为int型。多用于执行增加,删除,修改数据。返回受影响的行数。

2. ExecuteReader();

它的返回类型为SqlDataReader。此方法用于用户进行的查询操作。使用SqlDataReader对象的Read();方法进行逐行读取。
例如:

SqlCommand comm =new SqlCommand("select * from CGSZ where cid="+id,conn);
SqlDataReader reder=comm.ExecuteReader();
while(reder.Read())
{
//读出内容列
string str=reder["cname"].ToString();
//读取分类列
string str1=reder["ckind"].ToString();
//分别为文本框加载数据
this.txtContent.Text = str;
this.txtClass.Text = str1;
}

其中的读取数据列的时候。除了使用reder["列名"].ToString();还可以使用reder[索引].ToSting();<注意:这里的索引指的是数据库中列的索引。从0开始。>

3. ExecuteScalar();

它的返回值类型多为int类型。它返回的多为执行select查询。得到的返回结果为一个值的情况,比如使用count函数求表中记录个数或者使用sum函数求和等。(若有多行多列返回第一行第一列,所有其他的列和行将被忽略)


第四组:张元一 Cookie/Session机制详解

会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话。常用的会话跟踪技术是Cookie与Session。Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端记录信息确定用户身份。

1. Cookie机制

在程序中,会话跟踪是很重要的事情。理论上,一个用户的所有请求操作都应该属于同一个会话,而另一个用户的所有请求操作则应该属于另一个会话,二者不能混淆。例如,用户A在超市购买的任何商品都应该放在A的购物车内,不论是用户A什么时间购买的,这都是属于同一个会话的,不能放入用户B或用户C的购物车内,这不属于同一个会话。

而Web应用程序是使用HTTP协议传输数据的。HTTP协议是无状态的协议。一旦数据交换完毕,客户端与服务器端的连接就会关闭,再次交换数据需要建立新的连接。这就意味着服务器无法从连接上跟踪会话。即用户A购买了一件商品放入购物车内,当再次购买商品时服务器已经无法判断该购买行为是属于用户A的会话还是用户B的会话了。要跟踪该会话,必须引入一种机制。

Cookie就是这样的一种机制。它可以弥补HTTP协议无状态的不足。在Session出现之前,基本上所有的网站都采用Cookie来跟踪会话。

1.1 什么是Cookie

Cookie意为“甜饼”,是由W3C组织提出,最早由Netscape社区发展的一种机制。目前Cookie已经成为标准,所有的主流浏览器如IE、Netscape、Firefox、Opera等都支持Cookie。

由于HTTP是一种无状态的协议,服务器单从网络连接上无从知道客户身份。怎么办呢?就给客户端们颁发一个通行证吧,每人一个,无论谁访问都必须携带自己通行证。这样服务器就能从通行证上确认客户身份了。这就是Cookie的工作原理。

Cookie实际上是一小段的文本信息。客户端请求服务器,如果服务器需要记录该用户状态,就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时,浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie,以此来辨认用户状态。服务器还可以根据需要修改Cookie的内容。

image.png

查看某个网站颁发的Cookie很简单。在浏览器地址栏输入javascript:alert (document. cookie)就可以了(需要有网才能查看)。JavaScript脚本会弹出一个对话框显示本网站颁发的所有Cookie的内容,如图1.1所示。


图1.1 Baidu网站颁发的Cookie.png

图1.1中弹出的对话框中显示的为Baidu网站的Cookie。其中第一行BAIDUID记录的就是笔者的身份helloweenvsfei,只是Baidu使用特殊的方法将Cookie信息加密了。

注意:Cookie功能需要浏览器的支持。

如果浏览器不支持Cookie(如大部分手机中的浏览器)或者把Cookie禁用了,Cookie功能就会失效。

不同的浏览器采用不同的方式保存Cookie。

IE浏览器会在“C:\Documents and Settings\你的用户名\Cookies”文件夹下以文本文件形式保存,一个文本文件保存一个Cookie。


第五组:王炳钧 jquery中prop()方法和attr()方法的区别

jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值。

大家都知道有的浏览器只要写disabled,checked就可以了,而有的要写成disabled = "disabled",checked="checked",比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是undefined。

jq提供新的方法“prop”来获取这些属性,就是来解决这个问题的,以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。

那么,什么时候使用attr(),什么时候使用prop()?

  1. 添加属性名称该属性就会生效应该使用prop();
  2. 是有true,false两个属性使用prop();
  3. 其他则使用attr();

项目中jquery升级的时候大家要注意这点!

以下是官方建议attr(),prop()的使用:


©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,843评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,538评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,187评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,264评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,289评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,231评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,116评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,945评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,367评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,581评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,754评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,458评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,068评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,692评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,842评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,797评论 2 369
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,654评论 2 354

推荐阅读更多精彩内容

  • 一、cookie机制和session机制的区别 具体来说cookie机制采用的是在客户端保持状态的方案,而sess...
    Rella7阅读 4,710评论 0 7
  • 背景在HTTP协议的定义中,采用了一种机制来记录客户端和服务器端交互的信息,这种机制被称为cookie,cooki...
    时芥蓝阅读 2,364评论 1 17
  • 作者:晚晴幽草轩www.jeffjade.com/2016/10/31/115-summary-of-cookie...
    饥人谷_Dylan阅读 1,224评论 0 51
  • 注:本文转载自前端大全 背景 在HTTP协议的定义中,采用了一种机制来记录客户端和服务器端交互的信息,这种机制被称...
    楠小忎阅读 673评论 0 0
  • 这是没有月明的佳节 你在遥远的他乡 但你念念不忘的是故乡的她 你是不善言辞的 你却惦念着她一个月后的生日 反复嘱咐...
    有天使之翼的秀子阅读 212评论 0 0