美文网首页Des's iOS 技能学习iOS资料
iOS全棧之路,再不跟上你就low了

iOS全棧之路,再不跟上你就low了

作者: 子祖 | 来源:发表于2016-09-19 17:03 被阅读6227次

    其实iOS早就已经不火了,现在随便发个招聘每天都有几百份简历,所以我打算通过这个教程让某部分人走上救赎之路,这次我主要想分享通过JS中的React Native和Node.js帮大家打通前后端,保持竞争力,只要你认真跟着学习,10天可以让你有一个质的改变,下面先发一波基础教程,还是老规矩,代码不要敲,复制到sublime或者webstorm里面,直接看打印就好,反正谁敲谁sb,太打消积极性了,后面直接上项目,如果有人零基础的,也可以留言,我想办法补一些更基础的教程

    如果还有人不懂什么是sublime和webstorm可以自行百度去下载一下


    JS的基础语法

    语法是要来查阅和看的,千万别去敲那么傻,看到不懂再回来看到
    下面的语法都是把一本书厚的东西精炼出来的,都是精华,多看!多思考!

    1.打印
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--页内JS-->
        <script>
            // 输出 --> 弹窗输出 阻断式操作
            alert("Hello World!");
            // NSLog();
            console.log('你好,世界');
            console.log('你好,世界');
            console.log('你好,世界');
        </script>
    </head>
    <body>
    
    <!--
       JS中字符串可以用'' 也可以用"", 建议用''
    -->
    
    <button onclick="alert('点你玩!')">点我啊</button>
    
    </body>
    </html>
    
    2.基本语法
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            // 1. 基本的数据类型  let 常量  var 变量
            var name = 'jack', // string
                name2 = 'rose'; // string
            var age = 20; // number
            var money = 10.999; // number
            var result = true; // boolean
            var score = undefined; // 未定义 undefined
            var numbers = null; // object
    
            // 1.1 输出
    //        console.log(name, name2, age, money, result, score, numbers);
    
            // 1.2 判断真实的类型 --> typeof
    //        console.log(typeof name,typeof name2,typeof age,typeof money,typeof result,typeof score,typeof numbers);
    
            // 1.3 运算 +-*/ % ...  不同类型之间的运算
            var newName = name + '-' + name2 + '在一起了!';
    //        console.log(newName);
    
            // JS中运算都是从左到右, 任何类型只要与String类型拼接,都会被强制转为String类型
            var str1 = 10 + '10' + 10;  // 101010
            var str2 = (10 + 10) + '10'; // 2010
            var str3 = ('10' + '10') + '10'; // 101010
    //        console.log(str1, str2, str3);
    
            // 2. JS中的对象 {}字典  []数组
            // 2.1 数组 new Array()
            var arr = [10, -10, name, name2, result, [21, '哈哈哈']];
    //        console.log(arr, typeof arr);
    
            // 2.2 获取数组的长度
    //        console.log(arr.length);
    
            // 2.3 取值
    //        console.log(arr[4]);
    
            // 2.4 遍历 $.each()
    
    //        for(var i=0; i<arr.length; i++){
    //            console.log(arr[i]);
    //        }
    
    //         for(var i in arr){
    //             console.log(i, arr[i]);
    //         }
    
            // 2.5 数组的其他方法和属性
    
            // 添加和删除  pop push
            arr.pop(); // 删除最后一个元素
            arr.push(‘学习React Native');
    
    //        for(var i in arr){
    //            console.log(i, arr[i]);
    //        }
    
            // 3.类库 Math
            var number = [1,23,4,56,8,9];
    //        var minValue = Math.min(2,3,4,5,6,7);
            var minValue = Math.min.apply(null, number);//参数1:是你调用这个函数的对象,传null也是可以的 参数2:数组
            var maxValue = Math.max.apply(null, number);
            console.log(minValue, maxValue);
    
        </script>
    </head>
    <body>
    
    </body>
    </html>
    
    3.函数
    <!DOCTYPE html>
    <html lang="en">
    <!--
       function  函数名(参数列表){
          函数体
          return 返回值
       }
    -->
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
             // 执行一个匿名的闭包, 一进来就会调用
            (function () {
                // 1. 常规的函数
                // 1.1 运算
                function sum(num1, num2) {
                    return num1 + num2;
                }
                // 1.2 调用
                var result = sum(10, 20);
    //        console.log(result);
    
                // 2. 复杂的函数
                function sum1(numbers) {
                    console.log(typeof numbers);
                    // 2.1 过滤
                    if(typeof numbers !== 'object') return;
                    // 2.2 运算
    //            alert(0);
                    var add = 0;
                    for(var i=0; i<numbers.length; i++){
                        add += numbers[i];
                    }
                    return add;
                }
                // 2.2 调用
                var result1 = sum1([1,2,3,4,5]);
    //        console.log(result1);
    
                // 3. 函数内部有内置数组  arguments
                function sum2() {
                    // 3.1 过滤
    //            if(typeof numbers !== 'object') return;
                    // 3.2 运算
                    var add = 0;
                    for(var i=0; i<arguments.length; i++){
                        add += arguments[i];
                    }
                    return add;
                }
    
                // 3.3 调用
                var result2 = sum2(2,2,2,2,2,2,2,2, '张三');
    //        console.log(result2);
    
                // 4. 匿名函数 --> 没有函数名
                var result3 = function () {
                    console.log('我是一个匿名函数');
                };
                // 4.1 调用
                result3();
    
                // 5.闭包
            })();
        </script>
    </head>
    <body>
    
    </body>
    </html>
    
    4.对象
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
             // this:
             // this所在的函数属于哪个对象, this就代表这个对象
    
            // 1. 产生一个对象 {} []  ---> 实例化一个对象  (属性 和 方法) --> 数据的传递
            var dog = {
                // 属性
                name: 'wangCai',
                age: 16,
                height: 1.55,
                dogFriends:['aHuang', 'lily'],
    
                // 方法(函数)
                eat: function (someThing) {
                    console.log(this.name + '吃' + someThing.food);
                },
    
                run: function (someWhere) {
                    console.log(this.name + '跑' + someWhere);
                }
            };
    
            // 1.1 打印
    //        console.log(dog);
    
            // 1.2 调用
            dog.name = '黄黄'; // set
            console.log('这条狗叫:'+ dog.name + ',年龄:'+dog.age);
    
            dog.eat({'food': '骨头'});
            dog.run('公园');
        </script>
    </head>
    <body>
    
    </body>
    </html>
    
    5.面向对象
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            // 构造函数 ---> alloc  init
            function Dog() {
               console.log('我是不是构造函数呢?');
            }
    
            // 普通的调用 --> 不是
            Dog();
    
            // 升级成为构造函数 --》   new
            var dog1 = new Dog();
            var dog2 = new Dog();
    
            console.log(dog1, dog2);
        </script>
    </head>
    <body>
    
    </body>
    </html>
    
    6.验证是否同一对象
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/person.js"></script>
        <script>
            // 产生一个对象
            var p1 = new Person();
            var p2 = new Person();
    
            p1.name = '张三';
            p1.age = 20;
            p1.eat('花生');
    
            p2.name = '李四';
            p2.age = 1;
            p2.eat('奶');
    
            console.log(p1, p2);
        </script>
    </head>
    <body>
    
    </body>
    </html>
    
    7.内置对象window
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>window</title>
        <script>
            /*
               window(内置对象)作用:
               1. 所有的"全局"变量都是window的属性, 所有的"全局"函数都是window的方法
             */
    
              // 全局变量
              var name = '张三';
    //          console.log(name);
    //          console.log('----'+ window.name);
    
              // 全局的函数
              function Dog() {
                  // 局部的变量
                  var age = 18;
                  console.log(window.age);
              }
              Dog();
              window.Dog();
    
              alert('换界面');
    //          window.location.href = 'http://www.baidu.com';
    
              function Test() {
                  console.log(this);
              }
    
              Test(); // window
              new Test(); // Test{}
    
            /*
             window(内置对象)作用:
                动态的跳转,(OC和JS交互,原理都是在这个)
             */
    
              function changeToBaidu() {
    //              alert(0);
                  window.location.href = 'http://www.baidu.com';
              }
    
        </script>
    </head>
    <body>
        <button onclick="changeToBaidu()”>Baidu</button>
    </body>
    </html>
    
    8.内置对象document
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>document</title>
        <script>
            /*
             document作用:
                 1.可以动态的获取当前页面中所有的标签
                 2.对拿到的标签进行CRUD(增删改查)操作
             */
    
             // 写入页面
             document.write('Hello World!');
             document.write('<input type="date">');
        </script>
    </head>
    <body>
    
    </body>
    </html>
    

    我是子祖,来了就点个赞再走,喜欢就关注我,我还会陆续更新更多项目让大家去练手,或者你有什么语言想了解的都可以和我聊聊!

    相关文章

      网友评论

      • 冷洪林:欢迎加入成都React-Native交流群 群号:647393547
      • 丶丶夏天:闭包那里怎么没了
      • Theshy:一口气看了好几篇。。坐等更新~
        子祖:@Theshy 更新了
        子祖:@Theshy 已经跟新了,有问题可以问题,建议都敲,后面会突然加大难度
      • 任兴金:跟
        子祖:@R_Alex 更新了
      • bc3d3e66fba3:很不错,期待以后更多!
        子祖:@Super洁 更新了
      • e763f1ec1cfe:跟10天
        e763f1ec1cfe:@子祖 在看
        子祖:@Viterbi_iOS 更新了
        子祖:@Viterbi_iOS 已经跟新,有问题可以问
      • 北你妹的风:最近的确有ios日薄西山的感觉。所以想多学一些东西保持竞争力,看到标题点进来,想看看ios全栈是什么东西,原来就是学js,我只能呵呵。
        子祖:@北你妹的风 更新了
        子祖:@北你妹的风 亲,请认真看内容,不是写给你一个人看的,包含基础等内容
      • 尘埃_落定:其实就是js,曾经看过一点。但是好多人用jquery,,,写法又不一样了 :stuck_out_tongue_winking_eye:
      • iceman_dev:介绍和这么点JavaScript内容就说全栈开发,我认为不够,
        子祖:@iceman_dev 更新了
        iceman_dev:@子祖 what?
        子祖:@iceman_dev 这不是废话吗?
      • lesmiserables0:js启蒙者
        lesmiserables0:@子祖 共同学习,共同进步
        子祖:@lesmiserables0 更新了
      • action爱生活:楼主快更,mark了
        子祖:@action爱生活 已经更新了
      • 行者栖处:mark!多谢分享
      • 每每相遇如初见:学习,,这个是零基础开始的吗?我是Android,也可以跟着学的吧,
        每每相遇如初见:@子祖 明白明白,那我也跟着学学
        子祖:@每每相遇如初见 h5和css不会讲的
      • scyworld:iOS确实饱和,努力提升才是必要的,当然技多不压身
        子祖:@Sauchye 方向很多种,自己得多学
      • dd32a6df6ac5:本人转行做iOS,内心好苦
      • 小黑Swift:大家排好队,记住代码不要敲:smile:
      • 刘望舒:多学没坏处,就怕啥都学啥都不精,到头来一场空。
        子祖:@刘望舒 这些话只能出自刚入门的人,开发三年谁不是几门扳手的呢,而且js是很主流的语言,可以和各种语言交互,而且也是热门,哪怕不学也应该多留意
      • Shawn_Wang:这点击量是看标题吸引进来的吧 , 呵呵
        子祖:@菲拉兔 更新了
        清無:@Shawn_Wang 可不是么。。。说是全栈,来了发现是JS的小白教程。。。呵呵了
      • 老虎Alex:3年iOS开发经验,从以前的Symbian,WindowsMobile,Meego,做到WindowsPhone,BB10,Android,iOS,基本移动设备都做了个遍,每个平台都能满足需求,但不敢说精通,近2年越来越觉得移动终端难突破瓶颈,在转服务器架构了,移动平台3年河东3年河西伤不起。
      • 炳良哥哥:哈哈,可以
      • 清無:不知道阁下所谓的全栈指的是啥?
        清無:@北你妹的风 按照 “自己百度,估计现在只有js做到真实意义上的全栈了”,应该不算。。。【这回答呵呵】
        北你妹的风:会开发java,又会开发android,还会开发ios,算不算全栈?
        子祖:@菲拉兔 自己百度,估计现在只有js做到真实意义上的全栈了
      • 知傲:偏激了
        子祖:@zhao0 请看评论
      • z我要是唐僧就留在女儿国:看完楼上我也想谈一些个人看法,市场缺少的是真正的有iOS基础的,不是那种快速利用几个月时间就培养完成的。现在投简历一个岗位一投几百份,有很多都是经过培训学习快速成型的。计算机行业进来很多对这一行业没有太多了解的人,原来开挖掘机的经过学习也可以做iOS开发。如果真的对这个行业感兴趣,完全不成问题,可怕的就是为了高薪速成进入这个行业,夹杂在iOS开发中。对于新出的技术,存在一定是有道理的,iOS确实是有太多的东西去学习了,java、c、c++……语言不也一样么?曾在知乎看到大神回答:做了十几年C++依然不敢说精通。算上谦虚的成分,我觉得大神也真的不是精通。如果真的对别的技术感兴趣,又何必在乎一门语言学不学的好呢……我就觉得我喜欢做网页胜过做iOS。还是要看个人想法的,对于楼上说的跑偏,我不认同,只要是付出时间学习的东西,哪个都不算跑偏(不要举极端的例子)。感谢分享
        丶雨凡:@追着风的人 +1 :stuck_out_tongue_closed_eyes:
        z我要是唐僧就留在女儿国:@追着风的人 其实我认同作者观点,这里面是参杂了我想边工作边学习转行做web前端的想法,因为我确实对web前端比对iOS开发感兴趣。而且对于未来的发展,新的公司会不断的开,也会不断的需求iOS开发,我总觉得,个人感觉,总觉得web前端的需求量会比iOS开发大。所以倾向于作者这边。能包容别人价值观的人,还这么轻和的语气,真的很棒!没错 就是你 。别问为什么,我能从字面感觉到你的语气 。么么哒
        小飞不会飞_:@z我要是唐僧就留在女儿国 大量的培训机构加工了大批IT学员,而这些人中很大部分都是从0基础开始的,就几个月时间快速成型,他们都盯着ios的高薪,培训机构教他们伪造学历伪造工作经验,那时候ios供不应求,导致很多公司招聘这些人,也有很多公司被忽悠过了,好吧,现在市场饱和了,ios不缺人了,但是别理解错了,ios真正不缺的是初级开发人员,很多公司都缺高级工程师,包括android开发也是,虽然培训机构再怎么搅浑IT人才市场,高级工程师仍然很缺。所以对作者的观点有点不认同,对短时间学习只能了解皮毛,如果真是做ios开发,我觉得还是把主要精力放在ios上,但是也不排斥学习点其它知识,合理分配时间和精力。 :smile: :smile:
      • 欧阳大哥2013:恰恰和作者的意见相反,JS只是一个脚本语言,就像是主食里面的调味剂一样。这种不伦不类的东西还想成为主流,搞笑!建议作者多深入去了解IOS包括android里面的众多知识点,够你学习一辈子的。
        子祖:@欧阳大哥2013 你这些言论和那些喷子有什么区别呢?语言这东西你爱学不爱,我提出的观点是引导作用,你可以不喜欢,也可以不学习,但来吵架就没意思了,再者,你或许不了解,js可以解决ios热操作问题,就是如果你app有bug,以前必须上传ipa包还有等待审核,现在用rn可以完美解决,而且利用的是runtime,所以希望你认真了解这一门技术,而不是主管去喷,不学不看可以继续你的ios,我的观点是技多不压身
        欧阳大哥2013:@子祖 移动端是三年河东和三年河西,比如早期的winmobile, javase, brew等等现在流行了iOS和android,试想一下如果一个平台不做自己的语言限制,而是开放通用的开发方式,哪有什么竞争力,这是一个生态问题,而不是技术问题。即使后续的iOS和android没落了也会有新的平台出现,而不会把所谓的js作为一个主流的东西来看待,虽然现在后端都有node.js这些东西,但是对于那些大型的系统以及要求性能的系统,不管是前端还是后端都是native开发是最优的。如果能够编译后执行为什么还要去一步步的解析执行呢?。你有没有想过苹果公司为什么现在要大力发展swift语言,而且google也正在开发一种新的语言。如果按你说的趋势的话,那这些公司真是吃饱了撑着没事干吧,直接推荐所谓的RN以及平台统一就好了。
        子祖:@欧阳大哥2013 是不是你说了不算,你自己看看国内外谁的社区最大?谁是热门?谁的源码多?除了c和java,其他都不能比,再者,移动端三年河东三年河西,依赖平台的发展,公司发展好就好,另外,js不是你说的只是脚本语言,请百度…
      • f265d4decead:QQ群:154210560
        iOS的RN技术交流群,大家相互学习共同成长,欢迎加入
      • 1492fefa152c:大学的时候学过,毕业不想做码农就没继续,没想过才过几年IOS居然都......
      • bfb6a2f3bf73:你好,请问一个问题。有关地理位置的开关全部打开,假设软件是在A时间点安装的,那么该软件能够使用A时间之前的地理数据吗?比如常去的地点。
        bfb6a2f3bf73:没事了
        子祖:@流明_Rik ?
      • hauibojek:有点偏激了,前段时间直播火,不会直播就被淘汰了吗。我觉得在知识深度足够了之后再考虑广度发展会比较合理
      • 简单也好:很棒的开始,希望坚持写下去
      • Pr_Chen:很是赞同作者的观点,多了解一些其他的领域绝对对自己的技术有很大的影响,增加自己的见识。同样至少有一个精通的领域也很重要。
      • 张云龙:这篇文章多少有些误导人。iOS不是不火了,只是过了增长的快速期,进入稳定期而已,一份工作几百份简历不恰恰也说明iOS很火嘛,怎么就得出不火的结论?
        像楼上所说的iOS的只是已经足够一个iOS开发工程师去学习了,在没有对iOS开发掌握较深的情况下,贸然为了所谓的竞争力过多的接触跑偏的知识是误入歧途。
        iOS就业者多不代表工作不好找,更不代表公司可以用一些奇葩的只是考核面试者,每个人都是行业进步的推动者,踏踏实实学号现有的,关注新技术。如果有公司用这些跑偏的技术考核我的iOS开发能力,我必定在它是否决定录用我之前把这种公司淘汰掉。
        最后,这些技术只是锦上添花,毕竟懂得多在很多情况下不是一件坏事,但切不可把它当成主菜,学跑偏了。
        莫_名:原生开发是原配夫人:
        门当户对,合情合理,家中正事皆由其处理,不仅合理也更靠谱. 难耐时间久了总会审美疲劳,再加上难免吵闹,总会生出嫌隙. 但过日子终究还是要过的. 此乃红旗!

        其他技术犹如小妾及二奶:
        不期而遇,风情万种,勾的你春心萌动. 恨不能与其夜夜笙歌. 但终究难得重任,一夜春宵过后或许也就相忘于江湖. 此乃彩旗!

        红旗不倒,彩旗飘飘这个道理,不用我解释了吧.

        楼上诸位,可是此理?
        张云龙:@子祖 多学习是好事,没人否认。技多不如精通一门,现在国家也提倡工匠精神,就是要鼓励人民踏踏实实把一件事情做得更好,而不是朝三暮四。你可以写这些博客,宣传这些知识,给大家更多的学习空间,这个大家非常感谢您。但是尽量避免一些误导性的想法,没有事实依据就说就是行业不火了。。。,对iOS理解不够深就说不会JS就low。。。等等吧。我本来想点个收藏,作为扩充知识有时间接触学习下,但是看您的言论,我还是放弃了。
        子祖:@张云龙 学习有广度和深度之分,没必要为此争论不休,而且这个暗涌慢慢到来,正如我问一句,那时候你为什么不坚守你原来的阵地,却走去学习ios,不去研究c语言呢?再者rn里面很多跟ios有相关的,包括runtime等等,技多不压身啊
      • 呆头呆脑雷:敢问兄弟iOS开发多久了?我觉着我也曾迷茫过,但是到最后不得不承认每一门语言只要能学好做出来的东西都可以很棒。随波逐流并不是一件好事…… 觉着迷茫的时候,coretext有深入了解学习过么,core Animation了解过3D动画么,coreimage滤镜、脸部识别、二维码美化都看过么,正则有好好去学么,只想说兄弟你还有时间学js么:stuck_out_tongue_winking_eye:
        故胤道长:不能赞同更多,iOS绝对够学了。我认识绝大多数所谓的全栈,实际上什么都不精。
        小马笔记:@myScorpion 言之有理!打工就好好打工,还谈风口?把东西学精,被外界袭扰 悲剧。
        呆头呆脑雷:@myScorpion 还有好多好多,我觉着真的学不过来啊
      • 68ffb1c88190:留爪,正在w3c学html css js ,持续跟进,期待下篇!辛苦了!
        子祖:@呀咪9527 w3c那个是百科全书不是要来学习的…
      • Zzzzzzzzzzzzzz:学习。
      • iFish:什么时候更新啊?
        iFish:@子祖 好吧,学习了。
        子祖:@灬尕鱼 今天?明天?后天?
      • 夜的v:学习
      • 08a80639d366:正在学rn中,期待下篇..
      • 程序员LesterXu:不错,我要好好学
      • 丶丶夏天:后续还有吗
        子祖:@丶丶夏天 嗯
      • 小马笔记:为什题目叫做Ios 全棧之路?IOS编程已经早衰落了吗?
        就是一个春天的花朵:别搜,投份简历试试吧
        無漾:别搜,会哭
        子祖:@空野 这个问题自行搜索,不在此讨论了
      • 小马笔记:代码的黄色背景是怎么做出来的?
        bluajack:@晚十一点地铁郎 你这个表情贼逗
        BESTU张正雨:@空野 知道markdown吗:sweat_smile:
      • 春泥Fu::+1::heart_eyes:非常感谢!!抽空学习~加油
        子祖:@春泥Fu 可以提醒我更新

      本文标题:iOS全棧之路,再不跟上你就low了

      本文链接:https://www.haomeiwen.com/subject/cddnettx.html