谈前端技术JavaScript书写规范的经验,浅谈封装(一)

        虽然当前前端技术越来越先进,一些团体也推出了框架,但日前看来最重要的一点的书写规范并没有得到多大的提升,javascript 太过于自由,写法上没有严格的定义,而大多数前端工程师并没有经过太多的面向对象思想的体悟。既然要面向对象就需要满足面向对象的基本特征(封装、继承、多态)


        而javascript 要面向对象,也需要了解javascript 面向对象的基本原理,javascript 面向对象是承载在json 基础上的,可以先通过一个例子来发现JS 实现的类封装的概念

var package={}
package["com.sender2.util"]=function(){
     var t=this;
     /**
     *定义函数
     **/
     t.hello=function(){
         console.log("hello the world");
     }
     return t;
};
//调用过程
var util=package["com.sender2.util"]();
util.hello();

        这里为了避免方法重复,使用了包名+类的概念。可以很好的进行对象封装,也避免传统的js在页面上不断的写方法,为命名方法而苦恼,当然如果为了有更好的工具产生提示效果,也可这么做:

var com={}
com.sender2={};
com.sender2.util=function(){
     var t=this;
     /**
     *定义函数
     **/
     t.hello=function(){
         console.log("hello the world");
     }
     return t;
};

var util=com.sender2.util();
util.hello();

这种结构可以使用很多javascript 工具进行提示。依次可以进化用函数封装java 类的写法。
实例:core.js(定义一个全局核心类)

var myjspool={};
var myjscore=function(){
    var self=this;
    var imports=[];
    self.import=function(jspath){
        imports.push(jspath);
        console.log(jspath+"放入导入列表清单");
    }
    self.class=function(classname,func){
        //这里只是一个简单的举例,先用for代替同步载入js的方法
        for(var s in imports){
            console.log(imports[s]+"执行完毕");
        }
        //当导入程序完成后,在执行下面方法
        myjspool[classname]=func;

    }
    self.open=function(classname){
        var cls=myjspool[classname]();
        cls.init();
        return cls;
    }

    return self;
}

例子:test.js

(function (x) {
    x.import("a.js");
    x.import("b.js");
    x.class("Test",function(){
        var self=this;
        self.init=function () {

        }
        self.hello=function(){
            alert("测试,我的世界");
        }
        return self;
    })


})(myjscore())

例子:test.html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<script src="core.js">script>
<script src="test.js">script>
<body>

<script>
    var jscore=myjscore();
    jscore.import("test.js");
    var test=jscore.open("Test");
    test.hello();

script>
body>
html>

用开发者工具查看控制台信息

谈前端技术JavaScript书写规范的经验,浅谈封装(一)_第1张图片

        总结:通过利用这样的方式,让代码更具有阅读性和可维护性,通过这种方式加强封装,可以让javascript 代码实现能力变强,让使用者更加容易理解就可以将组件做的更好更完美。

你可能感兴趣的:(javascript)