前端组件化思维与技巧

开发流程

• 技术选型分析
• 构建工具
  • 资源压缩 静态资源替换 模块化处理 编译处理
  • gulp （任务管理，文件操作：流式，读一次，然后内存写入）
  • grunt （任务管理，文件操作：输入输出，先读取，再写入，重复循环）当项目复杂后，IO效率就非常低
  • webpack (编译，打包)
  • fis （百度）
  • prepack （脸书，及时编译工具，无DOM,BOM）
  • rollup
• MVVM框架 (作者对Bug的处理速度)
  • 原理能不能吃透
  • Vue
  • React
  • Ag
• 模块化设计
  • css
  • js
• 自适应方案
  • 一份代码，多设备适配

知识点

1、基本概念

• CSS像素、设备像素、逻辑像素、设备像素比
• viewport
• rem

2、工作原理

• 利用viewport和设备像素比调整基准像素
• 利用px2rem自动转换css单位
  

彩蛋：关于layout viewport ，visual viewport和 ideal viewport的区别：https://www.cnblogs.com/2050/p/3877280.html

• 代码维护及复用性设计
  • 需求变更
  • 产品迭代
  • Bug变更
  • 新功能开发
• 工程构建（业务开发）
• 测试验证
• 发布上线

CSS模块化设计

• 设计原则
  • 可复用可继承要完整
  • 周期性迭代 （根据项目要求来设计，重构，模仿）
• 设计方法
  • 先整体后部分再颗粒化
  • 先抽象再具体
    
    

JS模块化设计

• 原则
  • 高内聚，低耦合
  • 周期性迭代
• 方法
  • 整体-部分-颗粒化
  • 尽可能抽象

SPA设计

• 前后端分离
• 减轻服务器压力
• 增强用户体验，减少等待时间
• Prerender预渲染优化SEO
• 工作原理
  • History API 优雅
  • Hash 兼容性
    

<a href="" class="api a">a</a>
    <a href="" class="api b">b</a>
    <script type="text/javascript">
    // 注册路由
    document.querySelectorAll('.api').forEach(item=>{
        item.addEventListener('click',(e) => {
          e.preventDefault();
          let link = item.textContent;
          window.history.pushState({name:'api'},link,link);
        }, false)
    });
    // 监听路由
    window.addEventListener('popstate',(e) => {
      console.log({
        location:location.href,
        state:e.state
      });
    }, false);

<a href="" class="hash a">a</a>
    <a href="" class="hash b">b</a>
    <script type="text/javascript">
       // 注册路由
        document.querySelectorAll('.hash').forEach(item => {
          item.addEventListener('click', (e) => {
            e.preventDefault();
            let link = item.textContent;
            location.hash = link;
          }, false)
        });
        // 监听路由
        window.addEventListener('hashchange', (e) => {
          console.log({
            location: location.href,
            hash: location.hash
          });
        }, false);

    </script>

Demo

• 需求分析
• 
  

小知识点

• 优先使用背景图插入图片
• 没有数据驱动，而且复用次数低，复杂度过低的可以不抽象成组件
• APP页面使用flex布局的重要性

生产构建

抽取
npm run build
压缩
webpack文档
npm install uglifyjs-webpack-plugin --save-dev 
cssloader ?minimize

发布部署

Demo代码：https://github.com/Paladinhanxiao/JDFinance

彩蛋：Atom推荐插件