前端 - 简书

前端概念

前端形势

https://www.100offer.com/blog/posts/136

近3年来融资事件的数量变化进行对比。可以发现出现招聘需求异常的5到7月是创业融资案例数迅速攀升的时候，7月份融资案例数达到顶峰。

52b14b95f3243a5.jpg

2dcdfe5203a0b95.jpg

人均面邀下降的原因，

    1.求职者井喷式发展，市场供需不平衡。
    2.资本寒冬带给招聘市场的压力。

前端、后端就业形势不错，移动端工程师压力略大

我们统计了各主流职位下候选人拿到低面邀数(<2)的比例，发现iOS高举榜首，有17%的工程师拿到很少的面邀。安卓与产品经理紧随其后，而前端以及Java、PHP等后端语言均控制在合理范围内。

296854cb7f59e12.jpg

培训班提供了过量的入门级iOS和Android开发人员，极大影响了市场供需。特别是iOS。

市场更欢迎3-5年工作经验的程序员

9389699d999cb64.jpg

这种情况只会更糟

前端组

Android iOS原生移动端

Android
Android 手机，电视，手表，物联网，车联网。
(1)Android底层开发
开发安卓
(2)Android应用开发

截取一段kotlin代码

class MainActivity : BaseActivity() {

    var gitHubService: GitHubService

    var repositoryAdapter: RepositoryAdapter
    var text:TextView
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        MainApp.graph.inject(this)

        setSupportActionBar(toolbar)
        setUpRecyclerView()
        setUpSearchView()
    }

    override fun onStart() {
        super.onStart()
    }

    fun setUpRecyclerView() {
        repositoryAdapter = RepositoryAdapter(this)
        mainResultsRecycler.adapter = repositoryAdapter
        mainResultsRecycler.layoutManager = LinearLayoutManager(this)
    }
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 tools:context=".activity.MainActivity">
      <TextView
           android:id="@+id/text"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:text="text"/>
       <ImageView
           android:id="@+id/repositoryDetailImage"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:paddingBottom="80dp"
           android:paddingTop="64dp"
           android:scaleType="fitCenter" />
</LinearLayout>

iOS
采用Object-C， swift

thread_25800418_20170422091230_s_61272_h_161px_w_597px578797630.jpeg

个人认为iOS就比较局限了，只能运行在苹果设备，而且就目前来看的趋势，先是iOS的设置市场占有率一直在下降。iOS在国内当前仅剩下13.7%的市场份额，而Android占比高达86.1%。

截取了一段swift代码
https://github.com/woooowen/swiftSendParamsDemo

class ViewController: UIViewController {

    var tmpString: String = String()
    //NSUserDefaults传值
    var base: baseClass = baseClass()
    //值传递2
    var paramsProtocolDelegate: ParamsProtocol?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func viewdidappear() {
        super.viewdidappear()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    //通过segue 进行值传递
    @IBAction func btn1Click(sender: AnyObject) {
        self.tmpString = "通过segue进行的值传递方式1"
        self.performSegueWithIdentifier("btn1", sender: self)
    }
    override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
        if segue.identifier == "btn1"{
            var obj = segue.destinationViewController as btn1
            obj.tmpString = self.tmpString
        }
    }
}

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="6214" systemVersion="14A314h" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES">
    <objects>
        <view contentMode="scaleToFill" id="iN0-l3-epB">
            <rect key="frame" x="0.0" y="0.0" width="480" height="480"/>
            <subviews>
                <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="  Copyright (c) 2014年 woowen. All rights reserved." textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="8ie-xW-0ye">
                    <rect key="frame" x="20" y="439" width="441" height="21"/>
                    <fontDescription key="fontDescription" type="system" pointSize="17"/>
                    <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
                </label>
                <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="swiftSendParamsDemo" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="kId-c2-rCX">
                    <rect key="frame" x="20" y="140" width="441" height="43"/>
                    <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
                    <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
                    <nil key="highlightedColor"/>
                </label>
            </subviews>
            <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
            <constraints>
                <constraint firstItem="kId-c2-rCX" firstAttribute="centerY" secondItem="iN0-l3-epB" secondAttribute="bottom" multiplier="1/3" constant="1" id="5cJ-9S-tgC"/>
                <constraint firstAttribute="centerX" secondItem="kId-c2-rCX" secondAttribute="centerX" id="Koa-jz-hwk"/>
                <constraint firstAttribute="bottom" secondItem="8ie-xW-0ye" secondAttribute="bottom" constant="20" id="Kzo-t9-V3l"/>
                <constraint firstItem="8ie-xW-0ye" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" constant="20" symbolic="YES" id="MfP-vx-nX0"/>
                <constraint firstAttribute="centerX" secondItem="8ie-xW-0ye" secondAttribute="centerX" id="ZEH-qu-HZ9"/>
                <constraint firstItem="kId-c2-rCX" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" constant="20" symbolic="YES" id="fvb-Df-36g"/>
            </constraints>
        </view>
    </objects>
</document>

html

