xueqianban 班会第 50 期

班会第 50 期

Open ufologist opened this issue 7 years ago • 0 comments

技术
- 通过 webpack 来驱动 Web 开发
  - webpack 前端工程化应用
  - 基于 webpack 的多页应用架构
  - 没有任何魔法, 便于扩展出适合自己的前端工程化方案, 例如单页, react, vue 等
- 开发时使用的专属服务器
  开发时使用的服务器需要具备哪些功能
  - 静态文件服务器
  - 静态文件修改后浏览器自动刷新
  - Mock API Server
  - 代理后端真实接口(最好 Mock API Server 能够灵活切换到真实接口或者使用 Mock 接口)
  即需要集 static server + mock server + proxy server + live-reload 于一身
  
  后来发现通过扩展 puer 能够更好的实现(不需要开两个服务了), 因此已经转投到 puer-proxy.
  
  puer-proxy 在 [email protected] 的基础上添加了自定义代理上下文的功能, 主要是为了实现 #36 的需求, 与 puer-mock 配合来使用(必须规范所有的 mock api 都在一个根路径下, 例如 /api/). 具体使用场景: puer-proxy 与 puer-mock 搭配使用让你快速切换真假接口
- jQuery选择什么版本 1.x? 2.x? 3.x?
  类似标题：jQuery选择什么版本?jquery一般用什么版本？jquery ie8兼容版本。jquery什么版本稳定？
  
  目前jQuery有三个大版本：
  - 1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
  - 2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
  - 3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。
  官方关于浏览器支持的说明截图：
- 学习Vue.js源码
  目标Vue.js版本是2.0.5
  
  响应的数据绑定: Vue源码对此实现的逻辑在core/observer目录下
  - Vue.js实现数据绑定的关键是Object.defineProperty(obj, prop, descriptor)，这也是为什么2.0不支持IE8原因之一，IE8下无法实现defineProperty的腻子脚本
  - Observer类实例是用来附加到每个被观察的对象（后面称之为响应式对象）上的。普通对象通常是不会变成‘响应式对象’的。经过defineReactive函数的调用,才会将传入的普通对象变成‘响应式对象’。而defineReactive就是利用了Object.defineProperty这个方法
  Virtual-dom
  - React的大热，是因为其带来了’Virtual-dom’和数据驱动视图的理念
  - 整个HTML页面结构其实可以用一个JavaScript对象表示，通过这个抽象, 要改变HTML结构的时候，我们仅仅是修改JavaScript对象。相对以前修改HTML页面结构式通过直接修改DOM元素，现在变成修改对应的JavaScript对象
  - 在实现了对HTML结构的映射后，接下来就是‘Virtual-dom’的重点，如何比较两个不同HTML结构树的对象–diff算法
  - diff算法比较的就是两颗’树’的差异。而传统的’树’比较是一个时间复杂度为O(n^3)，这个效率明显是不够的。而HTML的结构树的改变不同于传统的’树’。HTML结构树的改变，很少会出现跨越不同层级的改变。基于这个实际上的差异化改变，‘Virtual-dom’的diff算法的时间复杂度是O(n)
  - 在解决了diff算法核心问题后，就要把’新HTML结构树’相对’老HTML结构树’的差异应用到’老HTML结构树’上–‘patch’
- AngularJS 1.x 入门实践
  - 入门资源
  - 使用感受
  - 常见问题
- 你也许并不需要构建工具
  - express static server
  - NPM scripts
  - 文件监听器 chokidar
```
const cp = require('child_process');
const chokidar = require('chokidar');

function run (scriptName) {
  const child = cp.spawn('npm', ['run', scriptName]);
  child.stdout.pipe(process.stdout);
  child.stderr.pipe(process.stderr);
}

require('./server'); // run the server
run('build-css');
run('build-js');

chokidar.watch('css/**/*.styl')
        .on('change', path => run('build-css'));
chokidar.watch('js/**/*.js')
        .on('change', path => run('build-js'));
chokidar.watch('public/js/main.js')
        .on('change', path => run('uglify-js'));
```
产品
- HTML5 UP! Responsive HTML5 and CSS3 Site Templates
  makes spiffy HTML5 site templates that are:
  - Responsive
    - Desktop
    - Tablet
    - Mobile
  - HTML5 + CSS3
  - Customizable
  - 100% Free under the Creative Commons

Mar 21 '17 03:03 ufologist

xueqianban xueqianban copied to clipboard

班会第 50 期

xueqianban
xueqianban copied to clipboard