图解WebGL&Three.js工作原理

2017/05/22 · HTML5 ·
WebGL

原文出处: 万波   

“哥,你又来啦?”
“是啊,我随便逛逛。”
“别介啊……给我20分钟,成不?”
“5分钟吧,我很忙的。”
“不行,20分钟,不然我真很难跟你讲清楚。”
“好吧……”
“行,那进来吧,咱好好聊聊”

面试官:请手写一个webpack4.0配置

2018/07/23 · 基础技术 ·
webpack

原文出处: WsmDyj   

确认过眼神,你还是没有准备秋招的人?时间仓促。自京东6月8号开启管培生的招聘,就意味着秋招的开始。然而你还在等着秋天的到来?今年形势应该更为严峻,随着各大技术(vue,webpack,react,微信小程序)生态越来越成熟,这也意味着我们要更加深入的去了解他们,掌握他们。比如你写vue项目,知道vue-cli。写的项目也无以伦比,但是你是否又会去了解下vue-cli到底发生了什么?或许这就是面试官要问你的问题:请手写一个webpack4.0的配置。

谈谈 Redux 与 Mobx 思想的适用场景

2017/03/11 · 基础技术 ·
mobx,
Redux

本文作者: 伯乐在线 –
ascoders
。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

一、我们讲什么?

我们讲两个东西:
1、WebGL背后的工作原理是什么?
2、以Three.js为例,讲述框架在背后扮演什么样的角色?

前言

机会总是留给有准备的人,要想在这兵荒马乱的求职季里出类拔萃,拿下你心中期待已久的offer。那么你更因该知道很多别人不知道的东西,你的羽翼才能丰满,才能翱翔于天际。鹰击长空,靠的不是天生,而是年少时断崖之险。笨鸟先飞,靠的不是智慧,而是孜孜不倦的努力。

函数式 vs 面向对象

首先任何避开业务场景的技术选型都是耍流氓,我先耍一下流氓,首先函数式的优势,比如:

  1. 无副作用,可时间回溯,适合并发。
  2. 数据流变换处理很拿手,比如 rxjs。
  3. 对于复杂数据逻辑、科学计算维的开发和维护效率更高。

当然,连原子都是由带正电的原子核,与带负电的电子组成的,几乎任何事务都没有绝对的好坏,面向对象也存在很多优势,比如:

  1. javascript 的鸭子类型,表明它基于对象,不适合完全函数式表达。
  2. 数学思维和数据处理适合用函数式,技术是为业务服务的,而业务模型适合用面向对象。
  3. 业务开发和做研究不同,逻辑严谨的函数式相当完美,但别指望每个程序员都愿意消耗大量脑细胞解决日常业务问题。

二、我们为什么要了解原理?

我们假定你对WebGL已经有一定了解,或者用Three.js做过了一些东西,这个时候,你可能碰到了这样一些问题:
1、很多东西还是做不出来,甚至没有任何思路;
2、碰到bug无法解决,甚至没有方向;
3、性能出现问题,完全不知道如何去优化。
这个时候,我们需要了解更多。

webpack详解

webpack是一个打包工具,他的宗旨是一切静态资源即可打包。有人就会问为什么要webpack?webpack是现代前端技术的基石,常规的开发方式,比如jquery,html,css静态网页开发已经落后了。现在是MVVM的时代,数据驱动界面。webpack将现代js开发中的各种新型有用的技术,集合打包。webpack的描述铺天盖地,我就不浪费大家的时间了。理解下这种图就知道webpack的生态圈了:
图片 1

Redux vs Mobx

那么具体到这两种模型,又有一些特定的优缺点呈现出来,先谈谈 Redux
的优势:

  1. 数据流流动很自然,因为任何 dispatch
    都会导致广播,需要依据对象引用是否变化来控制更新粒度。
  2. 如果充分利用时间回溯的特征,可以增强业务的可预测性与错误定位能力。
  3. 时间回溯代价很高,因为每次都要更新引用,除非增加代码复杂度,或使用
    immutable。
  4. 时间回溯的另一个代价是 action 与 reducer
    完全脱节,数据流过程需要自行脑补。原因是可回溯必然不能保证引用关系。
  5. 引入中间件,其实主要为了解决异步带来的副作用,业务逻辑或多或少参杂着
    magic。
  6. 但是灵活利用中间件,可以通过约定完成许多复杂的工作。
  7. 对 typescript 支持困难。

