前端开发知识点整理

Growth Front-End Knowledge Summary

前言: 本文主要是有关前端方面知识按照 XX 目前的认知进行的收集、归类、概括和整理,涵盖『前端理论』与『前端实践』两方面。本文会告诉你前端需要了解的知识大致有什么,看上去有很多,但具体你要学什么,还是要 follow your heart & follow your BOSS

初衷。写这篇文章主要有以下几个初衷:

  • 梳理知识体系。网上虽然有许多类似的内容,但每个人都有各自独特的思维方式,适合自己的才是最好的。
  • 探索不足之处。明确自己到底掌握了哪些,哪些本应掌握但还没有学习。
  • 完善公司的前端培训方向。前端技能培训的方向由懂前端、懂公司前端团队的人来设定最好不过了。
  • 希望借此激发大家的一点思考。我们都在路上,我不是成功的例子,我写下我的思考,希望借此激发大家的一点思考。
  • 一个梗。自 2012 年以来,我知乎上获赞最多的答案却是引用他人的答案……有点尴尬:《一名合格的前端工程师的知识结构是怎样的?》

目录

专业技能

前端理论

浏览器

  • 浏览器内核渲染原理
    • HTML 解析器
    • CSS 解析器
    • JavaScript 引擎
    • 渲染流程
      • 加载
      • 解析(确定结构、计算样式)
      • 构建 DOM 树、应用样式
      • 绘制
      • 回流
      • 重绘
  • 浏览器调试
    • 工具
      • F12
      • 扩展插件
      • 浏览器常用快捷键
    • 调试内容
      • 元素
        • 结构
        • 属性
      • 样式
      • 脚本
        • 日志
        • 断点
        • 事件
        • 变量监听
        • 调用堆栈
      • 性能
        • snapshot
        • 耗时
      • 网络请求
        • 模拟请求
        • 审查网络
        • 模拟网络环境
      • 内存
      • 本地存储信息
        • cookie
        • local storage
        • cache
    • 调试技巧
  • 浏览器事件
    • 常见事件
      • 鼠标事件
      • 表单元素事件
      • 键盘事件
      • 文档事件
      • CSS 事件
      • ……
    • 事件处理、添加、移除
  • 浏览器任务调度机制
    • micro queue
    • macro queue
  • 浏览器兼容性
    • 各平台浏览器的坑(家家有个难填的坑,有的坑深,有的坑浅)
      • 移动端浏览器
        • UC
        • Safari
        • 微信浏览器
        • 百度
        • ……
      • PC 端浏览器
        • Chrome
        • Firefox
        • IE
        • Edge
        • ……
      • 小程序
    • 不同浏览器内核差异
      • CSS 私有属性前缀(注:建议使用 postcss 自动化补全)
      • Polyfill
    • HTML、CSS、Javascript 特性支持度
      • MDN
      • Can I use ?
  • 常见问题
    • 请求跨域
    • iframe 跨域通信
    • 各种兼容性问题
    • 网页加载速度慢
    • 按钮点击没反应……

HTML

吃土小2叉:据说 HTML 和 CSS 一起学习体验最佳哦

  • 语法 & 语义
    • !DOCTYPE HTML 文档标准
    • head
      • meta 元数据标签
        • 网页描述
        • 设备描述
        • HTTP 请求描述
        • HTTP Client Hints
    • body
      • 装饰型标记(不推荐、部分已废弃)
      • 功能型标记
        • 无语义容器(div、span)
      • 用户交互(交互型标记)
        • 输入框
        • 选择器
        • 多选框
        • 单选框
        • 按钮
      • 数据可视化(展示型标记)
        • 定义列表
        • 无序列表
        • 表格
        • 结构化数据标记、微数据
        • 多媒体
          • 图片
          • 视频
          • 音频
        • SVG、Canvas
        • 文章(正文、摘要、段落、章节、前言、结语、引用)
  • 规范
    • HTML 代码规范
    • HTML 使用规范(标签嵌套规则)
      • 标签类型
  • 可访问性、无障碍体验
  • 常见问题
    • 图片空 src 导致页面加载两次
    • iframe 空 src 导致无限循环加载本页面

Alt text

上图据说是 HTML5 规范中关于 HTML 标签嵌套规则的示意图

CSS

