webjs流程圖（web 流程圖）

本文目錄一覽：

• 1、web開發流程圖 一般用什麼軟體
• 2、如何用JAVASCRIPT在頁面上畫流程圖
• 3、webpack執行機制流程是怎麼樣的
• 4、js html 流程圖 關係圖
• 5、html+js畫流程圖,想顯示如下流程圖，不做拖拽保存功能，僅僅顯示就可以。哪位能夠給點思路或者例子？感謝

web開發流程圖 一般用什麼軟體

1. Codepen

Codepen應該是全世界最受歡迎的開發環境之一了。CSS技巧的作者Chris Coyier是Codepen的聯合創始人之一，這也就是為什麼這款app看起來那麼豪華。除了視覺上的優秀效果，它可以生動地展現預覽，當你修改了代碼，就可以看到效果，使你能夠更容易地找出變化。

Codepen用於CSS的預處理器包括SCSS、SASS，LESS和Stylus，用於JS的有CoffeeScript和LiveScript，用於HTML的包括Haml、Markdown、Slim和Jade。另外，它還包含了8個可用的內置的JS庫。Codepen中合作和私人的「pens」需要付費使用。【前往Codepen】

2. JSFiddle

JSFiddle可以說是成就了開發環境的流行，它是第一個也是最出名的平台。JSFiddle有超過30個可以立即使用的JavaScript庫，你還可以輕鬆的添加外部文件。在預處理方面，它有用於CSS的SCSS、用於JS的CoffeeScript以及用於HTML的簡單Vanilla。

如果你在與其他開發者合作，我強烈建議你使用JSFiddle。在所有的開發環境中，JSFiddle的協作特性是同類型應用中最好的，而且區別於Codepen的是，它的這個特性是操作簡單並且免費的。

但JSFiddle沒有的是預覽功能，你需要手動刷新頁面。和其它開發平台相比，JSFiddle確實也比較慢。另外，JSFiddle還有一個不足就是它的執行鍵不是很靈敏，有時需要多點擊幾次才能夠執行代碼。【前往JSFiddle】

3. JS Bin

JS Bin是由JavaScript開發大師Remy Sharp創建的，他擁有一家專註於JavaScript和HTML5的web開發公司。JS Bin的JS預處理器包括CoffeeScript、TypeScript、Traceur、JSX以及可供使用的超過40個的JS庫。你同樣可以添加外部文件，但是必須在編輯器上手動操作。而用於CSS的預處理器，它提供了LESS。

JS Bin和以前開發平台的區別在於它允許你把文件下載到你的電腦上，這對於開發者，尤其是在離線狀態下調試代碼的程序員來說，是一個很不錯的特點。你還可以創建私人的Bin空間，不過你需要對此付費。另外，JS Bin不支持協作功能。【前往JS Bin】

4. CSSDeck

CSSDeck已經存在一些年了，但它的影響力好像不是很大。不過，由於它的簡潔性，它還是值得關注的。如果你不需要其它平台里那些複雜的功能，那CSSDeck就應該是你的選擇。

CSSDeck的預處理器包括用於HTML的HAML、Markdown、Slim和Jade，用於CSS的LESS、Stylus、SASS和SCSS，以及用於JS的CoffeeScript。它還有幾個可用的CSS和javascript庫，對於沒有的庫，你只需要將其手動地添加到庫的列表中就可以使用了。

CSSDeck雖然很簡潔，但它有一個讓我很吃驚的特性，就是它支持用戶改變字體大小，這是一個簡單卻實用的功能。所以說，如果你在尋找有很多很炫的功能的開發平台，CSSDeck可能不適合你。它的簡潔性讓你更專註於最重要的事情，這也是它最大的特點。【前往CSSDeck】

5. Dabblet

當我還在使用十六進位顏色代碼的時候，Dabblet的特性讓我驚訝了，它的顏色預覽居然顯示在代碼旁，這是我第一次見到這樣的設置。雖然我不確定這是否是一個有用的特性，但是它的整潔性還是給我留下了很深的印象。

現在，Dabblet最棒的地方在於它允許用戶以5個不同的視角進行預覽，分別是CSS編輯器和效果，HTML編輯器和效果，CSS和HTML的編輯器和效果，JavaScript及運行結果，全部綜合效果。這些功能在絕大部分的開發環境中都沒有。