html css js组成的web页面纯 html css js 这里只说js
css样式库 bootstrap等

个人觉得js最大的特点，语法简洁，轻量。运行方便。
但是编写不规范（比如创建一个对象，比如报错机制）
TypeScripe
它是JavaScript的一个严格超集，并添加了可选的静态类型和基于类的面向对象编程。
https://zhongsp.gitbooks.io/typescript-handbook/content/index.html

js代码示例

function setupVideo(rearCameraId) {
        var deferred = new $.Deferred();
        var getUserMedia = Modernizr.prefixed('getUserMedia', navigator);
        var videoSettings = {
            video: {
                optional: [
                    {
                        width: {min: pictureWidth}
                    },
                    {
                        height: {min: pictureHeight}
                    }
                ]
            }
        };

        //if rear camera is available - use it
        if (rearCameraId) {
            videoSettings.video.optional.push({
                sourceId: rearCameraId
            });
        }

        getUserMedia(videoSettings, function (stream) {
            //Setup the video stream
            video.src = window.URL.createObjectURL(stream);

            window.stream = stream;

            video.addEventListener("loadedmetadata", function (e) {
                //get video width and height as it might be different than we requested
                pictureWidth = this.videoWidth;
                pictureHeight = this.videoHeight;

                if (!pictureWidth && !pictureHeight) {
                    //firefox fails to deliver info about video size on time (issue #926753), we have to wait
                    var waitingForSize = setInterval(function () {
                        if (video.videoWidth && video.videoHeight) {
                            pictureWidth = video.videoWidth;
                            pictureHeight = video.videoHeight;

                            clearInterval(waitingForSize);
                            deferred.resolve();
                        }
                    }, 100);
                } else {
                    deferred.resolve();
                }
            }, false);
        }, function () {
            deferred.reject('There is no access to your camera, have you denied it?');
        });

        return deferred.promise();
    }

typescript 代码示例

export class Hero implements BaseEntity {
    public id?: number,
    public name?: string,
    constructor() {
    }
}

import { Hero } from './hero.model';
export class HeroComponent{
  heroes: Hero[];
}

JQuary

jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
对DOM的操作

$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

AngularJS JavaScript 框架 1和2

    官方网站：  https://angular.cn/

特点：双向数据绑定模板
以及依赖注入，指令，路由等

@Component({
  selector: 'BetMoneyView',
  template:`    
    <div class="mode_box">
      <div class="mode_select_box">
        <p>模式：</p>
        <ul>
          <li *ngFor="let item of moneyArray; let i = index" class="{{moneyUnit==i?'mode_select':' '}}" (click)="changeMoneyUnit(i)">{{item}}</li>
        </ul>
      </div>
      <div class="mode_select_box">
        <p>倍数：</p>
        <div class="multiple_less"><input type="button" (click)="multipleLess()"/></div>
        <div class="multiple_num"><input value="{{multiple}}" (keyup)="onKeyUp($event)" (keypress)="onKeyPress($event)" [(ngModel)]="multiple" type="number"/></div>
        <div class="multiple_add"><input type="button" (click)="multipleAdd()"/></div>
      </div>
      <div class="bet_detail">
        <p>您选择了<span>{{betNum}}</span>注,<span>{{multiple}}</span>倍</p>
        <p>共投注了<span>{{totalBetMoney}}</span>元</p>
      </div>
      <div class="bet_btn_box">
        <div class="{{canBet?'cart_btn':'btn_none'}}" (click)="putInCard()">加入购物车</div>
        <div (click)="showBetDialog()" class="{{canBet?'betting_btn':'btn_none'}}">立即投注</div>
      </div>
    </div>
  `,
})

export class BetMoneyView extends BasePage implements OnInit,AfterViewInit{
    ngOnInit(){
    }
    ngAfterViewInit(): void {
    }
    private cardNum = 0;    //购物车的数量
    @Input() canBet;
    @Input() betNum;     //下注的数量
    @Input() maxInput = 100;     //下注的数量 Input 最大输入

    @Output() callBetDiaolog = new EventEmitter<string>();
    @Output() addToCard = new EventEmitter<string>();
    @Output() callCardView = new EventEmitter<string>();
    @Output() clearAllEvent = new EventEmitter<string>();

    private moneyUnitArray = [1,0.1,0.01];   // 0 圆  1 角 2 分
    private moneyUnit:number = 0;   // 0 圆  1 角 2 分  金额单位的id
    private multiple:number = 1;    // 倍数
    private totalBetMoney:number = 0;   //总共投注的金额

    constructor() {
    }
    private showBetDialog(){
        if (this.canBet){
          this.callBetDiaolog.emit(this.moneyUnitArray[this.moneyUnit]+"#"+this.multiple+"#"+this.betNum);
        }
    }
}

<BetMoneyView #betMoneyView [canBet]="canBet" [betNum]="betNum" (callBetDiaolog)="showBetDialogMain($event)" (callCardView)="showGoCard()" (addToCard)="putInCard($event)" [hidden]="goToCard" (clearAllEvent)="clearAllItem()"></BetMoneyView>

