前端开发

浏览器端： cookie WebStorage(localStorage、sessionStorage) indexedDB 服务器端： session cookie Cookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为4KB左右。cookie只能保存字符串类型，以文本的方式。 它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。 #session机制： 当服务器收到请求需要创建session对象时，首先会检查客户端请求中是否包含sessionid。如果有sessionid，服务器将根据该id返回对应session对象。如果客户端请求中没有sessionid，服务器会创建新的session对象，并把sessionid在本次响应中返回给客户端。通常使用cookie方式存储sessionid到客户端，在交互中浏览器按照规则将sessionid发送给服务器。如果用户禁用cookie，则要使用URL重写，可以通过response.encodeURL(url) 进行实现；API对encodeURL的结束为，当浏览器支持Cookie时，url不做任何处理；当浏览器不支持Cookie的时候，将会重写URL将SessionID拼接到访问地址后。

HTML/CSS模块复习 html语义化理解 语义化 ：指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化）。 举例 ：段落用 p，边栏用 aside，主要内容用 main 标签。 好处： 便于开发者阅读和维护 有利于SEO：让浏览器的爬虫和辅助技术更好的解析 注意了解一下SEO：搜索引擎优化。搜索引擎优化是一种利用搜索引擎的搜索规则来提高目的网站在有关搜索引擎内的排名的方式。 新加的H5语义化标签 ： <nav> 表示导航 <header> 表示页眉 <footer> 表示页脚 <section> 表示区块 <article> 表示文章。如文章、评论、帖子、博客 <aside> 表示侧边栏 如文章的侧栏 <figure> 表示媒介内容分组。 <mark> 表示标记 (用得少) <progress> 表示进度 (用得少) <time> 表示日期 元素定位方式 元素定位方式以及相对于什么定位 static，正常文档流，top，right,bottom,left,z-index属性无效 relative，相对于正常文档流的位置 absolute，相对于非static文档偏移 fixed，相对于viewport（屏幕视口） sticky，粘性定位 CSS盒模型 （1）基本概念： ​ 当对⼀个⽂档进⾏布局（lay out）的时候，浏览器的渲染引擎会根据标准之⼀的 CSS

好程序员web 前端 教程 学习之ES6属性知识梳理 ， ECMAScript 6.0(简称：ES6)是 JavaScript 语言的下一代标准，于2015年6月正式发。目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。现在企业中的项目基本都采用ES6开发，因此学好ES6就变得尤为重要!接下来 好程序员 web前端教程 就给大家简单梳理一下ES6属性知识。 let/const ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。 { let a = 10; var b = 1;} a // ReferenceError: a is not defined. b // 1 　　上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。这表明，let声明的变量只在它所在的代码块有效。 for循环的计数器，就很合适使用let命令。 var oLis = document.getElementsByTagName('li') for (let i = 0; i < oLis.length; i++) { // ... oLis[i].onclick = function(){ console.log(i)

在开发中，我们常会遇到某些css在IE中显示正常，但是在Firefox中显示不是我们所希望的，或者在Firefox中正常而在IE中不是我们所要。由于不同浏览器对CSS的支持和解析不一样，或者CSS优先级不一样，所以我们常针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，这就是CSS Hack。也可以说CSS Hack就是那些能区别不同浏览器的字符，如!important, * , _ 等。在看了一些网上的相关知识后和实践后，作下总结。 各浏览器的CSS Hack ： 在IE7发布之前，区分IE与FireFox（OP等与FireFox一样），可以靠!important。譬如body{background-color:green !important;background-color:blue;} ，在IE6中打开页面，body的背景色是蓝色，因为IE6不识别!important，而Firefox识别了!important，所以在Firefox中背景色是绿色，含有!important的样式要写在前面，因为如果2个样式都能识别，后面的会覆盖前面的。 而杯具的IE7识别了!important，所以不能仅靠!important来区分Firefox了。 另外，对*号的解释，网上有些是这样说的：*: Html 元素被认为是网页上的第一个元素，即根元素。但是，IE

如何写出优雅的css代码 ？ 　　 对于同样的项目或者是一个网页，尽管最终每个 前端开发工程师 都可以实现相同的效果，但是他们所写的代码一定是不同的。有的优雅，看起来清晰易懂，代码具有可拓展性，这样的代码有利于团队合作和后期的维护；而有的混乱，虽然表达出了最终的效果，然而却晦涩难懂，显然团队成员在读这样的代码时就显得无从下手，更不利于后期的维护了。那么如何写出优雅的代码呢？下面我将以一个很小的项目就以下几个方面简单的表达一下自己的看法，如有不妥，望批评指正。 如何整理一个项目。 如何写出清晰易懂的HTML代码。 如何写出优雅的css代码（重点）。 第一部分：如何整理一个项目。 　　 当我们接手一个表白墙的小项目时，怎么去分类整理呢？是把所有的html文件、css文件、js文件和图片等等混乱的放在一起？好吧，那就看看这样是什么效果吧？ 　　 可能你会觉得这没有什么啊？文件都可以找到啊，但是你试图在sublime编辑器中打开看看是什么效果： 　　（ 补充说明：博友@Tabweng 建议文件名不要使用中文而尽量使用英文，在此表示感谢，希望大家也可以注意这个问题。 ） 　 　有没有觉得很混乱呢?！ 此外，如果项目更大了呢？你需要的html文件、css文件、js文件、以及图片的需求量更大了呢？你还能保证可以顺利的找出每一个你想要的文件并编辑吗？显然显然是否定的。所以对于这种项目