吃土小2叉:用设计师的思维去理解 CSS,用程序员的思维去写 CSS

  • 语法(CSS 从入门到放弃)
    • 基本用法
    • 选择器
    • 媒体查询
    • 简写属性
    • 注释
    • 属性运算 calc()
  • 规范(编写可读性良好的 CSS)
    • 用例规范
      • 权限控制
      • 最佳实践
      • 不良习惯
    • 格式规范
      • 风格
      • 复用
      • BEM 规范
  • 逻辑特性(在 CSS / Less 中运用 OO 思想和设计模式)
    • 权重(优先级)
    • 作用域
    • 封装(mixins)
    • 组合(mixins+)
    • 扩展(:extend)
    • 继承(mixins)
    • CSS 变量、Less 变量
    • 模块化(import)
  • 视觉设计(单一状态设计)
    • 布局
      • 盒模型(高度、宽度、边框、外边距、内边距、溢出控制)
      • 定位方式
      • 层叠上下文(z-index)
      • display 类型(table、inline、inline-block、block、flex、grid)
      • 浮动
      • 伪元素::after、:before
    • 字体排印(厉害了 word 哥)
      • 字体(字体族、网络字体)
      • 文本(删除线、下划线、斜体、粗细、字号)
      • 段落(行高、缩进、断句方式、换行方式)
      • 对齐
      • 方向
    • 装饰(神说,要有光)
      • 颜色
      • 背景
      • 边框(border、outline)
      • 圆角
      • 阴影
      • 渐变
      • 透明度
      • 变形(旋转、缩放、矩阵变化)
  • 交互设计(多状态设计)
    • 动画(运动和静止是对立的统一)
      • 过渡效果
      • 动画关键帧
    • 反馈
      • active、checked 状态
    • 引导
      • 结合 Javascript
      • CSS 动画
    • 互动
      • hover 状态
  • 多设备设计
    • 响应式设计(多套代码,多种设备)
      • 媒体查询
    • 自适应设计(一套代码,多种设备)
      • 最小固定宽度布局
      • 百分比布局
      • 栅格布局、弹性布局
      • js + rem 方案(rpx)
  • 常见问题
    • 视觉还原度
    • 调试技巧
    • 属性“失效”问题
      • transition “失效”?
      • z-index “失效”?
    • 外边距合并
    • 边框 1px 问题
    • 垂直居中
    • 大屏幕 rem 小屏幕 px
    • 图片适配
    • 可维护性
      • 权重控制
      • 嵌套层级
      • 语义性
  • 扩展内容
    • 预处理器:Less、Sass
    • 后处理器:postcss
    • 小程序的 WXSS
    • Weex、RN 中的 CSS

JavaScript

吃土小2叉:至今还没看完一遍《JavaScript 高级程序设计》的我是该好好面壁思过了。

本段内容大量参考了:《The Modern JavaScript Tutorial》http://javascript.info/ ,推荐阅读。

  • JavaScript 标准
    • 严格模式
    • 兼容模式
  • 开发工具
    • IDE
    • 轻量编辑器
  • 基础语法
    • 数据类型
      • 基本数据类型 numberstringbooleannullundefinedobjectsymbol
      • 数据类型检测
      • 解构赋值
        • 数组
        • 对象
      • date 与时间
      • JSON
        • 格式说明
        • 序列化
        • 反序列化
      • 数组
        • 数组操作(增、删、改、遍历、复制)
        • 多维数组
    • 变量
      • 声明 varletconst
      • 声明提升
    • 作用域
    • 逻辑控制
      • 循环
      • 分支
      • 判断
    • 对象(基础部分)
      • 对象操作(增、删、改、查、复制)
      • Symbols
      • 类型转换
      • 垃圾回收机制
      • 对象方法中的 this
      • new
    • 函数
      • 函数默认值
      • 函数声明
      • 立即执行函数
      • 箭头函数
    • 运算符
      • 数值运算
      • 逻辑运算
    • 事件
      • 浏览器事件
      • 冒泡、捕获
      • 事件捕获
      • 浏览器默认行为
    • 文档
      • DOM 树
      • 节点
        • 节点类型
        • 节点标签
        • 节点内容
      • window 对象
    • DOM 操作
      • 元素节点(增、删、移、换、复制)
      • 元素属性(增、删、改、查)
      • 文本内容(增、删、改、查)
    • 网络请求
      • ajax(回调函数)
      • Promise
      • async、await
  • 深入细节
    • 对象、类、继承
      • 属性标记与属性描述
      • 原型、原型链
      • 继承
      • 属性定义
      • 对象混合
      • 类型检测
    • 数据类型
      • 基本类型
    • 函数进阶
      • 递归、调用堆栈
      • 闭包
      • 函数绑定、上下文
      • 剩余参数、扩展语法
      • 函数对象
      • 任务调度:定时器
      • 柯里化
      • 深入箭头函数
      • 函数式
    • 面向对象
    • 错误处理
      • 错误捕获
  • 代码质量
    • 注释
    • 相关工具
      • ESLint、JSLint
      • Standard.js
      • Prettify
      • 自动化测试工具:Jest、Mocha
    • 用例规范
      • 最佳实践
      • 不良习惯
    • 格式规范
      • 风格
  • 正则表达式
    • 普通字符、转义字符
    • 元字符
    • 字符类
    • 分支条件
    • 分组
    • 反义
    • 贪婪与懒惰
    • 后向引用
    • ……

