孙同生的博客

为美好的世界献上祝福

发表于 更新于 分类于 本文字数： 411 阅读时长 ≈ 1 分钟

来京东一年多了，从预想的ipad业务到RN业务，再到现在的iphone业务加RN业务。学习了很多RN、前端相关的知识也遗忘了部分iOS的相关逻辑。
现在打算重新回顾学习一下iOS,做一个系列帮助自己重学iOS,带自己还有你重新认识iOS。

在开始画知识树大纲之前，我想先来为这个系列定下一个小规范。本身我们可以网上找到很多参考资料，比如官方开发者文档这样的参考手册。苹果的参考手册做的是很好好全面，但这并不是我们所期望学习的，我想尽量和你一起打造一个iOS知识框架，再把主要的知识点做个遍历，其中主要探讨原理和背景相关的知识点。这样就算遇到了不认识的API知识点，也可以很容易地查阅开发者文档来解决。

阅读全文 »

发表于 更新于 分类于 ， 本文字数： 2.4k 阅读时长 ≈ 2 分钟

最近想开个可视化的坑，就看到了 D3 , 别问为什么不选择echarts、Highcharts之类的，老夫写代码就看star数最多的……
D3 的全称是（Data-Driven Documents）, D3 将生成可视化的复杂步骤精简到了几个简单的函数，你只需要输入几个简单的数据，就能够转换为各种绚丽的图形。
咋一看d3首页 被其凌乱的文档折服了 差点就完成了就入门到放弃，于是做个学习过程记录，帮助一起入门d3的大家^_^

阅读全文 »

发表于 更新于 分类于 ， 本文字数： 9.3k 阅读时长 ≈ 8 分钟

之前在 create-react-app教程-使用篇 中介绍了create-react-app的基本使用，
为了便于理解一个脚手架脚本是如何运作的，现在来看一下 create-react-app v1.5.2 的源码

入口index.js

create-react-app 一般会作为全局命令，因为便于更新等原因，create-react-app 只会做初始化仓库 执行当前版本命令等操作。

找到 create-react-app 入口index文件：

阅读全文 »

发表于 分类于 ， 本文字数： 27k 阅读时长 ≈ 24 分钟

原文地址： How Browsers Work: Behind the scenes of modern web browsers

序言

这是一篇全面介绍 WebKit 和 Gecko 内部操作的入门文章，是以色列开发人员塔利·加希尔大量研究的成果。在过去的几年中，她查阅了所有公开发布的关于浏览器内部机制的数据（请参见资源），并花了很多时间来研读网络浏览器的源代码。她写道：

在 IE 占据 90% 市场份额的年代，我们除了把浏览器当成一个“黑箱”，什么也做不了。但是现在，开放源代码的浏览器拥有了过半的市场份额，因此，是时候来揭开神秘的面纱，一探网络浏览器的内幕了。呃，里面只有数以百万行计的 C++ 代码…

塔利在她的网站上公布了自己的研究成果，但是我们觉得它值得让更多的人来了解，所以我们在此重新整理并公布。

作为一名网络开发人员，学习浏览器的内部工作原理将有助于您作出更明智的决策，并理解那些最佳开发实践的个中缘由。尽管这是一篇相当长的文档，但是我们建议您花些时间来仔细阅读；读完之后，您肯定会觉得所费不虚。

保罗·爱丽诗 (Paul Irish)，Chrome 浏览器开发人员事务部

简介

网络浏览器很可能是使用最广的软件。在这篇入门文章中，我将会介绍它们的幕后工作原理。我们会了解到，从您在地址栏输入 google.com 直到您在浏览器屏幕上看到 Google 首页的整个过程中都发生了些什么。

阅读全文 »

发表于 更新于 分类于 ， 本文字数： 5.8k 阅读时长 ≈ 5 分钟

大家都知道js十分依赖浏览器（或Node环境），不同浏览器对js的支持不尽相同。现如今ECMAScrip标准的更新已经到了一年一次的节奏，
Babel 就是为了解决这个问题 ，它可以将使用新标准的JavaScript代码转换为浏览器支持可以运行的JavsScript(ES5)代码。

1
2
3
4
5
6
7
8
//例如babel将这段代码
[1, 2, 3].map(n => n ** 2);
//转换为：
"use strict";

[1, 2, 3].map(function (n) {
  return n + 1;
});

在webpack中配置Babel

假设在react项目配置webpack:

一、安装npm包：

1
npm install --save-dev babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-preset-react webpack-preset-babel-stage-0

二、在webpack配置文件中添加规则：

1
2
3
4
5
module: {
  rules: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}

**三、 在项目根目录创建名为.babelrc的文件，这是Babel的配置文件 **

在配置文件中安装插件（plugins）或预设（presets，也就是一组插件）来指示 Babel 去做什么事情。在下面配置中：

babel-preset-es2015 打包了 es6 的特性；
babel-preset-stage-0 打包处于 strawman 阶段的语法；
babel-preset-react 打包react全家桶语法；

Babel 几乎可以编译所有时新的 JavaScript 语法，但对于 APIs 来说却并非如此。例如： Promise、Set、Map 等新增对象，Object.assign、Object.entries等静态方法，babel-plugin-transform-runtime为了达成使用这些新API。

1
2
3
4
5
//.babelrc内容
{
	"presets": ["es2015", "stage-0", "react"],
	"plugins": ["transform-runtime"]
}

Babel模块

阅读全文 »
0%