前端概念
前端形勢
https://www.100offer.com/blog/posts/136
近3年來融資事件的數(shù)量變化進行對比被冒〉罱希可以發(fā)現(xiàn)出現(xiàn)招聘需求異常的5到7月是創(chuàng)業(yè)融資案例數(shù)迅速攀升的時候邪驮，7月份融資案例數(shù)達到頂峰。
52b14b95f3243a5.jpg
2dcdfe5203a0b95.jpg
人均面邀下降的原因束莫，
1.求職者井噴式發(fā)展冬骚，市場供需不平衡。
2.資本寒冬帶給招聘市場的壓力别瞭。
前端窿祥、后端就業(yè)形勢不錯，移動端工程師壓力略大
我們統(tǒng)計了各主流職位下候選人拿到低面邀數(shù)(<2)的比例蝙寨，發(fā)現(xiàn)iOS高舉榜首晒衩，有17%的工程師拿到很少的面邀。安卓與產(chǎn)品經(jīng)理緊隨其后墙歪，而前端以及Java听系、PHP等后端語言均控制在合理范圍內(nèi)。
296854cb7f59e12.jpg
培訓班提供了過量的入門級iOS和Android開發(fā)人員虹菲，極大影響了市場供需靠胜。特別是iOS。
市場更歡迎3-5年工作經(jīng)驗的程序員
9389699d999cb64.jpg
這種情況只會更糟
前端組
Android iOS原生移動端
- Android
Android 手機届惋，電視髓帽，手表菠赚，物聯(lián)網(wǎng)脑豹，車聯(lián)網(wǎng)。
(1)Android底層開發(fā)
開發(fā)安卓
(2)Android應用開發(fā)
截取一段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在國內(nèi)當前僅剩下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最大的特點拍埠，語法簡潔，輕量土居。運行方便枣购。
但是編寫不規(guī)范（比如創(chuàng)建一個對象嬉探，比如報錯機制）
TypeScripe
它是JavaScript的一個嚴格超集，并添加了可選的靜態(tài)類型和基于類的面向對象編程棉圈。
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
官方網(wǎng)站： https://angular.cn/
特點：雙向數(shù)據(jù)綁定 模板
以及依賴注入分瘾，指令胎围，路由等
@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>倍數(shù)：</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; //購物車的數(shù)量
@Input() canBet;
@Input() betNum; //下注的數(shù)量
@Input() maxInput = 100; //下注的數(shù)量 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; // 倍數(shù)
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
官方網(wǎng)站：https://cn.vuejs.org/v2/guide/index.html
vue 簡單上岗，易上手碧聪，沒有背景 國產(chǎn)
和其他語言的比較https://cn.vuejs.org/v2/guide/comparison.html
三個語言的主要作用就是
將界面組件化，不需要直接操作DOM液茎，組件化逞姿、MV**、All in JS捆等、模板引擎
簡化和規(guī)范開發(fā)
單頁應用于多頁應用優(yōu)缺點
優(yōu)點： 1滞造、分離前后端關注點，前端負責界面顯示栋烤，后端負責數(shù)據(jù)存儲和計算谒养，各司其職，不會把前后端的邏輯混雜在一起明郭；
2买窟、減輕服務器壓力，服務器只用出數(shù)據(jù)就可以薯定，不用管展示邏輯和頁面合成始绍，吞吐能力會提高幾倍；
3话侄、同一套后端程序代碼亏推，不用修改就可以用于Web界面、手機年堆、平板等多種客戶端吞杭；（后端只用出接口）
缺點：1、SEO問題变丧，現(xiàn)在可以通過Prerender等技術解決一部分芽狗；搜索引擎優(yōu)化。
2痒蓬、前進童擎、后退曼月、地址欄等，需要程序進行管理柔昼；（多頁應用瀏覽器幫我們是實現(xiàn)哑芹，單頁應用的前進后退都會有history，對于瀏覽器捕透，監(jiān)聽瀏覽器的前進返回按鈕）
拿彩票和平臺網(wǎng)https://m.555jx.com
html5
這里的html5其實指的是大量用到h5的標簽的聪姿，比如canves，video標簽乙嘀。主要指游戲開發(fā)末购。他的功能其實主要就是動畫和界面效果，所以我想這就相當于是web中的flash虎谢，flash的替代品盟榴。事實上活躍在h5的也大部分是flash開發(fā)人員
egret
Egret Engine是一個基于TypeScript語言開發(fā)的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();
}
laya
pixi
threejs
flash
共通性的例子婴噩。區(qū)別