编程通用

软件工程的核心就是管理复杂度 —— 《代码大全 2》

推荐阅读:来自法海@淘宝前端团队《从达标到卓越 —— API 设计之道》

  • 达标(语法、词法)
    • 正确拼写
    • 准确用词
    • 注意单复数
    • 不要搞错词性
    • 处理缩写
    • 用对时态和语态
  • 熟练(语义、可用性)
    • 单一职责
    • 避免副作用
    • 代码一致性
    • 合理设计函数参数
    • 合理运用函数重载
    • 使返回值可预期
    • 固话术语表
    • 遵循一致的代码风格
  • 卓越(系统性、大局观)
    • 版本控制
    • 确保向下兼容
    • 设计扩展机制(易于扩展)
    • 控制 API 的抽象级别
    • 设计模式
    • 注释
    • DRY
    • 编码规范
    • 解耦
    • 复杂度控制

SEO & 数据统计 & 数据分析

吃土小2叉:尽人事,听天命(天者,用户也)

  • SEO
    • 影响因素
      • 相关性
        • title
        • 关键词密度
      • 权威性
        • 外链
        • 内链
        • 域名年限
        • 网站收录
        • 安全性
      • 用户体验
        • 广告
        • 加载速度
        • 内容质量:内容真实性、内容原创性、内容有益性
    • 不良行为
      • 堆叠关键词
      • 抄袭、作弊
      • 大量低价值外链
      • 广告、木马、病毒 -数据统计
    • 工具
      • 统计、埋点工具:Google Analytics、百度统计、Piwik……
      • 站长工具:Google Webmaster 、百度站长工具
      • 其他工具:百度指数、SEO 各项指标助手工具……
  • 数据分析
    • 工具
      • 同数据统计工具
      • 脑子是个好东西
    • 分析方法
      • 归因、排查
      • 细分
        • 来源、渠道
        • 用户属性
          • 人口统计学
        • 用户行为
          • 站内搜索关键词
          • 自定义事件(埋点事件)
          • 浏览频率、时间、跳出页
          • 访问内容
          • 访问漏斗
        • 站点属性
      • 对比
        • 时间维度
        • 统计指标维度
    • 目标设置
      • 转化路径
      • 转化目标
      • 转化价值

网络基础

此处是不是又要出现,经典问题:当你在浏览器输入 URL 并回车(非单页应用的传统网站),直到你看见这个页面,此时经历了哪些过程(略去浏览器渲染环节)。

  • TCP / IP
    • HTTP
      • 请求
        • 请求头
        • 请求正文
      • 响应
        • HTTP 状态码(2xx、3xx、4xx、5xx)
        • 响应头
        • 响应正文
      • 过程:三次握手
    • HTTP2
    • HTTPS
    • Web Socket
    • CORS
    • Session、Cookie
    • RESTful / RPC
  • DNS 、域名、IP
    • 域名劫持
    • 内网、公网地址段
  • 缓存
    • 服务端缓存
    • 客户端缓存
  • 常用工具
    • F12 Network Panel
    • Advanced REST client
    • EditThisCookie
    • Wireshark
    • Fiddler、Charles
  • 常见问题
    • HTTP 迁移到 HTTPS 站点部署问题
      • HTTPS 证书部署
        • TLS 版本问题
        • 证书作用域(是否包含子域名)
        • 证书、秘钥配置文件
      • 资源加载同协议
        • error 级
          • 外部 JavaScript 加载
          • iframe
        • warning 级
          • img
          • CSS
      • 网络请求同协议
        • error
          • ajax
          • jsonp

交叉领域理论

吃土小2叉:学习交叉领域知识的一个很朴实的目的 —— 掌握如何甩锅

产品设计相关

吃土小2叉:学会优雅地质疑设计 => 给用户更好的体验

  • 与设计师的沟通、协作
  • 设计理念 => 用户体验
    • 一致性
    • 可用性
    • 易用性
    • 反馈
  • 提升审美
    • 单反穷三代 // 单身狗 XX:也许学好摄影就能追到女神了呢?
    • 竞品分析 // 知己知彼,重视对手
  • 常用工具

后端基础

吃土小2叉:只要把这篇文章《系统设计入门》上面你不认识的术语弄懂就可以了 (迷之微笑)

