Polymer 学习笔记 （一）

系统基本要求
git
nodejs
npm

下载的软件
https://github.com/polymer/pwa-starter-kit
https://github.com/Polymer/shop

shop 项目目录结构理解

• images
  放要使用的图片
• src
  这个看起来是最重要的目录
  
  • components 你自己写的视图组件放在这个目录下
  • actions 是 相应动作的实现代码
  • reducers 是渲染视图的代码
  • store.js , cart.js 是 数据控制的代码
• 其他几个重要的文件
  
  • index.html 入口文件
  • service-worker.js PWA 重要的实现文件
  • manifest.json PWA 核心文件 ，将应用加到homescreen 时使用
  • push-manifest.json 不确定
• 编译处理以及测试相关的文件和目录
  
  • test 目录
  • pakcage.json 开发中基础依赖包
  • polymer.json ploymer 相关打包和service worker 应该包括啥的重要文件
  • sw-precache-config.js 和 service worker 设置和处理有关
  • service-worker.js PWA 重要的实现文件
  • manifest.json PWA 核心文件 ，将应用加到homescreen 时使用
  • push-manifest.json 不确定

具体文件内容学习

• 入口文件 index.html
  简单记录，对照index.html
  基础js 界面组件化基础
  
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

  应用入口js
  
<script type="module" src="src/components/shop-app.js"></script>

  关于server worker的js
  
<script>
if ('serviceWorker' in window.navigator) {
window.addEventListener('load', function() {
window.navigator.serviceWorker.register('service-worker.js', {scope: '/'});
});
}
</script>


• 应用核心文件 src/components/shop-app.js
  简单记录，对照shop-app.js
  引入polymer的相关组件，这个在node_modules 目录下

  import { LitElement, html } from '@polymer/lit-element';
  import { repeat } from 'lit-html/lib/repeat.js';
  import '@polymer/app-layout/app-header/app-header.js';
  import '@polymer/app-layout/app-scroll-effects/effects/waterfall.js';
  import '@polymer/app-layout/app-toolbar/app-toolbar.js';
  import { scroll } from '@polymer/app-layout/helpers/helpers.js';
  import { setPassiveTouchGestures } from '@polymer/polymer/lib/utils/settings.js';

  引入pwa的相关基础js的相关组件，这个在node_modules 目录下

  import { connect } from 'pwa-helpers/connect-mixin.js';
  import { installRouter } from 'pwa-helpers/router.js';
  import { updateMetadata } from 'pwa-helpers/metadata.js';
  import { installOfflineWatcher } from 'pwa-helpers/network.js';
  import { installMediaQueryWatcher } from 'pwa-helpers/media-query.js';

  引入应用的js，这个在src 目录下

  import { store } from '../store.js';
  import { currentCategorySelector } from '../reducers/categories.js';
  import { metaSelector } from '../reducers/app.js';
  import { updateLocation, updateNetworkStatus } from '../actions/app.js';
  import './shop-home.js';

  应用类定义

  class ShopApp extends connect(store)(LitElement) {

  渲染方法

  _render({
  _categories,
  ... })

  返回页面，先是style,  然后是页面
  
  页面头
  

   <app-header role="navigation" id="header" effects="waterfall" condenses reveals>
    <app-toolbar>

  页面主区域，我们可以看到，在这里就都已经规划好了，就是把home，list，detail，cart，checkout
  作为视图组件来加到页面上，根据用户当前的操作情况(_page),来调度相关组件

   <main>
    <!-- home view -->
    <shop-home active?="${_page === 'home'}"></shop-home>
    <!-- list view of items in a category -->
    <shop-list active?="${_page === 'list'}"></shop-list>
    <!-- detail view of one item -->
    <shop-detail active?="${_page === 'detail'}"></shop-detail>
    <!-- cart view -->
    <shop-cart active?="${_page === 'cart'}"></shop-cart>
    <!-- checkout view -->
    <shop-checkout active?="${_page === 'checkout'}"></shop-checkout>
  
    <shop-404-warning active?="${_page === '404'}"></shop-404-warning>
  </main>

  页脚

   <footer>
    <a href="https://www.polymer-project.org/3.0/toolbox/">Made by Polymer</a>
    <div class="demo-label">Demo Only</div>
  </footer>

  几个基础方法

   static get properties() { return {

   _didRender(props, changed, oldProps) {
  
  constructor() {
  
   _firstRendered() {
  
  _stateChanged(state) {
  
  _updateLocation(location) {
  

  应用类的实例化

   customElements.define('shop-app', ShopApp);

今天就到这里，休息休息，明天我会继续分析相关代码