Mobx:

  1. 数据流流动不自然,只有用到的数据才会引发绑定,局部精确更新,但免去了粒度控制烦恼。
  2. 没有时间回溯能力,因为数据只有一份引用。
  3. 自始至终一份引用,不需要 immutable,也没有复制对象的额外开销。
  4. 没有这样的烦恼,数据流动由函数调用一气呵成,便于调试。
  5. 业务开发不是脑力活,而是体力活,少一些 magic,多一些效率。
  6. 由于没有 magic,所以没有中间件机制,没法通过 magic
    加快工作效率(这里 magic 是指 action 分发到 reducer 的过程)。
  7. 完美支持 typescript。

三、先了解一个基础概念

1、什么是矩阵?
简单说来,矩阵用于坐标变换,如下图:
图片 2
2、那它具体是怎么变换的呢,如下图:
图片 3
3、举个实例,将坐标平移2,如下图:
图片 4

如果这时候,你还是没有理解,没有关系,你只需要知道,矩阵用于坐标变换。

webpack4.0的配置

JavaScript

const path = require(‘path’); //引入node的path模块 const webpack =
require(‘webpack’); //引入的webpack,使用lodash const HtmlWebpackPlugin =
require(‘html-webpack-plugin’) //将html打包 const ExtractTextPlugin =
require(‘extract-text-webpack-plugin’) //打包的css拆分,将一部分抽离出来
const CopyWebpackPlugin = require(‘copy-webpack-plugin’) //
console.log(path.resolve(__dirname,’dist’)); //物理地址拼接
module.exports = { entry: ‘./src/index.js’, //入口文件 在vue-cli main.js
output: { //webpack如何输出 path: path.resolve(__dirname, ‘dist’),
//定位,输出文件的目标路径 filename: ‘[name].js’ }, module: {
//模块的相关配置 rules: [ //根据文件的后缀提供一个loader,解析规则 {
test: /\.js$/, //es6 => es5 include: [ path.resolve(__dirname,
‘src’) ], // exclude:[], 不匹配选项(优先级高于test和include) use:
‘babel-loader’ }, { test: /\.less$/, use: ExtractTextPlugin.extract({
fallback: ‘style-loader’, use: [ ‘css-loader’, ‘less-loader’ ] }) }, {
//图片loader test: /\.(png|jpg|gif)$/, use: [ { loader: ‘file-loader’
//根据文件地址加载文件 } ] } ] }, resolve: { //解析模块的可选项 //
modules: [ ]//模块的查找目录 配置其他的css等文件 extensions: [“.js”,
“.json”, “.jsx”,”.less”, “.css”], //用到文件的扩展名 alias: {
//模快别名列表 utils: path.resolve(__dirname,’src/utils’) } },
plugins: [ //插进的引用, 压缩,分离美化 new
ExtractTextPlugin(‘[name].css’), //[name] 默认 也可以自定义name
声明使用 new HtmlWebpackPlugin({
//将模板的头部和尾部添加css和js模板,dist
目录发布到服务器上,项目包。可以直接上线 file: ‘index.html’,
//打造单页面运用 最后运行的不是这个 template: ‘src/index.html’
//vue-cli放在跟目录下 }), new CopyWebpackPlugin([
//src下其他的文件直接复制到dist目录下 {
from:’src/assets/favicon.ico’,to: ‘favicon.ico’ } ]), new
webpack.ProvidePlugin({ //引用框架 jquery
lodash工具库是很多组件会复用的,省去了import ‘_’: ‘lodash’
//引用webpack }) ], devServer: { //服务于webpack-dev-server
内部封装了一个express port: ‘8080’, before(app) {
app.get(‘/api/test.json’, (req, res) => { res.json({ code: 200,
message: ‘Hello World’ }) }) } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
const path = require(‘path’);  //引入node的path模块
const webpack = require(‘webpack’); //引入的webpack,使用lodash
const HtmlWebpackPlugin = require(‘html-webpack-plugin’)  //将html打包
const ExtractTextPlugin = require(‘extract-text-webpack-plugin’)     //打包的css拆分,将一部分抽离出来  
const CopyWebpackPlugin = require(‘copy-webpack-plugin’)
// console.log(path.resolve(__dirname,’dist’)); //物理地址拼接
module.exports = {
    entry: ‘./src/index.js’, //入口文件  在vue-cli main.js
    output: {       //webpack如何输出
        path: path.resolve(__dirname, ‘dist’), //定位,输出文件的目标路径
        filename: ‘[name].js’
    },
    module: {       //模块的相关配置
        rules: [     //根据文件的后缀提供一个loader,解析规则
            {
                test: /\.js$/,  //es6 => es5
                include: [
                    path.resolve(__dirname, ‘src’)
                ],
                // exclude:[], 不匹配选项(优先级高于test和include)
                use: ‘babel-loader’
            },
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: ‘style-loader’,
                    use: [
                    ‘css-loader’,
                    ‘less-loader’
                    ]
                })
            },
            {       //图片loader
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: ‘file-loader’ //根据文件地址加载文件
                    }
                ]
            }
        ]                  
    },
    resolve: { //解析模块的可选项  
        // modules: [ ]//模块的查找目录 配置其他的css等文件
        extensions: [".js", ".json", ".jsx",".less", ".css"],  //用到文件的扩展名
        alias: { //模快别名列表
            utils: path.resolve(__dirname,’src/utils’)
        }
    },
    plugins: [  //插进的引用, 压缩,分离美化
        new ExtractTextPlugin(‘[name].css’),  //[name] 默认  也可以自定义name  声明使用
        new HtmlWebpackPlugin({  //将模板的头部和尾部添加css和js模板,dist 目录发布到服务器上,项目包。可以直接上线
            file: ‘index.html’, //打造单页面运用 最后运行的不是这个
            template: ‘src/index.html’  //vue-cli放在跟目录下
        }),
        new CopyWebpackPlugin([  //src下其他的文件直接复制到dist目录下
            { from:’src/assets/favicon.ico’,to: ‘favicon.ico’ }
        ]),
        new webpack.ProvidePlugin({  //引用框架 jquery  lodash工具库是很多组件会复用的,省去了import
            ‘_’: ‘lodash’  //引用webpack
        })
    ],
    devServer: {  //服务于webpack-dev-server  内部封装了一个express
        port: ‘8080’,
        before(app) {
            app.get(‘/api/test.json’, (req, res) => {
                res.json({
                    code: 200,
                    message: ‘Hello World’
                })
            })
        }
    }
    
}

