ES5函数式编程

作用域问题

;function(doc,tools,compute){
    
  var init = function(){
    bindEvent();
  }
  
  function bindEvent(){
    
  }
  
  init();
}(document,tools,compute)

一个函数完成一个功能，来更好的复用

document作为立即执行函数的实参传入

减少作用域查询时间，优化性能

工具函数

• tools.js

在index.js前引入

var initToolsModule = (function () {

  function digitalize(str) {
    return Number(str.replace(/\s+/g, '')) || 0;
  }

  function getTarget(ev) {
    var e = ev || window.event;
    return e.target || e.srcElement;
  }

  return {
    digitalize: digitalize,
    getTarget: getTarget
  }
})();

var initComputeModule = (function () {

  function plus(a, b) {
    return a + b;
  }

  function minus(a, b) {
    return a - b;
  }

  function mul(a, b) {
    return a * b;
  }

  function div(a, b) {
    return a / b;
  }

  return {
    plus: plus,
    minus: minus,
    mul: mul,
    div: div
  }
})();


initToolsModule作为立即执行函数的实参传入

initComputeModule作为立即执行函数的实参传入

事件对象，事件源对象封装起来

  function getTarget(ev) {
    var e = ev || window.event;
    return e.target || e.srcElement;
  }

webpack

npm init

安装依赖

• 三大件
  • webpack
  • webpack-cli
  • webpack-dev-server
• 处理js
  • ES6
    • babel-loader@7
    • babel-core
    • babel-preset-env
  • ES7
    • babel-plugin-transform-runtime
  • 装饰器
    • babel-plugin-transform-decorators
    • babel-plugin-transform-decorators-legacy
• 处理css
  • sass
    • sass-loader
    • node-sass
    • css-loader
    • postcss-loader autoprefixer(css3前缀)
    • style-loader
• 处理模版
  • ejs-loader
• 处理html
  • html-webpack-plugin

webpack.config.js