前端组件化(未完)

大家都知道DRY (Don’t Repeat Yourself),像 Angular2 一样 Focus on Components , 还有React, Vue.js等,前端组件化开发已经是一个很老的话题了,只是在前端领域,这个和用户最直接交互的舞台,要实现视觉和代码的完全组件化,像生产车间一样组装然后交给用户,并不是很轻松的一件事情。但做好了,绝对是提高前端工程化和生产力的有效手段。先分享几篇我收集的相关文章,觉得可以借鉴思考…

参考阅读:

其他:

备忘一两个非常简单的例子(与组件化关系一丢丢):

String.prototype.tplFormat = function (obj) {
    if (arguments.length === 0) return this;
    var s = this;
    for (var i in obj){
      s = s.replace(new RegExp("\\{" + i + "\\}", "g"), obj[i]);
    }
    return s;
};

var msg = '<span>{message}</span>';
msg.tplFormat({msasage: 'Hello'}); //<span>Hello</span>

underscorelodash 都有 _.template:

var compiled = _.template("hello: <%= name %>");
compiled({name: 'colin'}); //"hello: colin"
时间: 2024-07-30 11:17:36

前端组件化(未完)的相关文章

我所知道的前端组件化与模块化

序言:组件化?模块化?这都是什么鬼?这是最初看到这2个新名词的反应.随着时间的推移,似乎.可能.大概明白了一点,于是想说说自己的理解(仅仅是自己的理解) 一.组件化 忘记什么时候看到这个词的了,由于用过bootstrap的前提下(一下简称BS),当时第一反应是这样的,组件化不就是像BS那样把html拆分为:按钮组.栅格系统.导航组等等N多个组件,用的时候直接用BS提供class不就行了吗? 当然简单可以这么理解,但是跟深层次的理解应该是这样的,如你看到的一个html源码可能是这样的: <body

谈笑风生组件化

在当今的前端开发领域,大红大紫的组件化开发如万人空巷,前端技术圈中关于组件化讨论的文章亦如汗牛充栋.然而别人的理解终归是别人的,作为一个胸存小志的开发者,我还是希望能够根据自己的理解和实际工作,总结自己对组件和组件化开发的认知. 在我第一次接触组件化概念时,一时迷迷糊糊,如坠云雾深处.组件是什么?组件化开发是什么?为什么大牛们知道这么多而我不知道?这应该并不是我个人的疑问,每一个除此接触概念的新手,都会有此疑惑.   为什么大牛们知道这么多而我不知道? 我曾经无数次为类似的问题而烦恼,也曾感到急

AlloyTeam:致我们终将组件化的 Web (多图)

这篇文章将从两年前的一次技术争论开始.争论的聚焦就是下图的两个目录分层结构.我说按模块划分好,他说你傻逼啊,当然是按资源划分. "按模块划分"目录结构,把当前模块下的所有逻辑和资源都放一起了,这对于多人独自开发和维护个人模块不是很好吗?当然了,那争论的结果是我乖乖地改回主流的"按资源划分"的目录结构.因为,没有做到JS模块化和资源模块化,仅仅物理位置上的模块划分是没有意义的,只会增加构建的成本而已. 虽然他说得好有道理我无言以对,但是我心不甘,等待他日前端组件化成熟

一起谈.NET技术,使用Dijit实现界面组件化开发

对于组件化的软件工程设计,很多开发人员都比较熟悉.组件化的设计适合于复杂的软件系统和团队协作开发.把软件系统划分成若干个组件,组件之间通过预先定义好的接口和协议进行通讯和协作,共同完成整个软件系统的职责.团队中的开发人员可以各自负责不同的组件.组件化的思想在桌面应用和Web应用后台开发中比较流行,相关的技术和实践都比较成熟. 而在Web应用的前端部分,组件化一直进展得比较缓慢.这其中的原因有很多,最主要的是Web应用的前端在开始的时候比较简单,没有组件化和设计的必要.随着Ajax应用的流行,We

使用Dijit实现界面组件化开发

对于组件化的软件工程设计,很多开发人员都比较熟悉.组件化的设计适合于复杂的软件系统和团队协作开发.把软件系统划分成若干个组件,组件之间通过预先定义好的接口和协议进行通讯和协作,共同完成整个软件系统的职责.团队中的开发人员可以各自负责不同的组件.组件化的思想在桌面应用和Web应用后台开发中比较流行,相关的技术和实践都比较成熟. 而在Web应用的前端部分,组件化一直进展得比较缓慢.这其中的原因有很多,最主要的是Web应用的前端在开始的时候比较简单,没有组件化和设计的必要.随着Ajax应用的流行,We

详解vue.js组件化开发实践_javascript技巧

前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然成为了第一个问题.鉴于目前web前端mvvm框架以及组件化开发方式的流行,决定技术栈采用:vue + es6 + 组件化. 这里首先简单说下web前端组件化开发方式的历程: 最早的组件化结构,代码结构可能如下: - lib/components/calendar |- calendar.css |-

LARAVEL 中使用 VUE 组件化开发例子

现今前端组件化开发.MVVM 模式,给开发带来了很多的便利,可读性.可维护性更高.然而自 Laravel 5.3 开始,VueJS 成为框架默认的标配. 本文基于 Laravel 5.1 LTS 版本引入 Vue 2.0 进行配置. 我已在 Github 配置好,Clone 下来后按照 README 安装依赖后即可用: https://github.com/jcc/vue-laravel-example 步骤一:配置 PACKAGE.JSON 1. 在根目录下修改 package.json, 可

06Vue.js快速入门-Vue组件化开发

组件其实就是一个拥有样式.动画.js逻辑.HTML结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue的组件和也做的非常彻底,而且有自己的特色.尤其是她单文件组件开发的方式更是非常方便,而且第三方工具支持也非常丰富,社区也非常活跃,第三方组件也呈井喷之势.当然学习和使用Vue的组件也是我们的最重要的目标. 6.1. 全局扩展方法Vue.extend Vue提供了一个全局的API,Vue.extend可以帮助我们对Vue实例进行扩展,扩展完了之后,就

一、Angular 2.0的变革之路-组件化 Web Components

Angular 2.0的变革之路 Angular 1.x从2009年到现在已经过了6个年头,虽然中间Angular1.x顺应前端思想加入了很多新的特性,例如在1.3版本加入的bindToController,在1.5版本加入的用于取代directive部分功能的component.然而从整体的设计思想来说,Web Components已经成为大势所趋,Angular的变革也就势在必行. Angular 2.0 放弃了对1.x版本的兼容,这也就意味着2.0版本没有了1.x版本的历史包袱.Googl