到底如何选择

从目前经验来看,我建议前端数据流不太复杂的情况,使用
Mobx,因为更加清晰,也便于维护;如果前端数据流极度复杂,建议谨慎使用
Redux,通过中间件减缓巨大业务复杂度,但还是要做到对开发人员尽量透明,如果可以建议使用
typescript 辅助。

打赏支持我写出更多好文章,谢谢!

打赏作者

四、WebGL的工作原理

一、前端环境搭建

我们使用npm或yarn来安装webpack

JavaScript

npm install webpack webpack-cli -g # 或者 yarn global add webpack
webpack-cli

1
2
3
npm install webpack webpack-cli -g
# 或者
yarn global add webpack webpack-cli

为什么webpack会分为两个文件呢?在webpack3中,webpack本身和它的cli以前都是在同一个包中,但在第4版中,他们已经将两者分开来更好地管理它们。

新建一个webpack的文件夹,在其下新建一个try-webpack(防止init时项目名和安装包同名)并初始化和配置webpack。

JavaScript

npm init -y //-y 默认所有的配置 yarn add webpack webpack-cli -D //-D
webpack安装在devDependencies环境中

1
2
npm init -y  //-y 默认所有的配置
yarn add webpack webpack-cli -D  //-D webpack安装在devDependencies环境中

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 5
图片 6

1 赞 1 收藏
评论

4.1、WebGL API

在了解一门新技术前,我们都会先看看它的开发文档或者API。
查看Canvas的绘图API,我们会发现它能画直线、矩形、圆、弧线、贝塞尔曲线。
于是,我们看了看WebGL绘图API,发现:
图片 7

它只能会点、线、三角形?一定是我看错了。
没有,你没看错。
图片 8

就算是这样一个复杂的模型,也是一个个三角形画出来的。

二、部署webpack

在上面搭建好的环境项目中,我们来到package.json里配置我们的scripts,让webpack

JavaScript

“scripts”: { “build”: “webpack –mode production”
//我们在这里配置,就可以使用npm run build 启动我们的webpack },
“devDependencies”: { “webpack”: “^4.16.0”, “webpack-cli”: “^3.0.8” }

1
2
3
4
5
6
7
  "scripts": {
    "build": "webpack –mode production" //我们在这里配置,就可以使用npm run build 启动我们的webpack
  },
  "devDependencies": {
    "webpack": "^4.16.0",
    "webpack-cli": "^3.0.8"
  }

配置好我们webpack的运行环境时,联想下vue-cli。平时使用vue-cli会自动帮我们配置并生成项目。我们在src下进行项目的开发,最后npm
run build
打包生成我们的dist的目录。不知道你是否还记得,还是让我们进入下一节让我们感受下这其中的正个流程吧。

关于作者:ascoders

图片 9

前端小魔法师
个人主页 ·
我的文章 ·
7

图片 10

发表评论

电子邮件地址不会被公开。 必填项已用*标注