XX 的观点:时刻谨记编程语言只是一种工具,分别有不同适用的场景罢了。理性、客观、结合实际。

  • 与后端开发工程师的沟通、协作
    • 明确分工
    • 文档先行
    • mock 数据
  • 简单了解一门后端语言 // XX 注:如果你已经自己搭建了个人博客站点,后端语言的语法层面足够了。
  • 了解前端路由与后端路由的区别
  • 简单应用数据库(MySQL)
    • 增、删、改、查
    • 备份、导出
  • 了解作用与概念
    • GraphQL
    • Nginx
    • Redis
    • 负载均衡
    • CDN
    • 数据库主从备份
  • 计算机相关基础知识 // 有时间多重温(预习)重温(预习)
    • 数据库
    • 操作系统
    • 编译原理
    • 离散数学
    • 数字逻辑

前端实践

实践是检验真理的唯一标准,在此引用 Vue.js 作者尤雨溪的一段话:

技术方案都是先有问题再有思路同时伴随着取舍。在选择衡量技术的时候,尽量去思考这个技术背后是在解决什么问题,它做了怎样的取舍。这样一方面可以帮助我们更好的理解和使用这些技术,也为以后哪天你遇到业务中的特殊情况,需要自己做方案的时候打好基础。

解决实际问题

Learn from you mistakes.

吃土小2叉:写下这篇文章的时候恰逢今年高考,很感谢高一的英语老师当时给我们布置的一个作业:整理考试错题集。因为经历过太多次,同样类型的题目这次错,下次仍然错。而我又是一个比较较真的人,每次整理错题的时候,不单单只记录做错的问题和答案,还会去分析这里的考点,所涉及的知识点,去试着换位思考如果我是出题人,会怎么出这道题,考哪些知识点可以坑一下考生。而这一过程,又有着考试做错题的心理愧疚感,记忆会特别深刻。另一方面,在复习阶段,也可以更具有针对性地复习,为自己减压。要尽量把大脑当成 CPU 来用,或者倒排索引,而非硬盘、数据库。

Learn from your practice.

而在编程过程中,也是比较接近。我们可以记录下自己犯过的错误,不良的编码案例。同时,我们也可以像经常收集一些名人名言、固定搭配等写作套路一样,去整理、收集自己在开发过程中的最佳实践。当然若是有时间再去思考、反思、优化,那就更好了。

Learn from your worry & adversity.

另外,抱着积极的态度强大的内心去面对开发过程中的任何困惑、困境,都是助力快速成长的好机会。

前阵子我在 GitHub 上也开了一个项目,专门记录、收集我最近在前端开发过程中遇到的一些问题,有已经解决的,也有仍待解决的。

https://github.com/xunge0613/front-end-practice-collections

目前整理的已解决问题有:

仍待解决的问题:

  • 如何优雅地监听元素高度变化?
  • 移动端 banner 轮播图自适应的各种坑

当然我也简单写了一些方法论,包括:

后续我也会不断完善这一块内容。重点是:形成一套属于自己的最佳实践经验库。

学习型项目

这一部分内容更推荐大家关注 Phodal 大神的 Growth 系列

https://github.com/phodal/growth

而我给准备入门前端的新手的建议是:

拥有一个完全属于自己的博客、域名、网站、服务器,并每周固定更新博客文章、每年为博客更新一次主题。

前端工程

勿忘自己的 title:前端工程师

以下引用张云龙 dalao 的文章:前端工程 —— 基础篇

第一阶段:库/框架选型 第二阶段:简单构建优化 第三阶段:JS/CSS模块化开发 第四阶段:组件化开发与资源管理

由于先天缺陷,前端相比其他软件开发,在基础架构上更加迫切的需要组件化开发和资源管理,而解决资源管理的方法其实一点也不复杂:

一个通用的资源表生成工具 + 基于表的资源加载框架

第一阶段:框架应用

吃土小2叉:只要是一个文档友好的框架,遇到不会的问题,去翻翻文档,如果解决不了,再去认真翻一次。因此,第一阶段,亦可认为是:面向文档编程

此处建议再回忆一下刚才提及的尤大的话。

以下是我个人的框架/库应用路线:

jQuery => jQuery + artTemplate => Vue.js + lodash => Vue.js 全家桶

  • jQuery // 此处参考张鑫旭的 jQuery 1.4 中文文档
    • 核心
      • 对象访问
      • 数据缓存
      • 队列控制
      • 插件机制
      • 多库共存
    • 事件
      • 页面载入
      • 事件处理
      • 事件委托
      • 事件切换
      • 常用事件
        • 鼠标事件(click、dbclick、hover、mouse*……)
        • 键盘事件(key*……)
        • 表单事件(blur、change、focus、submit、select)
        • 浏览器事件(error、resize、scroll)
        • 触摸事件(touch*……)
    • 选择器
      • 基本
      • 组合
      • 伪类
      • 内容
      • 可见性
      • 属性
      • 表单
    • 筛选器
      • 过滤
      • 查找
      • 串联
    • CSS
      • CSS
      • 位置
      • 尺寸
    • DOM 操作
      • 元素节点(增、删、移、换、复制)
      • 元素属性(增、删、改、查)
      • 文本内容(增、删、改、查)
    • 网络请求
      • Ajax
      • when
      • deferred
    • 特效
      • 基本(显示、隐藏)
      • 滑动
      • 淡入淡出
      • 自定义动画控制
    • 辅助工具(类似于 lodash)
      • 数组、对象操作
      • 函数操作
      • 字符串操作
      • 浏览器及特性检测
      • 类型检测
      • JSON 序列化
  • artTemplate
    • 模板引擎
  • Vue.js
    • MVVM 思想
    • 声明式渲染
    • 条件与循环
    • 处理用户输入
    • 数据绑定、响应式数据
    • 组件化应用构建
      • 组件间通信
  • lodash.js // 提供各种 helper 方法,专注于数据处理
    • 数据类型
      • 数组
      • 集合
      • 日期
      • 函数
      • 数值
      • 对象
      • 字符串
    • 语言特性
      • 类型检测
      • 类型比较
      • 复制
    • 数学运算
    • 辅助工具

XX:

  • 学你会用 artTemplate 以后,会发现 Vue.js 很容易上手
  • 当你学会 Vue.js 以后,你会发现小程序真的很容易上手

第二阶段:简单自动构建优化

专注业务开发

  • 工具
    • Grunt
    • Gulp
  • 预处理
    • Less
    • Babel
    • TypeScript
  • 后处理
    • PostCSS
  • 校验
    • ESLint
  • 压缩
    • 代码
    • 图片
  • 合并
  • 打包
  • 自动化测试
  • mock 接口调试

第三阶段:JS/CSS模块化开发

张云龙:分治、分治、分治

  • AMD
  • CommonJS
  • UMD
  • ES6 Module
  • ……

第四阶段:组件化开发与资源管理

核心目的:提高开发效率 & 兼顾运行性能

  • 分治、解耦、自由组合、就近维护
  • Vue.js 组件化开发
    • 抽象业务逻辑组件
      • 组合基础 UI 组件形成业务组件
      • 独立编写业务相关组件
      • ……
    • 定制基础 UI 组件库
      • 轮播图组件
      • 弹窗组件
      • ……
  • 资源管理

项目技术选型

理性、客观、避免偏见

  • 预计投入
    • 开发资源
      • 时间
      • 人手
      • 技术储备
    • 项目资源
      • 沟通成本
      • 设计文档、功能文档、产品原型
      • 后端接口文档
      • 项目排期
    • 产品资源
      • 用户群体
        • 浏览器兼容性
        • SEO 问题
  • 期望回报
    • 开发人员自我成长
    • 公司技术栈
    • 开发效率
    • 可维护性
    • 性能、稳定性
    • 易于测试
    • 易于把控项目周期
  • 应急预案
    • 兼容方案
    • 回退方案
    • A / B Test
    • 渐进增强
    • Plan B

造轮子

要么站在巨人的肩膀上,要么自己成为巨人

未完待续……

  • UI 组件库
  • 前端工具
  • 前端微服务
  • 前端框架
    • (以下内容是 XX 的 YY 内容)
    • 学习优秀框架源码
    • 仿写核心内容
    • 掌握山寨一个框架的套路
    • 发现问题
    • 具备扎实的前端基础 + 运气 + 灵感
    • 解决问题

版本规划

本文会在 GitHub 上持续维护,欢迎大家提 issue ~

地址是:https://github.com/xunge0613/front-end-growth/blob/master/tech-growth/growth-front-end-summary.md

v x.x.x

  • 更新 造轮子
  • 考虑翻译成英文?
  • 加入重要性评分功能
    • 引导目前阶段应该掌握哪些
    • 分为:初级、中级、高级

v 0.0.3 内容迭代

  • 更新 编程通用
    • 条目更新
  • 更新 JavaScript
  • 更新 前端实践
    • 新增引导语
  • 更新支付宝图标、微信图标……

===== 当前版本分割线 =====


v 0.0.2 内容迭代

  • 新增 后端基础
  • 新增 前端工程 第一阶段 jQuery、Vue.js 介绍
  • 新增 常见问题
  • 更新 前言
  • 更新 网络基础
  • 更新 学习型项目

致谢

  1. 前端工程 —— 基础篇 by 张云龙
  2. 从达标到卓越 —— API 设计之道 by 法海@淘宝前端团队
  3. The Modern JavaScript Tutorial by Ilya Kantor
  4. jQuery 1.4 中文文档 by 张鑫旭
  5. MDN Web 开发 // 这里有个小彩蛋,这个页面右上角有某 XX

