seajs源碼詳解分析,seajs創始人

本文目錄一覽：

• 1、如何在chrome瀏覽器裏面安裝360搶票軟件
• 2、web前端開發需要學習什麼知識？
• 3、vue emit 有多個參數該如何寫
• 4、seajs加載jquery時提示$is not a function該怎麼解決
• 5、requirejs和seajs的區別

如何在chrome瀏覽器裏面安裝360搶票軟件

打開瀏覽器擴展頁面，將360搶票擴展插件的安裝包拖動到擴展頁面即可進行安裝！

首先, 直接在chrome裏面打開pc.huochepiao.360.cn沒法用(因為我在安裝360瀏覽器的時候並沒有安裝額外的extension, 所以猜測可能並不需要extension). 然而, 經過調試pc.huochepiao.360.cn 這個搶票站點之後發現在js 裏面有一段判斷代碼格外引人注目:

if (isExtInstalled) {

if (extVer = minExtVer) {

document.getElementById(‘main’).style.display = ‘block’;

seajs.config({

base: ‘./’

});

於是嘗試將判斷都設置成true, 這樣就能看到和在306瀏覽器裏面顯示的界面查不到的功能了, 但是還是沒辦法登陸以及刷票, 很多訪問12306的鏈接都沒有正確返回(connect forbidden).

經過一段時間的分析發現在index.js 裏面有些調用widget的url, 於是又發現js源碼裏面有:

var extUrl = ”

嘗試下載這個文件之後, 用7zip成功解壓, 並且通過調試模式加載到chrome的extension, 發現居然可以用.

下一步, 卸載360瀏覽器.

web前端開發需要學習什麼知識？

最近不少小夥伴都會留言問，零基礎學習前端需要了解哪些知識，小白學習Web前端開發容易嗎？針對大家的疑問，下面，尚學堂前端學院給大家介紹一下。

首先，先給大家介紹一下前端工程師到底是做什麼的。

他們主要的工作是把UI的設計圖按照w3c標準做成html頁面，並且用javascript腳本語言實現頁面上的前端互動。互動效果包括，彈出層，頁簽切換，圖片滾動，ajax異步互動。

高級前端工程師還要承擔前端優化的工作，優化的知識就會更多一些，比如文件過期Expires，緩存，異步緩存，js和css以及圖片的壓縮等。

前端開發是一項很特殊的工作，前端工程師的工作說的輕送，看似輕巧，但做起來絕對不是那麼的簡單。在開發過程中涵蓋的東西非常寬廣，既要從技術的角度來思考頁面的實現，規避技術的死角，又要從用戶的角度來思考，怎樣才能更好地接受技術呈現的枯燥的數據，更好地呈現信息。簡單地說，它的主要職能就將網站的數據和用戶的接受更好地結合在一起，為用戶呈現一個友好的數據界面。

前端工程師是一個很新的職業，在國內乃至國際上真正開始受到重視的時間不超過5年。互聯網的發展速度迅猛，網頁WEB1.0到WEB2.0，再到新生的HTML5、CSS3，到現在手機、3G網絡等新科技的興起，網頁也由最原先的圖文為主，到現在各種各樣的基於衰前端技術實現的應用、交互和富媒體的呈現，更多的信息，更豐富的內容、更友好的體驗，已經成為網站前端開發的要求，網站的前端開發發生了翻天覆地的變化。網站的開發對前端的需要越來越重要，但目前前端工程師的需要越來越重要，但目前前端工程師需求大於供給，前端人才非常緊缺。所以高質量的前端開發工程師將會是後五年內一個非常熱門的職業，發展的前景非常可觀。

那麼，零基礎小白學Web前端需要了解哪些知識呢？

如果你是一個剛入門的零基礎小白，那你首先肯定要掌握的是前端開發的基礎知識，相關的程序語言；HTML、CSS、JauaScript，在頁面的布局時，HTML將元素進行定義，CSS對展示的元素進行定位，再通過JavaScript實現相應的效果和交互。這些知識都是基礎，必須熟練掌握，才能進行流暢的編寫。

學程序語言，當然是與工具相輔相成的，學語言的同時，需要掌握的就是開發工具的使用，對於新手來說，初學用到的是幾個比較常見的工具：

1，Dreamweaver：，集網頁製作和管理網站於一身的所見即所得網頁代碼編輯器。

2，Sublime，全稱Sublime Text ，是一個主要功能包括拼寫檢查，書籤，完整的 Python API ， Goto 功能，即時項目切換，多選擇，多窗口的代碼編輯器

3，HBuilder：是DCloud,推出的一款支持HTML5的Web開發IDE。

熟悉這些工具之後，你一定對基礎的開發工作有一定的了解了，這時候要提升自己的能力，就可以學習更多工具的使用，比如Bootstrap能給你的Web開發提供了更時尚的版式，表單，buttons，表格，網絡系統等。Secureheaders能夠自動實施安全相關的header規則，防止XSS、HSTS等攻擊

前端開發之路不是一成不變的，可能會根據時代的發展，軟件的更新，學的內容也有所變化，不過，打好基礎，無論學習哪方面的知識，都得心應手。

簡單的了解之後呢，就是重頭戲了!

前端小白如何學習web前端呢？

前端自學者存在的學習誤區：

所學東西可能已過時

奉為經典的的東西已經過時，或者已經有了更好的替代者，而你獲取信息的渠道有限，消息滯後，導致學習內容也相對滯後。

2.學習方法盲目

看書看不懂就找視頻類教程學習，覺得教程跟自己的口味不符就另尋他法，因為自己缺少對資源的辨識能力，總是在沒有清晰規劃學習路線的的情況下就盲目學習，導致無效學習時間過長而收穫寥寥。

3、只有理論，缺乏真實項目鍛煉

對技術的理解停留在理論層次，而缺乏真實企業項目的歷練，如果沒有相關實習或工作經歷，對前端崗位具體的責任劃分和工作流程了解不充分。

如何自學前端知識：

自學方法：

作為一個初學者，你必須明確系統的學習方案，我建議一定有一個指導的人，全靠自己學，放棄的幾率非常大，在你對於web前端還沒有任何概念的時候，需要一個人領進門，之後就都靠自己鑽研，第一步就是確定web前端都需要哪些內容，並且在多少時間內學完，建議時間6個月保底。

2.視頻為主，書為輔。很多初學者在學習前端的時候非常喜歡去買書，但是最後的結果是什麼？看來看去什麼都不會寫，所以在這裡給大家提醒，書可以看，但是是建立與你已經對某個知識點有了具體操作的執行後，在用書去鞏固概念，這樣更加有利於你對知識的理解。

3.對於學習技術來講，掌握一個學習方法是非常重要的，其實對於web前端來講，學習方法確實很多都是相通的，一旦學習方法不對，可能就會造成「方法不對，努力白費」。其實關於這方面還是很多的，我就簡單說個例子，有的人邊聽課邊跟着敲代碼，這樣就不對，聽課的時候就專心聽，做題的時候就專心做題，這都是過來人的經驗，一定要聽。根據每個人的不同，可能學習方法也會有所出路，找到適合你自己的學習方法是學習的前提。

4.不建議自己一個人瞎學，在我了解學習編程的這些人來看，從零基礎開始學並且最後成功做這份工作的其實並沒有幾個，我覺得大部分原因就是因為他們都不了解web前端是幹什麼的，學什麼的，就盲目地買書看，到處找視頻看，最後看着看着就放棄了，所以我建議初學者在沒有具體概念之前，還是找有經驗的人請教一下，聊過之後你就會知道web前端具體是幹什麼的，該怎麼學，這是我個人的小建議，可以不採納。

必讀的前端書籍資料：

1、《JavaScript DOM 編程藝術》

超級前端暢銷書，作為前端程序員必讀兩遍以上的書籍，這本書籍特別適合初學前端的新人，前端的核心技術就是JavaScript，同時也是前端的難點。而這本書非常適合入門，通俗易懂，生動的案例可以讓初學者更好的進行理解。所提及的很多編程思想卻適合低中級層次的前端開發者學習。

2、《JavaScript權威指南》

同樣是前端程序員必讀的一本書籍，不僅適合初學者，還適合那些已經在做前端工作的程序員進行隨時翻閱。裏面涵蓋了JavaScript的所有內容，以及web瀏覽器所實現的JavaScript API。對於了解js的基礎知識，比如對象，數組，語法，作用域，閉包等等都很有幫助。

3、《JavaScript 高級程序設計》

如果你想把JavaScript非常完全的系統學習一遍，我強烈推薦這本書，這本書可以一直保留，在用這本書的過程中還可以畫下重點，以後可以作為參考，是工作中非常強力的幫手。面試的時候也可以很好的應用上，我們俗稱的「紅寶書」。

4、《你不知道的JavaScript》

這本書不適合前端的初學者，想要深入的了解JavaScript原理，這是每一個前端程序員必須要研究的一本書籍。要讓不求甚解的JavaScript開發者迎難而上，深入語言內部，弄清楚JavaScript每一個零部件的用途。如果可以把這本書吃透，那麼以後理解任何東西都可以很快的理解和掌握。

5、《Vue.js權威指南》

Vue作為現在前端的主流框架，在國內應用最為廣泛，所以了解Vue原理必須要啃一本Vue的書籍。我之所以推薦這本，是因為這本書對於引導初用Vue的開發者有着質的提升。從基礎知識到主流打包以及源碼解析，還有很多實踐的案例，都是一本不錯的實用性書籍。主要內容包括數據綁定、指令、表單控件綁定、過濾器、組件、表單驗證、服務通信、路由和視圖、vue-cli、測試開發和調試、源碼解析及主流打包構建工具等。該書內容全面，講解細緻，示例豐富，適用於各層次的開發者。

6、《編程之美》

無論是什麼崗位的程序員，必讀的一本書籍，沒有讀過這本書的程序員幾乎都是假程序員。這本書有60道算法和程序設計題目，這些題目大部分在近年的筆試，面試中出現過，或者是被微軟員工熱烈討論過。作者試圖從書中各種有趣的問題出發，引導讀者發現問題，分析問題，解決問題，尋找更優的解法。可以大幅度提高自己的編程思維和對於這個行業的深入思考，最終變成技術大牛。

學習路線：

第1階段：前端頁面重構(4周)

內容包含了：(PC端網站布局項目、HTML5+CSS3基礎項目、WebApp頁面布局項目)

第2階段：JavaScript高級程序設計(5周)

內容包含：(原生JavaScript交互功能開發項目、面向對象進階與ES5/ES6應用項目、JavaScript工具庫自主研發項目)

第3階段：PC端全棧項目開發(3周)

內容包含：(jQuery經典交互特效開發、HTTP協議、Ajax進階與PHP/JAVA開發項目、前端工程化與模塊化應用項目、PC端網站開發項目、PC端管理信息系統前端開發項目)

第4階段：移動端項目開發(6周)

內容包含：(Touch端項目、微信場景項目、應用Angular+Ionic開發WebApp項目、應用Vue.js開發WebApp項目、應用React.js開發WebApp項目)

第5階段：混合(Hybrid,ReactNative)開發(1周)

內容包含：(微信小程序開發、ReactNative、各類混合應用開發)

第6階段：NodeJS全棧開發(1周)

內容包括：(WebApp後端系統開發、一、NodeJS基礎與NodeJS核心模塊二、Express三、noSQL數據庫)

視頻教程：

以上就是尚學堂前端學院為您簡單介紹的關於web前端小白的學習路程。

總的來說，零基礎小白學習Web前端除了要了解整個前端行業的動態及發展外，還應該學習HTML、CSS、JavaScript等知識，是一個龐大而複雜的技術體系。

如果你對於學習前端技術感興趣，想學一門新技術，我給你提供一個非常不錯的前端學習交流qun：一一四一八八四九三一。有問題就在裏面問我，這樣你可以少走很多彎路，做起來有效率，記得多跟有經驗的人交流，別閉門造車。如果沒有比較好的教程，也可以管我要。

本文由尚學堂前端學院原創，歡迎關注，帶你一起學習Web前端知識！

vue emit 有多個參數該如何寫

詳細步驟如下：

一、$emit傳遞一個參數時

子組件：

this.$emit(‘closeChange’,false)。

父組件：

posilCom @closeChange=”closeCom($event)”/posilComcloseCom(msg) { this.msg = msg;}。

二、$emit傳遞多個參數時

子組件：

this.$emit(‘closeChange’,false,true)。

父組件：

posilCom @closeChange=”closeCom(arguments)”/posilComcloseCom(msg)this.msg1 = msg[0]; this.msg2 = msg[1]。

擴展資料：

一、vue emit 3個參數詳細描述：

1、子組件的JS

**/define(function(require, exports, module){var $ = require(“lib_cmd/zepto-cmd”),

Vue = require(‘lib_cmd/vue-cmd’),

main = require(“js_cmd/main-cmd”),

var vm= Vue.component(‘myaddress’, {

template: ‘ div data-role=”data-widget” data-widget=”address-editor”

class=”address_mask” id=”address-editor”\/div’    props:[“address”,”ids”],

methods: {created: function ()  module.export= vm;/*註冊名為「myaddress」的組件 ，從父組件傳遞過來兩個數據”address”,”ids”*/

2、父組件EJS頁面

%- include ../../header %

link href=”/css/vd/activity/myAward.css?v=%= config.version %” rel=”stylesheet” /

div data-role=”container”

class=”body %= pageName %” id=”myAward”myaddress :address=”editAddr”

:ids=”ids”/myaddress

/divscript seajs.use(‘js_cmd/vd/activity/myAward-cmd’);/script

%- include ../../footer %

/*在定義的組件 「myaddress」中綁定兩個父組件的數據 “editAddr” “ids”*/

3、父組件的JS頁面

* Created by youchen.ma on 2017/6/21.

*/define(function (require, exports, module)

var $ = require(“lib_cmd/zepto-cmd”),

Vue = require(“lib_cmd/vue-cmd”),

main = require(“js_cmd/main-cmd”),

Address = require(‘js_cmd/vd/venue/widget/venueEditAddress-cmd’)  //引入子組件的JS文件

二、vue emit定義：

主要內容包括數據綁定、指令、表單控制綁定、過濾器、組件、表單驗證、服務通信、路由和視圖、vue cli、測試開發和調試、源代碼分析以及主流的打包和構建工具。內容全面，講解詳細，示例豐富，適合各級開發人員。

參考資料：百度百科-Vue.js權威指南

seajs加載jquery時提示$is not a function該怎麼解決

將js插件cmd模塊化（define封裝成seajs模塊，返回匿名函數，包含插件的源碼）。

/**

* Created with JetBrains PhpStorm.

* User: duph

* Date: 13-3-11

* Time: 上午9:24

* To change this template use File | Settings | File Templates.

*/

define(function(require,exports,moudles){

return function(jquery){

(function($) {

$.fn.pri= function() {

alert($(“a”).attr(“href”))

// 代碼區域。

};

})(jquery);

}

})

jquery庫在總js文件（調用該插件的文件）中加載。通過require(“t1/jquery_pligun”)()來傳遞jquery變量（參數） ,保證了jquery在調用js插件模塊之前加載

/**

* Created with JetBrains PhpStorm.

* User: duph

* Date: 13-3-11

* Time: 上午9:40

* To change this template use File | Settings | File Templates.

*/

define(function (require, exports, moudles) {

var $=require(“jquery”)

require(“t1/jquery_pligun”)($)

$(document).ready(function () {

$(“a”).pri()

})

})

補

充：SeaJS是一個遵循CommonJS規範的JavaScript模塊加載框架，可以實現JavaScript的模塊化開發及加載機制。與

jQuery等JavaScript框架不同，SeaJS不會擴展封裝語言特性，而只是實現JavaScript的模塊化及按模塊加載。SeaJS的主要

目的是令JavaScript開發模塊化並可以輕鬆愉悅進行加載，將前端工程師從繁重的JavaScript文件及對象依賴處理中解放出來，可以專註於代

碼本身的邏輯。SeaJS可以與jQuery這類框架完美集成。使用SeaJS可以提高JavaScript代碼的可讀性和清晰度，解決目前

JavaScript編程中普遍存在的依賴關係混亂和代碼糾纏等問題，方便代碼的編寫和維護。

requirejs和seajs的區別

相同之處

RequireJS

和

SeaJS

都是模塊加載器，倡導的是一種模塊化開發理念，核心價值是讓

JavaScript

的模塊化開發變得更簡單自然。

不同之處

兩者的區別如下：

定位有差異。RequireJS

想成為瀏覽器端的模塊加載器，同時也想成為

Rhino

/

Node

等環境的模塊加載器。SeaJS

則專註於

Web

瀏覽器端，同時通過

Node

擴展的方式可以很方便跑在

Node

服務器端。

遵循的規範不同。RequireJS

遵循的是

AMD（異步模塊定義）規範，SeaJS

遵循的是

CMD

（通用模塊定義）規範。規範的不同，導致了兩者

API

的不同。SeaJS

更簡潔優雅，更貼近

CommonJS

Modules/1.1

和

Node

Modules

規範。

社區理念有差異。RequireJS

在嘗試讓第三方類庫修改自身來支持

RequireJS，目前只有少數社區採納。SeaJS

不強推，採用自主封裝的方式來「海納百川」，目前已有較成熟的封裝策略。

代碼質量有差異。RequireJS

是沒有明顯的

bug，SeaJS

是明顯沒有

bug。

對調試等的支持有差異。SeaJS

通過插件，可以實現

Fiddler

中自動映射的功能，還可以實現自動

combo

等功能，非常方便。RequireJS

無這方面的支持。

插件機制不同。RequireJS

採取的是在源碼中預留接口的形式，源碼中留有為插件而寫的代碼。SeaJS

採取的插件機制則與

JavaScript

語言以及Node

的方式一致：開放自身，讓插件開發者可直接訪問或修改，從而非常靈活，可以實現各種類型的插件。

還有不少細節差異就不多說了。

總之，SeaJS

從

API

到實現，都比

RequireJS

更簡潔優雅。如果說

RequireJS

是

Prototype

類庫的話，則

SeaJS

是jQuery

類庫。

最重要的

最後，向

RequireJS

致敬！RequireJS

和

SeaJS

是好兄弟，一起努力推廣模塊化開發思想，這才是最重要的。