V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
leer561
V2EX  ›  随想

自己整理的一些前端和设计的东东,不太让人注意的

  •  4
     
  •   leer561 · 2015-01-20 19:31:08 +08:00 · 5081 次点击
    这是一个创建于 3584 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前端部分

    html

    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;可以说声明了一个变量a

    JavaScript执行,首先预编译,创建一个当前执行环境下的活动对象,并将那些用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 可以当科普看

    四、javaScript库与js模板引擎

    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

    五、javaScript模块化

    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--------

    http://design.1sters.com/

    扁平化---------简约化---------动画核心----有意义----数据可视化-----------数据来源与去向------有排序的数据(列表)

    规范的意义在于适应设备和os,保证产品适合大众使用,开发可以选用合适的控件、

    遵循规范--------创新-----------

    8 条回复    2015-02-04 17:58:56 +08:00
    ryanyu104
        1
    ryanyu104  
       2015-01-20 19:47:18 +08:00 via iPhone
    好多 收了 以后慢慢看
    loveuqian
        2
    loveuqian  
       2015-01-20 19:50:56 +08:00
    ma了啊
    leer561
        3
    leer561  
    OP
       2015-01-20 20:12:16 +08:00
    @loveuqian 嗯,记得好像说过支持
    lwbjing
        4
    lwbjing  
       2015-01-20 20:17:09 +08:00
    不钦慕。。
    lwbjing
        5
    lwbjing  
       2015-01-20 20:17:33 +08:00
    不错。。这得打多快会把字打错。。。
    leer561
        6
    leer561  
    OP
       2015-01-20 20:23:11 +08:00
    @lwbjing 哈哈哈
    @ryanyu104 我觉得很多东西,都是了解一下就行的,不用很认真
    Cary
        7
    Cary  
       2015-01-20 23:00:35 +08:00
    马克一个个看
    forbreak
        8
    forbreak  
       2015-02-04 17:58:56 +08:00
    不错。。收藏以后有空看。。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5150 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 09:31 · PVG 17:31 · LAX 01:31 · JFK 04:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.