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元素上使用该样式。

: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......

你可能感兴趣的:(polymerjs学习笔记——入门篇)