Keep

"我的最爱"项目总结

2017/12/26 07:00

功能

  • 文件下发 - 即对/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复制 datastatic 目录
  • 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'

代码结构

  • 代码分层以及数据流向

    • 接口和实现分离
    • myfavor
  • 其它

    • 自适应
    • 拖拽
    • 背景切换
    • 加载
    • CSS 自定义属性
    • 滚动
    • 动画
    • dispatch
    • MessageChannel
    • storage 事件
    • 同步导致卡顿
    • 相同值时不触发事件
    • 本身不是用来做通信的
    • cache 过期策略
    • 新闻接口设计(type/url)
    • pingback

History/坑

(略)

Tag:
工作日常

Redky,生活在北京(北漂),程序员,宅,喜欢动漫(海贼王)。"年轻骑士骑马出城,不曾见过绝望堡下森森骸骨,就以为自己可以快意屠龙拯救公主。"