它也有不足，第一，Dabblet缺乏HTML和CSS的預處理器，這是令人困惑的。第二，它沒有內置的JavaScript庫，不過你可以通過手動插入JavaScript庫來解決。第三，它的每個板塊大小是固定的，無法作出調整，這和以前傳統的調試平台是一樣的。第四，它缺少一個用於演示其他用戶作品的板塊。【前往Dabblet】

6. Liveweave

Liveweave是一個擁有很多功能的開發平台，比如可以關閉的實時預覽。你也可以為了保護視力，開啟夜間模式，將所有界面都變暗。Liveweave提供了20多個JavaScript庫，甚至還支持SVG。其內置的標尺使測量更加精確，更符合美學標準。

它還有一個吸引我眼球的地方，就是它的協作功能。如果你過去曾經使用過Teamviewer，你會發現它們是相似的。你需要做的事只是點擊協作鏈接，你就可以分享來自於你到weave的鏈接了。

你甚至可以下載你的weave文件，並把它保存為單獨的HTML文件或者保存為包含獨立HTML、CSS和JS文件的zip壓縮包。對了，Liveweave還有一個內置的Lorem Ipsum生成器。 【前往Liveweave】

結語

當然，每一個平台和工具都有它自己的特性，都會對你有所幫助

如何用JAVASCRIPT在頁面上畫流程圖

只能用canvas了，

百-度 青春華航，這是我的博客，希望多多交流。

webpack執行機制流程是怎麼樣的

幾乎所有業務的開發構建都會用到 webpack 。的確，作為模塊載入和打包神器，只需配置幾個文件，載入各種 loader 就可以享受無痛流程化開發。但對於 webpack 這樣一個複雜度較高的插件集合，它的整體流程及思想對我們來說還是很透明的。那麼接下來我會帶你了解 webpack 這樣一個構建黑盒，首先來談談它的流程。

準備工作

1. webstorm 中配置 webpack-webstorm-debugger-script

在開始了解之前，必須要能對 webpack 整個流程進行 debug ，配置過程比較簡單。

先將 webpack-webstorm-debugger-script 中的軟體外包企業公司 置於 webpack.config.js 的同一目錄下，搭建好你的腳手架後就可以直接 Debug 這個 webstorm-debugger.js 文件了。

2. webpack.config.js 配置

估計大家對 webpack.config.js 的配置也嘗試過不少次了，這裡就大致對這個配置文件進行個分析。

var path = require(‘path’);

var node_modules = path.resolve(__dirname, ‘node_modules’);

var pathToReact = path.resolve(node_modules, ‘react/dist/react.min.js’);

module.exports = {

// 入口文件，是模塊構建的起點，同時每一個入口文件對應最後生成的一個 chunk。

entry: {

bundle: [

‘webpack/hot/dev-server’,

‘webpack-dev-server/client?’,

path.resolve(__dirname, ‘app/app.js’)

],

},

// 文件路徑指向(可加快打包過程)。

resolve: {

alias: {

‘react’: pathToReact

}

},

// 生成文件，是模塊構建的終點，包括輸出文件與輸出路徑。

output: {

path: path.resolve(__dirname, ‘build’),

filename: ‘[name].js’,

},

// 這裡配置了處理各模塊的 loader ，包括 css 預處理 loader ，es6 編譯 loader，圖片處理 loader。

module: {

loaders: [

{

test: /\.js$/,

loader: ‘babel’,

query: {

presets: [‘es2015’, ‘react’]

}

}

],

noParse: [pathToReact]

},

// webpack 各插件對象，在 webpack 的事件流中執行對應的方法。

plugins: [

new webpack.HotModuleReplacementPlugin();

]

};

除此之外再大致介紹下 webpack 的一些核心概念:

loader : 能轉換各類資源，並處理成對應模塊的載入器。loader 間可以串列使用。

chunk : code splitting後的產物，也就是按需載入的分塊，裝載了不同的module。

對於module和chunk的關係可以參照webpack官方的這張圖:

plugin : webpack 的插件實體，這裡以 UglifyJsPlugin 為例。

function UglifyJsPlugin(options) {

this.options = options;

}

module.exports = UglifyJsPlugin;

UglifyJsPlugin.prototype.apply = function(compiler) {

compiler.plugin(“compilation”, function(compilation) {

compilation.plugin(“build-module”, function(module) {

});

compilation.plugin(“optimize-chunk-assets”, function(chunks, callback) {

// Uglify 邏輯

});

compilation.plugin(“normal-module-loader”, function(context) {

});

});

};

