Open ufologist opened 7 years ago
技术
模块化: 分工产生效能 将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载，这为多人协作提供了可能 JS的模块化 在ES6之前，JavaScript一直没有模块系统，这对开发大型复杂的前端工程造成了巨大的障碍 技术选型：Webpack + Babel + ES6 CSS的模块化 虽然SASS、LESS、Stylus等预处理器实现了CSS的文件拆分，但没有解决CSS模块化的核心问题：选择器的私有化问题（全局污染问题） 技术选型：PostCSS + CSS Modules 组件化: 现代化生产的分工协作要求工业部件遵循互换性原则 模块化只是在语言层面上，对代码的拆分；而组件化是基于模块化，在设计层面上，对UI（用户界面）的拆分 从UI拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元，我们称之为组件。 组件化除了要处理组件这种本身的封装，还要处理组件之间的逻辑(JS)继承，样式(CSS)扩展和模板(HTML)嵌套等关系。 组件化实际上是一种按照模板(HTML)+样式(CSS)+逻辑(JS)三位一体的形式对面向对象的进一步抽象。 页面上所有的东西都是组件。页面是个大型组件，可以拆成若干个中型组件，然后中型组件还可以再拆，拆成若干个小型组件，小型组件也可以再拆，直到拆成DOM元素为止。DOM元素可以看成是浏览器自身的组件，作为组件的基本单元。 传统前端框架/类库的思想是先组织DOM，然后把某些可复用的逻辑封装成组件来操作DOM，是DOM优先；而组件化框架/类库的思想是先按顶层设计来构思组件，然后用DOM这种基本单元结合相应逻辑来实现组件，是组件优先。 组件的分类 按照组件的代码组成，组件可以分为：HTML、HTML+CSS、JS、HTML+JS、HTML+CSS+JS。 按照组件的通用性（复用性），组件可以分为以下三类 通用组件：不同产品间可以复用的组件 通用业务组件：仅在同一产品中可以复用的组件 业务组件：不可以复用的组件 组件库 技术选型：RegularJS + Regular UI + Cloud UI 规范化: 现代工厂制度是工业革命发展的必然产物 目录结构 编码规范 技术选型：ESLint 自动化: 现代工业其所以区别于工场手工业，是由于机器起了主要的作用 图标合并 技术选型：SpriteSmith + FontCustom 可视化组件文档 前端开发和后端开发不同的是，前端开发是可视化的 后端文档只要写个markdown文件，放在git仓库就能阅读；而在前端文档中，你写个m-modal-lg，别的开发者根本不知道你这个模态框多大，是个什么样子，去翻源码也无法感知组件的具体使用场景。 技术选型：PostMark + JSDoc 前端自动化测试 技术选型：Karma + Mocha + Expect.js 构建工具 技术选型：Gulp
模块化: 分工产生效能
将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载，这为多人协作提供了可能
JS的模块化
在ES6之前，JavaScript一直没有模块系统，这对开发大型复杂的前端工程造成了巨大的障碍
技术选型：Webpack + Babel + ES6
CSS的模块化
虽然SASS、LESS、Stylus等预处理器实现了CSS的文件拆分，但没有解决CSS模块化的核心问题：选择器的私有化问题（全局污染问题）
技术选型：PostCSS + CSS Modules
组件化: 现代化生产的分工协作要求工业部件遵循互换性原则
模块化只是在语言层面上，对代码的拆分；而组件化是基于模块化，在设计层面上，对UI（用户界面）的拆分
从UI拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元，我们称之为组件。
组件化除了要处理组件这种本身的封装，还要处理组件之间的逻辑(JS)继承，样式(CSS)扩展和模板(HTML)嵌套等关系。
组件化实际上是一种按照模板(HTML)+样式(CSS)+逻辑(JS)三位一体的形式对面向对象的进一步抽象。
页面上所有的东西都是组件。页面是个大型组件，可以拆成若干个中型组件，然后中型组件还可以再拆，拆成若干个小型组件，小型组件也可以再拆，直到拆成DOM元素为止。DOM元素可以看成是浏览器自身的组件，作为组件的基本单元。
传统前端框架/类库的思想是先组织DOM，然后把某些可复用的逻辑封装成组件来操作DOM，是DOM优先；而组件化框架/类库的思想是先按顶层设计来构思组件，然后用DOM这种基本单元结合相应逻辑来实现组件，是组件优先。
组件的分类
按照组件的代码组成，组件可以分为：HTML、HTML+CSS、JS、HTML+JS、HTML+CSS+JS。
按照组件的通用性（复用性），组件可以分为以下三类
组件库
技术选型：RegularJS + Regular UI + Cloud UI
规范化: 现代工厂制度是工业革命发展的必然产物
编码规范
技术选型：ESLint
自动化: 现代工业其所以区别于工场手工业，是由于机器起了主要的作用
图标合并
技术选型：SpriteSmith + FontCustom
可视化组件文档
前端开发和后端开发不同的是，前端开发是可视化的
后端文档只要写个markdown文件，放在git仓库就能阅读；而在前端文档中，你写个m-modal-lg，别的开发者根本不知道你这个模态框多大，是个什么样子，去翻源码也无法感知组件的具体使用场景。
技术选型：PostMark + JSDoc
前端自动化测试
技术选型：Karma + Mocha + Expect.js
构建工具
技术选型：Gulp
用途 作为 HttpToolbox 的 Node.js 版 列举了爬虫抓取网站的一般场景 作为开发爬虫项目的模版
用途
网站架构的演进不外乎两个原因： 用户越来越多，意味着并发要求越来越高 数据越来越多，意味着存储挑战越来越大 演进历程 上古时代: 一个数据库加一个应用服务器，应用服务器直接开门迎客 读写分离: 一个 Master 数据库负责数据写入，另外有一到多个 Slave 数据库负责数据读取。Master 和 Slave 之间的数据会自动同步 负载均衡: 负责接收用户发过来的请求，然后看哪个应用服务器比较有空闲，就把请求发送给相应的应用服务器执行 动静分离: 把静态的内容和动态的内容分离，分别放在不同的服务器上，减少中间交互环节，从而提高效率 内容分发网络: CDN(Content Delivery Network)让一个区域的用户访问那个区域的服务器，涉及到动态 DNS 解析的技术 数据库集群: 大容量的分布式数据库 缓存: 把经常读的数据放在缓存里来提高效率
网站架构的演进不外乎两个原因：
演进历程
所有东西都放在一个服务器上 典型的Web应用程序将包括Web服务器，应用程序服务器和数据库服务器 数据服务器分离 负载均衡 负载平衡器可以添加到服务器环境中，以通过在多个服务器之间分配工作负载来提高性能和可靠性 主备互用，读写分离
所有东西都放在一个服务器上 典型的Web应用程序将包括Web服务器，应用程序服务器和数据库服务器
数据服务器分离
负载均衡
负载平衡器可以添加到服务器环境中，以通过在多个服务器之间分配工作负载来提高性能和可靠性
主备互用，读写分离
Nock is an HTTP mocking and expectations library for Node.js Nock can be used to test modules that perform HTTP requests in isolation. For instance, if a module performs HTTP requests to a CouchDB server or makes HTTP requests to the Amazon API, you can test that module in isolation. Nock works by overriding Node's http.request function. Also, it overrides http.ClientRequest too to cover for modules that use it directly. var http = require('http'); // HTTP mocking and expectations library var nock = require('nock'); // intercept every HTTP call to http://myapp.iriscouch.com nock('http://myapp.iriscouch.com').get('/users/1') .reply(200, { _id: '123ABC', _rev: '946B7D1C', username: 'pgte', email: 'pedro.teixeira@gmail.com' }); var opt = { method: 'GET', host: 'myapp.iriscouch.com', port: 80, path: '/users/1' }; var req = http.request(opt, function(res) { console.log(res.statusCode); var body = ''; res.on('data', function(data) { body += data; }).on('end', function() { console.log(body); }); }); req.end();
Nock is an HTTP mocking and expectations library for Node.js
Nock can be used to test modules that perform HTTP requests in isolation.
For instance, if a module performs HTTP requests to a CouchDB server or makes HTTP requests to the Amazon API, you can test that module in isolation.
Nock works by overriding Node's http.request function. Also, it overrides http.ClientRequest too to cover for modules that use it directly.
http.request
var http = require('http'); // HTTP mocking and expectations library var nock = require('nock'); // intercept every HTTP call to http://myapp.iriscouch.com nock('http://myapp.iriscouch.com').get('/users/1') .reply(200, { _id: '123ABC', _rev: '946B7D1C', username: 'pgte', email: 'pedro.teixeira@gmail.com' }); var opt = { method: 'GET', host: 'myapp.iriscouch.com', port: 80, path: '/users/1' }; var req = http.request(opt, function(res) { console.log(res.statusCode); var body = ''; res.on('data', function(data) { body += data; }).on('end', function() { console.log(body); }); }); req.end();
苹果规定2017年1月1日以后，所有APP都要使用HTTPS进行网络请求，否则无法上架 苹果强制升级的HTTPS不仅仅是在接口HTTP上加个S那么简单: 需要满足的是iOS9中新增App Transport Security（简称ATS）特性: 必须是苹果信任的CA证书机构颁发的证书 后台传输协议必须满足: TLS1.2 (这很重要, 后面的自制证书满足这个条件是前提) 签字算法 证书必须使用SHA256或者更好的哈希算法进行签名，要么是2048位或者更长的RSA密钥，要么就是256位或更长的ECC密钥。 目前有两种升级到HTTPS得方法: 第三方认证的颁发CA证书(推荐) 自己制作证书(这种不知道能不能满足苹果的审核) iOS 10 适配 ATS（app支持https通过App Store审核） 需要解决的问题（iOS 9、iOS10及以上） app内服务器网络请求访问支持https（即一般的请求） webview内支持任意http访问 第三方sdk接入与支持http访问
苹果规定2017年1月1日以后，所有APP都要使用HTTPS进行网络请求，否则无法上架
苹果强制升级的HTTPS不仅仅是在接口HTTP上加个S那么简单: 需要满足的是iOS9中新增App Transport Security（简称ATS）特性:
目前有两种升级到HTTPS得方法:
iOS 10 适配 ATS（app支持https通过App Store审核）
需要解决的问题（iOS 9、iOS10及以上）
产品
互联网的常见盈利模式，是帮助客户达到某种目的，然后收取佣金或者按照一定的比例从客户的收入中分成 佣金和分成都不是互联网发明的名词，而是在整个商业社会中由来已久的概念，是已经形成的商业秩序，而这些商业秩序在互联网行业被沿用 电商平台（一般是B2C会采用这类模式） 每一件商品成交后，天猫都会从成交额中收取一定比率的“服务费” 团购与优惠券 真正能让利润最大化的方法是，将同一件商品以较高价格卖给那些不太在乎钱的人，同时以较低价格卖给那些在乎钱的人。这种策略在营销学中有一个专门的名词来描述，叫做“价格歧视”。 开放平台 开放平台的主要盈利模式，就是从在它之上运行的app的收入中提成 互联网金融 因为支付宝的原理是，将货款先付给阿里巴巴，等收到货，满意后再通知阿里，这时钱才真正到达卖家的账户中。而阿里是家正规的大公司，信用还是信得过的。所以我认为，支付宝与淘宝当年面对卖家的免费政策一起，成就了淘宝的今天 支付宝的盈利模式之一，是针对商家的“担保交易收款” 总结：佣金与分成模式的典型闭环
互联网的常见盈利模式，是帮助客户达到某种目的，然后收取佣金或者按照一定的比例从客户的收入中分成
佣金和分成都不是互联网发明的名词，而是在整个商业社会中由来已久的概念，是已经形成的商业秩序，而这些商业秩序在互联网行业被沿用
电商平台（一般是B2C会采用这类模式）
每一件商品成交后，天猫都会从成交额中收取一定比率的“服务费”
团购与优惠券
真正能让利润最大化的方法是，将同一件商品以较高价格卖给那些不太在乎钱的人，同时以较低价格卖给那些在乎钱的人。这种策略在营销学中有一个专门的名词来描述，叫做“价格歧视”。
开放平台
开放平台的主要盈利模式，就是从在它之上运行的app的收入中提成
互联网金融
因为支付宝的原理是，将货款先付给阿里巴巴，等收到货，满意后再通知阿里，这时钱才真正到达卖家的账户中。而阿里是家正规的大公司，信用还是信得过的。所以我认为，支付宝与淘宝当年面对卖家的免费政策一起，成就了淘宝的今天
支付宝的盈利模式之一，是针对商家的“担保交易收款”
总结：佣金与分成模式的典型闭环
想请人吃饭，有两家餐馆可以选择，看起来档次差不多，但是其中一家门庭若市，甚至会有排队的现象；另一家偌大的大厅几十桌位置只有2桌有人吃饭。于是你选择了前者——即便需要排队。 想买一台电脑，但是自己不懂技术，看不懂配置单，也不知道什么牌子好。正摸不着头脑的时候，想起有个朋友是腾讯的工程师，技术很牛，上次见他，好像是用… 哎？什么牌子来着？哦，Thinkpad！于是自己也买了台Thinkpad。 想去淘宝买水货iPhone，又怕被骗；翻卖家的信用记录？那玩意儿很多都是刷出来的！这时候想起有个朋友好像上个月在淘宝上买了一部，看他用的还不错，应该挺靠谱。于是去问他：“兄弟，把你上次买iPhone的淘宝店铺发我一下~” 我们每一个人都是“社会人”，我们每一天都要与他人接触和交流，我们的行为总是会受到社会上其他个体的一些影响。 “社会化广告”就是其中比较有代表性的例子 从广告形式上看，它是：带有社会化元素的广告 从投放渠道上看，它是：能够利用产品的社交特性来提升推广效果的广告 加上了“赞”按钮, 这跟请人吃饭找人多的餐馆道理一样 这个看起来更像是文章开始的场景中提到的直接向好友索要店铺地址的情况。对于一个广告来说，它拥有你信任的朋友的消费经验，可信度显然更高一些，同时无形中也拉进了用户跟广告的距离。 加上互动性和社会化元素后，广告的形式可以千变万化，甚至可以让用户不觉得这是广告，而心甘情愿的去点击，去帮助传播。但是从广告系统和投放的角度来看，这里最大的难题并不是形式的创新，而是将有趣的形式标准化，投票、优惠券等形式都是可以很容易标准化的。 对于广告主来说，社会化媒体上的广告有很多优势，例如：精确定向、操作容易、低门槛 总结 在日常生活中，我们的决策经常会受他人的影响，在互联网上也是一样 有趣的形式和有用的内容不但能提高交易成功的概率，还有利于传播 社交网站得天独厚的用户信息蕴含着巨大的商业价值
我们每一个人都是“社会人”，我们每一天都要与他人接触和交流，我们的行为总是会受到社会上其他个体的一些影响。
“社会化广告”就是其中比较有代表性的例子
加上了“赞”按钮, 这跟请人吃饭找人多的餐馆道理一样
这个看起来更像是文章开始的场景中提到的直接向好友索要店铺地址的情况。对于一个广告来说，它拥有你信任的朋友的消费经验，可信度显然更高一些，同时无形中也拉进了用户跟广告的距离。
加上互动性和社会化元素后，广告的形式可以千变万化，甚至可以让用户不觉得这是广告，而心甘情愿的去点击，去帮助传播。但是从广告系统和投放的角度来看，这里最大的难题并不是形式的创新，而是将有趣的形式标准化，投票、优惠券等形式都是可以很容易标准化的。
对于广告主来说，社会化媒体上的广告有很多优势，例如：精确定向、操作容易、低门槛
总结
技术
产品