polymerjs学习笔记——入门篇

首先,知道它也是和react和vue一样的一种前端框架就行了,现在还是比较小众的吧。

关于这个框架,现在中文方面的资料确实挺少的,废话不多说了。

下面是这个框架的官方网站:

https://www.polymer-project.org/2.0/start/

https://www.polymer-project.org/2.0/docs/devguide/feature-overview

中文文档网站:https://polymer-zh.cn/2.0/docs/upgrade

1、首先安装:

        npm install -g polymer

        npm install -g polymer-cli.    //github上的地址:https://github.com/Polymer/polymer-cli

然后可以在cmd的dos窗口下通过polymer help查看所有命令,如下图:

几个常用的polymer命令,详细的就不说。

4、关于新建一个polymer的项目:

最好是可以使用polymer-cli脚手架工具直接生成一个项目模板。

记得先在命令行用npm install -g polymer-cli命令安装该插件。

然后找个目录新建一个文件夹,然后打开进入该空文件夹里使用命令行工具输入:polymer init .然后就可以用polymer serve命令运行了。

还可以用polymer build命令编译出两中类型的项目文件。

2、常用命令讲解:

怎么运行一个本地静态web服务器?

运行polymer 项目的命令:polymer serve

完整的命令还可以是:polymer serve -o --hostname 195.165.100.112 --port 8088

解释一下各参数:

    -o:表示服务器启动完成就自动在默认浏览器里打开该项目。

    --hostname: 表示任意指定的项目启动的ip或者是域名。

    --port指定端口号。

还有一种运行的方式:

polymer serve --open app.html --browser Safari            //指在特定的浏览器中打开特定的页面,并启动服务器。而不是默认打开index.html页面。

生产环境的打包部署: 还有个重要的命令,打包编译项目的。

polymer build: 这个命令会读取当前目录下的polymer.json文件配置来构建。

该命令会生成用于生产环境的完整文件。该过程包含了压缩HTML、css和项目依赖的js,还有重要的是还会生成一个service-worker.js的文件用于缓存该项目的依赖项。这里多说一句,只有build后的生产环境才会使用到这个service-worker.js,但是这里要注意一点的就是,这个service-worker.js只能用于https的服务器种才有效,不然还会报错。

当然也可以不用json配置,像下面这样在命令里直接指明配置参数:

polymer build --entrypoint index.html,参数--entrypoint是指定入口文件的。

关于polymer.json文件的详细内容后面再讲解。

3、说说polymer1.0+和polymer2.0+的区别。

主要的不同是在js代码的编写上。

1.0版本注册一个组件是只用全局方法Polymer(options), 传入一个配置对象来实现逻辑。

2.0版本注册一个组件是通过使用ES6+的语法定义一个继承Polymer.Element对象的一个类MyClass。然后最后通过customElements.define(MyClass,is,MyClass);注册到polymer里面。 现在polymer2.0也已经正式发布可用了。

5、使用polymerjs创建一个自定义组件(元素)的文件结构:

更准确的说polymerjs创建的都是自定义的HTML元素,使用上就和其他常用的html标签元素一样。

整体来说只有两部分:通过link标签引入其他的自定义组件、通过在一个已有自定义组件dom-module里面完成新的整个新自定义组件的构建。

完整结构如下:

这是polymer1.0的写法

* Key information:

标签dom-module里的id属性表示新建的组件的名字,即新标签的名字,外面就可以使用这个新标签名像使用div标签一样使用这个组件了。

标签定义了元素的local DOM的结构和样式。

标签:这里定义的样式是只限定在当前这个local DOM里的元素的,不会影响到外面的其他组件的元素样式。

style里有个假类样式(:host{})匹配当前自定义标签new_module_name的。

标签:在js里通过一个全局的方法Polymer()注册这个组件。

关于:host假类的使用:

:host([pressed]) iron-icon{

    fill: currentcolor;

}

由于:host表示的就是顶层的自定义标签:上面样式表示在使用该新标签时当有pressed属性时在该新标签里的iron-icon元素上使用该样式。<new_module_name pressed></new_module_name>

:host(seletor)括号里的是标准的css选择器。

6、polymerjs的路由和页面跳转:

这里使用的是hash路由的例子

iron-selector组件的使用:作用是表示跳转到哪个路由页面,直接通过a标签实现,这里的name和href的名称必须一样。‘#/’:是用来表示使用什么方式的路由方式的,'#’表示是前端hash路由,这个和react是一样的。

iron-pages组件的使用:作用是决定展示哪个路由页面,这个自定义组件标签里放的是每个页面的自定义组件,这里的每个页面组件的属性name的值也必须和上面的导航组件标签iron-selector里的a标签使用的name值一样。可以看到iron-pages组件里有个attr-for-selected属性,其实很容易理解,就是它在决定显示哪个子页面时该使用子组件的哪个属性作为识别标识的。比如下图就是用的name属性。

整个流程就是,iron-pages通过外面传给他的page变量,根据attr-for-selected指定的属性名称检索每个子页面组件,然后就只展示和那个属性值相同的子页面。


7、全局方法Polymer(options)的讲解:polymer1.0

Polymer方法是用来注册一个自定义的新组件的。他会返回一个新组件的构造函数,参数options就是一个简单的对象。

自定义元素的注册可以参考:https://www.polymer-project.org/1.0/docs/devguide/registering-elements

参数如下:

is:"module-name"  ,//根据规定,自定义组件必须包含一个破折号,虽然不是强制性的。这个is的值也必须和上面dom-module标签里定义的id的值一致。

extends :'原生html标签名',//可以扩展继承原生HTML标签。

properties:{....} ,//数据参数。下面第8点有详细说明,也可参考网址:http://polymer-zh.cn/1.0/docs/devguide/properties.html

behaviors:[....]  ,//是定义已有定义好的Polymer下的方法名(Polymer.IronResizableBehavior);

observers:[....]   ,// 是字符串数组,每个字符串都是一个调用形式的方法,带括号的可传参数的。这里可添加复杂的可监听多个属性改变的观察者(包括以路径形式表示的子属性)。如果只监听单个属性的改变可用声明属性里的observer参数配置。参考网址:http://polymer-zh.cn/1.0/docs/devguide/observers.html

listeners:{.....}   ,//是键值对的对象,添加在该组件上的事件。

hostAttributes:{.....}   ,//给该新组件元素添加原生的HTML属性时用。

created:function(){ ..... }   ,//  元素被创建后调用,但是在属性值被设置前。此为一次性调用的回调方法。

ready:function(){.....}   ,//该回调函数在该自定义元素被初始化完成时调用,此时属性值已经被赋值,并且local DOM也已经初始化完成了。此为一次性调用的回调方法。

attached:function(){.....}  ,// 当元素已经被添加到document上是调用。可多次调用。

detached:function(){.....}   ,//Called after the element is detached from the document.

attributeChanged:function(){.....}   ,//当元素的attributes属性发生改变时调用。

customFunc1:function(){....}   ,//自定义的方法1。

customFunc2:function(){.....}   ,//

Polymer.Class(options):如果您想设置自定义元素的原型链,但不能立即注册,你可以使用该方法。他接受的参数和Polymer(options)方法的参数一样。然后在使用的时候通过浏览器的API:document.registerElement('my-element', MyElement);注册该新元素。


8、To be continue......

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,686评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,668评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,160评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,736评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,847评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,043评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,129评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,872评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,318评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,645评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,777评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,470评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,126评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,861评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,589评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,687评论 2 351