├── counter.js ├── git ├── index.md └── index.zh_CN.md ├── index.md ├── index.zh_CN.md └── strip-lang.go /counter.js: -------------------------------------------------------------------------------- 1 | /** 2 | * This is a function that calls the callback at a fixed interval. 3 | * 4 | * @param interval Time interval between each counter increment. 5 | * @param callback Pass the counter value to the callback at every interval. 6 | * @return A function to cancel the counter. 7 | */ 8 | function startCounter(interval,callback) { 9 | var i = 0; 10 | 11 | // Do you know what an anonymous function is? 12 | var timerID = setInterval(function() { 13 | i++; 14 | callback(i); 15 | },interval); 16 | 17 | 18 | // Do you understand how closure captures the timerID? 19 | var cancel = function() { 20 | clearInterval(timerID); 21 | }; 22 | 23 | // Do you know that closure/function can be a value? 24 | return cancel; 25 | } 26 | 27 | // Do you know what a callback function is? 28 | var cancel = startCounter(500,function(i) { 29 | console.log("currenet counter value:",i); 30 | }); 31 | 32 | // stop the counter after 5 seconds. 33 | setTimeout(cancel,5000); 34 | 35 | 36 | // Output 37 | // currenet counter value: 1 38 | // currenet counter value: 2 39 | // currenet counter value: 3 40 | // currenet counter value: 4 41 | // currenet counter value: 5 42 | // currenet counter value: 6 43 | // currenet counter value: 7 44 | // currenet counter value: 8 45 | // currenet counter value: 9 46 | -------------------------------------------------------------------------------- /git/index.md: -------------------------------------------------------------------------------- 1 | # Git Knowledge Checklist 2 | 3 | We are going use Git for version control. Even if you are just working by yourself, you should still use Git. The reasons are: 4 | 5 | + It helps you remember what you've done. 6 | + You don't have to worry about breaking things by making the wrong changes. Easy to rollback. 7 | + It's the easiest way to publish your code for others to see. 8 | + Keeps clean by deleting code that you don't use. Since they are in the history, you don't "lose" the code. 9 | 10 | If you don't have a GitHub account yet, go [sign up for GitHub](https://github.com/join). 11 | 12 | 13 | # Git 知识清单 14 | 15 | 我们会使用 Git 来进行版本控制。即使只是自己工作，你也应该使用 Git。原因： 16 | 17 | + 它帮助你记住你做了什么。 18 | + 你不需要担心因为错误的改动破坏了代码。回滚是非常简单的。 19 | + 这是对别人发布你的代码的最简单方式。 20 | + 通过删除你不用的代码来保持整洁。因为它们在修改历史中，你不会“丢失”这些代码。 21 | 22 | 如果你还没有一个 GitHub 账号，前往 [注册 GitHub](https://github.com/join)。 23 | 24 | 25 | ## Git Basics 26 | 27 | First, you'll need to know how to create or download an existing repository. 28 | 29 | + Can you use `git clone` to download a repository from GitHub? 30 | + Can you use `git init` to create a new repository? 31 | + What is the `.git` directory? 32 | 33 | [创建版本库](http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/0013743256916071d599b3aed534aaab22a0db6c4e07fd0000) 34 | 35 | 36 | ## Git 基础 37 | 38 | 首先，你需要知道如何去创建或者下载一个现有的仓库。 39 | 40 | + 你能用 `git clone` 下载 GitHub 上的一个仓库吗？ 41 | + 你能用 `git init` 创建一个新的仓库吗？ 42 | + `.git` 目录是什么？ 43 | 44 | [创建版本库](http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/0013743256916071d599b3aed534aaab22a0db6c4e07fd0000) 45 | 46 | 47 | Then you make changes to the repository by adding new files or editing old files. 48 | 49 | + Can you use `git diff` and `git status` to see what changes you've made? 50 | + What do `git add` and `git commit` do? 51 | + Can you use `checkout` to go to a commit? 52 | + Can you use `git rm` to remove a file from source control? 53 | + If you've broken something, do you know how to use `git reset` to rollback? 54 | 55 | [时光机穿梭](http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/0013743858312764dca7ad6d0754f76aa562e3789478044000) 56 | 57 | 58 | 然后通过添加新文件或者修改旧文件来做出改动。 59 | 60 | + 你能使用 `git diff` 和 `git status` 查看你做过什么修改么？ 61 | + `git add` 和 `git commit` 是做什么的？ 62 | + 你能使用 `checkout` 来切换到一次提交吗？ 63 | + 你能使用 `git rm` 来从源代码控制中移除一个文件吗？ 64 | 65 | [时光机穿梭](http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/0013743858312764dca7ad6d0754f76aa562e3789478044000) 66 | 67 | 68 | ## Remote Repositories 69 | 70 | You can publish your code on the Internet so people can see your code, and make changes to your code. 71 | 72 | + What is a remote branch? What's the difference between `master` and `origin/master`? 73 | + Can you add a remote repository using `git remote add`? 74 | + Can you use `git push` to publish your code to GitHub? 75 | + Can you use `git pull` to get new commits from a remote branch? 76 | 77 | [远程仓库](http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/001374385852170d9c7adf13c30429b9660d0eb689dd43a000) 78 | 79 | 80 | ## 远程仓库 81 | 82 | 你可以把你的代码发布到网络上，让人们可以看到你的代码，对你的代码做出改动。 83 | 84 | + 远程分支是什么？`master` 和 `origin/master` 之间的区别是什么？ 85 | + 你能用 `git remote add` 添加一个远程仓库吗？ 86 | + 你能用 `git push` 发布你的代码到 GitHub 吗？ 87 | + 你能用 `git pull` 从远程分支获取新的提交吗？ 88 | 89 | [远程仓库](http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/001374385852170d9c7adf13c30429b9660d0eb689dd43a000) 90 | 91 | 92 | ## Git Branching 93 | 94 | Although you can ALWAYS work on the `master` branch, it's often convenient to start new branches for each feature you do. This is especially helpful if you work in a team. 95 | 96 | + Can you use `git branch` to create a new branch? 97 | + Can you use `git checkout` to switch between branches? 98 | 99 | [Feature分支](http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/001376026233004c47f22a16d1f4fa289ce45f14bbc8f11000) 100 | 101 | 102 | ## Git 分支 103 | 尽管你可以**经常**在 `master` 分支工作，为每个你做的每个特性添加新的分支经常是非常方便的。如果你在一个团队中工作，这是非常有用的。 104 | 105 | + 你能使用 `git branch` 创建一个新的分支吗？ 106 | + 你能使用 `git checkout` 在分支间切换吗？ 107 | 108 | [Feature分支](http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/001376026233004c47f22a16d1f4fa289ce45f14bbc8f11000) 109 | 110 | 111 | ## 客户端 112 | 113 | Once you know the basics, you could try one of the Git desktop clients. 114 | 115 | + [SourceTree](https://www.sourcetreeapp.com/) 116 | + [Git Tower](http://www.git-tower.com/) 117 | 118 | For more complicated stuff, you'd need to go back to the command line. 119 | 120 | 121 | ## 客户端 122 | 123 | 只要你了解了这些基础知识，你可以尝试这些 Git 桌面客户端中的一个。 124 | 125 | + [SourceTree](https://www.sourcetreeapp.com/) 126 | + [Git Tower](http://www.git-tower.com/) 127 | 128 | 对于更复杂的东西，你需要回到命令行。 129 | -------------------------------------------------------------------------------- /git/index.zh_CN.md: -------------------------------------------------------------------------------- 1 | 2 | # Git 知识清单 3 | 4 | 我们会使用 Git 来进行版本控制。即使只是自己工作，你也应该使用 Git。原因： 5 | 6 | + 它帮助你记住你做了什么。 7 | + 你不需要担心因为错误的改动破坏了代码。回滚是非常简单的。 8 | + 这是对别人发布你的代码的最简单方式。 9 | + 通过删除你不用的代码来保持整洁。因为它们在修改历史中，你不会“丢失”这些代码。 10 | 11 | 如果你还没有一个 GitHub 账号，前往 [注册 GitHub](https://github.com/join)。 12 | 13 | ## Git 基础 14 | 15 | 首先，你需要知道如何去创建或者下载一个现有的仓库。 16 | 17 | + 你能用 `git clone` 下载 GitHub 上的一个仓库吗？ 18 | + 你能用 `git init` 创建一个新的仓库吗？ 19 | + `.git` 目录是什么？ 20 | 21 | [创建版本库](http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/0013743256916071d599b3aed534aaab22a0db6c4e07fd0000) 22 | 23 | 然后通过添加新文件或者修改旧文件来做出改动。 24 | 25 | + 你能使用 `git diff` 和 `git status` 查看你做过什么修改么？ 26 | + `git add` 和 `git commit` 是做什么的？ 27 | + 你能使用 `checkout` 来切换到一次提交吗？ 28 | + 你能使用 `git rm` 来从源代码控制中移除一个文件吗？ 29 | 30 | [时光机穿梭](http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/0013743858312764dca7ad6d0754f76aa562e3789478044000) 31 | 32 | ## 远程仓库 33 | 34 | 你可以把你的代码发布到网络上，让人们可以看到你的代码，对你的代码做出改动。 35 | 36 | + 远程分支是什么？`master` 和 `origin/master` 之间的区别是什么？ 37 | + 你能用 `git remote add` 添加一个远程仓库吗？ 38 | + 你能用 `git push` 发布你的代码到 GitHub 吗？ 39 | + 你能用 `git pull` 从远程分支获取新的提交吗？ 40 | 41 | [远程仓库](http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/001374385852170d9c7adf13c30429b9660d0eb689dd43a000) 42 | 43 | ## Git 分支 44 | 尽管你可以**经常**在 `master` 分支工作，为每个你做的每个特性添加新的分支经常是非常方便的。如果你在一个团队中工作，这是非常有用的。 45 | 46 | + 你能使用 `git branch` 创建一个新的分支吗？ 47 | + 你能使用 `git checkout` 在分支间切换吗？ 48 | 49 | [Feature分支](http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/001376026233004c47f22a16d1f4fa289ce45f14bbc8f11000) 50 | 51 | ## 客户端 52 | 53 | 只要你了解了这些基础知识，你可以尝试这些 Git 桌面客户端中的一个。 54 | 55 | + [SourceTree](https://www.sourcetreeapp.com/) 56 | + [Git Tower](http://www.git-tower.com/) 57 | 58 | 对于更复杂的东西，你需要回到命令行。 59 | -------------------------------------------------------------------------------- /index.md: -------------------------------------------------------------------------------- 1 | # Sike.io ReactNative Bootcamp Fundamentals 2 | 3 | To get ready for the React/ReactNative bootcamp, you don't need to know web development very well, but you do need to know a little bit about a lot of things. We prepared this checklist to help you learn web development fundamentals before we start the bootcamp. 4 | 5 | This checklist is a list of questions. If you see a question or a piece of code that you don't understand, read the learning resources we've linked to. If everything in this checklist is familiar to you, then you are ready for the bootcamp. 6 | 7 | + If you are new to web development, we recommend that you should spend as much time as you can learning JavaScript. 8 | + If you are a frontend developer, you should spend some time learning iOS fundamentals. 9 | 10 | 11 | 12 | # Sike.io ReactNative 训练营基础 13 | 14 | React/ReactNative 训练营接触面比较广。你不需要对 web 开发有很深的了解，但是你确需要对杂七杂八的事情都知道一些。在训练营之前，我们准备了一个清单来帮助你学习 web 开发基础。 15 | 16 | 这个清单枚举了一系列的技术问题。如果你看到不理解的问题或者代码，请阅读我们链接到的学习资源。如果这些清单里的技术问题对你来说都很熟悉，你就已经具备了训练营需要的知识。 17 | 18 | + 如果你刚接触 web 开发，我们建议你应该尽可能地多花时间学习 JavaScript。 19 | + 如果你是一位前端开发者，你应该花些时间学习 iOS 基础。 20 | 21 | 22 | 23 | # JavaScript 24 | 25 | Can you understand this piece of code? 26 | 27 | 28 | 29 | # JavaScript 30 | 31 | 你能理解这段代码吗？ 32 | 33 | 34 | 35 | ```js 36 | /** 37 | * This is a function that calls the callback at a fixed interval. 38 | * 39 | * @param interval Time interval between each counter increment. 40 | * @param callback Pass the counter value to the callback at every interval. 41 | * @return A function to cancel the counter. 42 | */ 43 | function startCounter(interval,callback) { 44 | var i = 0; 45 | 46 | // Do you know what an anonymous function is? 47 | var timerID = setInterval(function() { 48 | i++; 49 | callback(i); 50 | },interval); 51 | 52 | 53 | // Do you know that `cancel` is a closure that captures the timerID? 54 | var cancel = function() { 55 | clearInterval(timerID); 56 | }; 57 | 58 | // Do you know that closure/function is a value? 59 | return cancel; 60 | } 61 | 62 | // Do you know what a callback function is? 63 | var cancel = startCounter(500,function(i) { 64 | console.log("current counter value:",i); 65 | }); 66 | 67 | // stop the counter after 5 seconds. 68 | setTimeout(cancel,5000); 69 | 70 | 71 | // Output 72 | // current counter value: 1 73 | // current counter value: 2 74 | // current counter value: 3 75 | // current counter value: 4 76 | // current counter value: 5 77 | // current counter value: 6 78 | // current counter value: 7 79 | // current counter value: 8 80 | // current counter value: 9 81 | 82 | ``` 83 | 84 | 85 | 86 | ```js 87 | /** 88 | * 这是一个函数，它在固定间隔调用回调函数。 89 | * 90 | * @param interval 在每次计数器增长之间的时间间隔。 91 | * @param callback 在每个间隔对回调函数传递计数器的值。 92 | * @return 一个可以取消计数器的函数。 93 | */ 94 | function startCounter(interval,callback) { 95 | var i = 0; 96 | 97 | // 你知道匿名函数是什么吗？ 98 | var timerID = setInterval(function() { 99 | i++; 100 | callback(i); 101 | },interval); 102 | 103 | 104 | // 你知道 `cancel` 是一个闭包，它捕获了 timeID 吗？ 105 | var cancel = function() { 106 | clearInterval(timerID); 107 | }; 108 | 109 | // 你知道闭包/函数是一个值吗？ 110 | return cancel; 111 | } 112 | 113 | // 你知道什么是回调函数吗？ 114 | var cancel = startCounter(500,function(i) { 115 | console.log("当前计数器的值：",i); 116 | }); 117 | 118 | // 5 秒后停止计数器 119 | setTimeout(cancel,5000); 120 | 121 | 122 | // 输出 123 | // 当前计数器的值：1 124 | // 当前计数器的值：2 125 | // 当前计数器的值：3 126 | // 当前计数器的值：4 127 | // 当前计数器的值：5 128 | // 当前计数器的值：6 129 | // 当前计数器的值：7 130 | // 当前计数器的值：8 131 | // 当前计数器的值：9 132 | 133 | ``` 134 | 135 | 136 | 137 | If you are not familiar with JavaScript syntax, read: 138 | 139 | + [快速入门](http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143449917624134f5c4695b524e81a581ab5a222b05ec000) 140 | + [函数定义和调用](http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143449926746982f181557d9b423f819e89709feabdb4000) 141 | 142 | If you are not familiar with closure and anonymous function, read: 143 | 144 | + [闭包](http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143449934543461c9d5dfeeb848f5b72bd012e1113d15000) 145 | + [变量作用域](http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014344993159773a464f34e1724700a6d5dd9e235ceb7c000) 146 | 147 | 148 | 149 | 如果你对 JavaScript 语法不熟悉，阅读： 150 | 151 | + [快速入门](http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143449917624134f5c4695b524e81a581ab5a222b05ec000) 152 | + [函数定义和调用](http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143449926746982f181557d9b423f819e89709feabdb4000) 153 | 154 | 如果你对闭包和匿名函数不熟悉，阅读： 155 | 156 | + [闭包](http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143449934543461c9d5dfeeb848f5b72bd012e1113d15000) 157 | + [变量作用域](http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014344993159773a464f34e1724700a6d5dd9e235ceb7c000) 158 | 159 | 160 | 161 | ### Objects in JavaScript 162 | 163 | Can you understand this piece of code? 164 | 165 | 166 | 167 | ### JavaScript 中的对象 168 | 169 | 你能理解这段代码吗？ 170 | 171 | 172 | 173 | ```js 174 | // Person is a constructor 175 | function Person(name) { 176 | this.name; 177 | } 178 | 179 | // Every instance of Person would have the `sayHello` method. 180 | Person.prototype.sayHello = function() { 181 | console.log("hello, my name is " + this.name); 182 | } 183 | 184 | // Create an instance of Person using the Person constructor. 185 | var person = new Person(); 186 | 187 | // Calls person's method. 188 | person.sayHello(); 189 | ``` 190 | 191 | 192 | 193 | ```js 194 | // Person 是一个构造函数 195 | function Person(name) { 196 | this.name; 197 | } 198 | 199 | // 每个 Person 实例会有 `sayHello` 方法。 200 | Person.prototype.sayHello = function() { 201 | console.log("你好，我的名字是 " + this.name); 202 | } 203 | 204 | // 使用 Person 构造函数创建一个 Person 实例。 205 | var person = new Person(); 206 | 207 | // 调用 person 的方法。 208 | person.sayHello(); 209 | ``` 210 | 211 | 212 | 213 | + [方法](http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014345005399057070809cfaa347dfb7207900cfd116fb000) 214 | + [创建对象](http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014344997235247b53be560ab041a7b10360a567422a78000) 215 | + [原型继承](http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014344997013405abfb7f0e1904a04ba6898a384b1e925000) 216 | 217 | 218 | 219 | + [方法](http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014345005399057070809cfaa347dfb7207900cfd116fb000) 220 | + [创建对象](http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014344997235247b53be560ab041a7b10360a567422a78000) 221 | + [原型继承](http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014344997013405abfb7f0e1904a04ba6898a384b1e925000) 222 | 223 | 224 | 225 | 226 | ## CSS 227 | 228 | + What's the box model? 229 | + How do you set margin, padding, width and height? 230 | 231 | [CSS 框模型概述](http://www.w3school.com.cn/css/css_boxmodel.asp) 232 | 233 | [盒子模型](http://zh.learnlayout.com/box-model.html) 234 | 235 | + What's the difference between `content-box` and `border-box`? 236 | 237 | [box-sizing属性](http://sunyuhui.com/2015/03/30/box-sizing/) 238 | 239 | 240 | 241 | ## CSS 242 | 243 | + 什么是盒模型？ 244 | + 你如何设置 margin，padding，width 和 height？ 245 | 246 | [CSS 框模型概述](http://www.w3school.com.cn/css/css_boxmodel.asp) 247 | 248 | [盒模型](http://zh.learnlayout.com/box-model.html) 249 | 250 | + `content-box` 和 `border-box` 之间的区别是什么？ 251 | 252 | [box-sizing属性](http://sunyuhui.com/2015/03/30/box-sizing/) 253 | 254 | 255 | 256 | ## HTML 257 | 258 | + What's the relationship between DOM and HTML? 259 | + Do you know how to use the DOM in JavaScript? 260 | 261 | Can you understand the following code? 262 | 263 | 264 | 265 | ## HTML 266 | 267 | + DOM 和 HTML 的关系是什么？ 268 | + 你知道如何在 JavaScript 中使用 DOM 吗？ 269 | 270 | 你能理解下面的代码吗？ 271 | 272 | 273 | 274 | ```html 275 |
276 | 277 | 288 | ``` 289 | 290 | 291 | 292 | ```html 293 |
294 | 295 | 306 | ``` 307 | 308 | 309 | 310 | See Demo: http://codepen.io/hayeah/pen/VvLyrp 311 | 312 | 313 | + [DOM概述](https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model/Introduction) 314 | + [操作DOM](http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499851683f7f8d6b7717343248a75d5e7f930def4000) 315 | 316 | 317 | 318 | 查看演示： http://codepen.io/hayeah/pen/VvLyrp 319 | 320 | 321 | + [DOM概述](https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model/Introduction) 322 | + [操作DOM](http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499851683f7f8d6b7717343248a75d5e7f930def4000) 323 | 324 | 325 | 326 | # Git 327 | 328 | If you are not familiar with Git, see: [Git Knowledge Checklist](git/index.md) 329 | 330 | 331 | 332 | # Git 333 | 334 | 如果你对 Git 不熟悉，阅读： [Git Knowledge Checklist](git/index.zh_CN.md) 335 | 336 | 337 | 338 | # iOS 339 | 340 | Your goal is to build a simple app in Xcode. First, learn the Swift basics: 341 | 342 | + [Swift 入门教程 - Part 1](http://www.raywenderlich.com/74438/swift-tutorial-a-quick-start) 343 | 344 | Then learn how to build a simple UI: 345 | 346 | + [Swift 入门教程 - Part 2](http://www.raywenderlich.com/74904/swift-tutorial-part-2-simple-ios-app) 347 | 348 | The important ideas you need to know are: 349 | 350 | 1. UITextField, UILabel, UISlider are subclasses of UIView. They are the native UI components in iOS. They are connected to the controller as `@IBOutlet`. 351 | 2. When the user touches a component (a button, or a slider), the corresponding `@IBAction` function in the ViewController would be called. 352 | 3. The ViewController sets the properties of UIView objects to update the UI. 353 | 354 | 355 | 356 | # iOS 357 | 358 | 你的目标是在 Xcode 中开发一个简单的 app。首先, 学习 Swift 基础： 359 | 360 | + [Swift 入门教程 - Part 1](http://www.raywenderlich.com/74438/swift-tutorial-a-quick-start) 361 | 362 | 然后学习如何构建简单的 UI： 363 | 364 | + [Swift 入门教程 - Part 2](http://www.raywenderlich.com/74904/swift-tutorial-part-2-simple-ios-app) 365 | 366 | 你需要知道的重要的知识点： 367 | 368 | 1. UITextField， UILabel， UISlider 是 UIView 的子类。他们是 iOS 中的原生 UI 组件。它们通过 `@IBOutlet` 连接到 ViewController (控制器)。 369 | 2. 当用户触摸了控件，比如一个按钮，ViewController 中对应的 `@IBAction` 函数就会被调用。 370 | 3. ViewController 设置 UIView 对象的属性来更新 UI。 371 | 372 | Xcode 百度盘镜像：https://github.com/iBcker/adcdownload 373 | -------------------------------------------------------------------------------- /index.zh_CN.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Sike.io ReactNative 训练营基础 4 | 5 | React/ReactNative 训练营接触面比较广。你不需要对 web 开发有很深的了解，但是你确需要对杂七杂八的事情都知道一些。在训练营之前，我们准备了一个清单来帮助你学习 web 开发基础。 6 | 7 | 这个清单枚举了一系列的技术问题。如果你看到不理解的问题或者代码，请阅读我们链接到的学习资源。如果这些清单里的技术问题对你来说都很熟悉，你就已经具备了训练营需要的知识。 8 | 9 | + 如果你刚接触 web 开发，我们建议你应该尽可能地多花时间学习 JavaScript。 10 | + 如果你是一位前端开发者，你应该花些时间学习 iOS 基础。 11 | 12 | 13 | 14 | # JavaScript 15 | 16 | 你能理解这段代码吗？ 17 | 18 | 19 | 20 | ```js 21 | /** 22 | * 这是一个函数，它在固定间隔调用回调函数。 23 | * 24 | * @param interval 在每次计数器增长之间的时间间隔。 25 | * @param callback 在每个间隔对回调函数传递计数器的值。 26 | * @return 一个可以取消计数器的函数。 27 | */ 28 | function startCounter(interval,callback) { 29 | var i = 0; 30 | 31 | // 你知道匿名函数是什么吗？ 32 | var timerID = setInterval(function() { 33 | i++; 34 | callback(i); 35 | },interval); 36 | 37 | 38 | // 你知道 `cancel` 是一个闭包，它捕获了 timeID 吗？ 39 | var cancel = function() { 40 | clearInterval(timerID); 41 | }; 42 | 43 | // 你知道闭包/函数是一个值吗？ 44 | return cancel; 45 | } 46 | 47 | // 你知道什么是回调函数吗？ 48 | var cancel = startCounter(500,function(i) { 49 | console.log("当前计数器的值：",i); 50 | }); 51 | 52 | // 5 秒后停止计数器 53 | setTimeout(cancel,5000); 54 | 55 | 56 | // 输出 57 | // 当前计数器的值：1 58 | // 当前计数器的值：2 59 | // 当前计数器的值：3 60 | // 当前计数器的值：4 61 | // 当前计数器的值：5 62 | // 当前计数器的值：6 63 | // 当前计数器的值：7 64 | // 当前计数器的值：8 65 | // 当前计数器的值：9 66 | 67 | ``` 68 | 69 | 70 | 71 | 如果你对 JavaScript 语法不熟悉，阅读： 72 | 73 | + [快速入门](http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143449917624134f5c4695b524e81a581ab5a222b05ec000) 74 | + [函数定义和调用](http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143449926746982f181557d9b423f819e89709feabdb4000) 75 | 76 | 如果你对闭包和匿名函数不熟悉，阅读： 77 | 78 | + [闭包](http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143449934543461c9d5dfeeb848f5b72bd012e1113d15000) 79 | + [变量作用域](http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014344993159773a464f34e1724700a6d5dd9e235ceb7c000) 80 | 81 | 82 | 83 | ### JavaScript 中的对象 84 | 85 | 你能理解这段代码吗？ 86 | 87 | 88 | 89 | ```js 90 | // Person 是一个构造函数 91 | function Person(name) { 92 | this.name; 93 | } 94 | 95 | // 每个 Person 实例会有 `sayHello` 方法。 96 | Person.prototype.sayHello = function() { 97 | console.log("你好，我的名字是 " + this.name); 98 | } 99 | 100 | // 使用 Person 构造函数创建一个 Person 实例。 101 | var person = new Person(); 102 | 103 | // 调用 person 的方法。 104 | person.sayHello(); 105 | ``` 106 | 107 | 108 | 109 | + [方法](http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014345005399057070809cfaa347dfb7207900cfd116fb000) 110 | + [创建对象](http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014344997235247b53be560ab041a7b10360a567422a78000) 111 | + [原型继承](http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014344997013405abfb7f0e1904a04ba6898a384b1e925000) 112 | 113 | 114 | 115 | ## CSS 116 | 117 | + 什么是盒模型？ 118 | + 你如何设置 margin，padding，width 和 height？ 119 | 120 | [CSS 框模型概述](http://www.w3school.com.cn/css/css_boxmodel.asp) 121 | 122 | [盒模型](http://zh.learnlayout.com/box-model.html) 123 | 124 | + `content-box` 和 `border-box` 之间的区别是什么？ 125 | 126 | [box-sizing属性](http://sunyuhui.com/2015/03/30/box-sizing/) 127 | 128 | 129 | 130 | ## HTML 131 | 132 | + DOM 和 HTML 的关系是什么？ 133 | + 你知道如何在 JavaScript 中使用 DOM 吗？ 134 | 135 | 你能理解下面的代码吗？ 136 | 137 | 138 | 139 | ```html 140 |
141 | 142 | 153 | ``` 154 | 155 | 156 | 157 | 查看演示： http://codepen.io/hayeah/pen/VvLyrp 158 | 159 | 160 | + [DOM概述](https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model/Introduction) 161 | + [操作DOM](http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499851683f7f8d6b7717343248a75d5e7f930def4000) 162 | 163 | 164 | 165 | # Git 166 | 167 | 如果你对 Git 不熟悉，阅读： [Git Knowledge Checklist](git/index.zh_CN.md) 168 | 169 | 170 | 171 | # iOS 172 | 173 | 你的目标是在 Xcode 中开发一个简单的 app。首先, 学习 Swift 基础： 174 | 175 | + [Swift 入门教程 - Part 1](http://www.raywenderlich.com/74438/swift-tutorial-a-quick-start) 176 | 177 | 然后学习如何构建简单的 UI： 178 | 179 | + [Swift 入门教程 - Part 2](http://www.raywenderlich.com/74904/swift-tutorial-part-2-simple-ios-app) 180 | 181 | 你需要知道的重要的知识点： 182 | 183 | 1. UITextField， UILabel， UISlider 是 UIView 的子类。他们是 iOS 中的原生 UI 组件。它们通过 `@IBOutlet` 连接到 ViewController (控制器)。 184 | 2. 当用户触摸了控件，比如一个按钮，ViewController 中对应的 `@IBAction` 函数就会被调用。 185 | 3. ViewController 设置 UIView 对象的属性来更新 UI。 186 | 187 | Xcode 百度盘镜像：https://github.com/iBcker/adcdownload 188 | -------------------------------------------------------------------------------- /strip-lang.go: -------------------------------------------------------------------------------- 1 | // Keep only what's between ... 2 | // go run strip-lang.go index{,.zh_CN}.md 3 | package main 4 | 5 | import ( 6 | "io" 7 | "io/ioutil" 8 | "log" 9 | "os" 10 | "regexp" 11 | ) 12 | 13 | var ( 14 | startTag = "" 15 | endTag = "" 16 | startTagRE = regexp.MustCompile(startTag) 17 | endTagRE = regexp.MustCompile(endTag) 18 | ) 19 | 20 | func main() { 21 | inputFileName := os.Args[1] 22 | 23 | input, err := os.Open(inputFileName) 24 | if err != nil { 25 | log.Fatal(err) 26 | } 27 | 28 | var output io.Writer 29 | if len(os.Args) >= 3 { 30 | outputFileName := os.Args[2] 31 | output, err = os.Create(outputFileName) 32 | if err != nil { 33 | log.Fatal(err) 34 | } 35 | } else { 36 | output = os.Stdout 37 | } 38 | 39 | content, err := ioutil.ReadAll(input) 40 | if err != nil { 41 | log.Fatal(err) 42 | } 43 | 44 | // fmt.Print(string(content)) 45 | 46 | for { 47 | startLoc := startTagRE.FindIndex(content) 48 | if startLoc == nil { 49 | break 50 | } 51 | 52 | sectionStart := startLoc[1] 53 | content = content[sectionStart:] 54 | 55 | endLoc := endTagRE.FindIndex(content) 56 | if endLoc == nil { 57 | log.Fatalln("no end tag found:", endTag) 58 | } 59 | 60 | sectionEnd := endLoc[0] 61 | // log.Println("sectionStart", startLoc) 62 | // log.Println("sectionEnd", endLoc) 63 | 64 | chunk := content[0:sectionEnd] 65 | output.Write(chunk) 66 | 67 | content = content[endLoc[1]:] 68 | } 69 | 70 | } 71 | --------------------------------------------------------------------------------