js组件化、模块化开发

组件化

为什么要组件化开发

有时候页面代码量太大，逻辑太多或者同一个功能组件在许多页面均有使用，维护起来相当复杂，这个时候，就需要组件化开发来进行功能拆分、组件封装，已达到组件通用性，增强代码可读性，维护成本也能大大降低
件化开发的优点

很大程度上降低系统各个功能的耦合性，并且提高了功能内部的聚合性。这对前端工程化及降低代码的维护来说，是有很大的好处的，耦合性的降低，提高了系统的伸展性，降低了开发的复杂度，提升开发效率，降低开发成本，

前端组件化的原则

专一

一个组件只专注做一件事，且把这件事做好。
可配置性

一个组件，要明确它的输入和输出分别是什么，要做可配置性，最基本的方式是通过属性向组件传递配置的值，而在组件初始化的声明周期内，通过读取属性的值做出对应的显示修改。还有一些方法，通过调用组件暴露出来的函数，向函数传递有效的值；修改全局 CSS样式；向组件传递特定事件，并在组件内监听该事件来执行函数等。
标准性

任何一个组件都应该遵守一套标准，可以使得不同区域的开发人员据此标准开发出一套标准统一的组件。
复用性

任何一个组件应该都是一个可以独立的个体，可以使其应用在不同的场景中。
可维护性

任何一个组件应该都具有一套自己的完整的稳定的功能，仅包含自身的，与其它组件无关的逻辑，使其更加的容易理解，使其更加的容易理解，同时大大减少发生bug的几率。

模块化

为什么要模块化

早期的javascript版本没有块级作用域、没有类、没有包、也没有模块，这样会带来一些问题，如复用、依赖、冲突、代码组织混乱等，随着前端的膨胀，模块化显得非常迫切。
模块化的好处：

避免变量污染，命名冲突
提高代码复用率
提高了可维护性
方便依赖关系管理

模块化几种方式：

函数封装

var myModule = {var1: 1,var2: 2,fn1: function(){},fn2: function(){}
}
这样我们在希望调用模块的时候引用对应文件，然后
myModule.fn2();
这样避免了变量污染，只要保证模块名唯一即可，同时同一模块内的成员也有了关系
缺陷：外部可以随意修改内部成员，这样就会产生意外的安全问题

立即执行函数表达式（IIFE）

可以通过立即执行函数表达式（IIFE），来达到隐藏细节的目的
var myModule = (function(){var var1 = 1;var var2 = 2;function fn1(){} function fn2(){}return {fn1: fn1,fn2: fn2
};
})();
这样在模块外部无法修改我们没有暴露出来的变量、函数。
缺点：功能相对较弱，封装过程增加了工作量、仍会导致命名空间污染可能、闭包是有成本的。

转载于:https://www.cnblogs.com/Hsong/p/10536575.html

js组件化、模块化开发相关推荐

App 组件化/模块化之路——如何封装网络请求框架
App 组件化/模块化之路--如何封装网络请求框架在 App 开发中网络请求是每个开发者必备的开发库,也出现了许多优秀开源的网络请求库.例如 okhttp retrofit android-asyn ...
Vue.js组件化开发实践
Vue.js组件化开发实践前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一 ...
React.js组件化开发第一步(框架搭建)
开始前安装 node.js; 安装 cnpm; 安装 yarn; 安装完成yarn后, 将镜像替换成国内的: $ yarn config set registry 'https://registry ...
移动web端的react.js组件化方案
背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...
Android 基于注解IOC组件化/模块化的架构实践
当前参与的项目历史也很久远,第一行代码据说是写于2014年的某一天,那时Android用的ide还是Eclipse.那时Android还没有很好的架构指导(mvp.mvvm).那时Android最新的 ...
大型Android项目架构：基于组件化+模块化+Kotlin+协程+Flow+Retrofit+Jetpack+MVVM架构实现WanAndroid客户端
前言:苟有恒,何必三更眠五更起:最无益,莫过一日曝十日寒. 前言之前一直想写个 WanAndroid 项目来巩固自己对 Kotlin+Jetpack+协程等知识的学习,但是一直没有时间.这里重新行 ...
java组件化的优势_组件化编程开发如何判断组件的优劣性
随着互联网的不断发展,越来越多的程序员都在学习不同的编程开发方式,而组件化编程开发就是其中的一个常用开发方法.今天我们就一起来了解一下,组件化开发中关于组件的优劣性应该如何判断. 认识组件随着近些年 ...
如何通过组件化提高开发效率？
在软件开发过程中,大到业务模块的划分,小到技术组件的开发,都属于组件化的思考范畴内.很多时候我们到网上搜索「组件化」关键词,都只会看到关于前端组件化的资料,而对于后台开发组件化的资料却很少,那这是不是 ...
组件化网页开发 / 步骤一 · 5-1 课程总结
组件化网页开发 / 步骤一 · 5-1 课程总结转载于:https://www.cnblogs.com/Knowledge-is-infinite/p/11079522.html
uniapp实现组件化列表开发
在使用uniapp开发的时候我们经常需要使用到组件化开发,这样可以减少代码的冗余,今天我来分享一下我的组件化列表开发创建目录-MyUniapp-components-modeItem-index.v ...

js组件化、模块化开发

组件化

模块化

js组件化、模块化开发相关推荐

最新文章

热门文章