在 webpack 中你經常可以看到 compilation.plugin(‘xxx’, callback) ，你可以把它當作是一個事件的綁定，這些事件在打包時由 webpack 來觸發。

3. 流程總覽

在具體流程學習前，可以先通過這幅 webpack整體流程圖 了解一下大致流程(建議保存下來查看)。

shell 與 config 解析

每次在命令行輸入 webpack 後，操作系統都會去調用 ./node_modules/.bin/webpack 這個 shell 腳本。這個腳本會去調用./node_modules/webpack/bin/webpack.js 並追加輸入的參數，如 -p , -w 。(圖中 webpack.js 是 webpack 的啟動文件，而 $@ 是後綴參數)

在 webpack.js 這個文件中 webpack 通過 optimist 將用戶配置的 webpack.config.js 和 shell 腳本傳過來的參數整合成 options 對象傳到了下一個流程的控制對象中。

1. optimist

和 commander 一樣，optimist 實現了 node 命令行的解析，其 API 調用非常方便。

var optimist = require(“optimist”);

optimist

.boolean(“json”).alias(“json”, “j”).describe(“json”)

.boolean(“colors”).alias(“colors”, “c”).describe(“colors”)

.boolean(“watch”).alias(“watch”, “w”).describe(“watch”)

…

獲取到後綴參數後，optimist 分析參數並以鍵值對的形式把參數對象保存在 optimist.argv 中，來看看 argv 究竟有什麼？

// webpack –hot -w

{

hot: true,

profile: false,

watch: true,

…

}

2. config 合併與插件載入

在載入插件之前，webpack 將 webpack.config.js 中的各個配置項拷貝到 options 對象中，並載入用戶配置在 webpack.config.js 的 plugins 。接著 optimist.argv 會被傳入到 ./node_modules/webpack/bin/convert-argv.js 中，通過判斷 argv 中參數的值決定是否去載入對應插件。(至於 webpack 插件運行機制，在之後的運行機制篇會提到)

ifBooleanArg(“hot”, function() {

ensureArray(options, “plugins”);

var HotModuleReplacementPlugin = require(“../lib/HotModuleReplacementPlugin”);

options.plugins.push(new HotModuleReplacementPlugin());

});

…

return options;

options 作為最後返回結果，包含了之後構建階段所需的重要信息。

{

entry: {},//入口配置

output: {}, //輸出配置

plugins: [], //插件集合(配置文件 + shell指令)

module: { loaders: [ [Object] ] }, //模塊配置

context: //工程路徑

…

}

這和 webpack.config.js 的配置非常相似，只是多了一些經 shell 傳入的插件對象。插件對象一初始化完畢， options 也就傳入到了下個流程中。

var webpack = require(“../lib/webpack.js”);

var compiler = webpack(options);

編譯與構建流程

在載入配置文件和 shell 後綴參數申明的插件，並傳入構建信息 options 對象後，開始整個 webpack 打包最漫長的一步。而這個時候，真正的 webpack 對象才剛被初始化，具體的初始化邏輯在 lib/webpack.js 中，如下:

function webpack(options) {

var compiler = new Compiler();

…// 檢查options,若watch欄位為true,則開啟watch線程

return compiler;

}

…

webpack 的實際入口是 Compiler 中的 run 方法，run 一旦執行後，就開始了編譯和構建流程 ，其中有幾個比較關鍵的 webpack 事件節點。

compile 開始編譯

make 從入口點分析模塊及其依賴的模塊，創建這些模塊對象

build-module 構建模塊

after-compile 完成構建

seal 封裝構建結果

emit 把各個chunk輸出到結果文件

after-emit 完成輸出

1. 核心對象 Compilation

compiler.run 後首先會觸發 compile ，這一步會構建出 Compilation 對象:

compilation類圖

這個對象有兩個作用，一是負責組織整個打包過程，包含了每個構建環節及輸出環節所對應的方法，可以從圖中看到比較關鍵的步驟，如 addEntry() , _addModuleChain() , buildModule() , seal() , createChunkAssets() (在每一個節點都會觸發 webpack 事件去調用各插件)。二是該對象內部存放著所有 module ，chunk，生成的 asset 以及用來生成最後打包文件的 template 的信息。

2. 編譯與構建主流程

