react

react，前端三大框架之一，也是非常受开发者追捧的一门技术。而 typescript 是 javascript 的超集，主要特点是对 类型 的检查。二者的结合必然是趋势，不，已经是趋势了。react 文档、typescript 文档都看过，例子也敲过了，对此也都有了一定的理解，但是把二者很好的结合在一起，还是遇到了一些问题。纯粹记录一些，当然也希望有优秀资源的，提供一下，分享一下。提前道谢了~ 学习曲线 首先，想到的是到 官网，看相关文档，会系统些。 typescript 中文网 jsx typescript 中文网 React & Webpack 看后，也实践了一遍，也算是入手练习了，但离实际应用还很远呢。 create-react-app + typescript 对应的英文原版是 microsoft/TypeScript-React-Starter 。 中文版有点落后，英文版的比较新。 最重要的一点是：很多根据中文网搭建练习时踩坑点的解决方案都是在其 issure 中找到的。 tslint相关 在 tslint.json 中加入 interface name must start with a capitalized I 接口名称必须以大写的I开头 microsoft/TypeScript-React-Starter "rules": { "interface-name":

仅在此记录自学web前端学习情况。 学习路线（暂定）： 一阶段： Java、Java Web 二阶段： My SQL 三阶段： H5、CSS3 ** 四阶段：** JS、JQ ** 五阶段：** Node ** 六阶段：** Vue、React、Angular 来源： oschina 链接： https://my.oschina.net/u/4128969/blog/3047766

1. 主流技术官网总结 1.1. 工具类 Glup 官网: http://www.gulpjs.com.cn/ http://i5ting.github.io/stuq-gulp/#10202 Webpack 官网： http://webpack.js.org GitBook: http://fakefish.github.io/react-webpack-cookbook/index.html webpack-handbook: http://zhaoda.net/webpack-handbook/ SASS 官网: http://www.sass.hk http://sass.bootcss.com/ NPM 官网: https://docs.npmjs.com/ Markdown 官网: http://www.markdown.cn/ Git http://git-scm.com/book/zh/v1/ http://gitbook.liuhui998.com/ 1.2. 流行技术类 Vue2.0 2.0官网： http://vuejs.org/guide/ 2.0中网网： http://vuefe.cn/ 微信开发者文档 官方文档 http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html ES5

作为开发人员，我们一直在寻找让我们的代码更快更好的方法。但在此之前，编写高性能代码需要做三件事： 了解语言及其工作原理 基于用例进行设计 调试!修复!重复 记住这一点 任何傻瓜都可以编写计算机可以理解的代码，优秀的程序员编写人类可以理解的代码。- 丁·福勒 我们来看看如何使 JavaScript代码运行得更快。 延迟 延迟算法将计算延迟到需要执行时才执行，然后生成结果。 const someFn = () => { doSomeOperation() return () => { doExpensiveOperation() } } const t = someArray.filter((x) => checkSomeCondition(x)).map((x) => someFn(x)) // 现在，如果有需要在执行 t.map((x) => t()) 最快的代码是未执行的代码，所以尽量延迟执行。 JavaScript 使用原型继承，JS 中所有对象都是Object的实例。 MDN说： 尝试访问对象的属性时，不仅会在对象上搜索该属性，还会在对象的原型，原型的原型等上搜索该属性，直到找到匹配属性名或原型链的末端。 对于每个属性，JavaScript引擎都必须遍历整个对象链，直到找到匹配项。 如果使用不当，这会占用大量资源，并影响应用程序的性能。 所以不要这样： const name

​基础设施： 条条道路通云端 对于云厂商来说，2019 年是硕果累累的一年。不仅初创公司在使用云计算，那些很注重安全的“保守派”公司（如政府机构、医疗保健机构、银行、保险公司，甚至是美国五角大楼）也在迁移到云端。这种趋势在 2020 年将会继续，大大小小的公司都将（或者至少有计划）迁移到云端。Gartner 公司最近发布了一个数字： 如果你是一个还在考虑要不要迁移到云端的决策者，不妨重新审视一下你的策略。如果你是一个独立开发者，并且还没使用过云基础设施，那么完全可以在 2020 年尝试一下。很多大型的云厂商（如亚马逊、微软、谷歌）都提供了免费的体验机会。谷歌在这方面做得特别大方，它提供了价值 300 美元的一年免费服务。 策划注：阿里、腾讯、华为等国内云厂商同样有免费云服务试用产品。 云平台： 亚马逊领头，其他跟上 作为第一大云厂商，亚马逊在 2019 年可谓风生水起。凭借其丰富的产品组合，亚马逊将把它的优势延续到 2020 年。Canalys 发布的 2019 年第三季度报告指出，大型云厂商（AWS、Azure、GCP）占据 56% 的市场份额，其中 AWS 独享 32.6%。 其他云厂商也在努力缩短与 AWS 之间的差距。微软把主要目标转向了大型企业。最近，微软打败了亚马逊，从美国五角大楼拿到了一个 100 亿美元的大单子。这个单子将提升 Azure 的声誉，同时削弱 AWS

近几年 JS 社区创新和演化的速度是有目共睹的，几个月前比较时髦的技术很可能现在已经过时了。2016 已经过去，你有没有担心错过了什么重要的内容？在这篇调查报告中我们会为你解读社区的主流趋势。 我们将从数量上来分析哪些项目 2016 年获得比较多的关注，具体的做法是比较各项目 2016 年在 Github 上新增 star 的数量。 回顾 2015 年：React 无疑占据了统治地位，而 Redux 则在众多牛毛的 Flux 实现中脱颖而出。那么 2016 年哪些项目最受开发者关注呢？ 目录 最受欢迎项目 前端框架 Node.js 框架 React 项目模板 移动开发 编译工具 构建工具 测试框架 IDE 静态网站生成器 1. 最受欢迎项目 仔细观察 2016 年排名前 10 的项目，你就能对 WEB 社区的演化方向有个直观的把握，概括如下： 3 个 UI 框架：Vue.JS, React and Angular 2 1 个新的 Node.js 包管理器：Yarn 创建桌面应用的首选：Electron 创建 react 新项目的首选：Create React App 1 个移动开发框架：React Native 最受欢迎的 CSS 工具箱：Bootstrap 函数式编程风格的状态管理库：Redux 强大兼具灵活的绘图库：D3 上面这些项目覆盖的领域，无疑证明了 JS 的通用性

Vue Vue-cli Eslint 在vscode里代码自动格式化 HuaRongSAO 关注 2017.10.19 11:28* 字数 189 阅读 10396 评论 5 喜欢 12 vue eslint 代码自动格式化 vue-cli 代码风格为 JavaScript Standard Style 代码检查规范严格，一不小心就无法运行，使用eslint的autoFixOnSave可以在保存代码的时候自动格式化代码 VSCode拓展插件推荐（HTML、Node、Vue、React开发均适用） 建议阅读： vscode插件推荐 JavaScript Standard Style 代码风格规范 正文 eslint 自动格式化 配置环境: npm i -g eslint-plugin-vue #or npm i -S eslint-plugin-vue 创建项目跟路径下的文件：.eslintrc | .eslint.js //　添加插件 "plugins": [ "vue" ] 在你的vscode设置文件里添加： 1、在vscode添加 eslint 插件 2、在vscode添加 vetur 插件 3、修改你的setting.json // 添加进你的vscode的 setting.json "eslint.autoFixOnSave": true, "eslint.validate

说说React 一个组件，有自己的结构，有自己的逻辑，有自己的样式，会依赖一些资源，会依赖某些其他组件。比如日常写一个组件，比较常规的方式： 通过前端模板引擎定义结构 JS文件中写自己的逻辑 CSS中写组件的样式 通过RequireJS、SeaJS这样的库来解决模块之间的相互依赖 那么在React中是什么样子呢？ 结构和逻辑 在React的世界里，结构和逻辑交由JSX文件组织，React将模板内嵌到逻辑内部，实现了一个JS代码和HTML混合的JSX。 结构 在JSX文件中，可以直接通过React.createClass来定义组件： var CustomComponent = React.creatClass({ render: function(){ return (<div className="custom-component"></div>); } }); 通过这种方式可以很方便的定义一个组件，组件的结构定义在render函数中，但这并不是简单的模板引擎，我们可以通过js方便、直观的操控组件结构，比如我想给组件增加几个节点： var CustomComponent = React.creatClass({ render: function(){ var $nodes = ['h','e','l','l','o'].map(function(str){ return (

微博众筹的架构设计 导读：我们每一天都能感受到互联网金融的成长和进步，在 6 月 19 日，微博商业产品部联合天弘基金（余额宝），小米支付、还有创业公司付钱拉等金融技术团队策划了首届互联网金融系统沙龙，围绕在互联网金融过程中碰到核心技术架构、系统安全、数据一致性、业务开发模式等与业界进行分享及交流。本文是陈杰在本次沙龙的演讲，授权高可用架构首发。 陈杰，新浪微博资深系统架构师，毕业于清华大学化学系，从 2004 年开始做过测试、GIS 二次开发、游戏开发、搞过创业，2011 年底到新浪开始接触互联网，喜欢做程序员喜欢做的事。 互联网金融已经影响生活方方面面，我们可以拿着手机，不用银行卡、不用现金来体验新时代的衣食住行。互联网金融现在已经成为互联网巨头争相布局的一个领域，BAT、微博、小米都已经在发力金融。今年年初京东金融融资 66.5 亿人民币，4 月份微博金融发布微博众筹第一款产品。就在本月小米刚刚高调宣布进军民营银行，以获得中国银监会复批。 我今天讲的主题是微博众筹架构，我叫陈杰，2004 年清华化学系毕业，之后不小心进入 IT 这行。最开始做的是测试，后来慢慢接触一些 VB，做了两年的游戏开发，再后来跟朋友去创业，2011 年来到微博开始做互联网相关的一些事情。 本人有两个标签，第一我喜欢骑自行车，在创业之前那时候比较年轻，基本上每周会去两天香山骑车，另外一个标签是奶爸。

【查看原文】 小程序分为应用、页面和组件三个部分，所以小程序的生命周期涉及以下： 应用的生命周期 页面的生命周期 组件的声明周期 应用的生命周期对页面生命周期的影响 （1）应用的生命周期 App() 函数用来注册一个小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。 App() 必须在 app.js 中调用，必须调用且只能调用一次。 App({ onLaunch: function( options) { // 监听小程序初始化。小程序初始化完成时（全局只触发一次） }, onShow: function( options) { // 监听小程序显示。小程序启动，或从后台进入前台显示时 }, onHide: function( ) { // 监听小程序隐藏。小程序从前台进入后台时。 }, onError: function( msg) { console.log(msg) // 错误监听函数。小程序发生脚本错误，或者 api 调用失败时触发，会带上错误信息 }, onPageNotFound: function( res) { // 页面不存在监听函数。小程序要打开的页面不存在时触发，会带上页面信息回调该函数 }, globalData: 'I am global data' }) 前台、后台定义 ： 当用户点击左上角关闭，或者按了设备 Home 键离开微信