一、页面制作：

　　1、图像处理部分：

　　　　● 可以用“魔棒工具”判断背景是否为线性渐变。

　　　　● 需要切出的图片分为两类：

　　　　　　1.修饰性图片（一般用在background属性）：图标、Logo；有特殊效果的按钮、文字等；非纯色的背景等。

　　　　　　2.内容性图片（一般用在img标签）：Banner、广告图片；文章中的配图等。

　　　　● 从服务器拉取数据的图片，需要先使用img标签占位。

　　　　● 修饰性图片一般存为PNG格式，内容性图片一般保存为JPG格式；其中PNG一般使用PNG8和PNG24两种，PNG24支持半透明，但在IE6中不支持。

　　　　● 带背景切不规则小图标可以使用魔棒工具和选区工具结合来操作。

　　　　● 图片保存类型：

　　　　　　1.当图片色彩丰富且无透明要求时，建议保存为JPG格式并选择合适的品质。

　　　　　　2.当图片色彩不太丰富时无论有没有透明要求，建议保存为PNG8格式（RGB颜色，无仿色，无杂边）。

　　　　　　3.当图片有半透明要求时，建议保存为PNG24格式。

　　　　　　4.为了保证图片质量的情况，要保留一份PSD源文件以便修改。

　　　　● 添加图标但需要改变画布大小时，以左上角为中心点扩展后，不会影响已使用图标在页面中的位置。

　　　　● 合并图片分类：

　　　　　　1.同属于一个模块的图片，或同一个页面用到的图片合并。

　　　　　　2.大小相近的图片合并。

　　　　　　3.色彩相近合并。

　　　　　　4.有状态的图标合并。

　　　　　　5.综合以上，视情况优化。

　　2、开发、调试工具部分：

　　　　● 常用的Sublime Text插件有：Package Control（插件管理）、Emmet（快速编写）、DocBlockr（函数注释）、SideBarEnhancements（右键增强）、Terminal（快捷终端）等等。

　　3、HTML部分：

　　　　● 通过设置a标签的href属性，除了URL跳转或锚链接外，还可以实现跳转至邮箱（例如：href="mailto:123@abc.cn"）或在移动端拨打手机（例如：href="tel:13500008888"）等功能。

　　　　● 强调类的标签中，strong标签的语义比em标签要强烈，比如商品价格可以使用strong标签。

　　　　● 使用iframe嵌入的页面和当前的页面是在不同的上下文中，两者之间是隔离的，在嵌入页面的操作不会影响当前页面（例如网页播放器和页面内容之间的关系）。

　　　　● 在页面中插入插件用object标签或embad标签引入需要的插件，例如嵌入Flash插件或PDF阅读插件。

　　　　● 使用map标签和area标签可以实现热点区域的连接，例如经常见到的明星写真中的穿戴的各种“同款推荐”。

　　　　● 在form表单中的内容过多，需要分区时，可使用fieldset标签来分隔，在fieldset标签下使用legend标签展示这个分隔区域的标题。

　　4、CSS部分：

　　　　● 使用属性选择器时，如果属性值是符号或带有空格的，又或者是使用属性包含选择器时，需要把属性值用引号引起来；例如a[href^="#"] {}或a[href*="www.abc.com"] {}等。

　　　　● 在CSS3中，伪类选择器用一个冒号 : 开始，而伪元素选择器则用两个冒号 :: 开始。

　　　　● 使用伪元素选择器可以实现诸如改变第一个文字样式或第一行文字样式等操作；例如：::first-letter {color: red;}或::after {content: "";}等。

　　　　● 选择器权重分四层：行内样式最高，权重值1000；其次是ID选择器，权重值100；再次是类、伪类和属性选择器，权重值10；最后是标签选择器和伪元素选择器，权重值1。

　　　　● 通过给某段文字设置text-indent值为一个负极大值，可以达到隐藏文字的效果，比如有时某些文字想写在代码里但又不让它出现在网页中的情况。

　　　　● 要求文字截断并在末尾有省略号，可以添加text-overflow属性并设置为ellipsis。同时，overflow属性设置为hidden，white-space属性设置为nowrap，三种属性同时设置才能实现。

