At the forefront of

This article is mainly about why we want to componentize in our project how to use the benefits of componentize how to achieve componentize

Why componentize

  • As the project was updated and iterated, the project code became more and more complex. Each module depended on each other to change one part of the code. It was possible to change multiple parts of the code that were highly coupled with this code, which increased our development time and increased unnecessary trouble
  • Componentization can separate the common functional code from the basic code of business modules and manage them separately. Each developer is only responsible for maintaining his own module, which not only saves the development cycle but also greatly reduces the maintenance cost

Componentized thinkings

Just like packaging controls, complex controls are generally packaged, componentization is just to separate each module, as a small project, and then form a complete project

Implementation of componentization

  • In our project we used Cocoapod to manage our componentized development
  1. Open the terminal and create a XXX project CD into a file and directory
pod lib create xxx
Copy the code

  1. Configure project information

  2. When the project configuration is complete, we drag the required project components into our project’s Classes file and CD into the Example file pod Install

Pod install = pod install = pod install Re-associate the pod library with the dependent project files. Open the project in Example. Command+B if there are no problems, the integration is successful

  1. Podspec: Where is the code directory and resource directory that describes your component projects, and other frameworks that your component projects depend on, so you can import your repository code according to podSpec
Pod:: spec.new = pod :: spec.new = pod :: spec.new = pod :: spec.newdo| s | / / set the name s.n ame ="tcggMain"// Set the version number"0.0.1"// Set summary s.summary ="A short description of tcggMain."// set details s.description ="Good"// Set the repository homepage. Homepage ="http://xxxx/xxxx"// Set s.license ="MIT"// set author s.thor = {"iThinkerYZ"= >"[email protected]"} // Set the repository source to indicate where component engineering can be found."xxxxx", :tag => "#{s.version}"} // Set the source file path => not the entire project file, but their own package code, later other projects introduced, will introduce the code here. s.source_files ="tcggMain/Classes/**/*.{h,m}"
    
     // s.dependency = ' 'Which third-party frameworks the component engineering relies on // s.framworks ='UIKit'.'MapKit'What native frameworks component engineering depends on // s.resource_bundles = {} Component engineering image resource endCopy the code

PodSpec

  1. Remote private repository that uploads the local component after it has been configured.

Note: When pushing the repository, make sure that the tag version number is the same as the s.sion version number in the Spec file because cocoapods downloads the repository tag

6. Create index library files for our private components in the local Cocoapods index library

Pod repo add private component name Index library remote address pod repo add TcggBase https://git.coding.net/XUser/TccBase.gitCopy the code

If you don’t want to use the command line, you can create a TcggBase file in your repos file by finding the address of your local Cocoapods

  1. Add the index of your private library to your private library
Pod repo push index library name Pod repo push TcggBase TcggBase. Podspec --allow-warningsCopy the code

The local index library will have its own private library, and the remote library will also have a pod repo push to help us push to the remote index library

Cocoapod will create a file name that corresponds to the tag in the Spec file. If you want to create a file name that corresponds to the tag in the Spec file, cocoapod will create a file name that corresponds to the tag in the Spec file

If there is an error in Push, we can upload it manually by going to cocoapods local index library to find our own index library and manually creating a file that matches the version number described in our current Spec file. The file name is the version number of our current component Just copy the Spec file from our own component into the current file

###### use your own private index repository to add two sources to your Podfile, one from cocoapods public index repository and one from our own index repository, and then pod ‘XXX’ pod install

Componentized upgrade

  • Just tag the latest version code, update your Podspec file, and re-upload it to the version index library
pod repo push xxxx xxxx.podspec --allow-warnings 
Copy the code
  • When the project file is in use, use pod Update to load the latest version of the component code.
pod update --no-repo-update
Copy the code

Cocopods principle

2. The podspec tells you where to go to find the library and what s.source_files you need to copy to your project.

Some problems encountered in componentization

An error occurred loading the XIB file. Procedure

Going back to the code, the original XIB was loaded as follows

Image resource loading problem

Store the required images from the component into Assets

You need to modify the. Podspec file, open the resource load path, and then execute Pod Install. You will then find the Resource folder with an extra Resource

You need to change the way images are loaded

Note: You must specify the full name of the image and the name of the bundle that the image belongs to because it is related to @2x, @3x images

Because the way to set the image before all need to change, the above code to change the image loading method will be used in many places, so the best approach is to extract a tool method

+ (instancetype)ff_imagePathWithName:(NSString *)imageName bundle:(NSString *)bundle targetClass:(Class)targetClass
{
        NSInteger scale = [[UIScreen mainScreen] scale];
        NSBundle *currentBundle = [NSBundle bundleForClass:targetClass];
        NSString *name = [NSString stringWithFormat:@"%@@%zdx",imageName,scale];
        NSString *dir = [NSString stringWithFormat:@"%@.bundle",bundle];
        NSString *path = [currentBundle pathForResource:name ofType:@"png" inDirectory:dir];
        return path ? [UIImage imageWithContentsOfFile:path] : nil;
}
Copy the code

Change the font

Drag the font files into Assets as well, then modify the PodSpec file. Finally, run Pod Install to add the font resource POD. Then change the font in the same way you changed the image resource path

   _categoryLabel = [[UILabel alloc]init];
    NSBundle *currentBundle = [NSBundle bundleForClass:[self class]];
    NSString *path = [currentBundle pathForResource:@"CODE BOLD.OTF" ofType:nil inDirectory:@"FFSpecialKit"]; [_categoryLabel text:nil textColor:kHexColor_c7a762 fontSize:FONT_SIZE_14 fontName:path];Copy the code
The next article

Communication between componentization