前端组件化Polymer

前端组件化Polymer深入篇(1)

在前面的几节里面简单的介绍了一下Polymer的基本功能,但还有一些细节的东西并没有讨论,所有打算花点时间把Polymer的一些细节写一下. new和createElement有区别吗? <script> var SayHello = Polymer({ is:'say-Hello' }) var el1 = document.createElement('say-Hello'); console.log(el1); var el2 = new SayHello(); console.log(

前端组件化Polymer入门教程(1)——初识&&安装

前端组件化Polymer入门教程目录: 前端组件化Polymer入门教程(1)--初识&&安装前端组件化Polymer入门教程(2)--快速入门前端组件化Polymer入门教程(3)--自定义元素前端组件化Polymer入门教程(4)--生命周期前端组件化Polymer入门教程(5)--监听属性值变化前端组件化Polymer入门教程(6)--Local DOM 前端组件化Polymer入门教程(7)--事件前端组件化Polymer深入篇(1) 一说到组件化,你可能就想到了Rea

前端组件化Polymer入门教程(3)——快速入门

本系列主要翻译官方的教程,因为国内目前这方面的资料太少了,但也不一定和官网的一样,反正就是自己想到哪就写到哪. 如果我没有说明,默认情况下index.html始终包含这段代码,后面将不会再贴上来. <head> <meta charset="UTF-8"> <title>Document</title>  <script src="webcomponents-lite.m

前端组件化Polymer入门教程(5)——生命周期

以前我对生命周期这个概念还真不是很清楚,不过想想也简单,比如说人的生命周期,无非就是生老病死.而对于程序的生命周期就是说,它在每个阶段都会做不同的事,再比如说回调函数把,ajax返回的时候它才执行,那么这个返回你就可以看做是一个阶段,也是它生命终结的时候. 按触发的顺序: created:当组件被 new 时调用,最早被触发,此时还不能访问组件的属性,但不知道为什么直接通过HTML的方式也会执行,可能是内部实例化了. ready:当组件内部依赖的子组件或者原生dom组件加载成功会调用,使你的组件

前端组件化Polymer入门教程(2)——Hello world

本节为体验篇,就是让你了解它有哪些功能,不做详细说明,后面再来讲细节. 自定义元素组件页 <link rel="import" href="../polymer-1.7.0/polymer.html"> <dom-module id="my-tab">  <template> <style> div{ color:red

前端组件化Polymer入门教程(8)——事件

可以在listeners对象中监听事件 <x-custom></x-custom> <dom-module id="x-custom"> <template> <div>I will respond</div> <div>to a tap on</div> <div>any of my children!</div> <div id="special&

前端组件化Polymer入门教程(7)——Local DOM

DOM元素的创建和管理被称为本地DOM(Local DOM) 本地DOM模板如果你需要使用本地DOM,你们需要用<dom-module>并指定一个相匹配的ID. <dom-module id="x-foo"> <template>I am x-foo!</template> <script> Polymer({ is: 'x-foo' }); </script> </dom-module> 在temp

前端组件化Polymer入门教程(6)——监听属性值变化

监听属性值变化如果需要监听属性值变化可以通过给observer赋值一个回调函数. <say-Hello></say-Hello> <dom-module id="say-Hello"> <template> <h1>{{say}}</h1> </template> </dom-module> <script> Polymer({ is:'say-Hello', properti

前端组件化Polymer入门教程(4)——自定义元素

除了上一篇说到的创建自定义元素方法以外,还可以通过原生JS来创建,当你需要动态的创建元素时可以通过这种方式. template.html <link rel="import" href="../polymer-1.7.0/polymer.html"> <script> MyElement = Polymer({ is: 'my-element', created: function() { this.textContent = 'My ele

Vue.js：轻量高效的前端组件化方案

转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014年2月开源的一个前端开发库,通过简洁的 API 提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在 GitHub上已经有5000+的star.本文将从各方面对Vue.js做一个深入的介绍. 开发初衷 2013年末,我还在Google Creativ

前端组件化-Web Components【转】

以下全部转自:http://www.cnblogs.com/pqjwyn/p/7401918.html 前端组件化的痛点在前端组件化横行的今天,确实极大的提升了开发效率.不过有一个问题不得不被重视,拟引入的这些html.css.js代码有可能对你的其他代码造成影响.虽然我们可以通过命名空间.闭包等一系列措施来加以防备,不过还是存在这些隐患.为了解决这些问题,有一个基本大家遗忘的技术还是可以了解一下的,那就是Web Components. Web Components 是什么Web Compone

从DOM操作看Vue&React的前端组件化，顺带补齐React的demo

前言接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue&react的源码分析,我感觉这里有必要说下我的认识. 首先,要写源码分析很难,第一是他本来就很难,所以一般我们是想了解他实现的思路而不是代码: 第二每个开发者有自己发风格,所以你要彻底读懂一个人的代码不容易,除非你是带着当时作者同样的问题不断的寻找解决方案,不断的重构,才可能理解用户的意图. 我们

谈谈我对前端组件化中“组件”的理解，顺带写个Vue与React的demo

前言前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ...... 每个频道有独立的团队去维护这些代码,具体到某一个频道的话有会由数十个不等的页面组成,在各个页面开发过程中,会产生很多重复的功能,比如弹出层提示框,像这种纯粹非业务的UI,便成了我们所谓的UI组件,最初的前端组件也就仅仅指的是UI组件. 而由于移动端的兴起,前端页面的逻辑已经变得很重了,一个页面的

AppBoxFuture(六): 前端组件化开发

前面几篇都是在介绍结构化与非结构化的数据存储,本篇换换口味介绍一下框架是如何实现前端组件化开发的.首先得感谢Vue.ElementUI等优秀的前端开源项目,这些项目帮助作者快速实现了框架的两个前端工程(IDE及Web应用)的开发. 当初框架的设计目标是:前端.后端.存储端统统一锅端,为什么这么设计,一方面是想减少开发人员对于开发环境及各类工具的安装配置时间,另一方面是想消除各端之间的集成调试问题,使开发人员更多的关注数据结构.业务逻辑.用户界面的设计与开发.为了达成这一目标,作者在框架的

如何通过 Vue＋Webpack 来做通用的前端组件化架构设计

目录: 1. 架构选型 2. 架构目录介绍 3. 架构说明 4. 招聘消息目前如果要说比较流行的前端架构哪家强,屈指可数:reactjs.angularjs.emberjs.avalonjs.vuejs. 我个人接触使用过:avalonjs.angularjs.vuejs.因为工作以及前端团队能力的问题,所以在不同的公司,在开发工作中选用了不同的前端架构. 以下仅仅是代表我个人选用架构的一些看法和理由,如下: angular: 我觉得angularjs的学习上手周期

Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结

本文版权归博客园和作者吴双本人共同所有转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用.其实说是多页面应用,实际上在webpack中属于四个app, 如果真是做纯单页面,那应该有二三十个页面吧.所以我这里的多页面应用,是分为四个SPA.比如微信最下面,有四个导航,微信,通讯录,发现,我. 那么这四个导航,就是我的四个SPA,配置多个入口即可. 在这里就不说太多代码了,项目结构将会放

Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结和踩坑

本文版权归博客园和作者吴双本人共同所有转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用.其实说是多页面应用,实际上在webpack中属于四个app, 如果真是做纯单页面,那应该有二三十个页面吧.所以我这里的多页面应用,是分为四个SPA.比如微信最下面,有四个导航,微信,通讯录,发现,我. 那么这四个导航,就是我的四个SPA,配置多个入口即可. 在这里就不说太多代码了,项目结构将会放

React.js 小书 Lesson2 - 前端组件化（一）：从一个简单的例子讲起

作者:胡子大哈原文链接:http://huziketang.com/books/react/lesson2 转载请注明出处,保留原文链接和作者信息. 很多课程一上来就给大家如何配置环境.怎么写 React.js 组件.但是本课程还是希望大家对问题的根源有一个更加深入的了解,其实很多的库.框架都是解决类似的问题.只有我们对这些库.框架解决的问题有深入的了解和思考以后,我们才能得心应手地使用它们,并且有新的框架出来也不会太过迷茫:因为其实它们解决都是同一个问题. 这两节课我们来探讨一下是什么样的问

Ques前端组件化体系

Ques是一套组件化系统,解决如何定义.嵌套.扩展.使用组件. 传统开发模式的痛点无法方便的引用一个组件,需要分别引用其Javascript.Template.CSS文件我们期望能以MV*的方式去写代码,结果发现只有Javascript是MV* UI库打包成一坨(类似Bootstrap),但是实际上UI库伴随产品迭代在反复变更,每次打开网站,用户依然反复下载UI库 CSS没有命名空间导致两个组件容易冲突组件无法嵌套或者无法扩展,所以实际上组件根本无法复用组件无法复制后可用,在组件无法嵌套

【转】Vue.js：轻量高效的前端组件化方案

摘要:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue.js做一个深入的介绍. Vue.js 是我在2014年2月开源的一个前端开发库,通过简洁的 API 提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在 GitHub上已经有5000+的star.本文将从各方面对Vue.js做一个深入的介绍. 开发

前端组件化Polymer

热门专题