　　　　● 使用cursor设置光标形状时，可以使用自定义的.cur文件，在自定义文件后面再添加一个默认形状，为无法访问自定义文件时的替代方案。例如：.elem {cursor: url(cur.cur), pointer;}。

　　　　● 默认情况下，盒子宽和高的设置作用于盒子的内容，如果要设置整个盒子的宽和高，就需要利用将box-sizing属性设置为border-box来实现；深刻理解二者的宽高作用范围是不同的。

　　　　● 设置padding值为百分比时，参照的是父盒子的宽度，父盒子没宽度便继续参照最近的祖先元素；此时子盒子没有宽度时，会拥有抛去padding值以外的不超过参照盒子宽的宽度。

　　　　● 阴影效果只是装饰，不会占用空间。

　　　　● 使用outline形成的“边框”与border的主要区别是：outline是装饰性的，不占用空间，而且它将出现在border的外围；而border是盒子模型的元素之一，是占用空间的。

　　　　● 简写background属性时，position属性和size属性之间要用/隔开；如果有两个以上的背景图片层，那么背景颜色需要设置在最后一个背景图片所在的定义语句中。

　　　　● 当一个块级元素没有设置宽高时，同时对这个元素设置了top、left、right和bottom属性，这个元素会自动撑开以符合这四个属性的值；利用这一特性可以实现三行自适应布局。

　　　　● 设置了绝对定位absolute属性、固定定位fixed属性或浮动的元素的默认宽度是内容宽度。

　　　　● 遮罩效果是通过固定定位fixed属性和z-index属性的设置来实现的。

　　　　● 在弹性盒子中，只有盒子的子元素符合在文档流中的条件，才是弹性元素，其中包括float元素，因为float只是半脱离文档流，而不包括完全脱离文档流的绝对定位和固定定位的元素。

　　　　● 在弹性布局中，order属性是一个相对值，数值大的元素在主轴的位置排在数值小的元素之后。

　　　　● 使用flex-basis属性，可以设置弹性元素在主轴方向的默认长度。

　　　　● 使用flex-grow属性设置的是弹性元素在主轴上分配到的多余空间的比例，数值越大，分配越多，自身越大。

　　　　● 使用flex-shrink属性设置的是弹性元素在主轴上承担超出范围空间的比例，数值越大，承担越多，意味着自身越小。

　　　　● 在弹性布局中，justify-content属性设置的是弹性元素在主轴的对齐方式，align-items属性设置的是弹性元素在副轴的对齐方式。

　　　　● 与align-items属性可以设置弹性盒子内所有弹性元素的作用不同的是，align-self属性设置的是某个单独弹性元素自身在副轴的对齐方式。

　　　　● 在transform属性中，各种变形方法称为transform-function，实际就是函数，括号中的参数就是在给这个函数传参。

二、程序设计：

　　1、内置对象部分：

　　　　● Object类：

Object.create(proto[, propertiesObject]);//ES5中创建新对象的另一种方法,可以为新对象指定原型对象；例如：var obj1 = Object.create({a:1, b:2});var obj2 = Object.create(ClassName);//ClassName是指定的原型对象的构造器，继承性上与obj2.prototype = new ClassName()类似；

　　　　● Number类：

numObj.toFixed(num);//将数字四舍五入为指定小数位数的数字；例如：var num = 13.37;num = num.toFixed(1);alert(num);//13.4；

　　　　● Array类：

arrObj.forEach(callback[, thisArg]);//遍历数组元素并调用回调函数；callback回调函数规则如下：
function callback(value, index, arrObj);//value是当前元素值，index是当前元素下标，arrObj是数组本身；例如：function test(value, index, array) {console.log(value);console.log(value === array[index]);  }[2, 3,  , 5].forEach(test);//循环打印分别为2、true、3、true、5、true，空元素会跳过不打印；

　　　　● JSON类：

JSON.stringify(jsonObj);//将json对象序列化为字符串；例如：var jsonObj = {a:1, b:2, C:'3', D:{aa:"abc", bb:true}};var str = JSON.stringify(jsonObj);alert(str);//'{"a":1,"b":2,"C":"3","D":{"aa":"abc","bb":true}}'；
JSON.parse(str);//将json字符串转化为json对象，相当于stringify的逆向操作；

　　2、作用域部分：

　　　　● 在JS中，没有块级作用域，只有函数作用域，if块、for块或with块都不会产生作用域。