**今天，我就带你来了解一下ajax吧！** 首先我们得明白什么是ajax？那到底什么才是ajax呢？ AJAX = “Asynchronous Javascript And XML”（==异步 JavaScript 和 XML==） 直译出来就是异步的 JavaScript和数据传输技术 。国内常翻译为**==“ 阿贾克斯 ”==**是指一种无需重新加载整个网页的情况下，能够更新部分网页的技术。直白的说，ajax就是js通过一个网址去加载数据。用户是看不见的，可以通过浏览器控制台中的网络查看。 上面说到，xml，我们就结合json来给你介绍~~~ ==xml（可扩展标记语言）、json（轻量级数据格式）都是字符串的格式，都用于数据传输== 两者之间有什么区别呢？ **xml：** 优点： 1、传输的数据种类特别丰富 2、传输的数据量非常大 缺点： 解析起来比较麻烦 【注】用于大型门户网站，今日头条、腾讯新闻、网易新闻。 **json：** 优点： 1、解析起来非常方便 2、适合轻量级的数据 缺点： 1、种类比较少 【注】基本上90%以上应用用的都是json格式字符串传输。 同时说到异步，有的小伙伴就懵逼了，心想异步是啥，有什么作用呢？ 了解异步之前，我们首先看看javas中的同步是什么吧！ ==同步== ： 阻塞，当前程序必须等前面的程序执行完毕以后，才能运行 。 举个例子

目录 Javascript ECMAScript和JavaScript的关系 1. js代码引入 2. 数据类型 var 数值类型（number） 字符串（string） 布尔值（boolean） null 和 undefined Object类型 Symbol 类型 3. 类型查询 typeof 4. 运算符 算术运算符 比较运算符 逻辑运算符 赋值运算符 5. 流程控制 单条件 多条件判断 switch 切换 (case语句) 6. for循环 7. while循环 8. 三元运算 9. 函数 普通函数 匿名函数 自执行函数 函数的全局变量和局部变量 作用域 闭包 10. 构造函数(面向对象) 11. Date对象 12. JSON 13. RegExp对象(正则) Math对象 Javascript ECMAScript和JavaScript的关系 　　1996年11月，JavaScript的创造者--Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这门语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。 　　该标准一开始就是针对JavaScript语言制定的，但是没有称其为JavaScript，有两个方面的原因。一是商标

本地存储 本地存储分为cookie，以及新增的localStorage和sessionStorage 1、cookie 存储在本地，容量最大4k，在同源的http请求时携带传递，损耗带宽，可设置访问路径，只有此路径及此路径的子路径才能访问此cookie，在设置的过期时间之前有效。 jquery 设置cookie $.cookie('mycookie','123',{expires:7,path:'/'}); jquery 获取cookie $.cookie('mycookie'); 2、localStorage 存储在本地，容量为5M或者更大，不会在请求时候携带传递，在所有同源窗口中共享，数据一直有效，除非人为删除，可作为长期数据。 //设置： localStorage.setItem("dat", "456"); localStorage.dat = '456'; //获取： localStorage.getItem("dat"); localStorage.dat //删除 localStorage.removeItem("dat"); 3、sessionStorage 存储在本地，容量为5M或者更大，不会在请求时候携带传递，在同源的当前窗口关闭前有效。 localStorage 和 sessionStorage 合称为Web Storage , Web

最近看了下angular，顺便就看到了前端自动化构建工具grunt Grunt和 Grunt 插件是通过 npm 安装并管理的，npm是 Node.js 的包管理器。 Grunt 0.4.x 必须配合Node.js >= 0.8.0 版本使用。 快速开始 安装nodejs brew install node 如果已经安装了nodejs，请确保当前环境中所安装的 npm 已经是最新版本 sudo npm update -g npm 注：npm是nodejs自带的包管理工具（类似于maven），不需要再另行安装了 安装grunt sudo npm install -g grunt-cli 注：上述命令执行完后，grunt 命令就被加入到你的系统路径中了，以后就可以在任何目录下执行此命令了。注意，安装grunt-cli并不等于安装了 Grunt！Grunt CLI的任务很简单：调用与Gruntfile在同一目录中 Grunt。这样带来的好处是，允许你在同一个系统上同时安装多个版本的 Grunt。 使用grunt 新建文件夹, 如 grunt 进入文件夹执行 npm init 然后可以在文件夹中看到一个package.json，内容如下： { "name": "test", "version": "1.0.0", "description": "", "main": "index.js",

一、简介 gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器； gulp是基于Nodejs的自动任务运行器，她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。 二、安装 　　通过 npm 来安装 gulp；(设置镜像源可以通过cnpm安装) 全局安装 　　在cmd中执行 cnpm i -g gulp 查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装 三、配置信息 　　1. npm init -y 生成package.json 文件 会自动存储下载的第三方依赖包信息，存储信息如下： { "name": "zhang", "version": "1.0.0", "description": "", "main": "gulpfile.js", "devDependencies": { "@babel/core": "^7.8.7", "@babel/preset-env": "^7.8.7", "del": "^5.1.0", "gulp": "^4.0.2",