jsp代码

<body>
    <%AccountBean account = (AccountBean)session.getAttribute("account");%>
    username:<%= account.getUsername()%>
     password:<%= account.getPassword() %>
</body>

http://43.231.6.174:8087/wap/#/

React:

  中文教程：https://hulufei.gitbooks.io/react-tutorial/introduction.html
  中文官方文档：https://discountry.github.io/react/

也是组件化
不是双向绑定而是自上而下的渲染

Virtual DOM 虚拟DOM
当需要修改一系列元素中的值时，就会直接对 DOM 进行操作。而采用 Virtual DOM 则会对需要修改的 DOM 进行比较（DIFF），从而只选择需要修改的部分。
data flows down

React Native React VR

VUE

官方网站：https://cn.vuejs.org/v2/guide/index.html

vue 简单，易上手，没有背景国产
和其他语言的比较https://cn.vuejs.org/v2/guide/comparison.html

三个语言的主要作用就是
将界面组件化，不需要直接操作DOM，组件化、MV**、All in JS、模板引擎
简化和规范开发

单页应用于多页应用优缺点

  优点： 1、分离前后端关注点，前端负责界面显示，后端负责数据存储和计算，各司其职，不会把前后端的逻辑混杂在一起；
        2、减轻服务器压力，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍；
        3、同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端；（后端只用出接口）
  
  缺点：1、SEO问题，现在可以通过Prerender等技术解决一部分；搜索引擎优化。
       2、前进、后退、地址栏等，需要程序进行管理；（多页应用浏览器帮我们是实现，单页应用的前进后退都会有history，对于浏览器，监听浏览器的前进返回按钮）

拿彩票和平台网https://m.555jx.com

html5

这里的html5其实指的是大量用到h5的标签的，比如canves，video标签。主要指游戏开发。他的功能其实主要就是动画和界面效果，所以我想这就相当于是web中的flash，flash的替代品。事实上活跃在h5的也大部分是flash开发人员

egret

Egret Engine是一个基于TypeScript语言开发的HTML5游戏引擎，

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="LoginUISkins" width="720" height="1035" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing">
    <e:Rect fillColor="0x191714"  width="720" height="1035" touchEnabled="false" />

    <e:Image id="_imgLogo" source="logo_0_png" width="399" height="240" x="160" y="120" touchEnabled="false" />

    <e:Group height="40" x="60" width="600" bottom="0" touchChildren="false" touchEnabled="false">
        <e:Label id="_txtVersion" text="" textColor="0xacacac" width="600" height="40" size="24" fontFamily="微软雅黑"
                 textAlign="right" touchEnabled="false" />
    </e:Group>
    <e:Group width="63" height="511" top="32" right="42" touchEnabled="false">
        <e:Image id="_img0" source="en_icon_png" width="63" height="63"/>
        <e:Image id="_img1" source="cn_icon_png" width="63" height="63" top="73" visible="false"/>
        <e:Image id="_img2" source="tw_icon_png" width="63" height="63" top="146" visible="false"/>
        <e:Image id="_img3" source="ko_icon_png" width="63" height="63" top="219" visible="false"/>
        <e:Image id="_img4" source="th_icon_png" width="63" height="63" top="292" visible="false"/>
        <e:Image id="_img5" source="id_icon_png" width="63" height="63" top="365" visible="false"/>
        <e:Image id="_img6" source="id_icon_png" width="63" height="63" top="438" visible="false"/>
    </e:Group>
</e:Skin>

class LoginUI extends eui.Component {
    private _txtUsername: egret.TextField;
    private _txtAgantName: egret.TextField;
    private _txtPassword: egret.TextField;
    private _btnOk: eui.Button;
    private _btnFree: eui.Button;
    private _txtVersion: eui.Label;
    private _img0: eui.Image;
    private _imgLogo: eui.Image;
    private _groupUsername: eui.Group;
    private _groupPassword: eui.Group;
    private lang: Array<string> = ["en", "cn", "tw","ko","th","id","my"];
    private playerinfo: PlayerInfo;
    private httpClient: HttpClient;

    constructor(playerinfo: PlayerInfo) {
        super();
        var base: BaseUtil = new BaseUtil();
        this.playerinfo = playerinfo;
        // this.playerinfo = new PlayerInfo();
        // this.playerinfo.setting = gameset;

        //var gameset: GameSettingInfo = base.clone(playerinfo.setting);

        this.addEventListener(eui.UIEvent.COMPLETE, this.uiComplete, this);

        this.skinName = "resource/dg_skins/LoginUISkins.exml";
    }

    private uiComplete(e: eui.UIEvent): void {
        this.removeEventListener(eui.UIEvent.COMPLETE, this.uiComplete, this);
        this.init();
    }

    private init(): void {
        this.showLangFlag();
        this.addEvents();
        this.initPasswordTxt();
        this.initUsernameTxt();
        this.changeLang();
        this.httpClient = new HttpClient(this);
        this._txtVersion.text = WebInfo.VERSION;
        this.initApp();
    }

前端

前端