"我的最爱"项目总结

功能

• 文件下发 - 即对/data和/static两个目录有写操作
  • 背景图
  • 宫格
  • 推荐网址
  • 搜索(通过接口下发)
• 其它(略)

设计原则

• 支持并行开发
• 尽可能隔离浏览器接口，像普通网页一样开发 LocalPage
• 组件化开发，便于以后扩展/升级

目录结构

  // 开发环境
  myfavor/
  |-- src/
  |   |-- static/
  |   |-- data/
  |   |-- api/
  |   |-- common/
  |   |-- component/
  |   |-- utils/
  |   |-- third/
  |   |-- index/
  |       |-- index.js
  |       |-- index.scss
  |       |-- tpl.xhtml
  |-- resolver/
  |-- doc/
  |-- pagekage.json
  |-- webpack.config.js
  |-- README.md

  // 生产环境
  MyFavorStartPage
  |-- data/
  |-- static/
  |-- images/
  |-- script/
  |-- style/
  |-- index1.html
  |-- index2.html

Webpack

• 通过 html-webpack-plugin 生成index1.html页面，再用 plugin 生成index2.html

    let list = fs.readdirSync(path.resolve(input))
    for (let dir of list) {
      if (dir[0] === '_') continue
      let filename = path.resolve(input, dir, 'index.js')
      let exist = fs.existsSync(filename)
      if (exist) {
        // code ...
        new HtmlWebpackPlugin({
          filename: dir.indexOf('index') > -1 ? `${dir}1.html` : `${dir}.html`,
          template: path.resolve(input, dir, `tpl.html`),
          inject: true,
          chunks: ['manifest', ...chunks],
          chunksSortMode: createInjectOrderMethod(chunks)
        })
        // code ...
      }
    }

• loader - ex: scss => css => autoprefixer => css-module
• ExtractTextPlugin 分离到文件
• externals 兼容旧的 define() 定义数据格式的文件

    var define = (function(dataMap) {
      return function(data) {
        for (var key in data) {
          if (dataMap[key]) {
            window[dataMap[key]] = data;
            break;
          }
        }
      };
    })({
      'sites': '_preset',
      'hotSites': '_hotsites',
      'backgrounds': '_backgrounds',
      'recommends': '_recommends',
      'channels': '_channels'
    });

• 使用 copy-webpack-plugin复制 data 和 static 目录
• sourcemap
• import()

    import(/* webpackChunkName: "news" */ 'component/news')
      .then(NewsComponent => NewsComponent.init())

• resolve.alias 简化 import 模块路径

    // 在任意路径下文件
    import { dispatch } from 'utils/pubsub.js'
    import * as messagechannel from 'utils/messagechannel.js'

代码结构

• 代码分层以及数据流向
  • 接口和实现分离
  • 
• 其它
  • 自适应
  • 拖拽
  • 背景切换
  • 加载
  • CSS 自定义属性
    • 滚动
    • 动画
  • dispatch
  • MessageChannel
    • storage 事件
    • 同步导致卡顿
    • 相同值时不触发事件
    • 本身不是用来做通信的
  • cache 过期策略
  • 新闻接口设计(type/url)
  • pingback
  • …

History/坑

（略）