JS 组件化开发 系列(一)

JS 组件化开发 系列

作为前端开发,组件化开发是你成长的必经之路。时间的积累逐渐摸索出自己比较好的开发方式。 --- zenking

(1)实现最简单的组件化;

var jdb ={
alert: function(str) {
    alert(str);
},
console:function (str) {
    console.log(str)
}
}
 这样就是简单的实现 jdb.alert、jdb.console 两个方法。

但是呢?

现在需求改了, 需要实现链式调用. 就是像jquery 一样使用。
这也是很好理解的。怎么实现链式调用呢 。就像调用 alert 或者console 这两个方法是jdb的属性和方法。
要想调用, 需要 jdb.alert 。函数一旦执行完了就销毁了什么也没有了。要想在接着调用console 需要一个jdb对象。
怎么产生呢?
很简单!return this; look !

var jdb ={
  alert: function(str) {
    alert(str);
    return this;
 },
 console:function (str) {
    console.log(str)
}
};

这样就实现了jdb.alert(‘先alert‘).console(‘后console‘);
是不是很easy!
接着问题又有了?
如果要是现‘先console‘--‘后alert‘呢?
也很简单,还是老方法 return this;

至于this 的用法自己补,这里不做赘述。或者有需要专门讲一下this。

  #var jdb ={
   alert: function(str) {
     alert(str);
    return this;
  },
  console:function (str) {
    console.log(str);
    return this;
  }
  };
这样就实现了简单的组件化开发,并实现了链式调用。

组件就这么简单愉快的实现了。接下来是更高级的写法。。。。。敬请期待!

时间: 2024-11-06 09:29:38

JS 组件化开发 系列(一)的相关文章

vue.js组件化开发实践

前言 公司以往制作一个H5活动,特别是有一定统一结构的活动都要每次用html.css.js滚一次重复的轮子,费时费力.后来接到了一个基于模板的活动发布系统的需求,于是就有了下面的内容. 开始 需求一到,接就是怎么实现,技术选型自然成为了第一个问题.鉴于目前web前端mvvm框架的流行,以及组件化开发方式的出现,决定采用vue进行开发. 这里首先简单说下web前端组件化开发方式的历程: 最早的组件化结构,或者叫做组件化1.0时代,代码结构可能如下: 1 - lib/components/calen

组件化开发--搭建

前段工程化:      在前段开发的过程中,一些重复的工作由程序自动完成.在项目开发的过程中,css使用预处理器,js使用es6或者typescript或者coffeescript来开发      html使用模板语言开发,都需要进行编译,在项目开发的时候,按照模块化的思路进行拆分,但在上线的时候,为了提高运行的效率/性能,减少http请求,      需要对这些模块进行拼接,压缩等操作,测试.这些工作需要由工程化工具来完成,比如gulp的插件前段组件化:      css组件化开发     

【组件化开发】前端进阶篇之如何编写可维护可升级的代码

前言 我还在携程的做业务的时候,每个看似简单的移动页面背后往往会隐藏5个以上的数据请求,其中最过复杂的当属机票与酒店的订单填写业务代码 这里先看看比较“简单”的机票代码: 然后看看稍微复杂的酒店业务逻辑: 机票一个页面的代码量达到了5000行代码,而酒店的代码竟然超过了8000行,这里还不包括模板(html)文件!!! 然后初略看了机票的代码,就该页面可能发生的接口请求有19个之多!!!而酒店的的交互DOM事件基本多到了令人发指的地步: 当然,机票团队的交互DOM事件已经多到了我笔记本不能截图了

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

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

关于前端组件化开发的一点思考

前端开发与其他程序开发的共性在于,同样要求“高内聚,低耦合,易读写,可复用”. “高内聚”是指将在逻辑上可以归类为一个单元的代码封装在一起,尽量保障一块代码集合主要解决一个需求,在前端开发中,最常见的便是将一个逻辑单元的代码使用IIFE函数进行封装. 可以说,保障代码高内聚即在一定程度上满足了代码“低耦合”的要求,因为低耦合即是要求一个逻辑单元的代码块在改动时,不会造成其他逻辑单元代码块的变动,在前端开发中,即是要求各代码块不要过多共享某变量或对象,在不得以的情况下,一定要清晰注释. “易读写”

学习 | jQuery移动端页面组件化开发(一)

最近在学习移动端组件化开发web页面,其中有好多小细节,值的去思考. 主要介绍JS的思路,具体的代码就不贴了,主要是想表达出一种思路 总体来说 1.入口文件,在入口文件中导入插件,插件样式,jquery // 首先要有config参数 var config ={ // config } // 进行实例化 var H5 = new H5Component(config) // 插入DOM中 $(".container").append(H5) // 触发组件中的自定义事件 $("

vuex在组件化开发中的简单应用小例子

首先, 介绍一下vuex是个什么东西, 个人理解来说, vuex就是一个状态管理的东西, 它里面有且仅有一个Store仓库, 这个仓库里面存放着一些变量, 为什么要有这么一个变量呢, 用过vue的人肯定都清除, 父子组件之间的通讯传值是个比较麻烦的事情, 特别是, 嵌套组件特别多的时候, 这种情况下, 一级一级地传递下去十分麻烦, 还有就是兄弟组件之间的传值也一样麻烦. 而vuex中的Store这个仓库, 就能够为我们将放在这个仓库中的值, 分发给整个项目下的所有组件, 也就是说是, 不用一级一

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

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

Vue组件化开发

一. 通过axios实现数据请求 1. json简介 json是 JavaScript Object Notation 的首字母缩写,单词的意思是javascript对象表示法,这里说的json指的是类似于javascript对象的一种数据格式. json的作用:在不同的系统平台,或不同编程语言之间传递数据. 1.1 json数据的语法 json数据对象类似于JavaScript中的对象,但是它的键对应的值里面是没有函数方法的,值可以是普通变量,不支持undefined,值还可以是数组或者jso