联系方式

欢迎联系我讨论本文的不足、问题或者意见。

可以在我的 GitHub 主页上找到我的联系方式

亦可关注我的微信公众号:清风迅来

清风迅来

结语

作为一个老菜鸟,我只是知识的搬运工

本文大多讨论的是有哪些知识点(what),至于如何学习与应用这些知识点(how & why),敬请期待我之后的一系列文章,目前已完成一些雏形,仅供试阅:

感谢您一路看到这里,欢迎点击阅读原文在我的博客上进行留言一同探讨。(小透明表示公众号至今未开通留言功能……)

若有帮助,尽情打赏!^_^

ps: 好像图片有点大=。=

如果有帮助,欢迎打赏~如果有帮助,欢迎打赏~

许可

MIT

观后感:2017第二届前端开发者大会

从我一个毕业快四年的前端小菜鸟的角度,关于昨天第二届前端开发者大会一些小想法&记录(有点长长长长长……)
欢迎探讨、指点~
今日关键词: 解决问题、自我定位、 未来发展

今天议程的主题,有Vue,有weex,有动画,有redux,有RN,有CRN,甚至还有Model层面的ReactiveDB。
简单概括一下,大致内容就是,为了解决XX问题,为了改善XX现状,基于XX理念,使用了XX技术,带来XX好处,[存在XX不足]……
而前端框架的发展,也是为了解决日益增长的产品复杂度同落后的开发能力、开发效率之间的矛盾。
而我们实际工作中,身为一个前端码农,首要的工作职责就是解决工作中遇到的问题,至于前端技术选型,本身也是为了公司的业务和产品所服务的,要从自家产品的实际角度出发,权衡留人能力,招人难易度,开发效率,稳定性,兼容性,可靠性,用户体验,技术转型的成本等等因素,不能盲从也不能落伍。

而至于前端自身的定位,想到5年前我引用了2位大神的思维导图在知乎上的回答“一名合格的前端工程师的知识结构是怎样的”……
虽然许多名词已经逐渐退出视野,但其实我们开发的本质还是没有变化,本质上是为了打通产品与用户之间的最后一道门,技术只是为了解决特定问题而存在的一种工具。
因此在具备一定技术、能力之后, 更需要具备一种使命感,要对产品本身质量负责,对开发进度负责……
接着,不停地学习,横向与纵向知识面的深入……
今天的几个议题中有不少问题的性能优化方案也都是借鉴了操作系统的设计模式,若是产品足够复杂,就如今天Teambition的案例,前端的数据种类非常多,数据间的关联性非常强,并且产品对于实时性要求特别高,针对这种业务场景,若还是使用jQuery,难以想象其维护难度和成本…… 而他们目前前端采用的解决方案,更像是传统后端、客户端做的事情。

关于未来发展,全栈是极好的,但人的精力是有限的,在优点方面发挥出自己极限,树立起你的不可替代性和价值。

最后感谢公司 @爱回收 报销了前端组参加这次活动的门票钱~

前端开发经验札记

最后更新:2014年5月1日1:57:33

作者: 徐迅 (清风迅来 XX)

真正从事Web前端开发有一年多了,而接触前端最早可以追溯至小学时候电脑课上的网页制作,那个时候还在使用Front Page(我才不会说那个时候自己设计的网页巨丑…);后来一直到大学才“重拾旧业”:大二曾帮老师做过课程介绍网站,使用的仍然是DreamWeaver,并开始搭建 xuxun.me ;大三拥抱notepad++和zen-coding,开始折腾JavaEE的项目;大四毕业设计又回归PHP,偶尔接触了Python;工作以后爱上sublime text 2、less和coffee script,在C#坑中渐行渐远。

希望这篇文章能一直更新下去吧.

加油XX,奔跑在大前端之路上吧!

一、前端语言基础

(一)HTML

     1 标签语义化:使用合适标签,少使用无语义标签
     2 使用 <!DOCTYPE html> 既可以向前兼容,又体现了你网站的高大上!
     3

(二)CSS

     1 选择一款合适的CSS预处理语言(个人比较喜欢Less),大大提升CSS编写效率
     2 通用的样式提取成 .class 或者 less 中的 mixin() {} 更佳
     3 多使用限定度高的选择器, 例如 > + , 尽量避免后代选择器过度使用
     4 多用组合少用继承,减少耦合
     5 选择器权重222原则(XX自创……): 选择器权重不超过222,即最多2个id,2个class和2个tag……
     6 CSS伪类是个神器,例如使用:hover、:after等伪类可以替代JS实现不少效果