在創建 module 之前，Compiler 會觸發 make，並調用 Compilation.addEntry 方法，通過 options 對象的 entry 欄位找到我們的入口js文件。之後，在 addEntry 中調用私有方法 _addModuleChain ，這個方法主要做了兩件事情。一是根據模塊的類型獲取對應的模塊工廠並創建模塊，二是構建模塊。

而構建模塊作為最耗時的一步，又可細化為三步:

調用各 loader 處理模塊之間的依賴

webpack 提供的一個很大的便利就是能將所有資源都整合成模塊，不僅僅是 js 文件。所以需要一些 loader ，比如 url-loader ，jsx-loader ， css-loader 等等來讓我們可以直接在源文件中引用各類資源。webpack 調用 doBuild() ，對每一個 require() 用對應的 loader 進行加工，最後生成一個 js module。

Compilation.prototype._addModuleChain = function process(context, dependency, onModule, callback) {

var start = this.profile +new Date();

…

// 根據模塊的類型獲取對應的模塊工廠並創建模塊

var moduleFactory = this.dependencyFactories.get(dependency.constructor);

…

moduleFactory.create(context, dependency, function(err, module) {

var result = this.addModule(module);

…

this.buildModule(module, function(err) {

…

// 構建模塊，添加依賴模塊

}.bind(this));

}.bind(this));

};

調用 acorn 解析經 loader 處理後的源文件生成抽象語法樹 AST

Parser.prototype.parse = function parse(source, initialState) {

var ast;

if(!ast) {

// acorn以es6的語法進行解析

ast = acorn.parse(source, {

ranges: true,

locations: true,

ecmaVersion: 6,

sourceType: “module”

});

}

…

};

遍歷 AST，構建該模塊所依賴的模塊

對於當前模塊，或許存在著多個依賴模塊。當前模塊會開闢一個依賴模塊的數組，在遍歷 AST 時，將 require() 中的模塊通過addDependency() 添加到數組中。當前模塊構建完成後，webpack 調用 processModuleDependencies 開始遞歸處理依賴的 module，接著就會重複之前的構建步驟。

Compilation.prototype.addModuleDependencies = function(module, dependencies, bail, cacheGroup, recursive, callback) {

// 根據依賴數組(dependencies)創建依賴模塊對象

var factories = [];

for(var i = 0; i dependencies.length; i++) {

var factory = _this.dependencyFactories.get(dependencies[i][0].constructor);

factories[i] = [factory, dependencies[i]];

}

…

// 與當前模塊構建步驟相同

}

3. 構建細節

module 是 webpack 構建的核心實體，也是所有 module的 父類，它有幾種不同子類：NormalModule , MultiModule ,ContextModule , DelegatedModule 等。但這些核心實體都是在構建中都會去調用對應方法，也就是 build() 。來看看其中具體做了什麼:

// 初始化module信息，如context,id,chunks,dependencies等。

NormalModule.prototype.build = function build(options, compilation, resolver, fs, callback) {

this.buildTimestamp = new Date().getTime(); // 構建計時

this.built = true;

return this.doBuild(options, compilation, resolver, fs, function(err) {

// 指定模塊引用，不經acorn解析

if(options.module options.module.noParse) {

if(Array.isArray(options.module.noParse)) {

if(options.module.noParse.some(function(regExp) {

return typeof regExp === “string” ?

this.request.indexOf(regExp) === 0 :

regExp.test(this.request);

}, this)) return callback();

} else if(typeof options.module.noParse === “string” ?

this.request.indexOf(options.module.noParse) === 0 :

options.module.noParse.test(this.request)) {

return callback();

}

}

// 由acorn解析生成ast

try {

this.parser.parse(this._source.source(), {

current: this,

module: this,

compilation: compilation,

options: options

});

} catch(e) {

var source = this._source.source();

this._source = null;

return callback(new ModuleParseError(this, source, e));

}

return callback();

}.bind(this));

};

對於每一個 module ，它都會有這樣一個構建方法。當然，它還包括了從構建到輸出的一系列的有關 module 生命周期的函數

js html 流程圖 關係圖

沒有例子，不太明白你想要什麼。。。。從圖看職能是ps出來的切到網站上

不過做圖表的特效倒是有，和你給的不太一樣

你看看這個是不是你想要的效果

下面是合集地址

html+js畫流程圖,想顯示如下流程圖，不做拖拽保存功能，僅僅顯示就可以。哪位能夠給點思路或者例子？感謝

圓形可以用div或span，然後用CSS樣式中的border-radius，箭頭可以用圖片，差不多的箭頭旋轉後就可以達到效果