　　　　● 使用new Function创建的函数，不管在什么位置，都属于全局函数，内部的this指向的都是全局对象（window）。

　　3、练习题有感：

　　　　● 加强对函数表达式的认知，以及了解函数表达式和函数声明两者之间的作用域的不同：

　　(function () {a = 5;//后面经过声明的变量将其覆盖并转化为局部变量；alert(window.a);//undefined，如果没有后面的代码，才会弹出是5；相同作用域中有声明的变量会替代没有声明的变量；var a = 20;alert(a);//20})();

　　　　● 再次提醒，函数不经过调用里面的代码和结果是不会执行和确定的：

　　var a = 6;function fn1() {var a =7;function fn2() {var a = 8;alert(a);//看书面题目不要总把可执行代码看做是在定义的位置执行，而是调用函数的时候执行；}fn2();alert(a);}fn1();alert(a);//弹出结果依次为8、7、6；

　　　　● 再次加深记忆：++i是先赋值，后使用，先执行i=i+1，再使用i赋值给其他变量或进行计算；i++是先使用，后赋值，先使用i赋值给其他变量或进行计算，再执行i=i+1：

　　var i = 0;var j = true && i++;alert(i + ',' + j);//1,0;var m = 0;var n = false || ++m;alert(m + ',' + n);//1,1;

　　　　●

三、编程艺术：

　　1、节点操作部分：

　　　　● 通过节点关系（父子、兄弟）获取节点的可维护性较差，一般通过接口获取节点。

　　elem.querySelector(selector);//获取第一个符合选择器条件的元素，IE6~7不支持；elem.querySelectorAll(selector);//获取所有符合选择器条件的元素，IE6~7不支持；

　　　　● 与“getElements系列方法获取到的元素集合是动态的”这一点不同的是，querySelectorAll获取的元素集合是静态的，当元素节点发生改变后，并不会对获取到的集合产生影响。

　　elem.textContent;//设置或返回元素及其后代元素的文本内容，IE9不支持；elem.innerText;//设置或返回元素及其后代元素的文本内容，FF不支持；

　　　　● 使用innerHTML增加元素，会使同一目标元素下的其他元素的重置而丢失样式或其他设置；另外在低版本IE下会内存泄露，还会有安全隐患，比如将可运行代码填入网页中。

　　　　● 由于innerHTML的特性，建议仅用于新元素，而且内容要尽量可控，即使要设置用户输入内容，也要有严格的验证。

　　　　● 在JS中，设置label标签的for属性使用的属性名是htmlFor，避免与for关键字重名。

　　　　● 获取或设置元素属性的方式有三种：

　　　　　　1.使用属性访问器，例如elem.attr或elem[attr]。

　　　　　　2.使用getAttribute和setAttribute方法。

　　　　　　3.使用dataset属性，这种方法可以在元素上保存数据。

　　　　● 使用elem.style.attr的方法修改样式只能逐条修改，如果需要一条语句修改多个样式，可以使用elem.style.cssText属性，例如：

　　elem.style.cssText = 'bacground-color: red; color=blue;';

　　2、事件部分：

　　　　● 阻止事件传播（阻止冒泡），就是阻止事件传播到父节点。方法如下：

　　event.stopPropagation();//W3C标准；event.stopImmediatePropagation();//W3C标准；与上面的方法不同的是，此方法除了阻止事件传播到父节点外，还会阻止当前节点的后续事件；event.cancelBubble = true;//IE低版本；

　　　　● 阻止默认行为的方法：

　　Event.preventDefault();//W3C标准；Event.returnValue = false;//IE低版本；

　　　　● 鼠标事件mouseover/out和mouseenter/leave之间的区别是，后者不会触发冒泡，触发事件的元素内的嵌套元素是不会同时触发事件的。

　　elem.onmousewheel;//鼠标滚轮事件句柄；elem.beforeinput;//键盘输入前事件句柄；

　　　　● 多媒体格式兼容性检查：

　　var a = new Audio();a.canPlayType('audio/nav')；//支持则返回"maybe"、"probably"，不支持则返回空字符串；

　　　　● 控制多媒体播放的方法和属性：

　　mediaObj.load();//加载媒体内容；mediaObj.play();//开始播放；mediaObj.pause();//暂停播放；mediaObj.playbackRate;//设置或获取播放速度，取值为非负数，默认为1，越大越快，反之则反；mediaObj.currentTime;//设置或获取播放进度；mediaObj.volume;//设置或获取播放音量，取值为0~1的浮点数；mediaObj.muted;//设置或获取静音状态，true为静音，反之则反；mediaObj.paused;//获取播放是否暂停，true为暂停，反之则反；mediaObj.seeking;//获取媒体跳转状态，true为跳转，反之则反mediaObj.ended;//获取播放是否完毕，true为完毕，反之则反mediaObj,duration;//获取媒体时长；mediaObj.initialTime;//获取媒体开始时间；

　　　　● 自定义控件常用的多媒体相关事件，（更多内容参考 http://www.w3school.com.cn/tags/html_ref_eventattributes.asp）：

　　mediaObj.onlodastart;//开始请求媒体内容事件句柄；mediaObj.onloadmetadata;//媒体元数据加载完成事件句柄；mediaObj.oncanplay;//媒体加载了一部分可开始播放事件句柄；mediaObj.onplay;//媒体就绪，可以开始播放事件句柄；mediaObj.onwaiting;//媒体被迫暂停但条件满足会继续播放（如缓冲数据不足）事件句柄；mediaObj.onplaying;//媒体开始播放事件句柄；

　　3、数据通信部分：

　　　　● 常用的HTTP方法有：

　　　　　　1.GET：从服务器获取一份文档，不包含主体。

　　　　　　2.POST：向服务器发送需要处理的数据，包含主体。

　　　　　　3.PUT：将请求的主体部分存储在服务器上，包含主体。

　　　　　　4.DELETE：从服务器上删除一份文档，不包含主体。

　　　　● 请求参数序列化方法：

　　function serialize(data) {if (!data) {return '';}var pairs = [];for (var name in data) {if (!data.hasOwnProperty(name)) {continue;}if (typeof data[name] === 'function') {continue;}var value = data[name].toString();name = encodeURIComponent(name);value = encodeURIComponent(value);pairs.push(name + '=' + value);}return pairs.join('&');}

　　　　● 同源策略：两个页面拥有相同的协议（protocol），端口（port）和主机（host），name这两个页面就属于同一个源（origin）。

　　　　● 不满足同源策略的访问，被称为跨域资源访问，要实现跨域资源访问，需要借助CORS标准，或者Frame代理，还有JSONP等其他跨域技术。

　　　　● 通过JSONP技术访问跨域资源是利用script标签可以跨域的原理实现的。

　　4、动画部分：

　　　　● 定时器requestAnimationFrame(function)的间隔时间是由显示器的刷新频率控制的。

　　5、表单操作部分：

　　　　● 表单元素form的常用属性：

　　　　　　1.name：用来获取表单元素，例如：var formObj = document.forms.formName。

　　　　　　2.autocomplete：自动完成属性，可设定的有两个值，设定为on会记录输入记录，off不会保留输入记录。

　　　　　　3.elements：包含表单元素的后代表单控件和归属于该表单的表单控件（两种都排除图片按钮），第二种优先级大于第一种。

　　　　　　4.length：设置或返回表单元素包含的控件元素的数量；

　　　　　　5.form[name]：返回name或id为指定名称的表单控件（排除图片按钮）；若结果为空，则返回id为指定名称的img元素；若有多个同名元素，则返回一个动态节点集合；

　　　　　　　一旦用指定名称获取过该元素，则不管该元素的id或者name怎么变化，只要节点还在页面山均可使用原名称获取该元素，而使用form.elements[name]则返回null。

　　　　● 表单的reset方法可重置的元素有：input、keygen、output、select、textarea；触发表单reset事件，阻止它的默认行为可取消重置；元素重置时不再触发元素上的change和input事件。

　　　　● 使用label元素的htmlFor属性，可以关联表单控件激活行为；可以使用label的特性完成诸如自定义上传文件按钮等特效。

　　　　● 如果要改变表单控件的form属性关联的归属表单，由于该属性时只读属性，不可在程序中修改，只能使用setAttribute方法。

　　　　● 使用type为file的input控件时，可设置accept属性来筛选预览的文件类型，例如：accept = "image/*"（图片image/*，音频audio/*，视频video/*，或者以.号开始的文件后缀名*.jpg等）。

　　　　● 创建一个select下拉列表中的option选项，除了常见的document.createElement的方法外，还有一种是专门创建option的方法：

　　var option = new Option(text, value);//直接在构造函数中传入文本值和value值；targetOption.insertAdjacentElement(option, 'beforeBegin');//将新建的option元素插入目标元素之前；select.add(option,targetOption);//与上面的插入方法效果相同；select.remove(2);//通过元素在select下的索引值可以删除指定option元素；

　　　　● 输入框元素textarea的常用属性和方法：

　　　　　　1.select()：全选输入的内容，会触发select事件。

　　　　　　2.selectionStart：选中内容的起始位置，无选中内容时返回光标所在位置。

　　　　　　3.selectionEnd：选中内容的结束位置，无选中内容时返回光标所在位置。

　　　　　　4.selectionDirection：返回选择的方向，可以控制键盘选中的方向。

　　　　　　5.setRangeText(replacement[, start, end [, mode]])：用来设置某个范围的内容。

　　　　● 表单提交的编码方式（enctype）有三种：

　　　　　　1.application/x-www-form-urlencoded；默认的。

　　　　　　2.multipart/form-data；适合阅读。

　　　　　　3.text/plain；一般用于文件上传。

　　　　● 使用iframe元素结合form元素的target属性也可以实现无刷新表单提交。

四、页面架构：

　　1、布局方案部分：

　　　　● 水平居中：

　　　　　　1.inline-block + text-align：兼容性好（低版本IE用display:inline + zoom:1兼容），但居中的盒子文字由于继承了文字居中，不要居中时需要额外设置文字对齐方式。

　　　　　　

　　　　　　2.table + margin：代码简单。

　　　　　　

　　　　　　3.absolute + transform：居中元素不会影响周围的元素，但兼容性稍差。

　　　　　　

　　　　　　4.flex + justify-content/margin：效果最好，代码简单，但兼容性稍差。

　　　　　　

　　　　● 垂直居中：

　　　　　　1.table-cell + vertical-align：兼容性好。

　　　　　　

　　　　　　2.absolute + transform：与水平居中特性一样。

　　　　　　

　　　　　　3.flex + align-items：与水平居中特性一样。

　　　　　　

　　　　● 四周居中：基本上就是水平与垂直居中的方法结合使用。

　　　　　　

　　　　　　

　　　　　　

　　　　● 一列定宽与一列自适应布局：

　　　　　　1.float + margin：简单易懂，但在IE6中有“3像素”BUG，可以在定宽浮动盒子上加margin:-浮动盒子宽解决。

　　　　　　

　　　　　　2.float + margin + (fix)：上一种方法改进，在左浮动盒子外包一层右浮动盒子，宽度撑满父元素，同时设置margin:-左盒子宽即可，但左盒子需要用定位属性将z-index层级提高。

　　　　　　

　　　　　　3.float + overflow：将自适应盒子加上overflow:hidden，触发自适应盒子BFC模式，隔离与浮动盒子的关系，样式简单但不兼容IE6。

　　　　　　

　　　　　　4.table：父盒子的display为table，两列子盒子为table-cell，另外父盒子要加table-layout:fixed布局优先来加速渲染，由于表格内margin无效，需要间隔可以使用padding来实现。

　　　　　　

　　　　　　5.flex：最简单的方法，低版本浏览器不兼容，性能较差，适合小范围布局。

　　　　　　

　　　　● 一列不定宽一列自适应布局：

　　　　　　1.float + overflow：可以非常好的支持此类布局。

　　　　　　

　　　　　　2.table：需要将table-layout:fixed去掉，因为现在是内容决定宽度，而不是布局优先；另外在不定宽盒子中要加入width:0.1%设置，用百分比是要兼容IE8，这个方法不支持IE6~7。

　　　　　　

　　　　　　3.flex：很强大，但是不支持IE10以下的版本。

　　　　　　

　　　　● 等分布局，用公式“父盒宽+间距宽=(子盒宽+间距宽)×N”可以推导出方法：

　　　　　　1.float：给父盒子设置margin负值增加间距宽，子盒子设置百分比宽度，然后添加相应的正padding值，并设置box-sizing:border-box属性；此法子盒子数量改变就需要改变子盒子宽度。

　　　　　　

　　　　　　2.table：要在父盒子外加包裹盒子并设置margin负值，父盒子宽度100%，并添加table-layout:fixed属性加速渲染，更重要的是使子盒子宽度平分而无需设置宽度，子盒子数量随便改。

　　　　　　

　　　　　　3.flex：不需要为父盒子添加宽度，代码量很少，用子盒子的相邻选择器添加间距即可，设置了flex占比后，浏览器会自动算出剩余空间分配，缺点仍然是兼容性问题。

　　　　　　

　　　　● 等高布局：

　　　　　　1.table：有自带的等高特性，如果有背景色会覆盖设置的padding间距部分，需要设置background-clip:content-box来避免，但是这个属性不支持IE8及以下版本。

　　　　　　

　　　　　　2.flex：默认的align-items:stretch属性就是等高属性。

　　　　　　

　　　　　　3.float + overflow：称为“伪等高”，子盒子都添加padding-bottom极大值，再用margin-bottom负极大值抵消，父盒子加overflow:hidden属性截取最高子盒子高度来模拟出等高，兼容性好。

　　　　　　

　　　　● 基本全屏布局：

　　　　　　

　　　　　　1.position（scroll）：充分利用元素不定宽高与定位属性之间的填充特性来实现，在right区域设定overflow:auto使滚动条只出现在这里；这个方法不支持IE6，只有hack方案。

　　　　　　

　　　　　　2.flex（scroll）：先将上中下元素纵向排列，将中间的元素也设置为一个弹性父盒子，再将其内的左右两列按要求分配伸缩因子，滚动条与position方式一样；兼容性和性能一般。

　　　　　　

　　　　● 百分比全屏布局：基本全屏布局中的定宽定高部分改为百分比，实现方法很简单，只要把固定宽高修改为想要的百分比即可，下面是position方法的例子，flex方法道理是一样的：

　　　　　　

　　　　● 内容自适应全屏布局：基本全屏布局中的定宽定高部分改为内容自适应，position方法无法完成，只有flex方法可以（Grid方法可以实现，但还未成熟），只要去掉宽高设置即可：

　　　　　　

　　2、页面优化部分：

　　　　● 页面优化主要的方式有：

　　　　　　1.减少请求：

　　　　　　　　1.1.图片合并，如精灵图的应用；

　　　　　　　　1.2.减少CSS文件请求，主要通过合并CSS文件、少量CSS样式内联以及避免使用import的方式引入CSS文件等方法。

　　　　　　2.减少文件大小：

　　　　　　　　2.1.减少图片大小：选择合适的图片格式（一般为PNG和JPG），并尽可能压缩图片的体积。

　　　　　　　　2.2.减少CSS文件大小：尽量使用缩写值编写；省略值为0的单位；设置颜色时用最短的代码表示；将相同选择器的合并；在上线前将CSS文件压缩。

　　　　　　3.提升页面性能：

　　　　　　　　3.1.加载顺序：CSS文件=>文档部分=>JS部分。

　　　　　　　　3.2.减少标签数量：尽量减少标签之间的嵌套。

　　　　　　　　3.3.缩短选择器长度：保证优先级的前提下，尽量少写选择器。

　　　　　　　　3.4.尽量避免耗性能的属性：如expression、filter、border-radius、box-shadow、gradients等。

　　　　　　　　3.5.图片设置宽高：尽量在行内设置好图片宽高，尽量不拉伸或改变图片的宽高比。

　　　　　　　　3.6.所有表现用CSS实现：尽量使用类样式的增删来让JS改变页面元素的样式，尽量减少遍历。

　　　　　　4.提高可读性和可维护性：

　　　　　　　　4.1.各类规范提前设定。

　　　　　　　　4.2.尽量使用语义化标签编写代码；使用内容语义设置类名、id名，以及JS中的变量名和函数名等。

　　　　　　　　4.3.尽量避免Hack，权衡利弊再使用；另外要统一相同版本浏览器用统一的前缀。

　　　　　　　　4.4.模块化：将雷同或重复的功能代码模块化，提高代码的复用性，减少文件大小。

　　　　　　　　4.5.注释：在必要的地方添加注释，方便后期维护代码。

　　　　● 项目规范的制定，一般分为以下几种：

　　　　　　1.文件规范：

　　　　　　　　1.1.文件分类：

　　　　　　　　　　1.1.1.通用类：例如样式文件、类库文件等等。

　　　　　　　　　　1.1.2.业务类：业务相关的资源、图片、文本等。

　　　　　　　　1.2.文件引入：

　　　　　　　　　　1.2.1.行内样式：不推荐，尽量避免使用；一般在操作节点样式时偶尔使用。

　　　　　　　　　　1.2.2.外联引入：推荐，做到样式与内容分离。

　　　　　　　　　　1.2.3.内联引入：一般的活动页面等短期页面使用。

　　　　　　　　　　1.2.4.避免使用@import引入，会引起页面重新渲染的性能问题。

　　　　　　　　1.3.文件本身：

　　　　　　　　　　1.3.1.文件名：一般推荐使用小写字母、数字、中划线组成。

　　　　　　　　　　1.3.2.编码：基本都是UTF-8编码。

　　　　　　2.注释规范：

　　　　　　　　2.1.块状注释：统一缩进，并写在被注释对象之上。

　　　　　　　　2.2.单行注释：文字两端需要有空格，避免中文编码乱码引起的注释失效，也要写在被注释对象之上。

　　　　　　　　2.3.行内注释：文字两端需要有空格，并写在被注释语句的分号之后。

　　　　　　3.命名规范：

　　　　　　　　3.1.分类命名：将不同的模块或区域的类名加以区分，避免重名造成样式污染。

　　　　　　　　3.2.命名格式：

　　　　　　　　　　3.2.1.选择器尽量都为小写。

　　　　　　　　　　3.2.2.权衡长度和可读性，尽量缩写。

　　　　　　　　3.3.语义化命名：推荐以内容语义命名，尽量避免使用结构命名。

　　　　　　4.书写规范：

　　　　　　　　4.1.单行与多行：一般为了可读性，推荐多行，因为可以折叠。

　　　　　　　　4.2.空格与分号：缩进不必多谈，一般为4个空格，其他的可以使用IDE的格式化决定；分号都要写，最后一个属性的分号尤为重要。

　　　　　　　　4.3.属性顺序：显示属性（display、position、float、list-style等）=>自身属性（width、border、overflow等）=>文本属性与其他修饰（font、color、text-align、background等）。

　　　　　　　　4.4.Hack方式：统一各浏览器的Hack方式，例如IE6用下划线开头，IE6~7用星号开头；顺序上，兼容多的浏览器样式越往前写。

　　　　　　　　4.5.值格式：统一属性值，例如颜色值统一为16进制表示、URL的引号可以不写。

　　　　　　5.其他规范：

　　　　　　　　5.1.HTML规范：

　　　　　　　　　　5.1.1.文档声明：统一为<!DOCTYPE html>并首行顶格开始。

　　　　　　　　　　5.1.2.标签闭合：闭合标签不用多讲，自闭合标签可以不写最后的斜杠。

　　　　　　　　　　5.1.3.属性：所有标签属性使用双引号，form中的验证类属性需要写属性值。

　　　　　　　　　　5.1.4.层级：使用缩进体现层级，提高可读性；标签要正确嵌套，但嵌套不宜太深，太深影响性能。

　　　　　　　　　　5.1.5.注释：使用头尾的方式，有注释开始，也要有注释结束。

　　　　　　　　　　5.1.6.大小写：标签和属性都时小写。

　　　　　　　　5.2.图片规范：

　　　　　　　　　　5.2.1.文件名称：尽量具有语义，名称长度也需要控制。

　　　　　　　　　　5.2.2.保留源文件：所有修改在源文件上操作，然后重新导出，当然可以适时更新源文件。

　　　　　　　　　　5.2.3.图片合并：尽可能使用sprite技术合并图标类图片；sprite图片可按模块、业务、页面来划分。

　　　　● 页面中的模块是指一系列相关联的结构组成的整体，并带有一定语义，而非表现的结构；例如页数按钮，轮播模块等。

　　　　● 页面中的模块化方法：

　　　　　　1.为模块分类命名：例如在同一模块的类名前加上模块独有的前缀，例如.c-box，.n-nav等。

　　　　　　2.以一个主选择器开头作为模块的根节点，一个模块只能有一个根节点；模块扩展时，可以在根节点上添加新扩展的类名，再使用新类名来控制添加内容的样式。

　　　　　　3.模块化的益处：利于多人协同开发，避免样式污染；便于扩展和重用的同时，还能增强代码可读性和可维护性。

五、产品前端架构

　　1、协作流程部分：

　　　　● 在典型的MVC架构的WEB系统中，分为三个部分：

　　　　　　1.Model（数据）层：主要封装了数据的管理。

　　　　　　2.View（视图）层：主要展示了数据模型，并提供了人机交互的功能。

　　　　　　3.Controller（控制）层：主要用来处理用户的请求，委托数据层进行数据相关的操作，然后选择合适的视图返回给用户。

　　　　● 当用户打开一个URL地址时，WEB系统中各层之间的协作流程如下图，其中与前端开发密切相关的就是视图层：

　　　　　　

　　　　● 项目开发以及需求变更的各岗位协作流程图如下：

　　　　　　

　　　　　　

　　　　● 页面工程师职责：

　　　　　　1.切图、优化图片。

　　　　　　2.页面制作、优化页面效果与结构。

　　　　　　3.完成简单的前端业务逻辑开发。

　　　　● 前端工程师职责：

　　　　　　1.主导制定前后端分离规范。

　　　　　　2.主导前后端联调对接测试。

　　　　　　3.系统前端设计架构、满足一定的非功能性需求。

　　　　　　4.完成系统前端的业务逻辑实现、优化实现逻辑。

　　　　● 后端工程师职责：

　　　　　　1.协助制定前后端分离规范。

　　　　　　2.协助前后端联调对接测试。

　　　　　　3.完成后端系统架构及业务逻辑实现。

　　2、接口设计部分：

　　　　● 接口规范：

　　　　　　1.页面入口规范：定义了URL和视图模板之间的关系。

　　　　　　　　1.1.基本信息：页面的基本信息包括页面描述和访问地址，地址可以不带域名等参数。

　　　　　　　　1.2.输入参数：访问地址上支持携带的参数名称、类型和描述等信息。

　　　　　　　　1.3.模板列表：页面涉及的相关视图模板，包括默认页面、过期页面及异常页面的模板。

　　　　　　　　1.4.接口列表：定义页面要用到的所有异步接口列表。

　　　　　　2.同步数据规范：定义了视图模板和数据模型之间的约定。

　　　　　　　　2.1.基本信息：包括模板文件的地址和模板作用及描述。

　　　　　　　　2.2.预填数据：包括全局和页面的预填数据的名称、类型及描述等信息。

　　　　　　　　2.3.注入接口：非必须，指后端注入的接口说明，定义接口的输入输出信息，没有可以不填。

　　　　　　3.异步接口规范：定义了接口和数据模型之间的约定。

　　　　　　　　3.1.基本信息：包括接口的请求方式、接口地址以及接口描述，接口地址不带查询参数。

　　　　　　　　3.2.输入数据：包括REST、查询参数等数据的名称、类型及描述。

　　　　　　　　3.3.输出结果：主要定义返回给客户端的数据模型结构、包括通用部分和结果集。

　　　　● 通过项目初期构建的接口规范，可以构建项目结构，如通过页面接口规范的模板列表导出配置信息，再通过配置信息文件使用自动化工具，构建出项目的目录结构。

　　　　● 前端开发环境包括本地模拟服务器和本地代理，通过本地环境就可以将前后端的开发分离。

　　3、版本管理部分：

　　　　● 版本控制系统（Version Control System，简称VCS），是一种巨鹿若干文件的修订记录的系统，它能帮助我们查阅或回到某个历史版本。

　　　　● 版本控制系统有四种：“人肉”VCS、LVCS（本地）、CVCS（集中式）、DVCS（分布式）。

　　　　● 分支是指从目标仓库获得一份项目拷贝，每条拷贝都有和原仓库功能一样的开发线。

　　　　● 分支模型（又称为工作流）是指一个围绕项目的开发、部署、测试等工作流程的分支操作（创建、合并等）规范集合。

　　4、技术选型部分：

　　　　● 模块的职责是什么：封装实现；暴露接口；声明依赖。

　　　　● 模块系统的职责是什么：依赖管理（加载/分析/注入/初始化）和决定模块写法。

　　　　●