(三)JavaScript

     1 JS我是渣.

二、前端框架基础

(一) Bootstrap

     1 Bootstrap 的less 代码质量好,价值高,推荐学习

(二)JQuery Mobile

     1 深坑,慎入

三、前端杂七杂八

     1 适当了解浏览器的渲染机制,避免代码性能过低
     2 替换 .class 优于 替换 <xx style=”xx:xx;” ></xx>
     3 图片记得压缩, jpegtran 是个不错的jpg图片无损压缩工具

四、前端各种坑爹

1 IE 7 不支持 console.log ,因为 IE7 根本没有 console ,所以当你使用 IE 7 运行有 console.log 的页面你会悲剧..
2

 

徐迅 / 清风迅来

XX   / Dalston Xu

Google

【前端】table中使用colgroup应用样式在HTML5文档标准下的问题

近日,在做一个页面的时候,需要对一个表格的某几列添加一些样式,理所当然地想到了一个标签: colgroup。于是乎打算先在w3cschool上DIY下看看效果,结果发现被坑爹了……

 

colgroup样例代码的显示就出问题了

以上的代码我还没有对其修改,结果显而易见,colgroup里的style:color 属性失效了……  同时,就连 align 属性也跪了..

当时的开发需求是需要对N个网页里的表格模板进行样式修改,所以总不见得把每一个模板的table的那些行都手工添加上一个class吧 T_T..

在网上找了下原因,结果在  Table columns  这篇文章里,发现了一些相关的介绍,大致意思是:原先在HTML4的时候确实是可以对colgroup应用样式的,但是到了HTML5里:

“很不幸,W3C声明中,只有一部分的样式属性可以应用到column上(border,background,width和visibility)。例外: IE7 及更低版本”

这份介绍看得我真是菊花甚痛…… 我于是用ie浏览器去测试了一下,结果确实如此:从IE8一直到IE10,都无法显示colgroup的样式,但是到了IE7就瞬间亮瞎……

IE7下colgroup的属性正常应用样式

IE7下colgroup的属性能够正常应用样式..

以上的问题在 w3.org 的wiki上也有提及,确实是目前仅能应用4个样式。

按照语义化来说,使用 colgroup 确实是符合标准的诶,不知道为何目前仍然没有支持。根据 stackoverflow 上面的一个问答,发现竟然已经是5年前的问题了… 有一种可能性是因为table的物理模型上,colgroup以及col是位于第二、第三层,仅高于最底层的table,而tr,td,th等都位于最高层,会覆盖底层的样式?(可是也尝试给colgroup加了id以增加,不过也没有效果)

于是乎,回过头来看自己项目本身的需求,也只是需要修改下字体的对齐方式(居左改为居中),所以兼容性的要求相对也不是很高,决定使用 css 3 的 选择器。所以稍作权衡,就决定用css3选择器 :nth-child(n)

———————————————–

不过实际上,当我看到后台模板编辑里的某个东东的时候… 瞬间就手贱了……

富文本编辑器的text-align

妥妥地偷懒使用富文本编辑器的对齐功能了…… (不过实际上没偷懒多少吧… 还是要一个个跑到模板里去改…… ORZ….

 

徐迅
Dalston
2013年11月25日20:57:53

 

0613

PS:扫盲下,我的生日是1991年6月13日,所以我对613这个数字很敏感……

①  Notepad++ 6.1.3版本(至少2012年6月13日时还是6.1.3版本~)

notepad-6.1.3-release
notepad-6.1.3-release

② 2012年6月14日网站的SEO信息,刚好看到百度快照是6月13日更新的~

2012年6月14日 xuxun.me的SEO信息
2012年6月14日 xuxun.me的SEO信息

③ 就连大名鼎鼎的 Word Press 以及我正使用并DIY的 Twenty Eleven 主题也在2012年6月13日这天发布了更新~

June 13, 2012, WordPress Version 3.4
On June 13, 2012, WordPress Version 3.4 Released
twenty eleven
Last Updated: 2012-06-13 twenty eleven

④ To be continued

Timeline

to be continued……^_^

Timeline for April,2017

2017年4月10日
网站重新上线,重新开始写博文
另外欢迎大家关注我的微信公众号

 

Timeline for December,2013

2013年12月7日
1. 公开日记.

Timeline for July,2013

2013年7月30日
1. 今天访问这边的速度到挺快的。。。我在想是不是因为之前一直没有动这个网站,导致网站的数据库懒得生锈了所以没法一下子恢复正常的工作状态…在考虑如果这边稳定的话,以后就把百度上面的个人记录搬过来……
2. 给这边添加了GA统计…… 继续加油吧骚年~

2013年7月29日
① 重新开始折腾博客╮(╯▽╰)╭ ,导入了去年8月7日的XML~ 导入的过程中,网址各种500报错无法访问⊙﹏⊙…… 本来还想删掉这个Wordpress重新安装一个的,结果看到创建日期是2013年6月13日…于是还是想等等试试

Timeline for August

2012年8月7日 4th year since 2008.8.7
① 网站的免费空间转战于 freehosting.com

Timeline for July

2012年7月15日
① Add some ADs  on my site:

各位童鞋… 好心的话帮忙点击上面图片注册下呗~ 免费的~ 注册成功后…… 我的网站就基本可以免除月初被封空间的情况了=.=

② 折腾了Java EE 配置……简单实现了下JPA声明式定义实体,以及Hibernate 基础的数据库交互(没有使用Spring的HibernateTemplate哦~~ 因为据说 Hibernate 4,Spring 3.1 就不支持 HibernateTemplate了的说……)

2012年7月14日
① 到学校去把被子等行李搬回家
② 笔记本的无线网卡好像坏掉了!

2012年7月13日
① 工作任务完成了90%+
②  办公室换座位咯~
③ 晚上留下来打 DotA ……  一直随机流 …… 超常发挥……

]2012年7月8日
① @杭州

