1、Html声明以及作用-----浏览器的容错------跨域的set header-----xhtml与html-----html5以人为本
2、Meta标签-----viewport------移动浏览器的layout
3、Html结构的语义化------css裸奔------table布局时代
4、DOM树----渲染树----重绘----重排
5、Html SEO优化----动态页面静态化
6、Gzip------资源压缩--------(CDN静态资源部署)-----云存储---v2ex-----
7、浏览器http连接数限制-------多域名资源服务器------加速页面加载
8、预加载-----------懒加载
9、浏览器的兼容性以及工作原理-----pdf-----
http://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/
css
1、禅意花园 css zen garden,------《CSS禅意花园》《超越CSS:WEB设计艺术精髓》---------IE6的贡献
2、Css基础与标准,css2.1------css3----------行内元素-------块级元素-----display---垂直居中-----position文档流
3、盒子模型BOX model-------灵活的盒子模型(Flexible Box Module)
4、媒体查询css media queries
5、Css 单位----相对单位 px----em----vh------vw 绝对单位mm等
6、浮动溢出
7、伪类伪元素----------css函数counter()------无dom节点
8、css优先级
9、less ,SAAS
10、css3的一些效果,例如圆角,阴影等,最重要的还有动画CSS3 Transition
CSS3 Animation。CSS3 Transform 用来做形状,空间等变化
Perspective 激活父元素的3D空间 ,IE浏览器目前不支持。
Animation和transition一样都可以定义开始和结束状态,但是animation还可以指定更确定的中间状态javaScript
1、ECMAScript262,ECMAScript5(严格模式,json方法,Object.create),ECMAScript6-----nodejs部分实现,DOM,BOM
2、构造函数------new---对象----实例属性+实例方法
原型链-- prototype(原型对象)--constructor---指向继承---共享原型属性+原型方法+数据共享
构造函数的“prototype”属性值是一个原型对象,它用来实现继承和共享属性。3、作用域----------函数作用域-----------作用域链---------函数作用域的嵌套关系是在定义时决定的,而不是在调用时决定的。
4、javascript 中定义和声明的区别:
定义:指定初始值,为变量分配存储空间,如 var a = 10;可以说定义了一个变量a
声明:向程序表明变量的标示符,如 var a;可以说声明了一个变量aJavaScript执行,首先预编译,创建一个当前执行环境下的活动对象,并将那些用var申明的变量设置为活动对象的属性,但是此时这些变量的赋值都是undefined,并将那些以function定义的函数也添加为活动对象的属性,而且它们的值正是函数的定义。
在解释执行阶段,遇到变量需要解析时,会首先从当前执行环境的活动对象中查找,如果没有找到而且该执行环境的拥有者有prototype属性时则会从prototype链中查找,否则将会按照作用域链查找。遇到var a = ...这样的语句时会给相应的变量进行赋值(注意:变量的赋值是在解释执行阶段完成的,如果在这之前使用变量,它的值会是undefined)。函数也是一个变量
5、javaScript中的this,闭包,setTimeout中的this指向了windows。apply,call方法。
6、Javascript单线程----回调----webwork-----
7、同源策略
8、http://javascript.ruanyifeng.com 可以当科普看
1、jquery-----ready与load-------选择器与反向设置------选择的全是集合------Deferred对象-------promiseA+规范------绑定与事件委托。
2、Highcharts----amcharts--- D3----svg
Chartjs------canvas
D3除了普通的图表外,还有弦图、树图、地图等等,但是比较繁琐,需要做数据计算和处理。3、iScroll4以及5,css3D变换处理滚动=====为什么要滚动
4、主要有mustache,doT,juicer,artTemplate,baiduTemplate,Handlebars,Underscore等模板引擎。-----------单向绑定---------
模板引擎的基本机理就是替换(转换),将指定的标签转换为 需要的业务数据;
首先利用正则等方法去解析分割字符串或者匹配标签 ,js语言部分则会将其转化为js执行代码,然后利用+=或数组的push方法将这些字符串拼接成最后解析完成的视图字符串,并返回。
好处是不再进行频繁地dom操作,并且实现html与逻辑的分离,尤其是局部刷新的时候。5、webapp框架以及要解决的问题------zepto-----jquerymobile等等
6、CoffeeScript
7、Bootstrap栅格系统与less
1、AMD规范---commonjs---https://github.com/seajs/seajs/issues/588
2、模块加载------Requirejs------Seajs---文件加载---labjs
六、前端MVC框架
1、angulrajs------backbone-----Ember------spine-----CanJS----MVC-----MVVM----model驱动
2、解决的问题----javaScript模块化组织----作用域可视化------前端路由------双向绑定模板引擎-----前端渲染或者后端渲染------restful API前后端分离---前端优先数mock-------controller去dom操作----公共服务数据池管理------结合设计
七、nodejs与mongodb
1、全栈工程师---------前后端分离------无后端开发模式noBackEnd------facebook
http://ued.taobao.org/blog/2014/04/full-stack-development-with-nodejs/
http://www.infoq.com/cn/news/2013/06/wangtao-on-nobackend
2、npm包管理--------插件管理3、Buffer(二进制)--chunk(buffer对象)---Stream(流)-----pipe(管道)------文件系统---
4、Websocket------socket.io-------
5、Mongoose-----Mongodb------express
1、gulp构建
2、Bower依赖管理
3、Karma E2E和unit测试 jasmine等
4、Phantomjs浏览器接口
1、设计是解决方案,不是形式与内容。--------广义设计---------广义界面-------方案的承载--------了解到手的原型界面
2、设计是再创造,--------现有问题分析------竞品分析-----其他相近场景分析-------思考--------
首先完成战略目标(商业价值)-----------界面+交互---主观要求(用户价值)------业务逻辑---业务要求------扩展要求
----交互-----
1、获取需求-----需求书-----------直接甲方-------直接客户------技术部为客户
分清需求,不是为解决问题而想出来的所需,直接了解问题2、竞品分析--------得到解决方法----------分解模块---------划分利弊-----结论(必须要有)
3、模块组合-------业务逻辑(符合)------寻求其他价值(商业)
4、打散再重构----------重新审视需求---------需求再次提炼其他价值--------加入闪光点
5、平台特点-------平台规范---------各种情况完善业务逻辑流程
---------UI-----------
1、用户调查-------用户类型特征-------竞品特征(颜色,风格)---------甲方主观需求-------界面标准+项目规范
2、信息整理-------------概念设计(整体)-----关键场景设计用例-----(局部)-----整体局部互相转化
3、完善场景用例-------完善关键场景设计---------评审--------对比竞品------商业价值+用户体验--------------创新--------
4、详细设计-----------技术可行性
http://www.zhihu.com/question/20952073
设计要素
1、设计原则,有着自己的设计原则,才能不同。-----------------同质化(失败)----------
少即多-------------简洁干净-------------唯一中心点----------------------
2、留白-------轻松------心理舒适度-------高逼格(橱窗)----------亲密性------信息的模块化区域化----------获取感知-----
3、对齐-------信息结构-------视觉联系统一调理-----------
4、色彩(调色工具)---------三色(主辅基)------------多彩-------------实际情况
5、字体-----------webfont-------
6、《写给大家看的设计书》
7、沟通--------转变为owner
设计规范与趋势
IOS6拟物化--------独领风骚----------智能机初期-------------低学习成本
win8 Metro风格----------ios7扁平化------------AndroidL Material--------
扁平化---------简约化---------动画核心----有意义----数据可视化-----------数据来源与去向------有排序的数据(列表)
规范的意义在于适应设备和os,保证产品适合大众使用,开发可以选用合适的控件、
遵循规范--------创新-----------
1
ryanyu104 2015-01-20 19:47:18 +08:00 via iPhone
好多 收了 以后慢慢看
|
2
loveuqian 2015-01-20 19:50:56 +08:00
ma了啊
|
4
lwbjing 2015-01-20 20:17:09 +08:00
不钦慕。。
|
5
lwbjing 2015-01-20 20:17:33 +08:00
不错。。这得打多快会把字打错。。。
|
7
Cary 2015-01-20 23:00:35 +08:00
马克一个个看
|
8
forbreak 2015-02-04 17:58:56 +08:00
不错。。收藏以后有空看。。
|