Keywords:纪念品、抽奖、微博、自荐代码、 iOS、

2012年7月7日
① @杭州

Keywords:打的、高铁、杭州、阿里技术嘉年华、MySQL、拔赤、微博、久八久 、西湖、一个人

2012年7月6日
① iPhone 多视图切换
② 2011年7月发展的那批童鞋,今天终于转正了…… 我也轻松了不少……

2012年7月5日
① iPhone上的 Hello World
② iPhone上的 计算器~

2012年7月4日
① 终于搞定了 Xcode ~ 开始学习~~

2012年7月3日
① 正式实习第一天~  从Web 前端开发实习生被调到了 iPhone 前端开发= = 这……

2012年7月2日
① 网站 down 掉了

2012年7月1日

Continue reading “Timeline”

Timeline

to be continued……^_^

Timeline for April,2017

2017年4月10日
网站重新上线,重新开始写博文
另外欢迎大家关注我的微信公众号

 

Timeline for December,2013

2013年12月7日
1. 公开日记.

Timeline for July,2013

2013年7月30日
1. 今天访问这边的速度到挺快的。。。我在想是不是因为之前一直没有动这个网站,导致网站的数据库懒得生锈了所以没法一下子恢复正常的工作状态…在考虑如果这边稳定的话,以后就把百度上面的个人记录搬过来……
2. 给这边添加了GA统计…… 继续加油吧骚年~

2013年7月29日
① 重新开始折腾博客╮(╯▽╰)╭ ,导入了去年8月7日的XML~ 导入的过程中,网址各种500报错无法访问⊙﹏⊙…… 本来还想删掉这个Wordpress重新安装一个的,结果看到创建日期是2013年6月13日…于是还是想等等试试

Timeline for August

2012年8月7日 4th year since 2008.8.7
① 网站的免费空间转战于 freehosting.com

Timeline for July

2012年7月15日
① Add some ADs  on my site:

各位童鞋… 好心的话帮忙点击上面图片注册下呗~ 免费的~ 注册成功后…… 我的网站就基本可以免除月初被封空间的情况了=.=

② 折腾了Java EE 配置……简单实现了下JPA声明式定义实体,以及Hibernate 基础的数据库交互(没有使用Spring的HibernateTemplate哦~~ 因为据说 Hibernate 4,Spring 3.1 就不支持 HibernateTemplate了的说……)

2012年7月14日
① 到学校去把被子等行李搬回家
② 笔记本的无线网卡好像坏掉了!

2012年7月13日
① 工作任务完成了90%+
②  办公室换座位咯~
③ 晚上留下来打 DotA ……  一直随机流 …… 超常发挥……

]2012年7月8日
① @杭州

Keywords:纪念品、抽奖、微博、自荐代码、 iOS、

2012年7月7日
① @杭州

Keywords:打的、高铁、杭州、阿里技术嘉年华、MySQL、拔赤、微博、久八久 、西湖、一个人

2012年7月6日
① iPhone 多视图切换
② 2011年7月发展的那批童鞋,今天终于转正了…… 我也轻松了不少……

2012年7月5日
① iPhone上的 Hello World
② iPhone上的 计算器~

2012年7月4日
① 终于搞定了 Xcode ~ 开始学习~~

2012年7月3日
① 正式实习第一天~  从Web 前端开发实习生被调到了 iPhone 前端开发= = 这……

2012年7月2日
① 网站 down 掉了

2012年7月1日

Continue reading “Timeline”